STERFIELD

AIのデザインに「軸」を先に渡すと何が変わるのか Claude Design で検証してみました

AIのデザインに「軸」を先に渡すと何が変わるのか Claude Design で検証してみました

はじめに

Claude Design や Gemini の Canvas によって、数日〜数週間かかっていたプロトタイプ作成が数時間で終わるようになりました。
一方で、AIが作ったデザインには手癖のようなものがあり、「前に見たデザイン」になることは、使ったことのある方なら感じているのではないでしょうか。

とはいえ「だからAIには任せられない」では済まない時代です。そこで正面から向き合って検証してみました。
この記事で扱うのは、デザインを始める前に何を決めておくかです。配色やレイアウトの指示の書き方の話ではありません。

先に結論だけ書いておきます。

  • 要望リストだけを渡すと、AIは毎回ほぼ同じ骨格を出してくる
  • 「この案件では何を採らないか」を先に決めて渡すと、構成も、判断に使う言葉も変わる
  • ただし変わるのは判断の層だけで、配色や装飾の手癖は軸では落ちない

なぜ「前に見たデザイン」になるのか

指示が曖昧なら、AIは最も安定して評価されてきたパターンを出すしかありません。
違うユーザーが違う案件で頼んでも、似たところに行き着く。作り込むほど平均に寄っていく。

これは駆け出しの頃を思い出させます。引き出しが少ないと、要件が違っても以前褒められたデザインを繰り返してしまう。
だとすれば対処法は「引き出しを増やすこと」、つまり参考事例をたくさん渡せばいい。私も最初はそう考えていました。

ところが、ベテランほど引きずられる

デザイン研究に「デザイン固着(design fixation)」というテーマがあります。
発想の前に参考例を見せると、その特徴に引っ張られて発想の幅が狭くなる現象です。
そして意外なことに、ベテランのほうが初心者より強く固着すると報告されています。
アイデアの総数自体はベテランのほうが多いのですが、それは引き出しが大きいぶん、固着したままでも数を出せるからだ、という説明でした。

「引き出しを増やせばいい」という見立ては、ここで崩れます。
経験は、放っておけば固着の材料にもなる。前の出力を土台にするほど平均に寄るAIと、同じ構造です。

優秀なデザイナーは、先に軸を立てている

では何が違うのか。調べた中でいちばん腑に落ちたのが、1979年の建築設計の研究でした。
Jane Darke「The primary generator and the design process」という論文です。

Darke が建築家にインタビューしてわかったのは、当時の教科書どおりの「要件をすべて洗い出してから解に進む」進め方を、誰もしていなかったことでした。
実際の建築家は、ごく早い段階で少数の主観的な目標を自分で決め、それを起点に設計していました。
この起点を Darke は primary generator(主要な生成子)と名づけています。
言い換えれば「建築家が自らに課す、大まかな初期目標。合理性の産物というより、価値判断」です。

大事なのは、その役割が方向づけではなく絞り込みにあることです。
デザイナーは要因を網羅的に並べません。取りうる解の幅を減らす方法を、先に見つけている。
情報が足りないから決められないのではありません。決めることで、何を調べるべきかが決まる。

そして軸があると、迷ったときの戻り先ができます。
AIとの往復で平均に流されるのは、この戻り先がないからではないか。これが今回の出発点です。
なお、ここで固定するのは判断基準であって、ビジュアルの型ではありません。型を固定してしまうと、合わない案件で破綻します。

先行事例は、そろって「方向づけ」の話だった

「AIっぽさ」を抜く方法は、すでにいろいろ試されています。

このうち禁止リストについては、気になる研究があります。
もともと出やすい語ほど、禁止しても効かないというもので、失敗の大半は「禁止語を名指ししたこと自体が、その語を呼び起こしてしまう」ケースでした。
デザインに引き写すなら、一番やめてほしいクセほど禁止が効かないということになります。

