生成ではなく、デザインを。AIから完成度の高いデザインを引き出す方法

AIが作ったページは、遠くからでもすぐに分かります。見出しには紫のグラデーション、その上に小さなキラキラバッジ、下にはボタンが2つ。そして、絵文字が1つずつ入ったカードが横に並んでいます。

しかも、プロンプトを工夫しても消えません。詳しいプロンプトや、しっかりしたブリーフを渡しても、グラデーションもキラキラもカードのグリッドも戻ってきます。システムに沿わない余白、基準を満たさないコントラスト、確認されないままの基本も一緒にです。これは、厳密に言えばAIのせいではありません。AIはこれまで見てきたあらゆるページの平均から作ります。プロンプトがどれだけ良くても、その平均から離れられる距離には限りがあるのです。

私はいま、自分が作るもののほとんどを、AIに指示してデザインし、実装させています。本番環境にリリースするクライアントワークも含めてです。この1年で分かったのは、AIからリリースできる品質のデザインを引き出すには、良いデザインにずっと必要だったものと同じものが要る、ということです。この記事では、小さなテストを題材に、その一つひとつを順に紹介します。

私が実際に進める順番で並べると、こうなります。

注目されがちなのはAIのクセですが、それは8つのステップのうちの1つにすぎません。ここからは、同じ小さなテストを使って、各ステップを順に見ていきます。

まず、架空のプロダクトを考えました。フリーランス向けの週間計画アプリ、Marginです。そしてAIに、このプロダクトのためのものを3つ作らせました。ランディングページ、6枚のピッチ資料、そしてあるチームがプロジェクトでAIをどう使ったかを伝える社内ページです（いまや多くの人が、四半期ごとにAIで作っているような社内向けの報告です）。

それぞれに、3つのバージョンがあります。

1. 生成版。新しいAIセッションが作ったままのもの。作られたあとは一切手を加えていません。出発点は「フリーランス向けの週間計画アプリ、Marginのランディングページを作って」のような短い説明です。プロンプトを長くしても、変わるのは主に中身で、見た目ではありません。詳しいブリーフがある実際のプロジェクトでも、同じ種類のクセは出てきます。
2. クリーンアップ版。同じページ、同じ色、同じレイアウトのまま、AIのクセを見つけて直したもの。
3. デザイン版。同じ方向性を、さらに先まで進めたもの。プロダクトから得たアイデア、実際のリファレンス、デザインシステム、そして私のデザインスキルキットを使っています。

ランディングページのヒーロー、3段階の比較

同じプロダクト、出発点は同じ短い説明です。生成版のページは実際に動きます。AIのクセを1つずつ直してみてください。

見た目のクセ 文章のクセ 架空の事実

1と2の差は、半日あれば直せる範囲です。2と3の差が、この記事の残りの部分です。

ブリーフで確実に防げる問題が1つあります。架空の事実です。情報がないところを、AIは空白のままにしません。勝手に埋めてしまうのです。

ランディングページには「Free for 14 days, no credit card required」（14日間無料、クレジットカード不要）とありました。ピッチ資料の冒頭は「68% of freelancers regularly overbook their week」（フリーランスの68%が、日常的に予定を詰め込みすぎている）と「9 hours lost weekly」（毎週9時間を失っている）。社内ページには「35% faster」「40% fewer bugs」とあります。どれも根拠はありません。いちばん分かりやすいのが料金です。ランディングページではProプランが月9ドル、同じ説明から作ったピッチ資料では月12ドル。どちらもAIが作った数字なので、お互いに一致すらしていません。

解決策はブリーフです。長くなくて構いません。私のブリーフは、たいてい7行です。

1. 誰のためのものか
2. そのページがやるべきこと（3〜5個、優先順に）
3. 見た人に取ってほしい、ただ1つの行動
4. トーン（例文を1つ添えて）
5. 色と書体（決まっていれば）
6. 避けたいこと、とその理由
7. 何をもって「完成」とするか（スマホで使える、すべての数字に出典がある、など）

ページの役割をはっきりさせておくのも効果的です。Impeccableというデザインスキルを作っているチームは、ページを目的で4つに分けています。説得する、操作する、読む、体験する。ランディングページは説得するもの、ダッシュボードは操作するもの、レポートは読むものです。それぞれに必要なデザインは違うので、最初にどれなのかを伝えておけば、AIが毎回同じテンプレートに頼るのを防げます。

ブランドガイドラインがあるなら、それも渡しましょう。なければ、作り始める前に基本だけ決めておきます。役割を1つずつ持たせた2〜3色、見出し用と本文用の書体、そして自分らしい言葉づかいの例文を1つです。

