AIスロップデザインはなぜ生まれる？スキル・DESIGN.md・Claude Designで脱却する方法

この回のテーマは「AIのデザインはなぜ似通ってしまうのか」です。AIでWebサイトを作れるようになった一方で、「このサイトはAIで作ったっぽい」と見抜けるようになってきた、という感覚からしぶちょーさんは話を始めます。

かねりんさんは現在Webサービスを開発中で、まさにこの問題に悩んでいると明かします。AIに「なんとかして」と頼んでも、どこかで見たようなAIプロダクト風のデザインから抜け出せないといいます。

かねりんさんはClaude Designも試したものの、出てきたものが「Claudeっぽい」と感じたそうです。しぶちょーさんは「試し方が悪いかもしれない」と応じつつ、原因と打ち手の両方を話すと宣言します。

しぶちょーさんによれば、AIっぽいデザインにはAIスロップデザインAIスロップデザイン ── AIが統計的に無難な選択を繰り返した結果、似通った没個性的なデザインが大量に作られる現象を指す俗語。「スロップ」は英語で残飯や粗悪品を意味しますという俗語がすでにあります。AI生成コンテンツがみな同じような雰囲気になってしまう現象を指す言葉です。

しぶちょーさんが挙げる典型的な特徴は、グラデーション調の配色、英語圏で定番のInterInter ── 英語圏のWebやアプリで広く使われるサンセリフ体のフォント。読みやすく汎用性が高いため、多くのサービスで採用されていますフォント、アイコン付きのカードが3枚並ぶレイアウトです。マウスを近づけると「ふわっ」と動き、縦スクロールで進み、しかも紫色のグラデーションがかかりがちだといいます。

• グラデーションっぽい色合い、特に紫系
• 英語圏で定番のフォント
• アイコン付きカードが3枚並ぶ構成
• ホバーでふわっと動く演出と縦スクロール

ただし、AIスロップデザインは品質が低いわけではありません。かねりんさんが「人間が適当に作るよりよっぽどいい」と言うように、一定の体裁は整っています。問題は、誰が作っても同じようなデザインに寄っていくことです。

文章でも同じだと気づいたかねりんさんのこの一言に、しぶちょーさんは「ほぼそれで正解」と返し、原因の解説に入ります。

1つ目の原因は、AIの仕組みそのものにあります。LLMLLM ── 大規模言語モデルの略。大量のテキストを学習し、文章の続きを予測する形で応答を生成するAIのことは、文章の流れから次に来る確率が最も高い単語を選び続けることで出力を作ります。

さらにAIの出力は、RLHFRLHF ── 人間のフィードバックによる強化学習。人が回答を評価し、その好みに沿うようにAIを調整する手法で、応答を安全で好ましい方向に寄せる効果がありますによって、人間が好む無難で安全な方向へ調整されています。しぶちょーさんは、これによってアウトプットが没個性になり、尖ったものはあまり出てこなくなると説明します。

デザインもコードで書かれるため、この傾向はそのまま表れます。誰にも嫌われない配色、誰にも驚かれないレイアウトが選ばれやすいというわけです。

2つ目の原因はAIではなくWebサイト側にある、としぶちょーさんは言います。そもそもWebサイトはどれも似通っていて、AIはそれを映し出す鏡にすぎない、という説です。

かねりんさんも、ホームボタンの位置がサイトごとにバラバラだったら困る、と型があること自体の必然性に理解を示します。

しぶちょーさんによると、Webサイトの多様性はAI以前のここ10数年で大きく減りました。WordPressのテーマやBootstrapBootstrap ── Webサイトの見た目を手早く整えられる定番のフロントエンドフレームワーク。共通の部品を使うため、似た印象のサイトが増える一因とも言われますのようなフレームワークが普及し、ゼロからHTMLとCSSを書く時代から型を選ぶ時代へ移ったためです。

しぶちょーさんが紹介したある研究では、2010年から2019年でレイアウトの多様性が44%、色の多様性が32%減ったとされています。

しぶちょーさんは、LLMが学習に使うWebデータが2011年以降のものだと話し、多様性が減った後のWebでしか学んでいないと指摘します。かつては阿部寛さんのホームページのような、カウンターや「キリ番」がある個性的なサイトもありました。

