あやね
ベントーグリッドは、大きさの異なるカードを組み合わせて、ひとつの画面で複数の情報を見せるレイアウトです。写真を並べるだけでは成立しません。まず「何を最初に見て、次に何を判断するか」を決め、情報の重要度に合わせてカードの面積と順序を変えます。この記事では、イベント案内ページを例に、デスクトップとスマートフォンで読める構成を組み立てます。画面全体の設計を先に考えたい場合は、Webデザインの進め方も参考になります。
なぜベントーグリッドはここまで広がったのか
機能、事例、料金、次の操作を一枚の画面に載せたいとき、同じ大きさのカードを並べるだけでは優先順位が見えにくくなります。ベントーグリッドなら、主題を大きなカードで示し、関連する要素を小さなカードに分けられます。製品紹介だけでなく、ポートフォリオやダッシュボードでも使えるのは、情報のまとまりを画面上に表せるからです。
ただし、カードが多いほど良いわけではありません。ひとつの判断を順に説明する記事や、複雑な入力フォームでは、単純な一列構成のほうが読みやすいこともあります。採用前に、利用者がカードを見比べる必要があるかを確認しましょう。
人はなぜこの並べ方を心地よく感じるのか
カードの境界は、別々の話題を区別する手掛かりになります。面積、余白、文字の強弱は、先に読む場所を知らせます。心理学の用語だけで効果を保証できるわけではありません。見た目が整っていても、見出しが曖昧だったり、購入条件が小さなカードに埋もれたりすれば、利用者は迷います。
設計するときは、カードを「目を引く要素」「判断に必要な情報」「補足情報」に分けてください。イベント案内なら、開催概要を主役にし、日程・会場・チケットを次の視線の移動先に置きます。色だけに頼らず、見出しと配置でも違いが伝わるようにします。
実際にどう使われているのか、良い事例から学ぶ
製品紹介では、代表的な機能を大きく、関連機能を小さくまとめると全体像をつかみやすくなります。作品集では、作品画像を主役に、担当範囲や制作年を補助カードへ分ける方法があります。数値を扱う画面なら、もっとも重要な指標を先に見せ、比較対象と更新日時を近くに配置します。同じ格子でも、利用者の仕事が変われば適切な順序も変わります。
元の記事で紹介していた製品カードの例も、情報を区切る発想を考える材料になります。ただし、下の画像は当該サービスの現行仕様や成果を示すものではありません。大きい領域と小さい領域の役割だけを見比べてください。
手作業で作ろうとすると、意外と大変
難しいのは四角形を描くことではなく、内容が増えても順序と余白を保つことです。短い見出しだけで収まる想定で作ると、実際の文言を入れた途端にカードの高さがずれます。画像の比率をそろえずに詰めると、視線の流れも途切れます。
最初にカードごとの役割と最小限の文字量を書き出し、共通の余白・角丸・文字スタイルを決めます。次に、幅の狭い画面で並び替える順番を別途設計します。デスクトップの配置を単純に縮小するだけでは、読ませたい順序が保てません。特に日付やチケット情報を下へ追いやらないよう注意します。
Pixsoなら、ベントーグリッド制作の手間を大幅に減らせる
Pixsoでは、カードをコンポーネントとして用意し、文字・余白・色の基準をそろえながら画面を試せます。ここではイベント案内を題材に、デスクトップ用の主役カード、日程、会場、チケットを配置し、同じ内容をモバイル幅に並べ直します。デザインツールが情報の優先順位を自動で決めるわけではありません。どのカードを残し、どれを先に見せるかは設計者が判断します。
再利用するカードはコンポーネントにする
日程や会場など、構造が似たカードを共通化すると、見出しやアイコンの位置をそろえやすくなります。重要度が異なるカードまで同じ大きさに固定する必要はありません。共通にすべき部分と、内容に合わせて変える部分を分けましょう。
間隔と文字量を実データで確認する
短い仮文だけで整えると、正式な会場名や複数日程が入った際に崩れます。オートレイアウトや制約を使いながら、長い見出し、空の状態、画像がない状態も試します。変更後にはカード間の余白だけでなく、読み順と操作対象の見つけやすさを確かめます。
モバイル版の順序は別に判断する
狭い画面では、カードを縦に積むことになります。その際は、開催概要の次に日程と会場を置くのか、チケットを先に置くのかを利用者の目的に合わせて決めます。Pixso上で幅の異なるフレームを並べ、実際の文言と画像を使って比較できます。自動的に最適なモバイル画面が完成するという意味ではありません。
まとめ
ベントーグリッドは、関連する複数の情報に明確な優先順位をつけたいときに有効です。最初に情報の役割を決め、主役カードから次の判断へ自然に進める順序を作ってください。仕上げは幅の狭い画面と長い文言で確認します。Pixsoで画面を作成するときも、カードの見た目より先に読む順番を設計しましょう。
