レイアウトの指示は「なんとなく横に並べて」では伝わりません。列数・ブレークポイント・要素の優先順位を具体的に伝えることで、AIはスマートフォンでもデスクトップでも崩れないレイアウトを生成できます。
レスポンシブデザインの4つの指示戦略
1. ブレークポイントを具体的に指定する
「モバイル対応にして」ではなく、いつレイアウトが変わるかを数値で伝えます。
デスクトップ（1024px以上）で3カラム、タブレット（768〜1023px）で2カラム、
モバイル（768px未満）で1カラムに切り替わるレイアウトを作ってください。2. モバイル固有の挙動を記述する
モバイルで特別な動作が必要な要素は、個別に説明します。
モバイルでは、ナビゲーションメニューをハンバーガーアイコンに折りたたんでください。
アイコンをタップすると、右上に閉じるボタン付きのフルスクリーンオーバーレイが表示される仕様で。3. コンテンツの優先順位を指定する
画面サイズによって、何を先に見せるかを伝えます。
モバイルでは、機能一覧より先にサインアップフォームを上部に表示してください。
デスクトップでは2つを横並びで表示します。4. タッチ操作を考慮したサイズ指定
モバイルではタップしやすいサイズが必要です。
モバイルではすべてのボタンを高さ44px以上にし、
インタラクティブな要素の間隔を16px以上確保してください。よく使うレイアウトパターン集
実際のUIで頻繁に登場するレイアウトパターンのプロンプト例です。
ベントグリッド（Bento Grid）
情報をサイズの異なるタイルで並べる、モダンなダッシュボード風レイアウト。
grid-column-span と grid-row-span を使ったベントグリッドレイアウトを作ってください。
フィーチャーアイテムを他のタイルより大きく表示します。モーダルダイアログ
ヘッダー・ボディ・フッターを持つモーダルダイアログを作ってください。
右上に閉じるボタン（×）、背景にはフェードインアニメーション付きのオーバーレイを追加します。リストレイアウト
アバター画像・名前・説明文・右矢印アイコンを含むリストレイアウトを作ってください。
ホバー時に背景色が変わるサブルなエフェクトを追加します。アラートコンポーネント
success / error / warning / info の4バリアントを持つアラートコンポーネントを作ってください。
各バリアントにアイコン・メッセージ・閉じるボタンを含めます。サイドバーナビゲーション
固定幅のサイドバーナビゲーションと、メインコンテンツエリアを持つダッシュボードレイアウトを作ってください。
サイドバーにはアクティブ状態のインジケーターを含めます。アクションバー／ツールバー
テキスト書式設定コントロール・区切り線・プライマリアクションボタンを持つ
アクションバーをコンテンツエディタ用に作ってください。トップナビゲーションバー
ロゴ・メニューリンク・ユーザープロファイルを持つレスポンシブナビゲーションバーを作ってください。
ドロップダウンメニューとモバイル用ハンバーガートグルを含めます。Tailwindでレイアウトを指示するコツ
Tailwind CSS を使う場合、クラス名を直接指定するとAIの出力精度が上がります。
| 指示したいこと | Tailwindの指定例 |
|---|---|
| レスポンシブグリッド | grid-cols-1 md:grid-cols-2 lg:grid-cols-3 |
| 中央寄せコンテナ | container mx-auto px-4 |
| フレックスで横並び | flex items-center gap-4 |
| スティッキーヘッダー | sticky top-0 z-50 |
Tailwind CSS を使って、grid-cols-1（モバイル）・md:grid-cols-2（タブレット）・lg:grid-cols-3（デスクトップ）
のレスポンシブグリッドレイアウトを作ってください。 クイズ