AIにサイトを3案作らせて、いいとこ取りしたら一番良いデザインができた話
note.comでも読む
AIにサイトのデザインを頼んだら、また出てきました。あの紫のグラデーション。「どこかで見たことある…」と思いながら、それでも延々と「もう少し明るくして」「もっとシンプルに」と修正を繰り返す。時間だけが溶けていくのに、画面はどんどん迷子になっていく。そんな経験、ありませんか？
実は、そこには「1案で粘り続ける」という落とし穴がありました。複数案を並べて比べ、いいところだけをつまみ食いする。実際に4パターンを作って比べたところ、最後に作った「3案のいいとこ取り版」が、文句なしで一番まとまったデザインになりました。今日は私が実際に試した検証をもとに、その具体的なやり方をお伝えします。
「またこれか」と思った、あのAIっぽいデザインの正体
AIにサイトを作らせたら、どこかで見たような紫グラデのデザインが出てきて「またこれか」とため息が出た、という声がXでも目立ちます。
AIにLP（ランディングページ）を作らせると、高い確率で似たような見た目になります。ダークな背景に、紫からシアンへ流れるグラデーション。整然としすぎた完全対称のグリッドレイアウト。ガラスのような半透明カード。
これ、2026年7月時点でXのデザイナーたちの間でも独立して指摘されていることなんです。「AIっぽさ＝紫青グラデ・完全対称グリッド」という認識が、プロの間でもすでに定説になってきています。
つまり、何も工夫せずにAIへ「サイト作って」と頼むだけでは、世界中で量産されているものと同じデザインが出てくる。それは道具の限界じゃなくて、指示の仕方の問題なんですよね。
1案だけ出させて修正ループに入った、あの時間の溶け方
1案だけ出させて延々と修正ループに入り、時間だけが溶けた。案を並べて比較すればよかったと後から気づいた、という体験談もネット上で見られます。
つい最近まで、私も同じことをやっていました。気に入らなければ「もう少し変えて」と追加指示を入れる。それを10回、20回と繰り返すうちに、最初のデザインとも全然違う、でも良くもない、不思議な何かが出来上がっていく。
後から気づいたんです。「最初から複数案を並べて比較すればよかった」って。
1案を磨き続けるのは、ゴールの見えないマラソンを走るようなもの。でも最初から「A案・B案・C案」と出して比べると、それぞれの良し悪しが一目でわかります。「この動きはAがいい、でも配色はBが好き」という判断ができるようになる。それが、今回の検証で一番大きな気づきでした。
4パターン検証してわかった、「いいとこ取り」の具体的なやり方
架空の英会話サービスのLPを題材に、Claude（Fable 5）の新規セッションで4パターンを実際に作って比べてみました。
A案：「アニメーション付けて」と指示 keyframesが10種類、イージングが11種類入った動きのある仕上がりに。配色はクリーム×オレンジの雑誌風。動き自体は素人っぽくなく、想像以上のクオリティでした。
B案：「Framerっぽくして」と指示 Framerというのは、滑らかな動きの今風サイトが作れることで海外で人気のWebサイト制作ツールです。正直に言うと、私はXでこの指示のやり方を見かけるまで、名前すら知りませんでした。それでも効果は一発でした。gradientが18箇所。ダーク背景に紫〜シアンのグラデーション、ガラス風のUIが出てきました。まさに「AIっぽいデザイン」の典型。悪くはないんですが、個性がない。
C案：「動きはFramerっぽく、配色はクリーム×オレンジで」と指示 ここが転換点でした。動きのリッチさはB案を引き継ぎながら、温かみのある配色を両立することに成功。「いいとこどりの指示」が最初からできるとこうなる、という実例です。
D案：「C案をベースに、B案のmac風ウィンドウ・チャットカード・金額カウントアップ、A案の斜め区切り・配色メリハリを移植して」と指示 これが一番の驚きでした。別々の案から持ってきた部品が、C案のトーンに自然と馴染んで統一感が出たんです。「バラバラの素材を足したらちぐはぐになる」と心配していましたが、AIが自動でトーンに合わせて調整してくれました。
ステップでまとめるとこうなります
ステップ1：テーマとスタイルを変えて2〜3案を並行で出す 同じLPの内容で「雑誌風」「テック風」「ミニマル風」など、毎回新規セッションでスタイル違いを作る。
ステップ2：各案の「好きな部分」をピックアップする 「A案の配色・B案の動き・C案のカードデザイン」というふうに、好きな要素を言語化してメモする。
ステップ3：「ベース案＋移植したい部品」を指定して統合を頼む 「○○案をベースに、□□案の△△と◇◇案の××を移植して」と具体的に指示する。デザイン用語が分からなくても、「ここの丸いカード」「このアニメーション」と見た目を言葉で指せれば伝わります。
デザイン用語を知らなくても、AIには伝わります
デザイン用語を知らない素人が指示したところで、どうせAIには伝わらないのでは？という不安の声もあります。私も最初はそう思っていました。なにしろFramerの名前すら知らなかったくらいです。
でも今回の検証で分かったのは、AIが求めているのは専門用語じゃないということ。「Framerっぽく」「雑誌みたいな温かい感じ」「動きはそのままで、色だけオレンジ系に」—こういった感覚的な言葉で十分に伝わります。
大切なのは「何が好きで、何が嫌いか」を言葉にすること。そのためにも、最初から複数案を出して比べることが効いてくるんです。並べて見れば「これは好き、これは嫌い」という感覚が自然と言語化できるようになります。デザインの知識じゃなく、自分の好みを言語化する練習。それだけで、AIへの指示は格段に精度が上がります。
「3案いいとこ取り」を試すなら、今がちょうどいい理由
「紫グラデのAIっぽいデザイン」が当たり前だった時期は、正直もう終わりに差し掛かっています。2026年現在、デザイナーの間でもその「AIっぽさ」はすでに識別されて、避けられるようになってきています。
つまり、今のタイミングで「複数案を比べていいとこ取りする」という一手間を加えるだけで、量産型デザインから一歩抜け出せる可能性があります。ライバルがまだ1案修正ループをしている間に、3案を並べて比較する習慣を身につけておく。それが、これからのAI活用での地味だけど大きな差になっていくと思っています。
完璧なデザイン知識がなくても大丈夫。必要なのは「並べて、選んで、組み合わせる」という小さな工夫です。
まとめ
今日の話を整理するとこうなります。
- AIに1案だけ出させて修正ループするのは、時間が溶けるだけで迷子になりやすい
- 「AIっぽいデザイン＝紫青グラデ・対称グリッド」はすでに識別されている
- スタイルを変えて2〜3案を並べて出すと、好みの言語化ができる
- 「ベース案＋移植部品を指定」するだけで、いいとこ取りの統合は一発でできる
- デザイン用語は不要。感覚的な言葉で十分伝わる
まず試してほしいのは「同じ内容で、スタイル違いの案を並べて出してみる」こと。それだけです。コピペで使える依頼文を置いておきます。
同じ内容のサイト案を、雰囲気を変えて3つ作ってください。
1案目は雑誌みたいな温かい感じ、2案目は今風のテック系、3案目は白ベースのミニマルで。見比べて好きな部分が見つかったら、2通目はこれだけです。
1案目をベースに、2案目の（好きな部品）と3案目の（好きな部品）を移植してください。
色や雰囲気は1案目のままに馴染ませてください。比べてみると、自分が何を好きかが見えてきます。その発見が、次の指示の精度を上げてくれます。
記事が参考になったら、ぜひフォローしてもらえると嬉しいです。AIを日常で使い倒すヒントを、これからも発信していきます。感想や「こんな使い方はどうかな？」という質問も、コメントで気軽に送ってください。一緒に試行錯誤していきましょう。