Figma AIでデザインを作れるようになりました。
プロンプトを入れれば、数十秒でUIが出てきます。
でも、80点止まり。
「悪くはない。でも公開するには何か足りない」。
その感覚、ありませんか。
問題はFigma AIの性能ではありません。
生成されたデザインの品質を判断する基準が、あなたの側にないだけです。
この記事では、デザイン実装歴17年の経験から、Figma AIの出力を80点から90点に引き上げる「5軸チェックリスト」を解説します。
Figma AIで生成したデザイン、80点から先に進めない理由
AIは生成できます。
でも「良いかどうか」を判断できません。
これはFigma AIに限った話ではなく、Claude Code × Pencilの実体験記録でも痛感しました。
叩き台を出すのは一瞬。問題はその先です。
80点のデザインと90点のデザインの差は、実は微細です。
余白が8px違う。
フォントサイズの比率が甘い。
コントラスト比が0.5足りない。
こうした細部の積み重ねが「なんかダサい」を作っています。
でもAIはこの「微細な差」を意図的にコントロールしていません。
学習データから「それっぽい」値を出しているだけです。
セクション間の余白が40pxで統一されているのは、「40pxが最適」と判断したからではなく、「とりあえず動く値」を入れた結果です。
Figma AIが「使えない」と感じる本当の原因でも書きましたが、80点で止まる構造はこうなっています。
- AIが叩き台を出す（80点）
- あなたが「なんか違う」と感じる
- でも「何が違うのか」を言語化できない
- だから直しようがない
- プロンプトを変えて再生成する → また80点
このループを抜けるには、「感覚」ではなく「軸」で見る必要があります。
5軸チェックリストの全体像
自分が17年の実務で使ってきた判断基準を、5つの軸に整理しました。
Figma AIの出力を開いたら、この5つを順番に見ていきます。
軸1：余白 — 情報の「息継ぎ」を設計する
AI生成デザインで最も崩れやすいポイントです。
AIは余白を「空いたスペース」として扱います。
人間は余白を「情報のグルーピング」として読みます。ここに根本的なズレがある。
具体的に見るべきは3点です。
セクション間のマクロ余白:
セクション間が40px均一になっていたら赤信号。
ヒーローから特徴セクションに切り替わる場所と、特徴セクション内のカード間は、同じ余白であってはいけません。
前者は「話題の転換」、後者は「同じグループ内の区切り」。
余白の大小で、その違いを伝えるのが設計です。
目安として、セクション間は64〜120px、カード間は16〜32px。
要素間のミクロ余白:
見出しと本文の間が4px、本文と画像の間も4px。
数値上は余白がありますが、全部同じでは近接の原則が機能しません。
見出しと本文は近く（8px）、本文と次のブロックは遠く（24px）。この差が情報の親子関係を伝えます。
padding の統一:
同じ種類のカードなのに、padding が12px、16px、20pxとバラバラ。
AIがコンポーネントごとに独立して値を生成した結果です。
同種の要素は同じpaddingに揃える。
8pxグリッドに乗せるのが最も簡単な解決策です。
余白の詳細はWebデザインの余白設計で深掘りしています。
軸2：階層 — 「何を最初に見てほしいか」を設計する
ビジュアルヒエラルキー。
ページを開いた瞬間に、視線がどこに行くかの設計です。
AI生成UIでありがちなのが、目立つコンテナに情報密度の低いコンテンツが入り、逆に重要な情報が小さく埋もれているパターン。
NN/gはこれを「Frankensteinレイアウト」と呼んでいます。
チェックポイントは3つ。
CTAの視認性:
ページを3秒見て、CTAボタンがどこにあるか即答できますか。
できなければ階層が崩壊しています。
CTAは周囲に十分な余白を取り、背景とのコントラストを確保し、フォントウェイトを上げる。
これだけで視線の導線が変わります。
見出しの段階:
H1 → H2 → H3 → 本文のサイズ差が2pxずつ。
AIによくある「全部同じ大きさ問題」です。24px、22px、20px、18pxでは脳が階層を認識できません。
1.25倍の比率スケール（16→20→25→31px）に乗せると、一目で構造がわかります。
視線の流れ:
上から下へ、左から右へ（日本語サイトの場合）。
この流れに逆らう要素がないか。たとえば右上にデカいバナーがあると、ヒーローセクションのメッセージより先にそちらへ目が行きます。
軸3：タイポグラフィ — 読ませるための基盤
フォントの選び方と組み方の問題です。
AI生成CSSでは、bodyにsystem-ui、見出しに游ゴシック、カードタイトルにsans-serifと、フォントが3種類以上混在していることがあります。
AIがコンポーネント単位で独立にCSSを書いた結果です。
人間の目はフォントの切り替わりに敏感で、これだけで「素人っぽさ」が出ます。
チェックポイント。
フォントファミリー:
使うフォントは2種類まで。
基本は1ファミリーで統一して、ウェイト（Regular / Bold / ExtraBold）で差をつけます。
サイズスケール:
タイプスケール比1.25倍が基本。
本文16px → H3: 20px → H2: 25px → H1: 31px。
等差（2pxずつ増加）ではなく等比で設計します。
行間（line-height）:
日本語の本文は1.6〜1.8が適正。
AIが出す1.2〜1.3は英語の見出し用の値です。
漢字は密度が高いので、英語より広い行間が必要です。
これを直すだけで可読性が劇的に変わります。
軸4：コントラスト — 読めなければ存在しない
テキストの読みやすさを数値で判断できる軸です。
WebAIMの調査によれば、81%のホームページが低コントラストテキストの問題を抱えています。
AI生成デザインも例外ではありません。薄いグレー（#999）を白背景に置くと、コントラスト比は約2.8:1。WCAG AA基準（4.5:1以上）を大きく下回ります。
具体的に確認すべきポイント。
本文テキスト:
白背景なら、テキストカラーは最低でも#595959（コントラスト比7:1）以上を推奨。
#333や#374151なら安全圏です。
画像上のテキスト:
ヒーロー画像の上にテキストを置く場合、半透明オーバーレイ（rgba(0,0,0,0.5)程度）を噛ませないと、画像の明るい部分でテキストが消えます。
測定ツール:
Figmaプラグイン「Stark」やブラウザのDevTools（アクセシビリティタブ）で一発で測れます。
感覚ではなく数値で判断する。ここがプロと素人の分岐点です。
軸5：配色 — 色に「意味」と「量」を持たせる
AI生成デザインの典型パターンは「全部盛り」です。ヒーローに紫グラデーション、CTAボタンに赤、アイコンに緑、バッジにオレンジ。
8色以上が散乱します。
プロが使うのは60/30/10ルール。
- 60% ベースカラー（白、淡いグレー。背景と余白）
- 30% メインカラー（ブランドカラー。見出しやナビ）
- 10% アクセントカラー（CTAボタン、注目要素）
10%だからこそ、アクセントカラーは目立ちます。
全部アクセントにしたら、何も目立ちません。
もうひとつ。
原色をそのまま使わないこと。
#FF0000（純赤）より#DC2626（Tailwind Red-600相当）のほうが落ち着いた印象になります。
彩度を20〜30%下げるだけで「ギラギラ」が「洗練」に変わる。
AIは彩度コントロールが苦手なので、手動で調整が必要です。
実践 — Figma AIの出力を5軸で改善した実例
先日、フリーランス案件のLPをFigma AIで叩き出しました。
出力そのままでは「まあ、悪くない」程度。ここから5軸チェックで修正した過程を書きます。
余白の修正:
セクション間が一律48pxだったのを、ヒーロー→特徴セクション間を96px、特徴セクション内のカード間を24pxに変更。
これだけで情報の塊感が消えて、「読み進められるLP」になりました。所要時間3分。
階層の修正:
CTAボタンが特徴セクションのカード群に埋もれていました。
ボタンの上下に40pxの余白を追加し、フォントサイズを14px→16pxに、ウェイトをMedium→Boldに変更。背景色と文字色のコントラスト比を4.2:1→7:1に引き上げ。
CTAが「浮き上がる」ようになりました。
タイポグラフィの修正:
フォントがsystem-uiと游ゴシックで混在していたので、Noto Sans JP一本に統一。
H1〜H3のサイズを等差（24, 22, 20px）から比率スケール（32, 25, 20px）に変更。
行間を1.3→1.7に。「文字が読める」から「文字が読みやすい」に変わりました。
コントラストの修正:
本文テキストが#9CA3AF（淡いグレー）で、白背景に対するコントラスト比が2.9:1。
#4B5563に変更してコントラスト比5.9:1を確保。日光下のスマホでも余裕で読める水準です。
配色の修正:
7色使われていたカラーパレットを3色+グレー系に整理。
アクセントカラーをCTAボタンだけに絞りました。
アイコンやバッジの色はメインカラーのトーン違いに統一。
「カラフル」が「洗練」に変わった瞬間です。
ここまで整えたら、Figmaコンポーネント設計の実践ガイドで書いたようにコンポーネント化しておくと、次回以降の再利用が効きます。
全部合わせて30分。
バイブコーディングの限界体験で書いたように、AIに100%任せると失敗します。
でも「AIが叩き台、人間が仕上げ」のフローなら、以前の半分以下の時間でプロレベルに持っていけます。
「80点→90点」のための改善ワークフロー
5軸を一度に全部直そうとすると、手が止まります。
実際に自分が回しているのは、この4ステップの繰り返しです。
Step 1：5軸でチェックする
Figma AIの出力を開いて、5軸それぞれを1〜5で採点します。
感覚で構いません。
余白3、階層2、タイポグラフィ4、コントラスト2、配色3。
こんな感じです。
全部に完璧を求めなくていい。
「一番スコアが低い軸」を見つけるのが目的です。
Step 2：最も影響の大きい1軸を選ぶ
スコアが一番低い軸から着手します。
優先順位の目安はこの順です。
- コントラスト — 読めなければ何も伝わらない
- 階層 — どこを見ればいいかわからないと離脱する
- 余白 — 情報の構造が崩れると理解コストが上がる
- タイポグラフィ — 読みやすさと統一感に直結
- 配色 — 最後に整えると全体が締まる
Step 3：1軸だけ修正する
選んだ1軸に集中して修正します。
コントラストなら、まず全テキストのコントラスト比を測定して、4.5:1を下回る箇所を洗い出す。
それだけ。
一度に全部やろうとしないのがコツです。
Step 4：再チェックする
修正後にもう一度5軸で採点します。
1軸を直すと、連鎖的に他の軸のスコアも上がることがあります。
たとえばコントラストを上げると、結果的に階層もハッキリする。
このサイクルを2〜3回まわすと、80点のデザインが85〜90点に到達します。
100点を目指す必要はありません。
「公開できるレベル」にすることがゴールです。
まとめ：AIが生成し、人間が仕上げる
Figma AIでデザインを作る時代は来ました。
生成は速い。でも「速くなった」と「良くなった」は違います。
この記事で紹介した5軸チェック。
- 余白 — マクロとミクロを分けて設計する
- 階層 — CTAと見出しの視認性を確保する
- タイポグラフィ — フォント統一、比率スケール、行間1.6以上
- コントラスト — WCAG AA基準（4.5:1以上）を数値で確認する
- 配色 — 60/30/10ルールで色の量をコントロールする
AIは叩き台を80点まで一瞬で出してくれます。
残りの10〜20点を埋めるのは、あなたの判断力です。
その判断力さえあれば、Figma AIは最強のツールになります。
デザイン初心者が最初にやるべきことで「見る力を鍛える」と書きました。
5軸チェックはその実践版です。見る力を、チェックリストに落とし込んだもの。
この5軸すべてを体系的に学びたい方のために、「Vibe Codingの落とし穴 — AI生成サイトをプロ品質に仕上げる5つの判断基準」というUdemy講座を準備中です。
各軸の診断→処方→修正→再チェックのサイクルを、Before/Afterの実例付きで詳しく解説する予定です。
参考になれば幸いです。
