AIデザインの隙間を埋める — 非デザイナーのための判断基準ガイド

AIでデザインを作れる時代になりました。

Claude Code、Cursor、v0、Figma AI。

プロンプトを入れれば数十秒でUIが出てくる。

ランディングページもダッシュボードも、叩き台なら一瞬です。

でも「公開できる品質」かどうかは、別の話です。

作れたけど、なんかイマイチ。

どこが悪いのか説明できない。

プロンプトを変えてみても微妙に違うものが出てくるだけ。

この「生成できるのに仕上がらない」問題にぶつかっている人は、かなり多いはずです。

この記事は、「AIデザインの隙間を埋める」シリーズの全体ガイドです。

非デザイナーがデザインの品質を自分で判定できるようになるための5つの判断基準を、全体像として示します。

AIでデザインを「作れる」時代の落とし穴

数字を見ると、状況がよくわかります。

Figmaの2025年AIレポートによれば、デザイナーの78%がAIで「効率が上がった」と回答しています。

一方、「品質が向上した」と感じているのは40%のみ。この38ポイントの差が、問題の核心です。

速くはなった。

でも、良くはなっていない。

フリーランスで制作を回している僕自身、まったく同じ経験をしています。

Claude Code × Pencilで「AIデザインの隙間」を埋める実体験で書きましたが、AIデザインツールは「白紙からの立ち上げ」を消してくれる。

叩き台が30秒で出る。

これは革命です。

ただし、出てきた叩き台が80点なのか50点なのか。

どこをどう直せば90点になるのか。

そこはAIが教えてくれません。

バイブコーディングの限界を痛感した体験談でも同じ壁にぶつかりました。

コードもデザインも、AIが出したものを「評価できない」とき、人間は迷走します。

プロンプトを書き換え、色を変え、フォントをいじり、3時間後に最初とほぼ同じものが画面に残っている。

あの徒労感。

なぜ「なんかイマイチ」が起きるのか

答えはシンプルです。センスがないのではなく、判断基準がない。

「なんかダサい」「なんか違う」が言語化できないのは、何を見ればいいか知らないからです。

基準がなければ、良いも悪いも判定しようがありません。

ある分析記事では「AI時代のボトルネックはコーディングではなくテイスト（判断力）だ」と指摘されています。

生成は誰でもできる。判断できる人が足りていない。

ここに気づけるかどうかが、分水嶺です。

Figma AIが「使えない」と感じたらで詳しく書きましたが、Figma AIが使えないと感じる本当の原因は、ツールの問題ではありません。

AI出力を評価するフレームワークがない、というスキルの問題です。

「何から始めればいいかわからない」という方は、デザイン初心者が何から始めるべきかから読んでみてください。

理論でもツールでもなく「見る力」から始める、という話を書いています。

5つの判断基準 — 「なんかダサい」を言語化する軸

デザイン実装歴17年の中で、AI生成デザインをレビューするときに使っている評価軸を5つに絞りました。

この5軸で見るだけで、「なんかイマイチ」が「余白が均一すぎる」「見出しの階層が弱い」「コントラスト比が足りない」といった具体的な言葉に変わります。

軸1：余白 — 詰めすぎは不安の裏返し

AI生成デザインで最も崩れやすいポイントです。

AIは余白を均一に詰めがちです。すべてが同じ間隔で並んでいるか、全体的にぎゅっとしている。

関連する要素は近く、無関係な要素は離す。この「意図的な疎密」がコントロールできていません。

余白は「何もない空間」ではなく、情報のグルーピングを伝える構造そのものです。

4px/8pxグリッドの実装や余白設計の具体的なテクニックは、Webデザインの余白で詳しく解説しています。

軸2：階層 — 何を最初に見せたいか

ビジュアルヒエラルキーと呼ばれるものです。

「ページを開いた瞬間、どこに目が行くか」の優先順位。

AI生成UIでは、視覚的に目立つコンテナに情報密度が低い、逆に重要な情報が小さく埋もれている、という不整合が頻繁に起きます。

NN/gの研究ではこれを「Frankensteinレイアウト」と呼んでいます。

CTAボタンが他の要素に埋もれていないか。

見出しと本文のサイズ差は十分か。ここを意識するだけで、デザインの「伝わる力」が変わります。

Figma AIが「使えない」と感じたらでは、この階層の崩れを具体例付きで解説しています。

軸3：タイポグラフィ — フォントのメリハリ

フォントサイズの段階差と行間のリズムです。

