UIコンポーネントレイアウトのプロンプト

読了 5分＋実践 20分

フルページレイアウトを組み立てたり、AIを使ってコンポーネントライブラリを構築している方。

特になし。

あらゆるインターフェースは、繰り返し登場するいくつかのコンポーネントで構成されています。それぞれを正確に言語化する方法を身につければ、汎用的なプレースホルダーではなく、本番品質のUIブロックを得られるようになります。

モーダルダイアログ

モーダルはユーザーの操作を中断し、重要なコンテンツを提示するか、意思決定を求めます。

モーダルダイアログを作成してください:
- ヘッダー: タイトルテキストと右揃えの閉じるボタン（×）
- ボディ: 24pxのパディングを持つスクロール可能なコンテンツエリア
- フッター: キャンセルボタン（セカンダリスタイル）と確認ボタン（プライマリスタイル、右揃え）
- 背景: 半透明のオーバーレイ（rgba(0,0,0,0.5)）
- 表示アニメーション: 控えめなフェードイン＋スケールアニメーション（150ms）
モバイルでは: 水平マージンなしの全幅表示。フッターのボタンは縦並びにする。

指定すべきバリエーション:

破壊的操作の確認モーダル（赤い確認ボタン）
フォームモーダル（ボディ内に入力フィールド）
画像・メディアのライトボックスモーダル

アクションバーとツールバー

アクションバーはコンテンツエリアの上部または下部に配置し、ツールや主要なアクションを格納します。

アクションバーを設計してください:
- 左側: ホバー時にツールチップが表示される書式設定ツールボタン（太字、斜体、リンク）
- 中央: ツールグループを区切るディバイダー
- 右側: 主要アクションボタン（保存）とセカンダリボタン（キャンセル）
モバイルでは: 使用頻度の低いツールを「詳細」メニューボタンに折りたたむ。
コンテンツエリアの上部に固定（sticky）する。

トップナビゲーションバー

トップナビはあらゆるWebインターフェースの中で最も視認性の高い構造要素です。

トップナビゲーションバーを作成してください:
- 左: ロゴ（高さ32px）
- 中央: ナビゲーションリンク（ホーム、機能、料金、ドキュメント）
- 右: ユーザーアバター（クリックでプロフィール・設定・サインアウトを含むドロップダウンを表示）
ビューポート上部に固定し、下部に控えめなボックスシャドウを付ける。
モバイルでは: ナビゲーションリンクをハンバーガーアイコン（☰）の裏に隠す。ロゴとユーザーアバターは常に表示する。

出力精度を高める指定項目:

background: white または glassmorphism（どちらか明示する）
アクティブリンクのインジケーター（アンダーライン、ドット、背景ハイライト）
ヒーロー上では透明、スクロール時に不透明になるかどうか

サイドバー

サイドバーはメインコンテンツへの集中を妨げずに、サブナビゲーションや設定を格納します。

折りたたみ可能なサイドバーを設計してください（展開時240px幅）:
- 上部: ロゴまたはアプリ名
- 中央: アイコンとラベルを持つ縦型ナビゲーションリンク。アクティブ項目をハイライト表示する。
- 下部: ユーザープロフィールのサムネイル、名前、設定リンク
モバイルでは: メニューボタンがクリックされたとき、左からドロワーオーバーレイとしてスライドイン。
折りたたみ状態: アイコンのみ表示（ラベルなし、64px幅）。

インスペクターパネル

インスペクターパネルはエディタースタイルのインターフェースの右側に配置し、設定可能なプロパティを表示します。

デザインツール用のインスペクターパネルを作成してください:
- 上部: プロパティをフィルタリングする検索入力欄
- 折りたたみ可能なセクション: スペーシング、タイポグラフィ、カラー、エフェクト
- 各セクション: プロパティに応じたフォームコントロール（数値入力、ドロップダウン、カラーピッカー）
- パネル全体を展開・折りたたむトグルボタン
デスクトップでは幅280px。モバイルでは下からボトムシートとしてスライドアップ。

フッター

フッターはページの末尾に配置し、ナビゲーション・法的情報・連絡先を格納します。

4カラムレイアウトのフッターを設計してください:
- カラム1: 会社ロゴ、2行のタグライン、ソーシャルメディアアイコン
- カラム2〜3: セクション見出し付きのナビゲーションリンクグループ
- カラム4: ニュースレター登録（メール入力欄＋購読ボタン）
最下行: 著作権表示と法的リンク（プライバシー、利用規約）を小さいフォントで表示。
モバイルでは: セクション間に適切な余白を設けて1カラムに折りたたむ。

コンポーネントごとのベストプラクティスまとめ

コンポーネント	必ず指定すること
モーダル	オーバーレイの不透明度、アニメーションの種類、モバイルでの縦積み
アクションバー	ボタンの配置、sticky動作、モバイルでの折りたたみ
ナビゲーション	アクティブ状態、スクロール時の動作、モバイルのハンバーガー
サイドバー	折りたたみ状態、モバイルのドロワー動作
インスペクター	セクションの折りたたみ可否、入力コントロールの種類
フッター	カラム数、モバイルでの積み重ね順序

コンポーネントのアクセシビリティチェックリスト

インタラクティブなコンポーネントをプロンプトで指示する際は、以下の要件を含めてください。

コンポーネントがアクセシブルであることを確認してください:
- すべてのインタラクティブ要素に視認可能なフォーカススタイルがある
- モバイルでのタッチターゲットの最小サイズは44×44px
- 十分なカラーコントラスト（テキストで4.5:1）
- 閉じるボタンやアイコンのみのボタンにはaria-label属性がある
- モーダルは開いている間フォーカスをトラップし、閉じた際に元の要素にフォーカスを戻す

レイアウトプロンプト実例集

ベントレイアウトのプロンプト