【朗報】AIで作るとバレバレの「紫グラデ×絵文字×3ボックス」が一瞬で解消 プロ級Webデザインを量産する30パターン検証が神すぎると話題
「AIにWebサイトを作らせると、なぜかどれも似たような顔になる」――生成AIを日常的に使うWeb制作者なら、誰もが一度は感じたことがある悩みではないだろうか。生成AIに何も指定せずにサイトを作らせると、紫色のグラデーションがかかり、絵文字が多用され、3つのボックスが横に並ぶ、いわゆる「AIっぽいデザイン」が出来上がってしまう。見た瞬間に「あ、これはAIが作ったな」と分かってしまう典型パターンだ。このAI感を根本から取り除くためのアプローチを、約30パターンにわたって徹底検証した内容が大きな注目を集めている。
「AI感」の正体は意外にシンプル、なぜみんな同じ顔になるのか
AIが何も指定されずにサイトを作ると、なぜか紫色のグラデーションが頻出し、絵文字が並び、サンラム（3枚のカード）のようなレイアウトが積み上がっていく。もちろん悪くはないが、ダサく、そして何より「AI感」が一目で伝わってしまう。この問題を解消するために、今回の検証では「架空のタスク管理LPを作って」というたった一言の指示だけを固定し、その上で「作り方」だけを変えて、約30パターンのサイトを生成。どのようなアプローチを取ればAI感が消えるのかを逐一比較している。指示は全パターン共通で、手法だけを変えるという徹底ぶりが、検証の信頼性を高めている。
王道は「デザインシステムの移植」、IBMやデジタル庁の実例が効果絶大
検証でまず紹介されたのが、既存のデザインシステムをAIに移植するという方法だ。Web上には無償公開されているデザインシステムが多数存在し、Claudeのデザイン機能を使えば簡単にテンプレート化できる。実際にIBMの「Carbon」デザインシステムを読み込ませて全く同じ指示を出すと、数値が流れるアニメーションやグラフまで付いた、それまでの「AI感」とは全く違うサイトが完成した。さらに、日本の「デジタル庁」が公開しているFigmaファイル付きのデザインシステムを活用したケースも紹介されており、「もうこれが正解でいいんじゃないか」というほど高品質な仕上がりになっている。自社のブランドカラーを反映したオリジナルのデザインシステムを作り、それをサイト化する方法も効果的だ。テキスト部分のAI感は、NGリストとOKリストを作って毎回AIに読み込ませる工夫で抑えられるとしている。
「スキル」で判断力を与える手法、順番と参照先を変える作戦
2つ目のアプローチは、デザインの判断力をAIに与える「スキル」を活用する方法だ。Web上やGitHubで公開されているデザインスキルを読み込ませるだけで、特徴的でAI感のない表現が追加できる。「テイストスキル」と呼ばれるものは特に高評価で、複数のパターンから選べるため「スキルで一番おすすめ」と評されている。3つ目は「順番と参照先を変える」アプローチ。AIに直接コーディングさせるのではなく、まずFigmaでデザインを作ってから実装させるという従来の制作フローに変えるだけで、デザイン性が格段に上がる。また、実在するサイトのUIレイアウトを参考にしつつ、デザインパーツを1つずつ移植して組み立てる手法も、人間のデザイナーが実際に行っている考え方として推奨されている。
技術の流儀・質感指定・動き・写真、最強は組み合わせの「集大成」
そのほかにも、Next.jsやVue.jsなどの技術を活用してアニメーションを仕込む「技術の流儀に乗る」方法、フォントやタイポグラフィ、ネオブルータリズム、紙とインク風の表現など「様式と質感を指定する」方法が紹介された。さらに、Three.jsのスクロール駆動3D、GSAPのモーションタイポグラフィ、Matter.jsの物理演算、p5.jsのジェネラティブアート、D3.jsのデータ駆動UIなど、動きで見せる手法も多数。中でも「実際の写真をがっつり使う」ことは、再現性が高く最も簡単にAI感を消せる方法として最有力視されている。検証の締めくくりには、デザインシステム、背景アート、固定画像、浮かび上がるテキストなど複数アプローチを組み合わせた「集大成」サイトが披露され、もはやAI製かどうか判断が難しい仕上がりになっている。
ネットの反応
デジタル庁のデザインシステムをAIに読み込ませるの、普通に天才的すぎる。真似するわ。
「テイストスキル」が神すぎて草。入れるだけで一気にプロっぽくなるのマジで体験した。
紫グラデの呪い、これで完全に解けるんだな。絵文字多用も減らせるのありがたい。
実在サイトのUI移植って人間デザイナーも普通にやってることだから、AIもそうすればいいんだよな。
結局写真を使うのが一番手っ取り早いっていう結論、身に染みるわ。
NGリストとOKリストでテキストのAI感を消す工夫、これは思いつかなかった。採用させてもらう。
3ボックスレイアウトの呪いが解けた瞬間見た時は笑った。ここまで変わるとは思わなかった。
AIの所感
この検証が示しているのは、AI感の問題は「AIの能力不足」ではなく「指示の与え方」にあるという本質だ。生成AIは膨大な学習データから最も平均的なデザインを出力する傾向があるため、何も指定しないと「みんなが作る」典型的な形に寄ってしまう。そこにデザインシステムやスキル、具体的な様式指定といった「文脈」を与えることで、初めて人間らしい個性を獲得する。中でも「デザインシステムを移植する」という手法は、実績のある設計思想をそのままAIに移せる点で非常に合理的だ。今後は「AIに指示する能力」そのものがデザインスキルとして価値を持つ時代になるだろう。プロのデザイナーは、手を動かす作業ではなく、良質なデザインシステムや参照先を選び、組み合わせる「ディレクション能力」にシフトしていくのが、この検証から読み取れる大きな示唆だ。