ブリーフがあれば、AIが事実を作り上げるのは防げます。でも、見た目までは防げません。しっかりしたブリーフを渡しても、AIは同じグラデーション、同じカードのグリッド、同じ中央揃えのヒーローに手を伸ばし、誰にも頼まれていないチェックは飛ばしてしまいます。そのための残り7つのステップです。

AIは、見てきたものすべてを平均します。リファレンスは、AIをその平均から引き離すための手段です。

見た目に関わるものを作り始める前に、私はリファレンスを2〜3個集め、それぞれから何がほしいのかを言葉にします。「これみたいにして」ではなく、「レイアウトのリズムはこれ、文字はあれ、落ち着いた雰囲気は3つ目から」というように。

私がよく見るのは、次のような場所です。

• DribbbleとBehance：ビジュアルの完成度やタイポグラフィの参考に
• Mobbin：リリース済みのアプリの、実際の画面やフロー（見た目だけでなく、ちゃんと使えるものにする必要があるときに便利です）
• Land-book、Godly、Awwwards：Webサイトの参考に
• PinterestやAre.na：ムードボードに
• 自分が実際に使っていて、良いと思っているプロダクト

言葉で説明するより、スクリーンショットを見せるほうがうまくいきます。Hallmarkというデザインスキルには、まさにこの考え方に基づいたモードがあります。リファレンスを渡すと、ピクセルではなく構造（ページがどう組み立てられているか）を読み取るのです。リファレンスはこう使うのが正解です。借りるのはデザインそのものではなく、判断です。1つの元ネタだけを渡して、そのコピーを頼むのは絶対にやめましょう。

最初に出てくるアイデアは、平均的なアイデアです。だから私は、まず3つの方向性をそれぞれ数行で書き出してもらい、理由をつけて1つを選びます。

Marginのデザイン版では、次の3つでした。

• Measured margin（余白を測る）：週の予定表をヒーローにして、空いている時間をすべて、建築図面のクリアランスのように寸法で示す
• Marginalia（余白の書き込み）：日曜日の振り返りの回答をページの余白に置き、それぞれを、その回答をもとに組んだ曜日とつなげる
• Room to breathe（ひと息つける余白）：最初は予定がぎっしり詰まった週を見せ、ブロックが離れていくと、その間の空き時間が見えてくる

3つとも、白とインディゴという同じ方向性は保っています。私が選んだのはMeasured marginです。プロダクトが約束していることを、ひと目で分かる形にしてくれるからです。日ごとに、どれだけ余裕が残っているか。

かかるのは10分ほど。それでいて、ページを「悪くない」から「アイデアのあるもの」に変えてくれることがいちばん多いのが、このステップです。

デザインシステムというと、大企業のもののように聞こえるかもしれません。でもAIとの仕事では、小さなデザインシステムこそ、書き出しておくものの中でいちばん役に立ちます。

• 色。それぞれに役割をつけて（背景、テキスト、唯一のアクセント、控えめなセカンダリー）
• 文字サイズのスケール。20段階ではなく、5〜6段階
• 余白のスケール。間隔がばらばらにならないように
• 角丸は1種類
• 見直したいデフォルトの短いリストと、それぞれの理由

プロンプトの中に書くだけでなく、ファイルとして書き出しておきましょう。そうすれば、どの画面も、どの新しいセッションも同じルールに従います。そうしないと、新しいページを作るたびに少しずつずれていき、10ページも作るころには何も揃っていません。

ブランドガイドラインを置くのもここです。以前は最後の項目を「禁止リスト」と呼んでいましたが、デザインに「絶対禁止」はありません。グラデーションがぴったりはまる場面もあります。でも、AIがいつも使いたがるからという理由で、見出しにグラデーション文字を入れるのは違います。だから、どのルールにも理由と、使ってよい場所を添えます。私のリストは、グラデーション文字、アイコン代わりの絵文字、何でもカードで囲むこと、から始まります。本当の意味で「絶対禁止」なのは、誰からも渡されていない数字だけです。

クリーンアップ版：クセはないが、個性もない拡大して見る：クリーンアップ版の社内ページ

ガイドラインを適用拡大して見る：ガイドラインを適用した社内ページ

実際にやってみると、こうなります。テストで作ったクリーンアップ版の社内ページに、架空の会社wrenfoldの1ページのブランドガイドラインを渡しました。セクションも文言も、「Figure to add」（数字は追って記入）の空欄も同じです。変わったところはすべて、ガイドラインのどこかのルールにさかのぼれます。色と書体は最初の2セクションから。文頭だけを大文字にする見出しは、トーンのルールから。そして蛍光ペンのような黄色。この色の役割はただ1つ、まだ人の手が必要な箇所に印をつけることです。

AIのクセを取り除けば、ページはニュートラルになります。理由つきのガイドラインがあって初めて、それが自分たちのものになります。

