いま手元には、同じランディングページのバージョンが3つ並んでいます。ブランドも、GAIA がまだ Flash フレームワークだった頃から使い続けているワードマークも同じ。それなのに、とても同じ出どころとは思えません。1つ目は、よくできた初稿といった読み心地。2つ目は、自分なら金を払うと思えるプロダクトの見栄え。3つ目は、デザイナーとコピーエディターが一行ごとに納得いくまで言い合ったような仕上がりです。いちばん面白いのは、この3つすべてを生んだのが同じモデル、Opus 4.7 だということ。
最初から品評会をやるつもりはありませんでした。各ツールは、その存在を知った順に一つずつプロジェクトへ入ってきて、気づけば偶然の実験が手元に出来上がっていたのです。
先に一つ断っておきます。私はグラフィックデザイナーではありません。何が良く見えるかの目はそれなりにあると思っていますが、訓練も語彙も持ち合わせていない。そして、こうしたツールに手を伸ばす人の多くも同じ立場なのではないかと思います。本物のデザイナーなら、3つのどれからも私より良い仕事を引き出せたはずです。経験豊富なエンジニアが、非エンジニアよりも Claude から良いコードを引き出すのと同じことです。ツールは床を引き上げてくれます。天井を決めるのは、やはり人のほうです。
バージョン1: /frontend-design スキル
/frontend-design スキルは、私が最初に知った AIデザインツールでした。Claude Code の中で動くので、Claude に GAIA のコードベースと README、そしてサイトで何を伝えるべきかのざっくりした骨子を渡しました。
カラーパレットといくつかのサンプルを提案してほしいと頼むと、3つの案を生成し、それぞれを Playwright CLI でライブにレンダリングしてくれたので、横に並べて見比べられました。私はバーントオレンジとティールを選択。GAIA のワードマークを渡すと、それに合わせて色を塗り替えてくれます。サンプルのデザインシステムも出てきたので、要素をいくつか残し、残りはそれを軸にページ全体を組み上げてもらいました。そのあとはレイアウトとコピーの改訂を何度も重ねていきましたが、そのほとんどは私が主導したものです。
出来上がったのは、文句のない本物のランディングページでした。「これは AIが作ったな」と静かに告げる視覚的な指紋がいくつか残ってはいたものの、壊れているところも、ひどいところもありません。デザイナーでない友人たちは良い出来だと言ってくれましたが、自分が望んでいたほどではありませんでした。
バージョン2: Claude Design
Anthropic が Claude Design をリサーチプレビューとして公開したので、これでどこまで良くなるのか試したくなりました。現状のデザイン、ブランドとスタイルのガイドライン、/frontend-design スキルに渡したものすべてに加えて、参照先として Linear を指し示して渡しました。
何が好きなのかは具体的に伝えました。Linear のサイトには、洗練された感触を生む細やかな工夫があります。抑制の効いたモーションとフェードイン。中央寄せのカラムでデスクトップサイトをスマホのように見せるのではなく、画面の横幅をめいっぱい使うレイアウト。機能を片側に置き、その構成要素をもう片側に置く配置。情報をすっきりしたブロックに並べる組み方です。
Claude Design は、そのすべてからデザインシステムを組み上げ、そこからランディングページを作り直しました。出てきたものに、私は「すごい」としか言えませんでした。視覚的な品質の大きな飛躍で、しかも Linear の良さを取り入れつつ、そっくりそのままのコピーにはしていません。
摩擦がなかったわけではありません。やめてほしいと伝えても、私のコピーを書き換え続けてくる。しかもそれなりに高価です。改訂を何回か回したところで、利用枠のトークンを使い切ってしまいました。とはいえ、これはリサーチプレビューであって完成品ではないので、そこは差し引いて考えるべきでしょう。書き出したものを実際のサイトのコードへ移し込む作業には、Claude Code で少し手間がかかりました。仕上がりには依然として AI tells がいくつか残っており、前より上手に着飾ってはいるものの、確かにそこにいます。
残りのページを作り直す続きにかかるには、利用枠がリセットされるまで1週間待つ必要がありました。残念ながら、それらのページでの視覚的な品質の飛躍は、最初のランディングページの作り直しほど目を見張るものにはなりませんでしたが、それでも改善ではありました。
バージョン3: impeccable.style
Claude Design が残りのページを片づけ終わった頃、知り合いのグラフィックデザイナーが impeccable.style の話をしてくれました。その界隈のツールをいくつか見たうえでこれに決めたのですが、「デザインツール」という以上のことはほとんど知りませんでした。蓋を開けてみれば、それをはるかに超えるものでした。
その critique スキルを、ランディングページだけでなくサイト全体に対して走らせました。レイアウトを引き締め、冗長さを削り、メッセージを鋭くし、コピーを絞り込み、全ページにわたって「ストーリーテリング」を改善してくれて、Claude Design の飛躍が小さかった他のページのデザインまで底上げしてくれます。さらに slop を検出するパスも走らせます。slop とは、AIが生成したインターフェースが収束していきがちな、あの見覚えのある見た目のこと。紫のグラデーションから、impeccable が最も見分けのつくサインだと名指しするサイドタブ風のアクセントボーダーまでが含まれます。Claude Design のステップを生き延びたそうしたサインを、いくつも捕まえてくれました。最初の2つのツールが単体で tells に対して何をしていようと、impeccable がそれをはるかに上回ってやっているのは明らかです。これはラストワンマイルの仕事で、しかも消費トークンは Claude Design よりずっと少なくて済みました。
予想していなかった部分
別のプロジェクトで、impeccable を最初のデザインツールとして使ってみました。結果は、/frontend-design スキルが出してくれたものより少し良い程度。impeccable ならではの強み、たとえばコピーや AI tells のパスを別にすれば、という話です。
腰を据えて考えてみると、腑に落ちました。impeccable は /frontend-design とまったく同じく、Claude Code のスキルとしてインストールされます。つまり、1つ目のバージョンと3つ目のバージョンを隔てていたのは、賢くなったモデルではなかった。モデルを取り巻くスキル、つまり critique のスキル、コピーのスキル、AI tells を剥がすためのパス、そしてデザインの判断力を繰り返し実行できる手順に落とし込んだものの集まりだったのです。
Claude Design は、それ自身が独立したカテゴリーに座るツールです。Claude Code に乗せた単なるスキルではありません。Anthropic Labs が手がけた単体のツールで、視覚的なデザイン作業のために作り込まれ、チューニングされており、3つの中で品質の最大の単独飛躍を生みました。そして、ほかの2つと同じく Opus 4.7 で動いています。私の知る限り、その差はまるごとモデルの上の層にあって、モデルそのものにはありません。
変わったのはスキルだった
モデルは一度も変わっていない。だから差を生んだのはスキルであり、しかもスキルは自分で実際にコントロールできる部分です。スキルとは、手順と判断とツールをひとまとめにして、モデルが毎回同じやり方でそれを適用できるようにしたもの。良いプロンプトは一度きり仕事をして、セッションを閉じれば消えていきます。スキルは残り、しかも単発のプロンプトには抱えきれない知識を持てます。AI tells をつぶすためのチェックリスト、critique のパス、いちいち念を押さなくてもモデルが従うハウススタイル、といったものです。
ただし、見落とせない落とし穴があります。これらのツールが最良の仕事をしたのは、改善する対象が手元にあったときでした。impeccable は仕上げ役としては抜群でしたが、白紙の状態からだとごく平凡。ここには、私にはまだ答えられない本物の問いが残ります。もし /frontend-design スキルが、空のキャンバスではなく impeccable の出力から始めていたら、その差はどれだけ縮まっていたのか。たまたま使った順番が、それぞれのツールを順々に引き立てていたのは確かで、そこを取り繕うつもりはありません。
これは、私が GAIA を作ったときに賭けたのと同じものです。Claude を私のプロジェクトで役立たせているものの大半は、巧みなプロンプトではありません。一緒に同梱されるルールとコマンドとスキルであり、それがあるからこそ Claude は毎回頼まれなくても私の基準に従います。3つのデザインツールは、同じことを外側から見せてくれただけでした。
モデルは一度も変わっていません。すべてを語っていたのは、スキルのほうでした。