AIでLP制作はどこまでできる？ChatGPTとCodexを使って実際に作ってみた

AIを使って自社サービスのLPを制作しました

今回制作したのは、lalakohalaが提供する「中小企業のAI活用支援」を紹介するLPです。

サービスを始めるにあたり、まず必要だったのが、 「何を提供しているのか」「どんな会社に向いているのか」「どんな考え方で支援するのか」を 分かりやすく伝えるWebサイトでした。

そこで、制作会社へそのまま外注するのではなく、 自分たち自身の業務をAIでどこまで進められるのかを試す意味も含めて、AIを活用したLP制作 に取り組みました。

LP制作を始める前にあった課題

LPを作るといっても、必要なのはコーディングだけではありません。

• 誰に向けたサービスなのかを整理する
• サービスの強みを言葉にする
• ページ全体の構成を考える
• 文章を書く
• デザインを考える
• HTML・CSS・JavaScriptで実装する
• スマートフォンでも見やすく調整する
• WordPressで運用できるようにする

このように、LP制作には複数の異なる仕事が含まれています。

今回のLP制作で使ったAIと役割分担

主に使用したのは、ChatGPTとCodexです。 同じAIでも、それぞれに担当する役割を分けて使用しました。

ChatGPTは「考える・設計する」役割

ChatGPTでは、いきなりコードを書かせるのではなく、 まずサービスそのものを整理するところから始めました。

「誰に向けたサービスなのか」「相手は何に困っているのか」 「どの順番ならサービス内容を理解しやすいのか」といった部分を整理し、 LP全体を複数のセクションに分けて設計しました。

また、実際にできあがった画面を確認しながら、 「CTAが周囲と同化している」「文章量が多い」「日本語の改行が不自然」といった問題を整理し、 Codexへ渡す具体的な修正指示もChatGPTで作成しました。

Codexは「実装する」役割

ChatGPTで設計・修正内容を決めたあと、実際のコード変更はCodexへ任せました。

HTML・CSS・JavaScriptだけでなく、スマートフォンへのレスポンシブ対応、 WordPress用のPHPへの変換、ブログ機能との連携なども段階的に実装しています。

最終判断は人が行う

AIは複数の案を素早く出したり、具体的なコードへ変換したりすることが得意です。 一方で、「このデザインで本当に信頼されるか」「この文章は自分たちの考え方を正しく表しているか」といった判断は、 最終的に人が行いました。

企画からWordPress公開まで実際に行った流れ

今回の制作は、一度に完成させるのではなく、工程を細かく分けながら進めました。

1. サービスとターゲットを整理する

   中小企業の中でも、AIに興味はあるものの「何から始めればいいのか分からない」企業を中心に、 提供する価値やサービス内容を整理しました。

2. LPの構成と文章を作る

   ファーストビュー、問題提起、サービス内容、活用事例、料金、FAQ、問い合わせなど、 必要な情報を順番に設計しました。

3. デザインを作りながら改善する

   最初から完成形を決めるのではなく、実際の画面を見ながら文字量、写真、余白、CTAなどを何度も調整しました。

4. Codexで実装する

   決定した内容を具体的な実装指示に変換し、HTML・CSS・JavaScriptとして反映しました。

5. 複数端末に合わせて調整する

   PCだけでなく、タブレットやスマートフォンでも日本語が自然に読めるよう、 固定改行や文字幅、レスポンシブ表示も見直しました。

6. WordPressテーマとして実装する

   完成した静的LPをWordPressのオリジナルテーマへ変換し、 管理画面から運用できる状態にしました。

7. 公開後のブログ運用まで整える

   WordPressで投稿した記事をトップページへ自動表示し、 特に見せたい記事をピックアップできる仕組みまで追加しました。

AIを使って特に効率化できたこと

今回特に大きかったのは、完成品そのものよりも、 試して、確認して、直すというサイクルを短くできたことです。

例えば、実際の画面を見て「このセクションは文字が多い」と感じた場合、 文章を短くする案を出し、その内容を実装指示へ変換し、再度画面で確認するところまで進められます。

また、「サービス内容に社員研修を追加したい」「代表者紹介ではなくサービスを始めた理由を伝えたい」など、 制作途中で方針が変わった場合にも、それに合わせてページ構成を調整できました。

実際にやって分かった「AIだけでは難しいこと」

今回の制作を通して、AIがあれば人の判断が不要になるわけではないことも改めて分かりました。

特に難しいのは、正解が一つではない部分です。

• どのデザインが自社らしいのか
• どの文章ならターゲットに伝わるのか
• どこまでサービス内容を見せるのか
• 何を強みとして打ち出すのか
• 最終的にどの案を採用するのか

AIは候補を作ることには強い一方で、 会社として何を大切にするかまで自動的に決めてくれるわけではありません。

今回のAI活用で得られた成果

今回は作業時間や削減率などを計測していないため、 「○％削減できた」といった数値的な成果は記載しません。

一方で、実際に以下のところまで進めることができました。

• 新規サービスの内容整理
• LP全体の構成設計
• コピーライティング
• デザイン制作・改善
• HTML・CSS・JavaScriptでの実装
• PC・タブレット・スマートフォンへの対応
• WordPressオリジナルテーマ化
• 活用事例・ブログ一覧の実装
• 投稿記事とトップページの連携
• 公開後も自分たちで更新できる運用環境の構築

また、外部へLP制作そのものを丸ごと依頼するのではなく、 AIを活用しながら自分たちで制作から公開まで進めることができました。

さらに大きな成果は、 「ChatGPTで考え、Codexで実装し、人が判断する」というAI活用の進め方そのものを作れたこと です。

この考え方はLP制作以外の業務にも応用できる

今回はWeb制作を例にしていますが、重要なのは「AIでLPが作れる」ということだけではありません。

業務を細かく分解すると、 AIに任せられる部分と、人が判断した方がよい部分が見えてきます。

例えば、

• メールや文章作成
• データの整理・分析
• 社内資料の作成
• 問い合わせ内容の整理
• 定型作業の自動化
• 社内情報の検索

なども、仕事の流れを理解して適切に設計すれば、AIを活用できる可能性があります。

よくある質問

まとめ