ここからが、誰もが最初に気づく部分です。生成版を、私のデザインスキルキットにかけました。キットには、まさにこの問題のために作られたオープンソースのスキルHallmarkとImpeccable、そして私自身のUIレビューのルールが入っています。これらを合わせて、3つのページから32種類のクセが見つかりました。

ランディングページでは、こんなふうに現れます。スクリーンショットには番号がふってあり、右側にその説明があります。

スクロールする前のランディングページ。クセは7つ。6つは見た目のクセで、1つはトライアル条件という架空の事実（5）です。

拡大して見る：生成版のランディングページに印をつけたもの

その続き。ユーザーがいないプロダクトに、ユーザー数（1）とロゴの壁（2）。その下に同じ形のカードのグリッド（6）。

拡大して見る：実績に見えて、実績ではない

クセは、上の動く見本と同じ3種類に分けられます。

見た目のクセ。見覚えのあるものも多いはずです。

• グラデーション文字。キーワードに、紫からピンクへのグラデーション。Hallmarkは、紫のグラデーションを使ったヒーローを、最もよく知られたAIの見た目だとしています。
• キラキラの「New」ピル。見出しの上にある「✨ New: AI-powered」。ページの中で二度と触れられない機能のためのものです。
• ボタンが2つの、中央揃えのヒーロー。ピル、中央揃えの大きな見出し、メインのボタンともう1つのボタン。テンプレートがまるごと1ブロックに収まっています。
• 偽のブラウザ枠。作り物のスクリーンショットのまわりに描かれた、色付きの3つの丸。
• アイコン代わりの絵文字。デバイスごとに見た目が変わりますし、誰もアイコンセットを選ばなかったことが、見る人に伝わってしまいます。
• 同じ形のカードのグリッド。同じ大きさの箱に、アイコン、見出し、1行の説明。ただのリストまで箱に入れられます。
• 虹色のサイドライン。箱の側面に入った色付きのライン。何の意味もない5色で。
• お決まりのナビゲーション。左にロゴ、真ん中にリンク、右にボタン。
• どのセクションにもある小見出し。「FEATURES」のような小さな大文字のラベルが、すぐ下の見出しを繰り返しています。
• ルール同士が噛み合っていない。角丸と余白がそれぞれ別のロジックで決まっている。影が薄すぎて、セクションの境目が分からない。アクセントカラーが何色もあるのに、どれをいつ使うかのルールがない。

コピーのクセ。マーケティングらしく聞こえて、何も言っていない言葉。「Take back your week.」「Everything you need to run your week like a business.」「Faster, smarter, more creative.」

架空の事実。AIに渡していない情報すべて。14日間の無料トライアル、「Trusted by 12,000+ freelancers」、架空の会社が並ぶロゴの壁、NotionやStripeとの連携、そしてすべての統計です。

スキャナーで見つかるのは、この一部だけです。スキャナーは、グラデーション文字や色付きのラインのような、コードに現れる見た目のクセを見つけるのは得意です。でも、絵文字アイコン、キラキラのピル、架空の事実を見つけるには、ルールを知っている人がページを見る必要があります。

いちばん害が大きいのは、架空の事実です。グラデーションはページをありきたりに見せるだけですが、偽の統計はページを間違ったものにします。しかも完成しているように見えるので、そのまま世に出てしまいます。社内ページとピッチ資料は、架空の事実だらけです。

社内ページ。4つの数字は、どれも測ったものではありません（7）。数字はグラデーション（5）、その上には絵文字のアイコン（6）。

拡大して見る：社内ページに印をつけたもの

その続き。誰も測っていない成果（2）と、誰も言っていない引用（7）。箇条書きには絵文字（5）。

拡大して見る：社内ページの続き

スライド2拡大して見る：生成版のピッチ資料、スライド2

スライド4拡大して見る：生成版のピッチ資料、スライド4

スライド6拡大して見る：生成版のピッチ資料、スライド6

クセだけを取り除き、ほかは何も変えなくても、その多くは解決します。架空の数字はなくなり、数字の枠には「Figure to add」と書かれています。社内レポートに載せるべき正しい数字は、チームが実際に測った数字だからです。

Before拡大して見る：社内ページのBefore

After拡大して見る：社内ページのAfter

Before拡大して見る：スライド2のBefore

After拡大して見る：スライド2のAfter

AIのクセを取り除くのは、ページに「あってはいけないもの」の話です。基本は、誰が作ったかにかかわらず、良いページなら必ず備えているものです。

