ユーザーのプロフィールページを設計するとき、いつも少し身構える。
プロフィールページは、「人」を見せる場所だ。アカウント情報を並べるだけじゃない。その人が何者で、何をしているか、どんな実績があるか——それを限られた画面の中で表現しなければならない。
Google Stitch でプロフィールページの設計を始めたとき、その難しさを改めて感じた。データを並べるのは簡単だ。でも「その人らしさ」が画面から伝わるかどうかは、全然別の問題だった。
結論から言うと——プロフィールページの設計で最も重要なのは「何を見せるか」の優先順位づけだ。アバター・名前・自己紹介・実績・アクションボタンの配置順序と情報の「密度」が、ページ全体の印象を決める。Stitch でこれを設計するとき、ユーザーの「目的」ごとにプロフィールページの役割を再定義することが出発点になった。
プロフィールページとは何か
プロフィールページとは、特定のユーザーに関する情報（アイデンティティ・実績・活動履歴など）を集約して表示するページです。SNS・ビジネスサービス・学習プラットフォーム・ECサイトなど、ユーザーが存在するほぼすべてのサービスで設計が必要となる、最も普遍的なUIのひとつです。
プロフィールページには大きく2つの役割がある。
- 自分のプロフィール（マイページ）：自分の情報を確認・編集する場所。ユーザーが「自分を管理する」ための画面
- 他者のプロフィール：他のユーザーを「知る」ための画面。フォロー・連絡・購入などのアクションにつながる場所
この2つは、同じ情報を表示していても、UIの設計思想が異なる。「自分のプロフィール」は編集ボタンが目立つべきで、「他者のプロフィール」はフォローや連絡などのCTAが目立つべきだ。
プロフィールページが難しい理由
プロフィールページの設計が難しい理由は、「表示する情報の種類が多い」からだ。
- アバター画像（丸・正方形・どちらでも）
- 表示名・ユーザーネーム
- 自己紹介文（長さが人によって異なる）
- フォロワー数・フォロー数・投稿数などの統計
- バッジ・実績・タグ
- 最近の投稿・活動履歴
- 外部リンク（SNS・Website）
- アクションボタン（フォロー・メッセージ・編集）
これらすべてを限られた画面に収め、かつ「人が伝わる」デザインにすることが求められる。
Stitch でプロフィールページを設計した体験
スキルシェアプラットフォームのプロフィールページ設計を担当したとき、Stitch に最初に投げたプロンプトは「プロフィールページを作って」というものだった。
出てきたのは、丸いアバター・名前・自己紹介・統計数字・タブナビゲーション（投稿・フォロワーなど）というオーソドックスなレイアウトだった。きれいだし、情報は揃っている。でも「このユーザーに依頼したい」という気持ちが湧いてこなかった。
何が足りないのかを考えた結果、「実績の可視化」と「信頼を作るUI」が足りないことに気づいた。
「信頼を作るUI」を意識した設計
スキルシェアプラットフォームでは、プロフィールページは「依頼するかどうかの判断材料」だ。依頼者がプロフィールを見て「この人に頼みたい」と思うには、以下の情報が必要だとわかった。
- 実績・ポートフォリオのサムネイル
- 評価スコア（星・レビュー数）
- 専門スキルのタグ（具体的な言語・ツール名）
- レスポンス速度（「平均返信時間：3時間」など）
- 実績件数・リピーター率
これらをプロンプトに追加して再生成した。「スキルシェアプラットフォームのフリーランサープロフィール。アバター（丸・80px）・名前・専門スキルタグ・評価スコア（星5つ・レビュー数表示）・ポートフォリオサムネイル3件（横並び）・詳細自己紹介・CTAボタン（依頼するボタン・メッセージ送る）。信頼感を重視したプロフェッショナルなデザイン。」
今度生成されたプロフィールは、ひと目で「この人のスキルと実績がわかる」ものになっていた。
実際に使ってみてわかったのは、プロフィールページの「目的」（何のためのプロフィールか）をプロンプトに明示することが、結果の質を大きく左右するということだ。
自己紹介文の「長さの変動」に対応する設計
プロフィールページ設計で忘れやすいのが、自己紹介文の長さが人によって大きく異なるという問題だ。
3行の人もいれば、20行の人もいる。Stitch で生成したプロフィール画面は、デフォルトで3〜4行の自己紹介が表示されていることが多い。でも実際に長い自己紹介文が入ったとき、レイアウトが崩れることがある。
対策として「自己紹介は最大3行表示、それ以降は「続きを読む」で展開」というパターンをStitchで設計した。プロンプトに「自己紹介文は3行で省略（…）し、「続きを読む」テキストリンクで全文展開できるUIにする」と明示すると、このパターンで生成してくれる。
プロフィールページのUIパターン設計
さまざまなサービス向けのプロフィールページを設計してきた経験から、よく使うUIパターンをまとめる。
ヘッダー部分の構成パターン
プロフィールページのヘッダー（最初に目に入るエリア）には、主に2つのレイアウトパターンがある。
- カバー画像＋アバター重ね置きパターン：FacebookやLinkedInのスタイル。横幅いっぱいのカバー画像の下端にアバターが重なるレイアウト。存在感があり、ブランディング性が高い
- アバター中央＋シンプルヘッダーパターン：Twitterや多くのモバイルアプリで採用。アバターを大きく表示し、名前・統計を下に続けるシンプルな構成。モバイルで見やすい
どちらを選ぶかはサービスのトーンによって変わる。ビジネス系サービスにはカバー画像パターン、ライフスタイル系サービスにはシンプルパターンが合うことが多い。
統計数字の見せ方
フォロワー数・投稿数・評価数などの統計を「どう見せるか」もプロフィール設計の重要な要素だ。
数字を大きく見せる場合（SNS系）は「1,234フォロワー」を縦に3列並べる水平レイアウトが一般的。数字よりもラベルを重視する場合（ビジネス系）は、アイコン付きのリスト形式で「実績〇件」「評価4.8（〇件）」のように表示するパターンが信頼感を出しやすい。
よくある失敗と対処法
- 失敗1：情報が多すぎてファーストインプレッションがぼやける——プロフィールページに「全部入れよう」とすると、最初に目に入るべき情報（名前・何者か・何ができるか）が埋もれます。ヒーローエリア（最初に見えるエリア）に入れる情報は3〜5要素に絞りましょう。
- 失敗2：CTAボタンの優先順位が不明確——「フォロー」「メッセージ」「依頼する」などの複数ボタンが同じサイズで並ぶと、どれを押せばいいかわかりません。主要アクション（最も重要なCTA）は1つに絞り、サイズ・色で目立たせましょう。
- 失敗3：空の状態（情報未入力時）を設計していない——自己紹介・アバター・ポートフォリオなどが未設定のユーザーのプロフィールがどう見えるかを設計しないと、「情報なし」のプロフィールが殺風景になります。「プロフィールを充実させましょう」という促しUIを設計しておきましょう。
- 失敗4：他者のプロフィールと自分のプロフィールを区別しない——他者のプロフィールには「フォロー」「メッセージ」ボタンが必要で、自分のプロフィールには「編集」ボタンが必要です。この2つを別々に設計することを忘れずに。
- 失敗5：プロフィール画像なし時のフォールバックがない——アバター未設定のユーザーには、名前の頭文字をイニシャルとして表示するフォールバックUIが必要です。白い円形だけが表示される状態は不自然なので、「プロンプトに「アバター未設定時はイニシャル（A）をグレー背景の円形に表示」と指定しましょう。
よくある質問（FAQ）
Q. Google Stitch でプロフィールページの「マイページ」と「他者のページ」を別々に設計するべきですか？
A. はい、別々に設計することを推奨します。マイページには編集ボタン・設定リンクが必要で、他者のプロフィールにはフォロー・メッセージ・共有などのCTAが必要です。Stitch で「マイプロフィール（編集モード付き）」と「他者プロフィール（フォローCTA付き）」を別プロンプトで生成して比較すると、設計の違いが明確になります。
Q. プロフィールのアバター画像は丸型と正方形どちらがいいですか？
A. サービスのトーンと利用シーンによります。SNS・個人サービス・カジュアルなプラットフォームでは丸型（circle）が親しみやすい印象を作ります。ビジネス系・企業向けサービスでは角丸の正方形（border-radius 8〜12px）がプロフェッショナルな印象になります。Stitch でどちらも生成して比較してみましょう。
Q. ポートフォリオや実績サムネイルをプロフィールに入れるとき、Stitch でどう設計すればいいですか？
A. 「ポートフォリオサムネイル3件、横並びグリッド、各サムネイル縦横比4:3、角丸8px、タップで詳細モーダルが開く」という形式でプロンプトを書くと、実際に近いサムネイルグリッドが生成されます。サムネイルの枚数・縦横比・余白を明示するのがポイントです。
Q. プロフィールページにSNSリンクを入れるとき、アイコンボタンとテキストリンクどちらが適切ですか？
A. どちらも有効ですが、SNSアイコン（X・Instagram・GitHubなど）は多くのユーザーが視覚的に認識できるため、アイコンボタンが一般的です。「X・Instagram・GitHubのSNSアイコンボタンを横並びで表示、サイズ32px、グレー（#6B7280）、ホバーで元の色に変化」というプロンプトが効果的です。
Q. プロフィールページでのプライバシー設定（公開・非公開）のUIはどう設計すればいいですか？
A. プライバシー設定は「公開プロフィール」と「非公開プロフィール（フォロワーのみ閲覧可）」の2状態を設計します。他者が非公開プロフィールを閲覧したとき「このプロフィールは非公開です。フォローリクエストを送ると承認後に閲覧できます」という状態画面も設計する必要があります。Stitch で「非公開プロフィールの表示状態（フォローリクエストボタン付き）」という指定で生成できます。
まとめ：プロフィールページは「人への敬意」で設計する
Google Stitch でプロフィールページを設計してみて、改めて感じたことがある。
プロフィールページは、ユーザーの「顔」だ。そこに表示される情報は、データではなく「人」だ。その人の名前・実績・自己紹介を、無味乾燥な情報として並べるのか、「人として伝わる」ように見せるのか——その違いはUI設計の細部に現れる。
余白の取り方、フォントの選び方、アバターのサイズ、実績の見せ方——それぞれの小さな選択が積み重なって「この人のことが知りたい」というページになる。
プロフィールページを設計するとき、私は「このページを見た人が、このユーザーに会いたいと思うか」という問いを持つようにしている。それが設計の羅針盤になっている。
次のステップ：自分のプロダクトのプロフィールページを開き、「このユーザーが何者かが30秒で伝わるか」を確認してみましょう。伝わらないなら、何が足りないかをStitchで試してみましょう。