服にたとえるなら、パリコレのようなサイトはごく一部で、大半はユニクロのような普通のサイトだ、という話になります。かねりんさんは、自分のように服装にこだわるインフルエンサーのサイトがユニクロ的だと「ダサい」と思われる、と実感を語ります。

かねりんさんは少し前にX（旧Twitter）で、AIで見た目だけリッチなサイトが増えたせいで、阿部寛さんのページのようなサイトのほうが信憑性を感じる、と投稿していました。しぶちょーさんはその投稿を今回の原稿にメモしていたと明かします。

かねりんさんは、ポストに投函される平成レトロなチラシに、以前は戸惑っていたのに今はぬくもりを感じるといいます。レイアウトの概念すらなく端から端まで情報を詰めたチラシから、人が汗水垂らして作った気配が伝わるからです。

一方で、この感覚はAIに日々触れる層ならではかもしれない、と二人は話します。しぶちょーさんは、一般にはまだ画像生成を使い始めた程度の人が多く、AIが作ったサイトも「すごい」と新鮮に映るはずだと見ています。

話はフロントエンドの仕事にも及びます。しぶちょーさんは、見た目を担うフロントエンドフロントエンド ── Webサイトのうち利用者が直接見て操作する部分。これに対し、データベースや決済など裏側の処理はバックエンドと呼ばれますはAIが得意な領域になりつつあり、仕事として厳しくなる面があると語ります。

「Webデザインの仕事はなくならないのか」というかねりんさんの問いに、しぶちょーさんは簡単なものはなくなると答えます。こだわりの強いサイトや有名イベントのサイトは残っても、個人や中小企業が5万円、10万円で依頼していた層は変わっていくという見立てです。

しぶちょーさんは、ホームページ業界には、少しの変更のたびに高額を請求するビジネスモデルも多いと指摘します。数文字直すだけで10万円、しかも反映は1か月後といった契約で、ソースコードやサーバーの管理も制作側が握っているケースです。

AIを使えば若い社員が1人いるだけで自社で対応できるため、こうした仕事は単価が下がり、AIに奪われる仕事の1つになっている、としぶちょーさんは見ています。

かねりんさんは海外の事例を紹介します。Fableを使い、Webサイトのない近所の飲食店をリストアップして公開情報からサイトを作り、店に直接「月1万円でどうですか」と営業して契約を取りまくった若者がいたという話です。

しぶちょーさんはこの行動力に感心しつつ、成功率は100件回って5件程度ではないかと推測します。一方で、隣の店と同じレイアウトになっているかもしれない、とAIデザインの課題もにじませます。

年齢の話などの脱線を経て、しぶちょーさんは本題に戻ります。AIによる創造は「一人一人は勝って全体では負ける」と言われている、という話です。

創造が苦手な人はAIを使うことでアウトプットの質や量が改善します。けれど集団全体で見ると、みながAIの出力に寄っていき、似たものが大量に生まれる社会的ジレンマがあるといいます。

しぶちょーさんによれば、これは大学で小説を書かせる実験で見つかった傾向で、デザインの分野でも同じことが言えます。作り手にとっては初めてのアイデアでも、評価する側から見れば「またこのパターンか」となってしまうのです。

では、AIのアウトプットに何をすればよいのか。しぶちょーさんが挙げる解決策の1つは、作らせたいものではなく、禁止することを伝えるという発想です。

「無難なのはやめろ」では効きません。分野ごとにAIが出しがちなものはおおよそわかっているので、それを一つずつ潰す指示が必要になります。かねりんさんはこれを「いつもの道を塞ぐ」と言い表しました。

とはいえ、これを自分で全部書くのは大変です。そこでしぶちょーさんが勧めるのが、AIエージェントに読ませる手順書であるエージェントスキルエージェントスキル ── AIエージェントに特定の作業のやり方や専門知識を後から教えるための再利用可能なマニュアル。Claude Codeなどで使え、必要な場面で呼び出して使いますです。Claude CodeやCodexで使えるデザイン専用のスキルが、無数に公開されています。

しぶちょーさんは、その中でもよく使われている4つを紹介しました。

かねりんさんは最後のImpeccableを「門番」にたとえ、しぶちょーさんは、ルールで縛り、パターンを教え、引き出しを増やし、最後に審査する構成だと整理します。いずれも無料です。

注意点として、スキルは入れておくだけでは使われません。「このスキルとこのスキルでやってね」と明示的に呼び出す必要がある、としぶちょーさんは念を押します。

