Component Gallery

Screen Pattern

プロフィール画面（Profile Screen）UIの作り方

プロフィール画面は、ユーザーの基本情報、自己紹介、公開状態、編集導線をまとめて確認・更新する画面です。

最終更新日: 2026-07-16 / レビュー状態: 未レビュー

30秒でわかる要点

プロフィール画面は、ユーザーの基本情報、自己紹介、公開状態、編集導線をまとめて確認・更新する画面です。

自前ワイヤーフレーム

プロフィール画面の情報配置を確認するための簡易ワイヤーフレームです。外部サービスのスクリーンショットではなく、Component Gallery側で作成した構成図です。

主なユースケース

  • ・ユーザー情報を表示する
  • ・プロフィール編集へ誘導する
  • ・公開範囲や本人確認状態を示す

レイアウトの考え方

  • ・アイデンティティ情報を上部に集約する
  • ・閲覧状態と編集状態を混ぜすぎない
  • ・公開情報と非公開情報を分ける

アクセシビリティ

  • ・アバター画像に代替テキストを付ける
  • ・編集ボタンの対象を明確にする
  • ・ステータスを色だけで表さない

よくある失敗

  • ・編集導線が多すぎる
  • ・公開範囲が分かりにくい
  • ・空の自己紹介が放置される

構成コンポーネント

アバター（Avatar）アバター（Avatar）は、ユーザーやエンティティを表すアイコン・プロフィール画像コンポーネント。画像がない場合はイニシャルや代替アイコンで表示する。カード（Card）カード（Card）は、関連する情報をまとめて表示するコンテナコンポーネント。画像・タイトル・説明文・アクションを組み合わせて使う。ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。バッジ（Badge）バッジ（Badge）は、数量・ステータス・ラベルを小さいサイズで表示するコンポーネント。通知数や状態の強調表示に使用される。タブ（Tab）タブ（Tab）は、複数のコンテンツパネルをタブで切り替えて表示するコンポーネント。同一画面内で関連するコンテンツを整理する。

AI実装プロンプト

プロフィール画面実装

プロフィール画面をReact + Tailwind CSSで実装してください。主要コンポーネント、空状態、エラー状態、モバイル表示、アクセシビリティを含めてください。

運営・更新・参照元

最終更新日
2026-07-16
レビュー状態
未レビュー

参照元

FAQ

プロフィール画面で最初に決めるべきことは何ですか？

まず、この画面でユーザーが完了したい主目的を1つ決めます。そのうえで、avatar、card、buttonなどの構成要素を優先度順に配置します。

プロフィール画面でよくある失敗は何ですか？

編集導線が多すぎる

プロフィール画面をモバイル対応するときの注意点は？

最初に表示する情報を絞り、入力欄、主ボタン、エラー表示、戻る導線が狭い画面でも隠れないようにします。