• 目を引くのは1つだけ。どの画面にも、最初に見るべきものがはっきりあり、メインのアクションは1つ。すべてのブロックが同じ重さだと、どこを見ればいいのか誰にも分かりません。
• 分かりやすい構造。ラベルは、その先に何があるかを表している。関連するものは近くにまとまっている。どこにもつながらないリンクはない（生成版のランディングページには、そういうリンクが8つありました）。
• 読めるコントラスト。Webアクセシビリティの基準であるWCAG 2.2では、テキストと背景のコントラスト比を4.5:1以上（大きな文字は3:1以上）にするよう求めています。生成版のランディングページは29か所でこれを満たしておらず、メインボタンの白い文字も4.47:1でした。ぱっと見では問題なさそうでも、基準を満たしていないことに変わりはありません。
• マウスなしでも使える。フォーカス状態が見える。フォームの入力欄には、プレースホルダーだけでなく本物のラベルがある。画像には代替テキストがある。そして、ボタンを無効にするなら、その理由を示す。
• タップする対象が十分に大きい。WCAGの最小ターゲットサイズは24×24ピクセルです。Appleのガイドラインでは44×44ポイント、GoogleのMaterial Designでは48×48。スマホで使われるなら、親指に合わせてデザインしましょう。
• 小さなスマホでも横スクロールしない。幅320ピクセルで確認しましょう。

どれも新しい話ではありません。そこがポイントです。AIはわざと基本を飛ばしているわけではありません。確認するよう仕向けられない限り、確認しないだけです。だから私のスキルでは、これらのルールを、AIが覚えていれば使うヒントとしてではなく、必ず実行するチェックとして組み込んでいます。

ここからは、少し耳の痛い話です。クリーンアップ版は良くなっていますが、それでもテンプレートのように見えます。クセを取り除けば、きれいにはなります。でも、オリジナルにはなりません。

クリーンアップ版拡大して見る：クリーンアップ版

デザイン版拡大して見る：デザイン版

デザイン版を「デザインされている」と感じさせたもの：

• 題材から生まれたアイデア。Marginは1週間に余白を残すためのアプリなので、ヒーローでそれを見せています。週の中の空き時間をすべて、建築図面のクリアランスのように寸法で示しました。
• モックアップではなく、本物のプロダクト。サイドバー、操作部品、2つの小さなパネルを備えた、本物らしいアプリのウィンドウ。同じサンプルの週から作っています。偽のブラウザ枠も、作り物のダッシュボードもありません。
• 意図のある書体の組み合わせ。見出しとインターフェースには個性のあるグロテスク体、時刻と金額にだけ等幅フォント。
• 意図したバランス。巨大なスクリーンショットの上に中央揃えの見出しを積むのではなく、テキストとプロダクトを対等に横並びにしています。
• 本物のコンテンツ。数字はすべて、サンプルの週から取ったもの。作った数字はありません。
• 引き算。Hallmark自身の原則が、うまく言い表しています。「the strongest fail-state is silence」。迷ったら、入れない。

ツールについて、ひと言。私自身が頼っているからこそ、書いておきます。HallmarkとImpeccableは、AIのクセを見つけ、防ぎ、直すのがとても得意で、私の仕事の進め方の大きな部分を占めています。でも、クセを取り除くのは8つのステップのうちの1つです。すべてのチェックを通過しても、ほかのたくさんのページと似たようなページになることはあります。本当にデザインされたと言えるものにたどり着くには、このリストの残りが必要です。ブリーフ、リファレンス、方向性、システム、そして自分と題材から生まれるアイデアです。

最後のステップは、いちばん飛ばされがちなものです。作り終えたら、新しいセッションで、同じルールに照らしてレビューします。誰か別の人が作ったものとして見るのです。そのうえで、最終的な判断は自分で下します。

ここは、自分のテストについて正直に書いておきます。このテストのレビューは、変更を加えたのと同じAIセッションが行ったもので、つまりセルフレビューです。私のプロセスでは、リリースするものにはそれでは不十分だとしていて、実際に不十分です。別のセッションや人による新しい目でのレビューは、作り手には見えないものを見つけてくれます。

そして、最終的な判断はやはりあなたのものです。AIはコントラストや余白、クセのリストをチェックできます。でも、そのページが届けたい相手にとってしっくりくるかどうかは判断できません。それはセンスの問題で、センスこそが仕事です。

ここまでの内容は、すべて私のデザインスキルキットで回しています。方向性、デザインシステム、構築、レビュー、情報設計、そしてHallmarkとImpeccableによるAIのクセのチェックをカバーする、11のスキルです。そのまわりをデザインハーネスが囲んでいて、ブリーフ、システム、ルールが、私が思い出したときだけでなく、毎回適用されるようになっています。どちらも公開に向けて準備中で、公開したらこのサイトで紹介します。

1. 誰のためのものか：
2. やるべきこと（優先順に）：
3. 取ってほしい行動（1つ）：
4. トーン（＋例文1つ）：
5. 色と書体：
6. 避けたいこと（とその理由）：
7. 完成の条件：