Figmaを一切開かずに、LPを1本作りました。使ったツールは、主にClaude DesignとClaude Codeだけ。制作期間は1週間、AIとのやり取りは合計300往復を超えています。
その300往復でわかったのは、作る行為はAIでずいぶん楽になった一方、仕上がりの上限を決めるのは相変わらず人間の判断だ、ということでした。候補を出すところまではAIが全部やってくれる。そこから狙ったトーンへ引き上げるのは、良し悪しを判断して差し戻す側の仕事でした。
作ったのは、制約・文脈・検証・評価の4層でデザインを扱うフレームワーク「Design Harness」のドキュメントサイトです。デザインを名乗るサイトである以上、表層やインタラクションの作り込みでどこまで行けるか、という裏テーマも持たせています。
https://x.com/kgsi/status/2072829167285207077
どんな手順で作り、どこに300往復を費やしたのか。実際の画面キャプチャを交えて振り返ります。
Claude DesignとClaude Codeを、どう使い分けたか
このLPは、主に2つの道具を役割で分けて作っています。Claude Designは対話型のデザイン生成ツールで、チャットで指示すると、その場でライブHTMLのプロトタイプが出てきます。Claude Codeはターミナルで動くコーディングエージェントで、コードベースを直接実装します。
使い分けは明快で、早い段階でプロトタイプを形にするのは、Claude Designが得意です。今回も、デザインの方針をまとめたドキュメントとワイヤーフレームを渡して、いくつかの質問に答えたら、最初のLPが出力できました。方向を試して壊す...という段階で、この作り方には効果があります。
一方、プロダクション品質まで持っていく作業、たとえばレスポンシブ対応やアクセシビリティのようなコードの細部は、Claude Codeで詰めていく必要があります。
Designで意匠を決め、Codeで仕上げる。この順番で使っています。
作る前に、やりたいことを全部言葉にした
このサイトを作ると決めた時点で、方向性は固まっていました。頭にあったのは「古典的な海外風のトーンに、モダンな書体や演出を足したらどうなるか」。コンセプト自体はDesign Harnessのドキュメントから引いています。
なお、画像はClaude単体では生成不可能なので、ChatGPT Images 2.0に任せました。サンプルにしたサイトイメージから別案を派生させ、作りたいサイトのムードボードを組み、背景画像も生成しています。良しとする方向を、先に言葉と画像で全部出し切っておく。以降の往復は、ぜんぶこれとの突き合わせでした。
Codex（ChatGPT Image 2.0）でビジュアルトーンを探索し、様々な画像やムードボードを探索した
磨き込みは何百往復も（最低）かかる
準備が済んでから、Claude Designとの往復が始まります。スクリーンショットを遡って数えたら、やり取りは合計で200回を超えていました（トータルの制作時間でいうと1週間ぐらい）。セッとの実測はこうです。
- 「LPサイト生成の要件」約80ターン
- 「Design Harnessアニメーション」約80ターン
- 「KVテキスト背景表示アニメーション」約50ターン
- 「デザインハーネスの説明改善」約10ターン
オープニングのローディングアニメーションと、KVの演出は特に往復を繰り返した。エフェクトは一回ではなく、何重にも指示してブラッシュアップした（下から上に出てくる演出、ブラーエフェクトなどを重ねがけしている）
Claude Designのキャプチャ。コンテキストが増えると精度が落ちるので、重要な作業毎にセッションを新しく作って探索をしている
これとは別に、Claude Codeでレスポンシブ対応やアクセシビリティを詰めているので、合わせると300回ぐらい往復した計算になります。体感では、Heroセクションが一番多かった気がします。
Claude DesignからClaude Codeに渡す際は、Share機能を使いますが、"Export"でそのまままるっとzipファイルを渡すのがおすすめです。"Send to"の方が簡単に渡せますが、画像の送信制限があり、再現精度も高くありません。
数だけ見ると苦行のようですが、指示を出すこと自体は楽になりました。HTMLとCSSを完全に理解している必要は、もうありません。Claude Designにはアノテーション機能があって、画面上の要素に直接コメントを付けられます。直したい箇所を指せば、大体なんでも細かく指示が通る。だから私が出す指示は、ほぼ三種類に収まりました。
アノテーションで要素を指して細部を直させる。KVテキストの背景表示のような、モーションの動きを言葉で伝える。「古典的な海外風」というトーンに寄せ直させる...残る必要な技術は、動きやトーンを言語化する力だけです。
どんな往復だったか、ナビゲーションを例にします。
最初はホバーで下線がスライドする演出でした。わかりにくかったので、参考実装のURLを渡して、文字がシャッフルする演出に変えさせます。すると今度は、シャッフル中に文字幅が変わってメニューの位置がずれる。幅を固定させると、間隔が不均等になる。「まだ均等じゃない」と差し戻しても直らず、最後は幅の調整自体をやめて、ナビの書体を等幅のモノスペースに変えて片付きました。文字幅が一定なら、シャッフルしても何も動きません。ここまでで5往復です。
300往復は、ほとんどがこのサイクルの繰り返しでした。参考にしたいサイトや実装のURLを渡して、方向を示す。出てきたものへの違和感を「間隔が均等じゃなくなってる」と短く言葉にして差し戻す。同じ手直しが2回続いたら、微調整はやめて前提のほうを変える。長い仕様書は、結局一度も書きませんでした。
ちなみに今回はほとんど使わなかったですが、Animation Vocabularyなるドキュメント、Skillsがあり、それを使うとより効率的に指示ができるはずです。https://animations.dev/vocabulary
作る行為と、判断する行為
往復の中身を振り返ると、出てきたものの良し悪しを判断して、ひたすら差し戻す..という往復作業でした。作ること自体は、もうほぼAIが担えます。指示すれば候補はすぐ出てきます。でも、アニメーションのタイミングは合っているか、余白は足りているか、何が良くて何が悪いか。ここはAIには判断できません。人間が狙ったトーンを一発で出させるのは、まだ無理です。クオリティを上げたければ、判断して差し戻すしかありませんでした。
ポン出しがこのクオリティに届かない理由も、たぶんここです。UC Berkeley School of Informationがデザイナーの生成AIツール利用を13セッション観察した研究は、どこかで見たような、それでいて「完成度が高く見える」スタイルに出力が寄っていく現象を「収束の罠（Convergence Trap）」と呼んでいます。
https://x.com/kgsi/status/2074250174986362999
差し戻す判断がなければ、出力は誰のものでもない小綺麗さに落ち着く。300往復の大半は、そこから狙ったトーンへ引き戻すために使いました。
判断できる人に、何が起きるか
こういった審美性やクオリティの判断も、いずれAIが完全にできるようになる、という見方はあるでしょう。そうなる部分もあると思います。
ただ、300回を超えるやり取りの一回一回で違和感を拾って差し戻したのは私で、それが自動化される気配は、あの往復の中にはありませんでした。もっとも、LPを1本作っただけのn=1です。他の意匠デザインでも同じことが言えるかは、まだわかりません。
このプロセスを終えて、予想を書き加えておくと、作る人の「座席」はこれから減っていきます。LPのデザインに1週間かける仕事は、AIと半日往復する仕事に置き換わる。そのとき席に残るのは、並んだ候補を前に「右の案で。ただしモーションは作り直し」と数秒で言える、知識や判断軸を持つ人です。AIを使いこなしながら判断できる人の需要は、むしろ上がっていくと思います。
デザイナーが磨くべきは、手ではなく目になっていく。私があの300往復で下した判断も、結局はこれまで手を動かして作ってきた経験に頼っていました。だとすると、作る回数が減っていく世界で、目だけを育てる方法はあるのでしょうか。
宣伝ですが、"デザイン"スキルを身につけられるキュレーションサイト「Parascope」は好評運営中です👉**