AI生成デザインでは、見出しと本文のサイズ差が弱く、全体が平坦な印象になりがちです。

H1は48px、本文は16px、行間は文字サイズの1.5倍。

このくらいの差があって初めて、階層が視覚的に成立します。

フォントの種類も要注意。3種類を超えたら散漫になるサインです。

軸4：コントラスト — 読めなければ存在しない

テキストの読みやすさに直結する軸です。

81%のホームページが低コントラストテキストの問題を抱えているという調査があります。

薄いグレーの文字、画像の上に直接乗せたテキスト。

AI生成デザインも例外ではありません。

WCAG AA基準では通常テキストのコントラスト比4.5:1以上が求められます。

感覚ではなく数値で判断できる軸なので、Figmaのプラグインで一発です。

AI画像生成プロンプトのコツでは、画像生成時のコントラスト設計についても触れています。

軸5：配色 — 色に意味を持たせる

色の一貫性とバランスです。

AI生成デザインは、同じプロンプトでも配色がランダムに変わります。

メインカラー、アクセントカラー、ニュートラルカラーが体系的に使われているか。

アクセントカラーは1〜2色に絞られているか。

赤はエラー、緑は成功、のように色の意味が統一されているか。

配色は「好み」の問題に見えて、実は「ルール」の問題です。

AI画像生成プロンプトのコツでは、プロンプト段階での配色指定テクニックを解説しています。

5軸すべてを最初から覚える必要はありません。

まず「余白」と「階層」の2つだけ意識してみてください。

この2つが整うだけで、デザインの印象は劇的に変わります。

判断基準を身につけるロードマップ

「5つの軸はわかった。でもどこから手をつければ？」

このシリーズを通じて、判断基準を段階的に身につけるルートを設計しました。

Step 1：見る力を鍛える

判断基準の土台は「観察」です。良いデザインを見て、なぜ良いのかを言語化する練習から始めます。1日1サイト、3行書くだけで2週間後には目が変わっています。

デザイン初心者が何から始めるべきかで、具体的な練習法を書いています。「観測」という判断軸や判断軸を作る2つの自問も、この段階で読むと判断基準の解像度が上がります。

Step 2：ツールを選ぶ

見る力がついたら、AIデザインツールを選びます。

ツールの選択基準は「何ができるか」よりも「自分のフローに合うか」です。

Figma AIの使い方ガイドで操作方法と活用シーンを、AIデザインツール比較で各ツールの実体験ベースの比較を解説しています。

Step 3：実践する

ツールを決めたら、実際に作って判断基準で評価するサイクルを回します。

Claude Code × Pencilの実体験はAIデザインワークフローの実践ログです。

AI画像生成プロンプトのコツでプロンプト設計と後処理の判断を、Webデザインの余白で余白設計の具体手法を学べます。

Step 4：品質チェックを習慣化する

最後のステップは、5軸チェックを毎回のワークフローに組み込むことです。

Figma AIデザイン品質チェックで、5軸を使った実践的なレビュー手順を解説しています。

ここまで来れば「なんかイマイチ」は過去の話です。

シリーズ「AIデザインの隙間を埋める」全記事

このシリーズでは、AIデザインの「生成できるけど仕上がらない」問題を8つの切り口で解説しています。

気になるテーマから読んでみてください。

どこから読んでも、最終的に「判断基準を持つ」というゴールに繋がるように構成しています。

まとめ：AIは80点まで一瞬、残り20点は判断力

AIデザインツールは進化し続けています。

生成のスピードと精度は、1年前とは比べものになりません。

でも、どれだけツールが進化しても、出てきたものが「良いのか悪いのか」を判断するのは人間の仕事です。

AI時代のデザイナー生き残り戦略でも書きましたが、AIが進化するほど、人間に求められるのは「作る力」ではなく「判断する力」になっていきます。

ぶっちゃけ、生成は誰でもできる時代です。

差がつくのは判断基準を持っているかどうか。

5つの軸を体系的に、Before/Afterの改善例と一緒に深掘りしたい方のために、「Vibe Codingの落とし穴 — AI生成サイトをプロ品質に仕上げる5つの判断基準」というUdemy講座を準備中です。

言語化メソッドの考え方をデザイン領域に応用した、実践的な内容を予定しています。

まずはこの記事で全体像をつかんで、気になる軸の個別記事から読み始めてみてください。

「なんかイマイチ」を卒業する最初の一歩は、判断基準を知ることです。