こんにちは。
前回は、AIにサイトの見た目を伝えるときは、名前のあるデザインスタイルを使うと方向性が揃いやすい という話を書きました。
ですが、AIに伝えるべきなのは見た目の雰囲気だけではありません。
構造を伝えたいなら、名前のあるレイアウトパターンを使うのが有効です。
今回は、AIにサイトやUIの骨格を伝えるための「レイアウトの語彙」をまとめていきます。
AIに「見やすくして」と言ってもレイアウトが弱くなりやすい理由
AIにサイトや管理画面を作らせるとき、見やすくして と頼むことはよくあります。
ですが、この指示はかなり曖昧です。どこを強く見せたいのか。情報は縦に読ませたいのか、横に比較させたいのか。ナビは左に置きたいのか、上に置きたいのか。こうした構造の話が何も入っていません。
するとAIは、なんとなくカードを並べた、なんとなく今っぽいUIを返しがちです。色は整っていても、情報の優先順位や視線の流れが弱い。結果として見た目は悪くないのに使いにくい画面 になりやすいわけです。
「レイアウトなんて指定しなくても、AIが勝手にいい感じにしてくれるのでは？」と思った方もいると思います。確かにAIは見栄えのよい画面を返してくれます。ただ、構造の意図までは汲んでくれません。
ここでおすすめなのが、名前のあるレイアウトパターンを伝えることです。名前を伝えるだけで、AIは「どう並べるか」の判断をかなりしやすくなります。
デザインスタイルとレイアウトパターンは別物です
ここは一度切り分けておいた方がわかりやすいです。
- デザインスタイル は、見た目の雰囲気やルールです。たとえば
Material DesignやSwiss Designのようなものです。 - レイアウトパターン は、情報の並べ方や画面の骨格です。たとえば
Single-column LayoutやBento Gridのようなものです。
つまり、デザインスタイルが「どう見せるか」なら、レイアウトパターンは「どう並べるか」です。
この2つを混ぜて考えると、AIへの指示もぼやけます。逆に分けて考えると、かなり安定します。
この記事では、AIに構造を伝えるための実用語彙として、代表的なレイアウトパターンをまとめて紹介します。
AIに伝えやすい代表的なレイアウトパターン7選
Single-column Layout
1カラムで縦に読ませる、いちばん基本の構成です。名前の通りですね。
LP、解説記事、サービス紹介ページなど、順番に情報を読ませたいページでよく見られるパターンです。
AIに伝えるなら、single-column layoutで、上から順に読める構成にしてください のように伝えましょう。まず迷ったらここから始めるという意味でも使いやすいです。
レイアウト例：
プロンプト例：
1ブログ記事ページをHTMLで作ってください。
2
3## ルール
4- 日本語UI、デスクトップ幅。
5- Single-column Layoutで、1カラム構成にしてください。
6- 上部にナビバー、その下にアイキャッチ画像エリア、記事タイトル、本文、関連記事の順で縦に並べてください。
7- 本文にはh2見出しを2つ以上入れ、図の挿入箇所も1つ以上作ってください。
8- 関連記事は2カラムのカードで2件表示してください。
9
10デザインはMaterial Designを踏襲して、カードUI、余白広め、視覚階層を明確にしてください。Split-screen Layout
左右2分割の構成です。片側にコピー、もう片側にビジュアル。あるいは片側に説明、もう片側にフォーム、という見せ方をしたいときに向いています。Stripeなどの決済ページもこの形式が多いですね。
トップページのコンテンツ部分、採用ページ、プロダクト紹介ページなどで候補にあがります。AIには split-screen layoutで、左に説明、右にビジュアルを置いてください と伝えると通りやすいです。
レイアウト例：
プロンプト例：
1サービス紹介のトップページをHTMLで作ってください。
2
3## ルール
4- 日本語UI、デスクトップ幅、1画面完結。
5- Split-screen Layoutで、画面を左右に2分割してください。
6- 左側にはキャッチコピー、説明文、CTAボタン2つ（プライマリとセカンダリ）、導入実績の数値を配置してください。
7- 右側にはプロダクトのビジュアルイメージ（プレースホルダでOK）を配置してください。
8- 上部にはナビバーを置き、右端に「無料で始める」ボタンを入れてください。
9
10デザインはMaterial Designを踏襲して、カードUI、余白広め、視覚階層を明確にしてください。Sidebar Layout
左にナビゲーション、右に本文や操作領域を置く構成です。管理画面、SaaS、設定画面、社内ツール系では定番ですね。
ダッシュボードを作らせるならまずこれが土台になります。AIには sidebar layoutで、左ナビ右コンテンツの構成にしてください と伝えましょう。サイドバー、コンテンツの項目を決めて伝えることができれば最高です。
レイアウト例：
プロンプト例：
1ブログ管理画面のダッシュボードをHTMLで作ってください。
2
3## ルール
4- 日本語UI、デスクトップ幅、1画面完結、スクロールなし。
5- Sidebar Layoutで、左にナビゲーション、右にメインコンテンツの構成にしてください。
6- 左サイドバーには「ダッシュボード」「投稿一覧」「メディア」「コメント」と、「設定」セクションとして「外観」「プラグイン」「ユーザー」を配置してください。
7- メインエリアの上部に主要な数値カードを4つ横並びで配置してください（公開記事数、月間PV、CTR、下書き数）。
8- その下に、左にPV推移の折れ線グラフ、右にアクティビティログを並べてください。
9- 最下部に最近の投稿テーブル（タイトル、ステータス、PV、更新日）を配置してください。
10
11デザインはMaterial Designを踏襲して、カードUI、余白広め、視覚階層を明確にしてください。Bento Grid
大小のカードを、綺麗なグリッドの中で見せる構成です。最近のSaaSサイトやAI系サイトでよく見る、あの情報カードが気持ちよく並ぶ感じですね。
機能紹介、ダッシュボード、プロダクトの特徴整理などに向いています。AIに伝えるなら bento grid layoutで、大小の情報カードを整理して配置してください がいい感じ。
レイアウト例：
プロンプト例：
1SaaSの機能紹介ページをHTMLで作ってください。
2
3## ルール
4- 日本語UI、デスクトップ幅。
5- Bento Grid Layoutで、大小のカードを使って機能を紹介する構成にしてください。
6- 上部にナビバーとヒーローセクション（キャッチコピー＋サブテキスト）を配置してください。
7- その下にBento Gridで6つの機能カードを配置してください。
8 - 1つは大きいカード（2列×2行サイズ）にして、メイン機能として目立たせてください。グラフのプレースホルダを入れてください。
9 - 残り5つは通常サイズで、それぞれアイコン、タイトル、説明文を入れてください。
10- カードのサイズに差をつけて、情報の優先順位が見た目でわかるようにしてください。
11
12デザインはMaterial Designを踏襲して、カードUI、余白広め、視覚階層を明確にしてください。Masonry Layout
高さの違うカードを、すき間を埋めるように並べる構成です。メイソンリーレイアウトと読みます。
Pinterestのような並びをイメージするとわかりやすいです。
事例一覧、ギャラリー、画像中心の一覧ページに向いています。ただし、情報を厳密に比較したい画面には少し不向きです。AIには masonry layoutで、高さの違うカードを自然に詰めて並べてください と伝えるとよいです。
レイアウト例：
プロンプト例：
1制作会社のポートフォリオページをHTMLで作ってください。
2
3## ルール
4- 日本語UI、デスクトップ幅。
5- Masonry Layoutで、高さの違うカードを隙間なく詰めて並べる構成にしてください。
6- 上部にナビバー、ページタイトル、カテゴリフィルター（すべて / Webサイト / LP / UI/UX / ブランディング）を配置してください。
7- カードは4列で10件程度配置し、各カードは画像プレースホルダ＋タイトル＋カテゴリタグ＋年を含めてください。
8- カードの高さはランダムに変えて、Masonry特有の詰め込みレイアウトを表現してください。
9
10デザインはMaterial Designを踏襲して、カードUI、余白広め、視覚階層を明確にしてください。Editorial / Magazine Layout
大きな見出し、余白、写真、複数段の情報配置を使って、読む体験そのものを作る構成です。ブランドページ、特集記事、世界観を見せたいLPで強いです。
AIには editorial layoutで、大きな見出しと余白を活かした構成にしてください と言えばかなりイメージが伝わります。
レイアウト例：
プロンプト例：
1ブランド特集ページをHTMLで作ってください。
2
3## ルール
4- 日本語UI、デスクトップ幅。
5- Editorial / Magazine Layoutで、大きな見出しと余白を活かした構成にしてください。
6- 上部にミニマルなナビバーを配置してください。
7- ヒーローエリアには、特集タイトルを大きなタイポグラフィで配置し、著者名・撮影者名・号数を添えてください。
8- その下に全幅の写真帯（プレースホルダでOK）を配置してください。
9- 本文エリアはセクション見出し＋2カラムのテキスト構成にしてください。
10- ページ下部にプルクオート（引用文）を入れてください。
11
12デザインはMaterial Designを踏襲して、余白広め、タイポグラフィ重視、読む体験を大切にした構成にしてください。Master-Detail Layout
一覧と詳細を並べる構成です。たとえば左に顧客一覧、右に顧客詳細。あるいは左に投稿一覧、右に編集画面、という形ですね。
案件管理、顧客管理、投稿管理、メール画面など、「まず選んで、そのあと詳しく見る」UIでかなり強いです。AIに伝えるなら master-detail layoutで、一覧から詳細に入れる構成にしてください が有効です。
レイアウト例：
プロンプト例：
1メッセージ管理画面をHTMLで作ってください。
2
3## ルール
4- 日本語UI、デスクトップ幅、1画面完結、スクロールなし。
5- Master-Detail Layoutで、左に一覧（Master）、右に詳細（Detail）を並べる構成にしてください。
6- 上部にアプリバーを配置し、右端に「アーカイブ」「新規作成」ボタンを置いてください。
7- 左パネル（Master）には、検索バー、タブ（すべて / 未読 / フラグ付き）、メッセージ一覧を配置してください。各メッセージにはアバター、送信者名、件名、本文プレビュー、日時を表示してください。
8- 右パネル（Detail）には、選択中のメッセージの件名、送信者情報、本文、返信・転送・アーカイブのアクションボタンを配置してください。
9
10デザインはMaterial Designを踏襲して、カードUI、余白広め、視覚階層を明確にしてください。ダッシュボードや管理画面なら、この組み合わせがおすすめ
非エンジニアの方が自分用、もしくは社内ツールを自作するケースが増えていますよね。その場合はダッシュボードを多用することになると思いますが、どんなレイアウト構成が良さそうでしょうか。
発想としては、
- 骨格は Sidebar Layout
- 中身は Bento Grid で、カード・グラフ・テーブルを整理
- 一覧→詳細の操作が要るなら Master-Detail Layout を組み込む
これが再現性の高い型です。
1Sidebar Layoutをベースにしたダッシュボードにしてください。
2上部にKPIカードを横並びで配置し、その下はBento Gridでグラフ、テーブル、通知、タスクを整理してください。
3管理画面らしく、情報の優先順位がひと目でわかる構成にしてください。このくらい書くだけでもAIの出力はかなり安定します。
もちろんコンテンツ部分はお好みのレイアウトで構いません。ページの内容によってどれが適しているか変わってきます。わからなければAIに決めてもらってもいいでしょう。
初心者はこの3つから始めれば十分です
最初に全部覚える必要はありません。まずは次の3つで十分です。
- Single-column Layout
- Sidebar Layout
- Bento Grid
理由は単純で、どれもAIが解釈しやすく、画面の差がはっきり出やすいからです。しかも、この3つを知っているだけで、LP、管理画面、サービス紹介のかなり広い範囲をカバーできます。
まずは近いものを1つ選ぶ。それだけでも、何も言わずに丸投げする状態 からは大きく前進します。
まとめ
というわけで、AIにサイトやUIの構造を伝えたいなら、見やすくして のような感覚語ではなく、名前のあるレイアウトパターンを使うのが有効です。
デザインスタイルが見た目の雰囲気なら、レイアウトパターンは情報の骨格です。この2つを分けて伝えるだけで、AIの出力はかなり安定します。
まずは Single-column Layout、Sidebar Layout、Bento Grid のどれかを1つ使ってみてください。それだけでも、画面のまとまり方はかなり変わるはずです。
まずは1つ選んで、いつものプロンプトに名前を足してみてください。それだけでも違いが出るはずです。
前回のデザインスタイル編もあわせてご覧ください。
参考記事
レイアウト名の中には、単一の公式仕様があるものと、業界の中で通称として定着しているものが混ざっています。なのでここでは、公式に近い資料 と 使いどころがわかりやすい資料 を合わせて置いておきます。
- Single-column Layout: MDN: Common grid layouts / Baymard: Avoid Multi-Column Forms
- Split-screen Layout: Apple HIG: Split views / HashBuilds: What is Split Screen Layout?
- Sidebar Layout: Apple HIG: Sidebars / HashBuilds: What is Sidebar Layout?
- Bento Grid: HashBuilds: What is Bento Layout?
- Masonry Layout: MDN: Masonry layout / HashBuilds: What is Masonry Layout?
- Editorial / Magazine Layout: HashBuilds: What is Magazine Layout? / MDN: CSS multi-column layout
- Master-Detail Layout: Microsoft Learn: List/details
- ダッシュボード構成の補足: HashBuilds: What is Dashboard Layout? / HashBuilds: What is a Metric Grid Dashboard?