そして並べてみて気づいたのは、どれも「こうしろ」を伝える手段だということでした。
禁止リストも、AIのクセを名指しして止めるための道具です。案件の側から何かを捨てているわけではありません。
Claude Design が着手前に聞いてくるのも「全体の見た目・差し色・書体」で、
「誰に向けた店か」「何をやらないか」は聞いてきません。

一方 Darke の primary generator は、案件の側から解の幅を減らすものでした。向いている先が違います。
そこを試した記事は、探した範囲では見当たりません。だったら自分で試すしかない、というのが今回です。

検証の設計

お題は「創業100年の和菓子店のコーポレートサイト トップページ」。
条件を2つ用意して、同じお題を作らせます。

渡したもの
条件Aクライアントの要望リスト12項目だけ(=載せる選択肢だけを渡す)
条件B同じ要望リスト + この案件の軸 + 採らない選択肢(=切り捨て)

条件Aは、ふだんAIにデザインを頼むときの状態です。
条件Bはそこに、Darke の言う primary generator(先に決めて、解の幅を減らすためのもの)を足します。

渡す素材はまったく同じで、違いは軸と切り捨ての有無だけにしました。

要望リストは、クライアントから最初に出てくるような「載せたいことの羅列」12項目にしました。
これを情報設計に落とすのはデザイナーの仕事なので、その仕事をAIにさせたときに軸が効くかを見る形になります。
素材づくりでは、次の3点を両条件に揃えました。

  • 並び順が構成を示唆しないよう「順不同」と明記する
  • 「全部使わなくていい」と伝える
  • 切り捨てる対象をあらかじめリストに含めておく(入力になければ、切り捨ては空振りします)

着手前の確認画面は、両条件とも「Decide for me」でAIに決めさせています。

条件Bで追加したもの

条件Aのプロンプトに、次のブロックを挿入しただけです。他は一字一句同じにしてあります。

1【この案件の軸】 2この店は「新規客の発見」ではなく「常連の時間」を売っている。 3 4以下は、この軸に照らして、この案件では採らないと決めた選択肢です。 5・「はじめての方へ」的な導線は作らない(常連に向けているため) 6・写真で味の魅力を訴求しない(味はすでに知られているため) 7・季節商品を主役にしない(通年の定番が中心のため)

Darke に倣って少数にとどめ、価値判断として書きました。色もフォントもレイアウトも指定していません。
採らない3項目には、それぞれ要望リストの中に対応する項目(2番・7番・5番)があります。

実際に投げたプロンプト全文
1創業100年の和菓子店のコーポレートサイト トップページを作ってください。 2 3・目的:来店促進と、店の由来を知ってもらうこと 4・読者:地元の40〜70代。既存のお客様が中心 5 6【クライアントからの要望・順不同】 71. 定番の最中と羊羹(それぞれの味の説明) 82. はじめての方におすすめのセットを紹介したい 93. 営業時間・定休日・電話番号 104. 職人が手作業で作っている様子 115. 季節の生菓子(春の桜餅、秋の栗きんとん) 126. 創業100年、四代続いていること 137. 和菓子の断面がわかる写真を大きく載せたい 148. 最寄駅からのアクセスと地図 159. 店主のあいさつ 1610. 地元紙とテレビの取材歴 1711. オンラインショップへのリンク 1812. 贈答用の包装に対応していること 19 20(条件Bのみ、ここに【この案件の軸】ブロックを挿入) 21 22すべての要望を使う必要はありません。取捨選択して構いません。 23セクション構成は自由に決めてください。 24デザインの前に、どの要望を採用し、どれを採用しなかったかを説明してください。

最後の「説明してください」は結果の解釈のために入れたもので、両条件に同じ文言で入れています。

確かめたい仮説

条件A・条件Bとも4回ずつ、毎回新規プロジェクトから生成しました。
うち3回は続けて実施し、4回目は後述する往復検証の起点として、日を改めて同じプロンプトで生成したものです。
選び直しはしていないので、以降の集計には4回すべてを含めています。

