本文へ移動
つまずき地図Vibe Dev Navigator
メニュー

AIでサービスをつくる、非エンジニアのための実践ガイド

Web全体デザイン

Bento Grid

Bento grid

情報を大小の箱へ分け、全体像と優先順位を同時に見せるデザインです。

危険度: 通常情報整理

今すぐ使う

見た目と印象をつかむ

見本の空気感が近いかを確かめてから、そのままAIへの依頼文へつなげられます。

10秒で分かる説明

角の丸い大小のカードを格子状に組み、重要な内容ほど広い面へ置きます。

受ける印象

  • 現代的
  • 整理されている
  • 楽しい

AIへの依頼文

Bento Gridへ整える依頼

危険度:通常

内容と対象をひと目確認してから使うと安心です。

分かる範囲で2か所だけ

自分の状況を入れる

空欄のままでもコピーできます。秘密情報は書かずにお試しください。

コピーされる依頼文を確認
目的:
関連する情報をカードへ整理し、重要度が直感的に伝わるBento Gridを作る。

現在の状態:
【ここに、何をしたらどうなったかを書く】

今回依頼すること:
指定した情報をBento Gridで整理してください。最重要の内容を大きなカードにし、関連情報を小さなカードへ分けてください。カードの大きさだけに意味を頼らず、見出しと読む順番を保ち、狭い画面では一列に並べてください。

変更してよい範囲:
【ここに、変更してよい画面やファイルを書く】

変更しない範囲:
情報の意味や順序の変更、装飾目的だけの大量カード化、スマートフォンでの横スクロールは行わない。

完了条件:
- 最重要カードが一つに絞られている
- 各カードが一つの話題だけを扱う
- 一列表示でも読む順番が自然である

実装前に確認すること:
- 対象とするファイル、現在の差分、関連する設定を読み取り、変更計画を短く示す
- 判断できない点があれば、変更する前に止めて質問する

実装後に報告すること:
- 変更したファイルと変更理由
- 実行した確認と、その結果
- 未解決の点や追加で確認が必要な点

使う前に確認
使った後に確認

確かめる

向いている場面を見分ける

好みだけで決めず、このサイトの目的と情報量に合うかを確認します。

向いている場面

  • 種類の異なる情報を一画面で見せる
  • 重要度をカードの大きさでも伝える

向いていない場面

  • 一つの長い文章を順番に読む画面
  • すべての情報が同じ重要度の場合

理解する

特徴と作り方を知る

AIへ伝える名前と、見た目を崩さず実装するための確認点です。

見た目の特徴

  • 一つのカードへ一つの話題を置く
  • 最重要カードを一つだけ大きくする
  • カード間に一定の余白を保つ

実装時の確認

  • の読む順番と見た目の順番を一致させる
  • スマートフォンでは自然な一列へ戻す