しぶちょーさんは、スキルの効果を比べるデモページを自作していました。架空のものづくりイベントのペライチを、同じプロンプトでSonnet 5に作らせ、スキルだけを変えて5パターンを並べたものです。

結果について、しぶちょーさんは、スキルを足すにつれてテイストは確実に変わる一方、AIらしさが完全に消えたわけではないと率直に認めています。かねりんさんからは「ガチャで違うものが出ただけでは」という疑問も出ました。

ただ、審査スキルのスコアでは、P1からP3ではAIによくあるパターンが検出され、審査を入れたP4とP5では検出されなくなっていました。弾かれた例には「クリームパレット」、つまりクリーム色の配色もあったといいます。

しぶちょーさんは、モデルの性能もデザイン性に大きく影響すると補足します。性能の高いモデルでは、スキルが効いたのかモデルがすごいのか区別できなくなるため、あえて中位のモデルで試したそうです。

次にしぶちょーさんが紹介したのが、最近話題のdesign.mdです。かねりんさんが「MDはマークダウンの拡張子」と言い当てたとおり、マークダウン形式のファイルで、しぶちょーさんによるとGoogleのチームが今年定義したものです。

claude.mdやagent.mdがプロジェクトで最初に読み込まれるルールブックであるのに対し、スキルは作業ごとのマニュアルです。design.mdは、プロダクト全体の色、フォント、雰囲気といったデザインの方針を継続的に伝える「デザインの憲法」にあたります。

しぶちょーさんのサイトなら、緑を基調に柔らかくポップにする、といった根本の方針を書く場所です。さらに、有名サイトを分析して逆算したdesign.mdを集めたカタログもあり、任天堂、Airbnb、BMW、Notion、NIKEなどの雰囲気を真似できるといいます。

「ブランドイメージのパクり放題では」というかねりんさんの疑問に、しぶちょーさんは音楽のコード進行を例に挙げます。抽象度の高いスタイルやエッセンスを取り込むのと、ソースコードをそのまま持ってくるのとは別の話だ、という考えです。

ただし、しぶちょーさん自身はdesign.mdをまだ使っていないと断ったうえで、入れて「これに従って」と指示すれば反映されるはずだと話しています。

さらに発展的な方法として、しぶちょーさんは外部ツールとの連携を紹介します。MCPMCP ── Model Context Protocolの略。AIと外部のツールやサービスをつなぐための共通規格で、「AIのUSB Type-C」とたとえられることがありますを使えば、Figmaなどのデザインサービスに作ったサイトをつなぎ、審査や変更をさせられます。

ただ、アカウント作成や利用回数の制限、費用がかかる場合があり、しぶちょーさん自身も試していないため、今回は詳しく扱いませんでした。「デザイナーじゃないと使えないのでは」というかねりんさんには、「デザイナーじゃないからこそ使う」と返しています。

design.mdを使っても似たり寄ったりになるのでは、という疑問に対しては、配置まで同じになるわけではなく色合いやフォントなど基本の概念を定義するものだ、としぶちょーさんは説明します。Appleのような引き算の美学でも統一感は大事だ、という話につながりました。

カメラのバッテリー切れというトラブルを乗り越えて、話はClaude DesignClaude Design ── 各種スキルやDESIGN.md、外部ツール連携などを裏側で統合し、デザインの探索から実装までをまとめて行えるAIネイティブな制作環境へ移ります。スキルを入れ、design.mdを書き、外部ツールにつなぐといった環境構築をせず、ツール1つで済ませるというコンセプトです。

Claude Designは、利用者にどんなデザインが欲しいかを質問し、候補を選ばせながら個性を引き出す仕組みになっています。しぶちょーさんは、自分でスキルを選ぶのが面倒な人はこれを使うだけでもAIっぽくないデザインができると勧めます。似たツールとしてGenSpark Designも悪くなかったそうです。

かねりんさんは実際にClaude Designで名刺を10案ほど作らせたところ、突飛なアイデアがたくさん出て面白かったといいます。中でも印象的だったのが、硬いブランドメッセージを黒塗りにし、一部の言葉だけを残した「社外秘」風のデザインでした。

ただ、かねりんさんは「みんなの名刺が黒塗りになるかもしれない」とも心配します。自分には初めてでも、同じものが大量に出回れば、またAIだと思われてしまうからです。しぶちょーさんは、Claude Designには必要なスキルがすでに包括されているはずだと補足しています。