仮説は、素朴な予想の逆です。
普通に考えれば、軸を渡した条件Bのほうが出力は固定されるはずです。
ところが Darke が正しいなら、軸のない条件Aこそ毎回AIの平均に落ちて互いに似てくるはず。
つまり「軸は出力を縛るのではなく、縛りを解く」のではないか。

結果

条件A(要望リストだけ):毎回、同じ骨格でした

条件Aの出力(全4回)

ヘッダー → 短い一文+句点のコピー+大きな画像 → 店主あいさつ → 定番(2カラム)→
季節の生菓子(2〜3カラム)→ 濃色の全幅ブロック(職人の手仕事)→ 詰合せ・贈答 → アクセス → フッター

検証前に、こんなワイヤーを描いておきました。

検証前に描いた予想ワイヤー

結果は、「お知らせ」以外はほぼ予想どおりです。
予想外だったのは、濃色の全幅ブロックが毎回出たことです。
商品紹介のあとに墨色〜濃茶の帯を挟んで職人の手仕事を語る。色の指示は一言もしていません。
数字の扱いも共通でした。「100年/四代」「1926/四代/毎朝」、あるいは年表。
「数字を見せて」とは書いていません。しかもその年表は、渡していない年号を勝手に作っています。

この記事では以上を「AIらしさ」と呼びます。
濃色の反転ブロック・数値タイル・短い一文+句点のコピー・生成り地+濃茶の配色の4つです。

条件B(軸と切り捨てを追加):構成そのものが変わりました

条件Bの出力(全4回)

ヘッダー(営業時間を常設)→ コピー+画像 → 店主より → 定番の二品(通年であることを明示)→
つくり方 → 今月の生菓子(1〜2行)→ 贈りもの → 店のご案内 → フッター

定番が前に出て、あいさつが後ろに下がりました。「常連の時間を売る」なら、まず商品、という順序です。
見出しの言葉も「その時期だけの菓子」「営業時間とアクセス」から、
「通年でおつくりしているもの」「つくり方は変えていません」「店のご案内」に変わりました。

切り捨てた3項目はどうなったか

感覚で語らずに済むよう、どの要望が採用され、どれが落ちたかを数えました。

条件A条件B
2. はじめての方へ不採用は 1/4。他は単独のCTAブロックで強調不採用 4/4。贈答の文脈へ吸収
7. 断面写真を大きく4/4 採用。1案はコピーごと断面が主役主役としての採用は 0/4。製法の記録に用途変更
5. 季節の生菓子4/4 専用セクション+商品カード2〜3点4/4 1〜2行の告知に降格

一方、「AIらしさ」は期待したほど消えませんでした。

条件A条件B
濃色の反転ブロック4/42/4
数値タイル・年表3/42/4
短い一文+句点のコピー4/44/4
生成り地+濃茶の配色4/44/4

コピーの型と配色は、まったく動きませんでした。
軸は手癖の層までは届いていません。

要望にないものが、条件Bの4案すべてに生まれました

  • ヘッダーに「九時 — 十八時/火曜定休」を常設
  • 最上部の帯に「※ 本日は定休日です 8月19日(水)」、コピーに「四代目が、今日も店におります。」
  • コピー下に「本日も店を開けております。お近くにお越しの際は、どうぞ。」
  • 説明文の末尾に「今日もいつもの通りに店を開けております。」

「今日の店の状態」は要望12項目のどこにも書いていません。軸から演繹されて生まれた要素です。
条件Aで増えたのは数値タイルと架空の年表、つまり手癖由来でした。増え方の性格が逆になっています。

ただし2つ目は、帯の「定休日です」とコピーの「今日も店におります」が噛み合っていません。軸から要素を生やすところまではできても、生えた要素どうしの整合までは見ていないようです。

判断の言葉そのものが入れ替わっていました

