こんにちは、ここもちパパblogのりゅうです。
今回は、プログラミング初心者の僕がチャットGPTを使って、LPを制作している全工程を紹介していきます。
今回のテーマは「ペットフードメーカーの定期購入を訴求するLP」
LPを使って公式LINEに誘導、定期購入を促すというカンタンな内容です。
それではやっていきましょう。
Contents
はじめに
プログラミング未経験。HTMLもCSSも最初はまったく分からなかった。
そんな僕がAI（ChatGPT）と一緒に、月3万円でLPやHP制作の副業を始めました。
「AI副業って怪しくない？」
「高いLPを自分で作れたらなぁ…」
そんな悩みにこそ、初心者目線のリアルな制作過程をお届けできればと思っています。
チャットGPTでLPを作成する準備
テーマと目的の確認
今回のテーマは以下の通り、
ペットフード定期購入LP
目的：公式LINEに促してドッグフードの定期購入
目的が決まったら、次はお客様からヒアリングを行います。
ここが大事、このヒアリングをしっかりしているかどうかで、LPができたときのライティングの質と目的への訴求率が変わってきます。
今回のヒアリング項目
弊社で行っているヒアリングは固定的で以下の通り。
①【LPの目的】このLPで実現したいことは何ですか？
→ドッグフードの定期購入（公式LINEへ誘導）
②【ターゲット】
想定する読者・ユーザーはどんな人ですか？
→45～54歳女性、犬を飼っている、犬の消化器疾患が気になる
③【訴求したい内容】
→商品・サービス名：ドッグワン
サービスの特徴や強み：消化にやさしく、高吸収
価格や提供内容：2980円
他社との違いや選ばれる理由：全年齢対象、抗アレルギー食材のみ使用
④【掲載必須の情報】
→実績：獣医師の97%が推奨
会社情報やプロフィール：株式会社Co.Co.Motivate
東京都新宿区高田馬場
よくある質問
お問い合わせ・購入導線:公式LINE
⑤【希望する構成や雰囲気】
明るく、日差しが差し込むようなデザイン
デザインの雰囲気：透明感のあるデザイン
画像素材とリンク先URLの準備
画像素材はクライアントから提供してもらうか、フリー素材を使います。
著作権の関係があるので慎重に。
さらにリンク先のURLも準備、今回の場合は公式LINEへの誘導なのでそのURLを準備します。
ちなみに、今回はLPであり、目的は前述の通りなので、HPのURLやその他参考ページは一切使いません。
読者に、それ以外の選択肢を与えないことが大切です。
そして次にCanvaで作成背景になる画像を作成していきます。
これはテンプレートを使ってもよいのですが、僕は、クライアントや商品・サービスに合う背景にしたいので自分で作っています。
今回は愛犬が元気に外で走り回っているイメージにしたいと思いこんな感じで背景画像を作成
ちなみにCanvaでは「webサイト」というサイズを採用しています。
チャットGPTでコーディング
いよいよ、チャットGPTでコーディングを行っていきます。
コーディングのプロンプト
最初のプロンプトは
「以下の情報をもとに、コピペができる形式でHTML、CSS、JavaScriptをコーディングしてください」
と、先ほどの
・ヒアリング項目
・素材
・リンク
をペーストして、送信
写真のような感じになっていきます。
出来上がったコードはこんな感じ
1回目の実装
このコードを実装して確認してみましょう。
全然だめですね。
背景も写真もすべて反映されていないし、デザインも見にくくてでたらめです。
しかし、ここからがチャットGPTコーディングの真骨頂です。
何度も修正、実装を繰り返して完成に近づけていきます。
修正を繰り返して完成させる
チャットGPTでのコーディングは修正との戦い
いろんな修正をしていく中で、画像のURLが間違っていることがわかりました。
ここでURLの修正を行い、再度チャットGPTに
「このURLを使って作成」と指示を出します。
HTMLが完成したら、そこから、HTMLに合わせてCSS、JavaScriptをコーディング、実装していきます。
完成したLPはコチラ
頑張りました。結果は以下の通り
実物はこちら
https://cocomotivate.com/dogfood/
今回は約3時間で作成することができました。
終わりに
ここまで読んでいただき、本当にありがとうございます。
僕自身、コードも書けない状態から、ChatGPTと二人三脚でLP制作に挑戦してきました。
今では少しずつ実績も増え、「初心者でもAIを使えばここまでできる」ということを、実体験として発信しています。
もしこの記事が少しでも参考になったら、
他の制作記事もぜひ読んでみてください👇
👉 過去の制作ブログ一覧はこちら
https://cocomotivate.com/
そして、
「最安で、でもちゃんと伝わるLPやコーポレートサイトを作りたい」
「自分のビジネスを形にしたいけど、誰に頼めばいいかわからない」
そんな方は、お気軽に僕の公式LINEにご相談ください😊
直接やり取りしながら、ご予算・目的に合わせて全力でサポートさせていただきます。
👉 公式LINEはこちらから
https://lin.ee/GXv0Xxr