ChatGPT画像からボタン付きLPを作ってみた！

本ページはプロモーションが含まれています

こんにちは〜！さつきです(*´ω｀*)♪

最近、ChatGPTの画像生成でLPっぽいデザインを作ってみたら、想像以上に可愛く仕上がったんです。

「これ、そのまま教材の販売ページに使えたら最高では……？」と思って、実際にWordPressに入れられる形まで作ってみました✨

実際につくったLP画像はこんな感じ！

今回作りたかったのは、私のInstagram運用教材「サツインスタ」の販売ページです。

最初は「画像をそのまま貼ればいいのかな？」と思ったのですが、やってみると画像だけでは難しい部分もありました。

今回は、その試行錯誤も含めて、ChatGPT画像でLPを作ってWordPressに設置する流れをまとめておきます＾＾*

ChatGPT画像だけでは難しかったこと

ChatGPT画像は、世界観づくりにはかなり優秀でした。

ファーストビューの雰囲気、女性らしい色合い、手書き風の装飾、全体の可愛さ。このあたりは、自分でゼロからデザインするよりずっと早いです。

ただ、販売ページとして使う場合は、画像だけだと困る部分があります。

• ボタンをクリックできない
• 決済URLを設定できない
• タイマーをリアルタイムで動かせない
• 期限切れ後にページを切り替えられない
• 価格や文言をあとから修正しにくい

つまり、画像は可愛いけれど、そのままだと販売ページとして運用するには少し足りないんですよね。

そこで今回は、画像の可愛さは活かしつつ、ボタンやタイマーなど動かしたい部分だけHTML/CSS/JavaScriptで作る形にしました。

今回作ったLPの形

今回のLPは、大きく分けると2種類作りました。

最初は通常価格ページにも「通常価格で購入する」と入れていたのですが、実際に見てみると少し違和感がありました。

最終的には、シンプルに購入するに変えました。こういう細かい文言は、実際に画面で見てみないと気づかないですね(*ﾉωﾉ)

画像で作る部分とHTMLで作る部分を分ける

今回やってみて感じたのは、全部を画像にしようとしない方がいいということです。

逆に、HTMLで作った方がいいのは、あとから変える可能性がある部分です。

• 購入ボタン
• 決済URL
• 価格
• タイマー
• FAQ
• 期限切れ後の遷移

今回も、ボタンの位置や文言を何度か調整しました。もし全部画像だったら、そのたびに画像を作り直す必要がありました。

HTMLにしておいたので、文言やリンクはすぐに差し替えられました。

72時間カウントダウンは「見た人ごと」にできる

今回やりたかったのは、「何月何日の何時まで」という固定期限ではなく、販売ページを見た人ごとに72時間カウントダウンが始まる形でした。

• Aさんが今日見たら、今日から72時間
• Bさんが明日見たら、明日から72時間

これは、HTMLとJavaScriptで実装できます。初回アクセス時に期限を保存しておいて、再訪したときも同じ期限が表示されるようにしました。

そして72時間が過ぎたら、通常価格ページに自動で飛ぶようにしています。

WordPressに貼るときにハマったところ

WordPressに入れるときに、一番ハマったのがテーマの装飾です。

私はSWELLを使っているのですが、LP内で普通に h2 や h3 を使うと、WordPress側の見出しデザインが勝ってしまうことがありました。

実際、途中で青い帯のような見出しが出てしまって、「あれ？デザイン崩れてる……！」となりました(´；ω；｀)

これを避けるために、LP内では見出しタグをあまり使わず、専用クラスを付けたHTMLにしました。

<div class="section-title" role="heading" aria-level="2">よくあるご質問</div>

こうすると、見た目は見出しとして扱いつつ、WordPressテーマの見出し装飾が乗りにくくなります。

カスタムHTMLブロックに貼るのが大事

今回のようなLPコードは、WordPressのカスタムHTMLブロックに貼るのが大事です。

通常の段落ブロックやビジュアルエディタに貼ると、HTMLやJavaScriptがうまく動かないことがあります。特に、タイマーやボタンリンクを使う場合は注意です。

このチェックはかなり大事です。私は実際に見ながら、ボタン位置や文言を何度も微調整しました。

通常価格ページは「セール感」を消す

期限切れ後ページを作るときに大事なのは、セール感を残さないことです。

今回も最初は、ファーストビュー画像の中にタイマー枠が残ってしまっていました。タイマー自体は消えているのに、画像内に「3日間限定セール終了までのタイマー」という枠だけ残っていたので、少し違和感がありました。

そこで、通常価格ページだけファーストビュー画像の下側をトリミングして、タイマー枠が見えないようにしました。

通常価格ページは、変に説明しすぎない方が自然でした。

今回やってみて感じたこと

ChatGPT画像で作ったLPは、かなり可能性があります。

特に、デザイナーさんに依頼する前のたたき台や、短期間で販売ページを作りたいときにはとても便利です。

ただし、画像だけで完結させるより、画像で世界観を作る、HTMLで販売導線を作ると分けた方が実用的だと感じました。

• デザインの可愛さ
• スマホでの見やすさ
• ボタンやリンクの運用
• タイマーや期限切れ後ページの導線

このあたりを両立できるので、教材販売やプレゼント企画、LINE登録ページなどにも応用できそうです。

まとめ

ChatGPT画像をそのままLPにするだけでは、販売ページとしての運用は少し難しいです。

でも、画像の世界観を活かしながら、ボタン・タイマー・価格・FAQなどをHTMLで作れば、かなり実用的なLPになります。

今回の私のケースでは、3日間限定価格のセールページ、72時間カウントダウン、期限切れ後の通常価格ページ、WordPressへのカスタムHTML設置まで作ることができました。

皆さんが使う場合は、販売期間や飛ばすページ、ボタン文言などを自分の運用スタイルに合わせて調整してみてください＾＾*

「可愛い画像を作って終わり」ではなく、実際に販売導線まで作れるのが、この方法の良いところだなと感じました✨