出力に採否の説明をさせていたのですが、読み比べていちばん驚いたのがここです。

条件Aの語彙条件Bの語彙
信頼と価値づけ
来店動機として最も強い
「今行く理由」を作る
権威づけ
主導線を分散させたくない
常連が買い続けているもの
店の人格
宣伝ではなく製法の記録
常連は季節が来るのを待っている層
近況報告

Aはマーケティングの語彙、Bは関係性の語彙です。
同じ要望リストから、Aは「誰に何を訴求して来店させるか」を、Bは「もう来ている人にどう向き合うか」を考えている。
同じ項目の判断を並べると、いっそうはっきりします。

条件A:「『今行く理由』を作る。40〜70代の再来店動機として最も強い」→ 季節の生菓子を主役級に
条件B:「常連は季節が来るのを待っている層なので、告知としてだけ残します」→ 1行に降格

そして切り捨ては、載せる/載せないの二択ではありませんでした。

セット商品自体は、贈答・手土産の詰め合わせとして12の中で扱います
商品を捨てるのではなく、宛先を常連に変える

要望10(取材歴)も、条件Aでは独立セクションだったものが、条件Bでは年表の一行に溶けたり、
「新規客への信用ではなく常連の誇りとして小さく事実だけ」になったりしています。
格下げして文脈に統合するという、第三の処理でした。

補足検証1:確率つきで複数案を出させると

軸を書くのは手間です。軸なしで平均から離れる方法はないか、という観点でもう一つ試しました。
Verbalized Sampling という手法で、やることは
「N案出して、それぞれがどのくらい典型的か(確率)も添えて」と頼み、あえて低確率の案を選ぶだけ。
テキスト生成では多様性が1.6〜2.1倍になったと報告されていますが、デザインで試した例は見当たりませんでした。
条件Aと同じ素材で、こちらは3回。AI自身が申告した「ありがち度」がこれです。

順位1回目2回目3回目
1老舗の王道 92%和モダン王道 92%老舗王道型 92%
2モダンミニマル和 85%老舗信頼型 85%モダン和ミニマル型 78%
3職人ドキュメンタリー 55%フォト誌エディトリアル 60%歳時記型 45%
4100年年表スクロール 45%四代の年代記 35%四代年代記型 30%
5断面標本図鑑 25%暦の帳面 18%解剖図譜型 12%

1位は3回とも同じ内容で、確率まで同じ92%でした。
その説明は「和紙テクスチャ・墨文字・季節写真グリッド」。条件Aで毎回出たものと、ほぼ一致します。

つまり AIは「自分がふだん出しているものは92%ありがちだ」と自覚したうえで、それを出していた
知らないから平均を出すのではなく、聞かれなければ平均を出す。ここは正直、かなり意外でした。
4位も3回とも「年表/年代記」。引き出しは順番まで固定されているように見えます。

低確率の案でつくった結果

出力は平均からはっきり離れました。番号、細い罫線、実測風のラベル、注釈記号。
ただし軸の代わりにはなりませんでした。

条件B補足検証1
2. はじめての方へ不採用 4/43/3 採用、しかも独立セクション
7. 断面写真を大きく主役採用 0/43/3 採用。うち2回はサイトの骨格そのもの
5. 季節の生菓子4/4 1〜2行に降格3/3 セクションとして採用

1回目の説明にはこうあります。

7 断面写真を大きく → サイト全体の骨格に。ヒーローは断面の大判1枚

軸で「写真で味の魅力を訴求しない」と決めたのと真逆です。
この手法は「平均から離れること」は解決しますが、「案件に合うこと」は解決しません。
離れる方向を選んでいるのはAIであって、案件ではないからです。

ただし、5案のリスト自体は使えます(後述)。

補足検証2(参考):往復させると何が起きるか

