紫のグラデーションを足しても、目的は見えない。AIに画面を作らせると、整った部品が並ぶ一方で、誰に何をしてほしいページなのかが薄くなることがあります。見た目を一気に直すのではなく、目的、視線、固有の材料を順番に確認します。
最初にページの役割を一文にする
最初の確認は、色やアニメーションではありません。「初めて来た人が、料金を比較して相談を申し込むページ」のように、対象者、知りたいこと、次の行動を一文にします。ページの役割を先に固定すると、AIが提案した部品を残すか削るかを判断できます。
役割に必要ないカード、説明の重複、目立つだけのボタンは、デザインの問題に見えて実は情報設計の問題です。最初に分かることと、読み進めて分かることを分け、最初の視線を一つに絞ります。
視線の順番と情報の階層を確認する
見出し、補足、操作ボタン、詳細情報が同じ強さだと、整った画面でも読み手は迷います。見出しで約束し、短い説明で条件を示し、操作を一つ置き、必要な人だけ詳細へ進める順番を試します。
- 一番先に読む文は、ページの役割と一致しているか。
- 重要な条件が、装飾や長い説明に埋もれていないか。
- クリック後に何が起きるか、ボタンの文言から分かるか。
スマートフォン幅と大きな画面幅の両方で同じ順番に読めるかも確認します。レイアウトが変わった結果、重要な条件や次の行動が下へ隠れるなら、色を調整する前に構造を戻します。
固有の材料を一つ入れる
AIが作った画面の印象を変えるために、装飾を増やす必要はありません。ブランドの色を一つ、実際の写真を一枚、固有の言葉を一つ、または事業に合う図形のルールを一つ選びます。固有の材料を先に選ぶと、どこを残し、どこを一般的な部品から置き換えるかが明確になります。
既存サイトを参考にする場合は、レイアウトの考え方だけを観察し、文章や画像をそのまま写しません。参考にした理由を、余白、文字の大きさ、操作の順番などの観点で記録します。
デザインシステムを部品表で終わらせない
デザインシステムは、色や部品の一覧だけでなく、設計の考え方や利用方法を確認するための資料として読みます。既存のシステムを参照するときも、ページの目的、読み手、固有の材料に合わせた判断は残ります。導入しただけで、すべての画面が適切になるわけではありません。
たとえば、公共向けの画面を作るなら、デジタル庁のデザインシステムが示す原則やコンポーネントの扱いを確認し、自分のページで必要な箇所だけへ適用します。部品を増やす前に、読み手が迷う箇所を一つ選びます。
評価表で一度に一つ直す
修正前後を比べるときは、目的、視線、固有性、読みやすさ、操作の分かりやすさを5段階で仮評価します。点数は客観的な性能値ではなく、変更の理由を残すための編集メモです。一度に一つの理由だけ直すと、何が効いたかを見失いません。
タイトルの3項目は、ページの役割、視線の順番、固有の材料という「直す順番」です。評価表では、この3項目に読みやすさと操作の分かりやすさを加えた5軸で点検します。3項目と5軸を分けると、評価の対象がぶれません。
| 評価軸 | 1点の状態 | 3点の状態 | 5点の状態 | 記録例 |
|---|---|---|---|---|
| 目的 | 役割が読めない | 役割は読めるが行動が曖昧 | 対象と次の行動が一文で分かる | 料金比較から相談申込へ |
| 視線 | 情報の入口が複数ある | 重要情報が一部埋もれる | 見出しから操作まで順に読める | 見出し→条件→相談 |
| 固有性 | 一般的な部品だけ | 固有素材が一部ある | ブランドや事業の材料が伝わる | 実際の写真を1枚追加 |
| 読みやすさ | 文字や余白で読みにくい | 端末によって迷う | 画面幅が変わっても読める | スマートフォン幅で条件を確認 |
| 操作 | 押した後が分からない | 操作はできるが説明が弱い | 操作と結果が文言で分かる | ボタンを「相談を申し込む」に変更 |
まず5軸に1〜5点を付け、最も低い軸を一つだけ直します。記録例のように、点数と変更理由を同じ行へ残せば、次のAI生成でも修正前後を比較できます。
記録を残して一つずつ直す
AIの生成画面を使い始める手順を短くする考え方は、AI活用の入口を整える記事にも整理しています。便利な生成機能より、確認できる評価表を手元に残すことが先です。
自分用の画面を作るときは、個人用AIツールの範囲を決める記事のように、使う人と変更できる範囲を狭く置くとレビュー対象を整理できます。デザインの評価も、誰が何をする画面かへ戻します。
修正を依頼するときは、「もっとプロっぽく」ではなく、役割、視線、材料のどれを変えるかを指定します。変更した箇所と、変えなかった理由を一行で残せば、次の生成でも評価軸を引き継げます。
デザインシステムを確認した公式情報
2026年8月30日に、デジタル庁デザインシステムのデザインシステム説明と、利用方法の案内を確認しました。デザインシステムの原則・部品・使い方を、この記事の評価項目と照合しています。
システムの構成やガイドラインは更新されることがあります。実際の制作では最新の公式案内を読み、ページの役割と読み手に合うかを確認してから採用してください。
