Component Gallery

Screen Pattern

設定画面（Settings Screen）UIの作り方

設定画面は、ユーザーが通知、アカウント、表示、権限などの振る舞いを確認・変更する画面です。

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

30秒でわかる要点

設定画面は、ユーザーが通知、アカウント、表示、権限などの振る舞いを確認・変更する画面です。

自前ワイヤーフレーム

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

主なユースケース

  • ・通知設定を変更する
  • ・アカウント情報を確認する
  • ・危険操作を実行前に確認する

レイアウトの考え方

  • ・設定項目は意味の近いグループに分ける
  • ・破壊的操作は通常設定から視覚的に分ける
  • ・変更結果をすぐ伝える

アクセシビリティ

  • ・トグルの状態をテキストでも伝える
  • ・セクション見出しで構造を作る
  • ・確認ダイアログにフォーカスを移す

よくある失敗

  • ・項目が並ぶだけで優先度がない
  • ・保存の有無が分からない
  • ・危険操作が通常項目と混ざる

構成コンポーネント

ナビゲーション（Navigation）ナビゲーション（Navigation）は、サイトやアプリ内の主要な画面遷移を提供するナビゲーションバー。水平・垂直・サイドバー型などのレイアウトバリエーションを持つ。トグルスイッチ（Switch）トグルスイッチ（Switch）は、ON/OFFの2状態をトグル操作で切り替えるコンポーネント。設定画面の機能有効化・無効化に広く使われる。選択ボックス（Select）選択ボックス（Select）は、ドロップダウン形式で選択肢の一覧を表示し、ユーザーが選択するための入力コンポーネント。単一・複数選択のバリエーションがある。区切り線（Divider）区切り線（Divider）は、セクション間を視覚的に分割する水平・垂直の区切り線コンポーネント。コンテンツの論理的なグループ分けを補助する。モーダル（Modal）モーダル（Modal）は、メインコンテンツの上に重なって表示される、フォーカスを要求するダイアログ。確認・入力・情報提示に使用される。アラート（Alert）アラート（Alert）は、エラー・警告・成功・情報など重要な状態をページ内に固定表示するコンポーネント。トーストと異なりユーザーが閉じるまで表示を維持する。

AI実装プロンプト

設定画面実装

設定画面をReact + Tailwind CSSで実装してください。セクション分け、トグル、確認ダイアログ、保存フィードバック、モバイル表示を含めてください。

運営・更新・参照元

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

参照元

FAQ

設定画面はどのコンポーネントで構成されますか？

ナビゲーション、リスト、トグル、セレクト、ディバイダー、確認ダイアログ、アラートで構成されることが多いです。

設定画面で最初に決めるべきことは何ですか？

この画面でユーザーが完了したい主目的を1つに絞り、navigation、switch、selectなどの構成要素を優先度順に配置します。

設定画面でよくある失敗は何ですか？

項目が並ぶだけで優先度がない