「作り込むほど平均に寄っていく」も見ておきます。
条件A・Bを1本ずつしか回していないので、検証というより参考として読んでください。
同じプロジェクトの中で「もっと良くしてください」だけを繰り返します。情報は一切足しません。

条件Aの往復(左端が起点、右へ1回目・2回目・3回目)

条件Aの往復の推移

条件Bの往復(同じく左端が起点)

条件Bの往復の推移

条件A条件B
1回目年表が生えた年表が生えた
2回目装飾を足した(縦組み、飾り罫、背景の塗り分け)「創業 百年」の丸バッジが生えた
3回目レイアウトごと作り替えたほぼ変化なし

1回目に生えた年表は、要望リストにありません。
そして補足検証1で、AIは自分の引き出しの4位を「年表/年代記」と申告していました。
つまり「もっと良くしてください」は、AIにとって「自分の他の定番要素を足す」という意味だったようです。
条件Aの2回目に足された縦組みと飾り罫も、1位案の説明「和紙テクスチャ・墨文字」と同系統でした。

一方で、条件Bで切り捨てた3項目は3回とも復活しませんでした。
「はじめての方へ」は現れず、断面写真は中サイズのまま、季節の生菓子は1行の帯のままです。

ここから2つ読み取れます。

軸は「何を載せないか」を守り、「どう見せるか」は守らない

軸を渡した側でも、まず年表が生え、次に装飾(「創業 百年」の丸バッジ)が足されました。条件Aと同じ順番です。
軸が守るのは判断であって、見た目ではない。逆に言えば、見た目の手癖は
別の手当て(デザインシステムや

1DESIGN.md
)の仕事です。
先行事例が表層の話に偏っていたのは、そこが実際に軸では解けない領域だったから、とも読めます。

軸があると、往復が収束する

条件Aは3回目でレイアウトごと作り替えたのに対し、条件Bはほぼ動きませんでした。
戻り先の有無が出たように見えます(1本ずつの参考値なので断定はしません)。

なお冒頭で「作り込むほど平均に寄っていく」と書きましたが、そこは確認しきれていません。
3回目の作り替えは「1位案により忠実になった」とも「別案に移った」とも読めます。
はっきり言えるのは、指示を足していないのに、AIが自力で変わり続けたということ。
往復は自然には終わりません。終わらせるのは人間の判断です。

いちばん効いたのは「再現性」でした

当初の仮説「軸なしは似て、軸ありは散る」は、単純にはそうなりませんでした。条件Bの案も骨格は似ています。
ただし似ている層と散っている層が入れ替わっていました。
条件Aは骨格も中身も同じで、違うのはコピーの文言だけ。
条件Bは言っていること(通年が主役、常連への語りかけ、今日の営業状態)が揃って、
見せ方(縦組み/トップバー/年表の有無)が割れています。
散らばりの量が変わったというより、散らばる層が変わったというのが正確だと思います。

そして今回いちばん効いたのは、これでした。
条件Aのうち1案だけが、軸なしで要望2を不採用にしていたのです。

読者は「既存のお客様が中心」。新規向けの導入セットはこのページの主役にならないため、
贈答(12)と統合し「詰め合わせ・贈答」として扱います。

軸を渡していないのに、ほぼ同じ判断に到達している。それでも不採用の回数は 条件A 1/4、条件B 4/4

軸がなくても良い判断は"時々"出る。軸があると"毎回"出る。
軸の効き目は、正解を教えることではなく再現させることにありました。
ベテランでも参考例を見せられると固着する、という冒頭の話とも重なります。

実務にどう落とすか

軸は「方向づけ」ではなく「切り捨て」で書く

実際に書いてみて感じたのは、切り捨てのほうが書きやすいということでした。
「どう見せるか」は考え込んでしまいますが、「何をやらないか」はヒアリングから比較的すぐ出てきます。
禁止リストとは別物なので、分けておきます。

