LP制作にAIを使ったら工数が半分になった話｜実案件の時間比較

LP制作にAIを本格的に使い始めて半年になる。直近4件の案件で作業時間を記録してみたら、平均で工数がおよそ半分になっていた。

ここで「半分」と言っているのは、自分の作業時間の話だ。お客さんのヒアリングや修正対応の待ち時間は別。純粋にコードやデザイン作業に向き合っている時間で比較して、40〜55時間 → 20〜28時間のレンジに収まっている。

ただし、全工程が等しく短くなったわけじゃない。「めちゃくちゃ短くなった工程」と「ほとんど変わらなかった工程」がはっきり分かれた。今日はその内訳を実際の案件データと一緒に書いていく。

比較対象の4案件

直近の内訳はこんな感じ。全部Next.js + Tailwindで作ったLP。業種はバラバラに選んだ。

平均すると46時間 → 23.5時間。ほぼ半分だ。

「AIを使えば10分で終わる」みたいな記事を見かけるが、実案件ではまずあり得ない。ヒアリング・ワイヤー設計・画像素材の手配・クライアントの修正対応がある以上、最低でも20時間前後は必ずかかる。そこは覚悟したほうがいい。

工程別の時短内訳

LP制作を7工程に分けて、AI導入前後の時間を比べてみた。

面白いのは両端の「ヒアリング」と「修正対応」がまったく減らないところ。前者はお客さんと話す時間だから仕方ないが、後者は「AIに直させれば速いのでは？」と思った人も多いはず。実際は違う。修正内容をAIに伝える時間 + 出力を確認する時間 + 調整する時間を足すと、自分で直したほうが速いケースが半分以上ある。

一番時短できたのはコーディングだ。12時間 → 4時間。Claude Codeに「このデザイン通りのLPを作って。セクションはヒーロー・特徴3つ・料金・CTA」と指示するだけで、Tailwindのクラス名まで含めたコンポーネントが一式出てくる。細かい調整は必要だが、ゼロから書くのに比べて圧倒的に速い。

具体的にClaude Codeに任せている作業

案件でよく使うパターンはほぼ固定化した。

ひとつはセクション単位の雛形生成だ。「ヒーローセクションを作って。背景は淡いグラデーション、メインコピー + サブコピー + CTAボタンの構成」みたいな指示でHTMLとCSSをまとめて出してもらう。この段階では見た目の細部は雑でいい。構造が合っていればあとから直せる。

次にレスポンシブ対応の一括反映。「このページ全体をモバイル対応にして。ブレークポイントは768pxと1024px」と指示するだけで既存のクラスを全部調整してくれる。メディアクエリを1つずつ書いていた時代を思うと、この工程は本当に消えた。

バリデーション系コードもAIに任せる。お問い合わせフォームのバリデーション、エラーメッセージ、送信処理。定型だけど書くと地味に時間かかるこの辺りはAIが一番得意だ。こういう「明確な仕様があるコーディング」で時短効果が最大化する。

最後が既存LPの業種別アレンジ。自分は過去のLPを参照用のテンプレートとして使っている。「案件1のLPの構造を残したまま、飲食店向けに文言とビジュアルを差し替えて」と言えば、そのまま雛形になる。これが案件あたり5〜8時間の削減になっている。

AIに任せても時短にならない工程

正直に書いておくと、AIに丸投げできない工程もある。

キャッチコピーのゼロベース作成。 案件1の士業向けに「信頼感を軸にしたコピーを10案」と指示したら、無難な案しか出なかった。「〇〇で信頼できる」「実績◯年」みたいな。クライアントのヒアリングで拾った独自の表現を盛り込むのは人間の仕事だ。AIの案はたたき台として使っている。

クライアント側の素材が揃っていない状態。 写真・ロゴ・色指定が曖昧なまま着手するとAIもさすがに迷走する。「仮素材で進めて、あとで差し替え」もできるが、結局二度手間になるので、素材が揃うまで待ったほうが早い。

デザインの微調整。 「もう少し余白広めに」「ここの色をちょっとだけ明るく」みたいな感覚的な指示は、AIに何往復もさせるより、自分でCSSを触ったほうが速い。

半分にするための前提条件

この時短を再現するには、たぶん3つ必要だ。

ひとつめは、ターミナル操作に慣れていること。自分はClaude Codeをメインに使っているが、コマンドで動かすのに抵抗があると最初の学習コストが意外と重い。慣れるまで2〜3週間は見ておくといい。Claude Codeを触ったことがない方はClaude Codeの始め方を先に読むとスムーズだ。

ふたつめは、過去の制作物をテンプレート化しておくこと。ゼロから毎回書かせるより、既存LPの構造を流用するほうが圧倒的に速い。これは案件をこなしながら蓄積していくしかない。

みっつめは、AIへの指示を「曖昧な願望」ではなく「具体的な仕様」に落とし込めること。指示の書き方で出力の質が全然変わる。このあたりのコツはClaude Codeのプロンプト設計術にまとめた。

まとめ

LP制作の工数は、AIを正しく使えば半分になる。ただし半分になるのは「コーディング・コピー叩き・レスポンシブ対応」の中核工程だけ。ヒアリング・クライアント対応・素材調整といった人間が介在する工程は変わらない。

「半分になる」と聞くと受注数を2倍にできそうに思えるが、現実はもう少し複雑だ。自分の場合は単価を上げて案件数は据え置きにしている。単価10万の案件を20万にしたほうが、納品数を増やすより精神的に楽だし利益率も高い。

実装の詳細や過去案件のビフォー/アフターはAIでLP制作したら工数が3分の1になった話でも触れている。LP制作をこれから外注する方向けの発注のコツはLP制作の相場と費用を抑えるコツに整理した。

サイト運用自体もAIで自動化できるのか気になる方はAIでWebサイト運用を完全自動化した方法を参考にしてほしい。