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

レイアウト技法について読むことには意味がありますが、代表的なUIパターンのプロンプトをコピー＆ペーストできる形で持っていることが、実際の作業速度を上げます。このページでは、すぐに使える完成度の高いプロンプト実例を集めています。

---

ランディングページのレイアウト

以下のセクションを持つモダンなランディングページレイアウトを作成してください:

1. ヒーローセクション — 左にヘッドライン、右にメインビジュアル。
   モバイルでは、画像をヘッドラインの下に積み重ねる。

2. 機能紹介セクション — アイコン・見出し・簡単な説明を含む3カラム構成。
   モバイルでは1カラムに折りたたむ。

3. お客様の声セクション — クライアントの写真と名前を添えたセンタリングされた引用文。

4. CTA（行動喚起）セクション — センタリングされた見出しと目立つ登録ボタン。

全体にTailwind CSSを使用。
カード: 控えめなシャドウ、角丸（8px）、パディング24px。
セクション: デスクトップで上下80pxのパディング、モバイルで40px。
ブレークポイント: 768px（タブレット）および640px（モバイル）。

---

ダッシュボードのレイアウト

以下の構成のダッシュボードレイアウトを設計してください:

1. 固定左サイドバー（幅240px）:
   - 上部にロゴ
   - 中央にアクティブ状態のハイライト付きナビゲーションリンク
   - 下部にユーザープロフィールセクション
   モバイルでは: ハンバーガーアイコンのタップで開く、スライドインドロワーに折りたたむ。

2. トップナビゲーションバー:
   - 検索入力欄（中央）
   - 通知ベルアイコン（右）
   - 設定ドロップダウン（右）

3. メインコンテンツエリア（グリッドレイアウト）:
   - 行1: 4枚の小さな指標カード（各1×1） — 売上、ユーザー数、注文数、コンバージョン
   - 行2: 大きな折れ線グラフ（2×1）とドーナツグラフ（2×1）
   - 行3: データテーブル（全幅）

カードスタイル: 白背景、1pxボーダー（#F0F0F0）、角丸8px、パディング16px。
メイン背景: ライトグレー（#F9F9F9）。サイドバー背景: 白。
タブレットおよびモバイルで適切に積み重なるレスポンシブ対応にする。

---

ECサイト商品ページ

ECサイトの商品ページレイアウトを作成してください:

1. 商品セクション（デスクトップ: 2カラム、60%/40%）:
   左カラム（60%）: メイン商品画像と、ギャラリーナビゲーション用のサムネイル4枚を下部に配置。
   右カラム（40%）:
   - 商品名（24px、太字）
   - 星評価とレビュー件数
   - 価格（太字、大きめ）
   - カラーSwatch選択
   - サイズ選択（S、M、L、XL）をトグルボタンで表示
   - 簡単な説明文（3〜4行）
   - カートに追加ボタン（全幅、プライマリカラー）
   - 配送情報の行（アイコン＋テキスト）

2. タブセクション: 商品説明 | 仕様 | レビュー（レビューカード3カラム）

3. 関連商品グリッド（デスクトップで4列、タブレットで2列、モバイルで1列）

モバイルでは: ギャラリーを上部に積み重ね、商品詳細を下に、タブを最後に配置。
素早いスキャンに適した明確な視覚的階層を確保する。

---

デバイスフレーム内のモバイルアプリ

フィットネストラッキングアプリの画面を設計し、iPhone 15 Proのフレーム内に配置してください。

画面の内容:
1. ステータスバー: フルバッテリー、良好な電波、時刻は午前10時30分
2. 今日のサマリー: 3枚の指標カード（歩数、カロリー、距離）を横一列に配置
3. 中央に日標達成率68%を示す円形プログレスリング
4. 下部に直近のアクティビティフィード: 日付・アクティビティ種類・小さなスパークチャート・所要時間をリスト表示（スクロール可能）
5. ボトムタブバー: ダッシュボード、ワークアウト、栄養管理、プロフィール

デバイスフレームの指定:
- iPhone 15 Proのフレーム（正確なベゼルとDynamic Island）
- わずかに傾けた角度（10°）とソフトなドロップシャドウ
- グラデーション背景（ライトパープルからブルー）にデバイスを配置
- デバイスの下に薄い反射を追加

---

個人ポートフォリオのベントーグリッド

4カラムのベントーグリッドレイアウトで個人ポートフォリオのホームページを作成してください:

1. 注目プロジェクト（左上、2×2）:
   - 全面に広がるプロジェクト画像
   - カード下部にプロジェクトタイトルと1行説明のオーバーレイ
   - オーバーレイに控えめなダークグラデーション

2. 自己紹介（1×1）:
   - 円形プロフィール写真（80px）
   - 名前と2行の自己紹介文

3. スキル・ツール（1×2）:
   - セクションラベル「使用ツール」
   - アイコングリッド: React、TypeScript、Figma、Node.jsなど

4. プロジェクトカード3枚（各1×1）:
   - サムネイル画像
   - ホバー時にプロジェクト名・技術スタック・リンクを表示するオーバーレイ

5. コンタクトカード（1×1）:
   - GitHub、LinkedIn、メールのアイコンリンク

全セル: 16pxのギャップ、角丸12px、控えめなホバートランジション（150ms ease）。
モバイル: 1カラム、積み重ね順は「注目プロジェクト → 自己紹介 → スキル → プロジェクト → コンタクト」。

---

レイアウトプロンプトのベストプラクティス

自分でレイアウトプロンプトを書く際は、以下の原則を意識してください。

1. 全体構造から始める 個々のコンポーネントの詳細に入る前に、トップレベルのレイアウトを説明する。

2. 形容詞ではなく数値で指定する 「快適なパディング」ではなく「パディング24px」。「複数カラムのグリッド」ではなく「4カラム」。

3. 常にレスポンシブ動作を含める 「モバイルでは1カラムに折りたたむ」だけでもよいので、各ブレークポイントで何が変わるかを明記する。

4. フレームワークを明示する 「Tailwind CSSを使用」または「カスタムプロパティを使用したCSS Grid」と書くことで、AIの推測を排除できる。

5. 視覚的階層を説明する 最初に目を引く要素と、それより重要度の低い要素をAIに伝える。

---