しぶちょーさんは、それでもデザインの基礎はある程度学んだほうがいいと考えています。AIに的確な指示を出すためにも、見やすさとは何か、どうなるとおかしいのかというロジックを押さえておくべきだ、という理由です。

そのために勧めたのが『ノンデザイナーズデザインブック』です。かねりんさんも持っていたものの、パラパラめくっただけで章ごとの演習問題までたどり着いていなかったと明かします。

しぶちょーさんは5年ほど前に読み、2〜3回読み返したといいます。この本はおしゃれに見せるためではなく、見やすいデザインを作るための本だと位置づけます。

しぶちょーさんが基礎の話から踏み込んだのが、「デザインは結局中身だ」という主張です。かっこいいだけで何も書いていないベンチャー企業のサイトのように、魂のこもっていない言葉は読めばわかるといいます。

しぶちょーさんは、コピーライター養成講座に半年間お金を出して通っていました。目的は、人を動かす言葉を意図して作る「言葉の設計方法」を知ることだったといいます。

しぶちょーさんによれば、駅の広告のコピーはひらめきではなく設計です。誰に対してどんな仕掛けで意識をどう変えるかを考え、100個ほど案を出し、良さそうな切り口を掘っていく泥臭い作業だといいます。

講座で出た「子どもとキャンプに行きたくなるコピー」という課題で、しぶちょーさんの心を動かしたのは、20代の若い女性受講生が出した案でした。

夏という長い期間を回数に置き換えることで、子どもを連れ出せる機会は限られていると気づかせる切り口です。キャンプという言葉を使わなくても、横にキャンプ場の写真があれば親の心が動くように設計されている、としぶちょーさんは解説します。

しぶちょーさんはSNSでも、技術をどの切り口から見せるかを意識してきたそうです。講座でも若い受講生の切り口にはかなわず「難しい」と感じた一方、とにかく切り口を探す視点は身についたと振り返ります。

かねりんさんが広告を「高度な商業アート」と表現すると、しぶちょーさんは、言葉はものづくりでいう部品であり、アートとはむしろ逆だと答えます。

しぶちょーさんは、機能として設計された言葉が広告で、表現としての美しさを求める文学的なものがアートに近いと整理します。ロゴや車のデザインも工業デザインに近く、その形である理由を説明できなければならないといいます。

iPhoneの角の丸みも、手への収まりや触り心地という機能と美しさを両立させたものだ、というのがしぶちょーさんの見方です。かねりんさんは、ジョブズの美的感覚ではないかと食い下がりました。

さらにしぶちょーさんは、本田宗一郎が語ったとされる言葉として、デザインとアートの違いを紹介します。

脱線を経て、しぶちょーさんは今回の結論に戻ります。みながデザインを頑張るけれど、実際には中身のほうが大事ではないか、という問いかけです。

かねりんさんは、中身のない話をするポッドキャストほどBGMやオープニングに凝る、とたとえます。しぶちょーさんは、デザインはわかりやすく手を動かしやすいぶん、中身を考える重さから逃げたくなるのだと語ります。

しぶちょーさん自身も、プレゼンで中身やストーリーを詰めるべきなのに、細かなレイアウトやフォントの調整に逃げる自分に気づくことがあるそうです。ただし、モテにおける清潔感のように、最低限のクオリティは必要だとも付け加えます。

かねりんさんはこの考えをバケツ理論バケツ理論 ── 板を組んだ桶は、一番低い板の高さまでしか水をためられないというたとえ。全体の成果が最も弱い要素で決まることを表しますにたとえました。どこか1か所が低ければ、デザインだけ高くしても水位は上がりません。

しぶちょーさんは逆のケースにも触れます。いいものを作りながら売れずに廃業する職人は、知らせる努力という外側をサボっているのだ、という指摘です。

しぶちょーさんは、AIが作ったサイトではデザインよりキャッチコピーのほうが気になるといいます。雰囲気だけかっこいい、意味の乗っていない言葉が多いからです。

そこでしぶちょーさんが勧めるのが、ページを開いて最初に目に入るヒーローセクションのコピーを自分で考えることです。かねりんさんも、自分がなぜこれをやるのかという言葉は、そもそも他人に考えてもらうものではないと同意します。

