プロフィール画面のUIデザインパターン：ユーザー情報・SNS型・設定連携のレイアウト設計

プロフィール画面はユーザーが自分自身を表現し、アプリでの活動を確認する場所です。SNS・ECアプリ・学習アプリ・フィットネスアプリなど、ユーザーアカウントを持つすべてのアプリで重要なページです。本記事では、プロフィール画面のUIデザインパターンを解説します。

プロフィール画面の種類

自分のプロフィール（マイページ）：

アプリでの活動サマリー・設定へのアクセス・アカウント管理が主な目的です。

他ユーザーのプロフィール（SNS型）：

コンテンツの確認・フォロー・メッセージが主な目的です。

マーチャント/クリエイタープロフィール：

EC・コンテンツプラットフォームで出品者・クリエイターの実績と商品・コンテンツ一覧を表示します。

プロフィールのヘッダーデザイン

カバー画像 + アバター：

Twitterスタイルの横長カバー画像（16:5程度のアスペクト比）の左下にアバター（円形・80〜120px）を重ねるレイアウトは、多くのSNS・コンテンツプラットフォームで採用されています。

アバターの設計：

• デフォルトアバター: ユーザー名のイニシャルまたはシルエットアイコン
• カスタムアバター: 正方形の画像を円形にマスク
• 枠線: 背景色との区別のためにホワイト枠（2〜4px）を設けることが多い
• オンライン状態インジケーター: 右下に小さな緑の円で「オンライン」を示す

フォロー・フォロワー数の表示：

「フォロー中：123」「フォロワー：4,567」「投稿：89」の3つの数値を横並びに表示するパターン（Instagramスタイル）が広く採用されています。各数値はタップで一覧画面へ遷移します。

フォローボタンの状態：

フォロー前: 塗りつぶしの「フォローする」ボタン

フォロー後: 枠線の「フォロー中」ボタン（タップで「フォロー解除」に変化）

自分自身: 「プロフィールを編集」ボタン

プロフィール情報の表示

ユーザー名と表示名：

表示名（大きく太く）とユーザーネーム/ハンドル（小さく・薄く・@prefix）を区別して表示します。

自己紹介（Bio）：

3〜5行程度のテキスト。「続きを読む」で展開するパターンも有効です。リンク・ハッシュタグをタップ可能にします。

バッジ・認証マーク：

認証済みアカウント・公式アカウントのバッジを名前の横に表示します。

コンテンツタブ

プロフィール下部に「投稿」「いいね」「保存済み」「コメント」などのタブを設けてコンテンツを切り替えます。投稿コンテンツはグリッドビュー（3カラム）がInstagram的なスタンダードです。

マイページ（設定連携型）のUI

SNSより機能的なマイページ（ECアプリ・サービスアプリ）では：

• 注文履歴へのリンク
• お気に入り・保存済みへのリンク
• ポイント・クーポン
• レビュー・評価
• 設定（個人情報・通知・支払い方法・セキュリティ）
• ログアウト

をリスト形式で整理します。アイコン + ラベル + 右矢印の標準的な設定リストUIが使いやすいです。

プロフィール編集UIの設計

アバター変更（タップでカメラ/アルバム選択）・各フィールドの編集・保存ボタンの配置が基本です。変更が多い場合は「保存」・変更をやめる場合は「キャンセル」を常に表示します。

まとめ

プロフィール画面はユーザーのアプリ内アイデンティティを表現する重要なUIです。SNS型・マイページ型の目的に合わせてヘッダー・情報表示・コンテンツタブ・設定リンクを適切に設計することで、ユーザーが自分のアクティビティを確認しやすく、他ユーザーとのつながりも生まれるプロフィールUIが実現します。UI ZUKANではプロフィールUIのサンプルを掲載しています。