デザイン・オープンブック

画面レイアウトの名前9種類

Webページのレイアウトにはどんな名前があり、AIにどう伝えればいいですか? ヒーロー、ベントグリッド、スプリット、カードグリッドなど9種類のレイアウト名で指定すると、AIが毎回ほぼ同じ画面を作ります。

「見やすく配置して」では、AIに何の情報も渡せません。レイアウトの名前を指定すると、結果が毎回似た形になります。

名前とプレビュー

プレビューをタップすると止まり、もう一度タップすると再生します。

  1. ヒーローセクション

    Hero section

    ページの最上部にあり、大きな見出しと代表ボタンを置く第一印象の領域

  2. ベントグリッド

    Bento grid

    大きさの違う区画を弁当箱のように組み合わせた格子

  3. スプリット

    Split screen

    画面を左右に分け、文章と画像を並べる配置

  4. カードグリッド

    Card grid

    同じ大きさのカードを複数列で繰り返す配置

  5. サイドバーレイアウト

    Sidebar layout

    片側に固定メニュー、残りを本文にする配置

  6. マガジンレイアウト

    Magazine layout

    大きな記事1つと小さな記事複数を混ぜる雑誌風の配置

  7. ダッシュボード

    Dashboard

    数値カード・グラフ・表を1画面にまとめた管理画面

  8. Zパターン

    Z-pattern

    視線が左上→右上→左下→右下と流れる配置

  9. フルブリード

    Full bleed

    余白なしで画面の端まで画像や帯を広げる配置

使い方

  • 領域を上から順に呼び、領域ごとにレイアウト名は1つだけ使います。
  • 列数(2列・3列)と基準にする画面(デスクトップ・モバイル)を一緒に書きます。
  • モバイルでは1列に積むという指示を先に入れておきます。抜けると、AIが横スクロールを作ることがあります。

コピーして使うプロンプト

ランディングページ

ランディングページを作ってください。
1. 最上部: ヒーローセクション(Hero section)。大きな見出し1行、説明1行、主要ボタン1つ。
2. その下: カードグリッド(Card grid)3列。カードごとに見出しと2行の説明、アイコンなし。
3. その下: スプリット(Split screen)。左は文章、右は製品画面の画像。
4. 画面幅400px以下では、すべて1列に積んでください。横スクロールが発生してはいけません。

参考にした投稿: @uxwoodytips

すべてのカード (27)