Component Gallery

Layout UI

レイアウトUIまとめ

レイアウトUIは、情報のまとまり、余白、表示領域、重なり方を設計し、画面全体の読みやすさを支える構造です。

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

30秒でわかる要点

レイアウトUIは、情報のまとまり、余白、表示領域、重なり方を設計し、画面全体の読みやすさを支える構造です。

拾いたい検索意図

  • ・UI レイアウト部品を整理したい
  • ・モーダルやボトムシートを使い分けたい
  • ・画面構成の型を探したい

設計ポイント

  • ・同じ意味の情報を近づける
  • ・画面遷移か一時表示かを決める
  • ・モバイルでの表示密度を先に確認する

関連コンポーネント

グリッド（Grid）グリッド（Grid）は、コンテンツを列ベースのグリッドで整列させるレイアウトコンポーネント。レスポンシブ対応のカラム数指定が可能。スペーサー（Spacer）スペーサー（Spacer）は、要素間の余白を明示的に制御するレイアウト補助コンポーネント。デザイントークンで定義されたスペーシングスケールに従う。区切り線（Divider）区切り線（Divider）は、セクション間を視覚的に分割する水平・垂直の区切り線コンポーネント。コンテンツの論理的なグループ分けを補助する。モーダル（Modal）モーダル（Modal）は、メインコンテンツの上に重なって表示される、フォーカスを要求するダイアログ。確認・入力・情報提示に使用される。ボトムシート（Bottom Sheet）ボトムシート（Bottom Sheet）は、モバイルUIで画面下部からスライドアップするパネルコンポーネント。ドロワーのモバイル版に相当し、アクションメニューや詳細情報の表示に使われる。アコーディオン（Accordion）アコーディオン（Accordion）は、ヘッダーをクリックすることでコンテンツを展開・折りたたみできるコンポーネント。FAQやコンテンツのグループ表示に使用される。ポップオーバー（Popover）ポップオーバー（Popover）は、要素に紐付いてトリガー操作で表示される吹き出し型UIコンポーネント。ツールチップより情報量が多く、ボタンやフォームを内包できる。

関連画面パターン

設定画面（Settings Screen）設定画面は、ユーザーが通知、アカウント、表示、権限などの振る舞いを確認・変更する画面です。決済画面（Checkout Screen）決済画面は、商品、金額、配送、支払い方法、確認操作を誤解なく完了させるための画面です。カレンダー画面（Calendar Screen）カレンダー画面は、日付・予定・空き時間を視覚的に確認し、選択や予約へ進むための画面です。商品詳細画面（Product Detail Screen）商品詳細画面は、商品の価値、仕様、価格、在庫、購入導線を判断しやすくまとめる画面です。

運営・更新・参照元

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

参照元

FAQ

レイアウトUIでは何から設計しますか？

まず検索意図や利用シーンを決め、grid、spacer、dividerなどの主要コンポーネントを画面目的に合わせて選びます。

レイアウトUIで避けるべきことは何ですか？

見た目の流行だけで部品を選び、ユーザーの判断・入力・移動の文脈を無視することです。

レイアウトUIの関連ページはどう辿るべきですか？

まずハブで主要コンポーネントを把握し、次に画面パターン、比較ページ、実装レシピの順に確認すると設計から実装までつなげやすくなります。