レイアウトプロンプト

レイアウトは、AI生成UIの使いやすさを大きく左右します。 「横に並べて」ではなく、カラム数、優先順位、ブレークポイント、余白を具体的に伝えることで、画面サイズが変わっても破綻しにくいUIを生成できます。

このセクションでは、レイアウトに関する記事をまとめています。基本のレスポンシブ指定から、リスト、グリッド、ベントー、モーダルやナビゲーションのようなUI部品の配置まで順番に学べます。

ページ一覧

ページ	学べること
レイアウトとレスポンシブデザイン	グリッド・フレックス・ブレークポイントの指定方法
リストレイアウトのプロンプト	プロフィール一覧、連絡先、設定、通知、商品一覧
グリッドレイアウトのプロンプト	カードグリッド、Masonry、機能グリッド、ダッシュボード
ベントレイアウトのプロンプト	混在サイズのセルを使うポートフォリオやダッシュボード
UIコンポーネントレイアウトのプロンプト	モーダル、ナビゲーション、サイドバー、フッター
レイアウトプロンプト実例集	代表的なUIパターンの完成プロンプト

レイアウト指示で必ず決めること

情報の優先順位 — どの要素を最初に見せるかを明確にする

カラムと余白 — デスクトップ、タブレット、モバイルごとのカラム数と間隔を指定する

折り返し順 — モバイルでどの順番に積み重なるかを指定する

状態と密度 — 一覧、カード、ダッシュボードの情報量に合わせて行間やカード幅を調整する