Claude4 x Claude Codeで半日でランディングページを制作した話🚀

Posted at 2025-05-25

ClaudeでLPデザインが半日で完成✨

3日前にリリースされたClaude Opus 4 + Claude Codeで試してみました！
🔶友人の新規事業で実践投入するLPをデザイン
🔶プロに発注するのと遜色ない仕上がり
🔶半日で100往復以上会話してデザイン進行

※リリース前の事業のため、残念ながらデザインの中身は公開できず🙇‍♂️

以下、詳細をご紹介します！
1️⃣デザイナーへの発注との比較
2️⃣制作プロセス
3️⃣Claude Web版とClaude Codeの使い分け

結論：デザイナーでなくても、Claudeで短期間で満足のいくクオリティのLPを作れるようになった🚀

信頼できる＆すぐに発注できるデザイナーがいない場合、デザイナーを選定して発注する手間がかかるが、それに時間をかけてる間にClaudeでデザインが完成しそう
異なる構成やデザインシステムの案を5パターン作成して比較するといった、人間だと負担のかかる作業を気兼ねなく依頼できるおかげで、イメージ・方向性をすり合わせやすい
「LPを作る対象がどんな事業なのか」「その事業カテゴリでの集客のベストプラクティス」など、手元文書やDeep Research結果の超長文を全部読ませて、UX設計やコピーライティングができるのでクオリティを上げやすい
「もっとxxなデザインにしたい」→「来週、改善案を持ってきます」といった待ち時間が発生せず、即座に改善サイクルを回せるので制作進行が爆速
少しでも違和感がある部分があれば何度でも修正できるので、クオリティを上げやすい（人間相手だと遠慮してしまうし、修正はx回までと制約がある場合も）

ただし、Claude等のAIツールを使いこなす一定のITリテラシーと、ビジネスで効果を生むLPは何かという判断能力を有している必要はある。

本職のデザイナーがAIツールを活用すると爆速で高クオリティの価値提供ができるようになりそう。また、起業家やProduct Managerが使いこなせると事業の進行がスムーズになりそう。

📝STEP1〜3はWeb版のClaude Opus 4で実施（会話50往復くらい）

この時点で「ビジネスで効果を生む」構成のLPの型ができる

この時点で「ターゲット層のトーンに合う」デザインになる

この時点で「ターゲット層に響く」メッセージのサイトの土台ができる

📝STEP4は修正が細かくなるため、CursorにClaude Codeをインストールして作業（会話80往復くらい）

「この部分をもっとこうしたい」はCursorで差分を見ながら作業する方が楽（意図せず他の箇所まで影響が及ぶのを防げるため）
実際の写真やアイコン画像を反映するといった作業は、ファイルシステムまで管理する必要があるため、ClaudeのWeb版は限界があるためClaude Codeで実施
アイコン画像の生成はClaudeでもできるが、ChatGPT o3の方が精度が高かったのでo3を利用
細かい文言は自分で直接ファイルを修正した方が早いので手修正

ここまでで「細部までこだわり抜いた」LPデザインが完成

結論：大枠のデザインはWeb版で進め、細部を詰める段階でClaude Code

大枠のデザインを複数パターンを生成して比較するといったコードを見ない段階では、Web版で同時並行で作業させる方が楽
Claude CodeよりもWeb版の方が履歴が確認しやすいので、A案（70点）を元に作業を進め、たまにB案（50点）とC案（30点）の良いところだけをA案に反映するといったことがやりやすい
Web版で生成したページは簡単に共有用URLを発行できるので、複数人でコミュニケーションを取りながら進める段階ではWeb版の方がやりやすい
修正箇所が細かくなってきて1人で黙々と作業する段階は、Cursor x Claude Codeでコードの差分を見ながら作業する方が進めやすい
変更したい箇所とは違う箇所まで変更されてしまうことが度々あるため、大枠をデザインする時は問題ないが、細部を詰めていく段階では差分を確認しながら着実に進めたい

Claude Codeを使うあたりから要求リテラシーが一気に上がるので、難しければWeb版でも作業は継続できるし、自分一人で頑張らずにデザイナーやエンジニアに任せるのもアリ。