AIで作るWebデザインは「カードの寄せ集め」になりがち

生成AIへWeb画面を依頼すると、角丸カードを均等に並べた見た目へ収束しがちです。カード自体を否定せず、情報の優先順位と利用者の行動からレイアウトを選ぶ方法を解説します。

カードは便利だから、AIも使いやすい

カードは見出し、説明、画像、ボタンを一つの部品にまとめられます。繰り返し生成しやすく、画面幅に応じて並び替えやすいため、AIが作るコードやデザイン案でも頻繁に登場します。

問題はカードそのものではなく、重要度や関係が違う情報まで同じ大きさで並び、ページ全体が均一になることです。

「モダンで見やすい会社サイトを作って」とだけ頼むと、AIは一般的なパターンで不足情報を補います。結果として、ヒーロー、数値カード、サービスカード、事例カード、FAQという安全な構成になりやすくなります。

先に、誰が何を判断するページか、最初に伝える一つ、比較する項目、最後に取る行動を決めます。見た目の形容詞より情報設計を渡します。

背景、枠、影、角丸をすべての要素へ付けると、視覚的な区切りが増えます。利用者は一枚ずつ独立情報として読み、ページ全体の流れをつかみにくくなります。

余白、見出し、文字サイズ、配置だけでもグループは作れます。枠を外しても関係が伝わるかを確認します。

ダミーテキストでは、すべてのカードが同じ長さできれいに揃います。本番のサービス名、説明、注意事項を入れると、高さのばらつきやボタン位置の不自然さが現れます。

AIへ実データを渡す場合は機密情報や個人情報を除きます。代表的な長文・短文を使い、スマートフォンで並び順を確認します。

カード中心の案、文章中心の案、写真中心の案など、明確に違う制約で複数案を出し、目的に合う部分を比較します。「もっとおしゃれに」の反復だけでは、装飾が増えても構造は変わりません。

最終判断はブランド、既存サイト、更新担当者の扱いやすさ、アクセシビリティ、表示速度まで含めて人が行います。

画面を見せずに「誰が、何を知り、何を比較し、どこへ進むか」を説明できるか確認します。説明できなければ、カードの数を調整する前に情報の順番を見直します。

AIによる制作速度を活かしつつ、会社固有の実績、写真、言葉、判断基準を人が加えることで、一般的な寄せ集めから離れられます。

AIがカードを多用するのは、繰り返しやレスポンシブ対応に便利だからです。カードを禁止するのではなく、情報の優先順位と関係に合う箇所だけで使い、実際の文章とスマートフォンで検証します。