レイアウトとレスポンシブデザイン

読了 5分＋実践 20分

レイアウトの指示が曖昧になりがちな方、レスポンシブデザインをAIに任せたい方

CSSのグリッドやブレークポイントの概念を知っているとより理解しやすいですが、なくても読み進められます

レイアウトの指示は「なんとなく横に並べて」では伝わりません。列数・ブレークポイント・要素の優先順位を具体的に伝えることで、AIはスマートフォンでもデスクトップでも崩れないレイアウトを生成できます。

レスポンシブデザインの4つの指示戦略

「モバイル対応にして」ではなく、いつレイアウトが変わるかを数値で伝えます。

デスクトップ（1024px以上）で3カラム、タブレット（768〜1023px）で2カラム、
モバイル（768px未満）で1カラムに切り替わるレイアウトを作ってください。

モバイルで特別な動作が必要な要素は、個別に説明します。

モバイルでは、ナビゲーションメニューをハンバーガーアイコンに折りたたんでください。
アイコンをタップすると、右上に閉じるボタン付きのフルスクリーンオーバーレイが表示される仕様で。

画面サイズによって、何を先に見せるかを伝えます。

モバイルでは、機能一覧より先にサインアップフォームを上部に表示してください。
デスクトップでは2つを横並びで表示します。

モバイルではタップしやすいサイズが必要です。

モバイルではすべてのボタンを高さ44px以上にし、
インタラクティブな要素の間隔を16px以上確保してください。

実際のUIで頻繁に登場するレイアウトパターンのプロンプト例です。

情報をサイズの異なるタイルで並べる、モダンなダッシュボード風レイアウト。

grid-column-span と grid-row-span を使ったベントグリッドレイアウトを作ってください。
フィーチャーアイテムを他のタイルより大きく表示します。

ヘッダー・ボディ・フッターを持つモーダルダイアログを作ってください。
右上に閉じるボタン（×）、背景にはフェードインアニメーション付きのオーバーレイを追加します。

アバター画像・名前・説明文・右矢印アイコンを含むリストレイアウトを作ってください。
ホバー時に背景色が変わるサブルなエフェクトを追加します。

success / error / warning / info の4バリアントを持つアラートコンポーネントを作ってください。
各バリアントにアイコン・メッセージ・閉じるボタンを含めます。

固定幅のサイドバーナビゲーションと、メインコンテンツエリアを持つダッシュボードレイアウトを作ってください。
サイドバーにはアクティブ状態のインジケーターを含めます。

テキスト書式設定コントロール・区切り線・プライマリアクションボタンを持つ
アクションバーをコンテンツエディタ用に作ってください。

ロゴ・メニューリンク・ユーザープロファイルを持つレスポンシブナビゲーションバーを作ってください。
ドロップダウンメニューとモバイル用ハンバーガートグルを含めます。

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（デスクトップ）
のレスポンシブグリッドレイアウトを作ってください。

クイズ