二人は、不器用でもその人の言葉があるほうがいいと話し、冒頭のダサいチラシの話に帰結させます。しぶちょーさんは、AIが作ったものの中に自分の言葉を入れれば、そのコントラストで人間らしさが光ってくるだろうと語りました。

かねりんさんは、執筆中の本でAIに音声入力で指示したところ、言ってもいないことが書かれ、別物になって憤ったといいます。しぶちょーさんも、ぽさはあっても、その人のエッセンスが入っているかが問題だと応じました。

かねりんさんの本の話は、具体的な例に広がります。ライブ配信とポッドキャストの対比を書こうとしたら、AIは「ライブ配信は花火、ポッドキャストは焚き火」というたとえを出してきました。

両方を実際にやってきたかねりんさんが自分で考え直した結果は、まったく別のものでした。この過程は、AIの案と本人の言葉の違いとして整理できます。

お花畑は、1本では気づかれなくても千本、1万本と集まれば匂いを放ち、ミツバチが寄ってくるというたとえです。そこから「続ける設計が必要」という次の章にもつながる、とかねりんさんは話します。しぶちょーさんは、焚き火では虫が飛び込んで死んでしまいメタファーとしてよくないと笑いました。

かねりんさんは、元刑事という経歴だからこそ書ける切り口もあると語ります。取調室で被疑者の嘘に何度も騙された経験と、訓練を受けた人でも嘘の見極めは当てずっぽうと変わらないというリサーチから、「声は嘘をつけない」という通説を崩しにいくそうです。

かねりんさんは、言い回しを変えるな、消すときは許可を取れ、といった「絶対にするなリスト」を作ったといいます。しぶちょーさんは、claude.mdに憲法のように書いておけば従ってくれるはずだと助言しました。リサーチはファクトとセットで持ってこさせ、それをどう思うかは自分で書く、という使い分けにも二人は同意しています。

雑談パートでしぶちょーさんが紹介したのが、最近読んで最も衝撃を受けたという『43歳頂点論』です。冒険家が書いた本で、北極やサハラ砂漠などに挑む冒険家がなぜ命を懸けるのか、生きるとは何かを掘り下げているといいます。

しぶちょーさんの説明では、年を取ると体は衰える一方で経験は増え、そのバランスが最も取れるのが43歳だという論です。執筆時48歳の著者が、振り返って43歳が頂点だったと語っているそうです。

本の中心には、死に近づくことでしか生を実感できないのに、冒険は生還を条件とするため欲求が永遠に満たされない、という矛盾があります。しぶちょーさんは、異常者の話ではなく、どこかわかる気持ちだと語ります。

しぶちょーさんは、自分たちにとってはポッドキャストやものづくりがそれにあたると重ねます。本には、分野を理解しすぎると当たり前になり、面白い本が書けなくなるという経験のデメリットも書かれていたそうです。

最後にしぶちょーさんは、AIが代替してくれることが増えても人間は忙しくなる一方だ、と問題提起します。

しぶちょーさんの考えでは、AIが仕事を代替して世の中が豊かになっても、減った分を還元するベーシックインカムベーシックインカム ── 国や社会がすべての人に最低限の生活費を無条件で定期的に支給する制度の構想。AIによる雇用の変化とあわせて議論されることがありますのような仕組みがなければ、生活は楽になりません。

しぶちょーさんは、OpenAIはAI研究を始めた当初からベーシックインカムの研究もしていたと話し、技術が先行して経済が追いついていないと指摘します。いずれ「なんとかショック」と呼ばれるような崩壊が起きる気がする、というのがしぶちょーさんの見立てです。

まとめ

AIのデザインが似通うのは、AIが中央値を出し、さらにWeb自体が型にはまっていたからです。スキル、design.md、Claude Designで無難さは減らせますが、最後に差がつくのはヒーローのコピーのような、自分の言葉に意味を乗せられるかどうかだと二人は語りました。

• AIは次単語予測とRLHFで無難な中央値に寄り、多様性の減ったWebを学んだことでも似通ったデザインになる
• 打ち手の軸は「何を作るか」より「何を禁止するか」。4つのデザインスキルは明示的に呼び出して使う
• design.mdはプロダクト全体のデザインの憲法で、Claude Designは環境構築なしで使える全部入りのツール
• デザインは最低限整えたら中身を磨く。バケツ理論のとおり、弱い要素が全体を決める
• サイトで一番大事なヒーローのキャッチコピーは、AIに任せず自分の言葉で書く