禁止リスト切り捨て
対象AIのクセ案件の選択肢
「クリーム色を使うな」「常連向けなので"はじめての方へ"導線は作らない」
前提AIが何を出しがちか知っている必要がある案件を理解していれば書ける

禁止リストはAIのクセを知っている人にしか書けません。切り捨ては案件を理解していれば誰でも書けます。
チームで運用するとき、この差はかなり効いてくるはずです。

DESIGN.md には、値と一緒に「理由」と「切り捨て」を書く

1#F5F0E6
とだけ書いてあるファイルからは、その色しか出てきません。
「なぜこの明度差なのか」「この案件で何を切り捨てたのか」まで書いてあれば、
次の案件で、同じ原理から違う値を導き出せます。
Google Labs の
1DESIGN.md
仕様も、YAMLにトークン、Markdown本文に「なぜ」の根拠、という構造ですし、
74件の実例を計測した記事によれば、仕様には無い「Known Gaps」が実運用の67%に定着しているそうです。

案出しはAIに、絞り込みは人間に

補足検証1の5案リストは、AIが持っている選択肢の全体像が確率つきで一覧になるという点で使えます。
上位2案は毎回ほぼ同じなので「誰でも出す案」だとわかり、下位には思いつかなかった切り口が混ざっている。
あとは軸に照らして人間が選ぶ。今回なら、常連向けという軸には3位の「歳時記型」が合いそうでした。
Darke のモデルで言えば、conjecture(仮の解)を並べさせて generator(軸)は人間が握る分担です。
同じ理屈で、参考事例を見る「前」に粗案を出すのも効きます。参考例は固着を生みやすいので、順序が結果を決めます。

往復は、こちらから打ち切る

見るのは回数ではなく、往復するたびに新しい判断材料を足せているか。足せていないなら、それは引き直しです。

⚠️ 検証の限界

  • 共通プロンプトに「読者:地元の40〜70代。既存のお客様が中心」と書いていました。実質、軸の一部を両条件に先渡ししていたことになります。設計ミスですが、結果として「読者指定だけでは4回に1回、軸を明示すると4回とも」という形になったので、そのまま報告します
  • 各条件4回、お題は1つだけです。偶然との区別はついていません。往復検証は1本ずつなので、さらに弱い参考値です
  • 条件Bのほうがプロンプトが長くなっています。「情報量が多いから結果が違った」可能性は潰せていません
  • 軸の内容も要望リストも私が書いたもので、書き方に依存します。要望リストには「捨てる対象」を意図的に仕込んでいます

それでも、同じ素材を渡して軸の有無だけを変え、どの要望が落ちたかを数える形にすれば、
「なんとなくこっちのほうが良い」よりは判断材料になると思い、この形にしました。

まとめ 〜デザイナーの仕事は「描く」から「軸を決める」へ〜

AIのデザインが「前に見たデザイン」になるのは、性能の問題というより、
軸がないまま平均を出させていることの結果でした。しかもAI自身は、それが92%ありがちだと自覚していました。
往復するほど定番が戻ってくるのも、経験を積んだデザイナーに起きる「固着」と同じ現象です。
だからこそ、1979年に建築の現場で観察された対処法(先に少数の軸を決めて、解の幅を減らす)がそのまま効いたのだと思います。

以前、弊社のフロントエンド開発の記事で「書く」から「判断する」へ役割が変わってきたという内容をご紹介しました。
デザインでも同じことが起きていて、こちらは「描く」から「軸を決める」への移行だと感じています。
形を出すコストが下がった分、何を大事にして、何を切り捨てるかを決める部分に仕事の重心が移っていく。
AIに任せられる範囲が広がるほど、その一文を書けるかどうかが効いてくるのではないでしょうか。

参考

デザイン研究

AIと創造性

実務の先行事例

Author Profile

著者近影

NINOMIYA

Webデザイナー兼コーダー出身のフロントエンド開発者です。 UXデザインやチーム開発の効率化など、勉強中です。

SHARE

合わせて読みたい