KAIZEN REPORTブログ

2024.11.29 | LPデザイン制作の改善

【CVX活用講座Vol.36】ChatGPTを上手に活用してLPの構成案を作成してみよう

【CVX活用講座Vol.36】chatGPTを上手に活用してLPの構成案を作成してみよう

今回(36回目)のインハウスLP作成/LPO支援ツール「CVX(シー・ブイ・エックス)」活用講座では、ChatGPTを上手に活用してLPの構成案を作成する方法をご紹介します。

いざCVXを使ってLPを作成しようと作業をはじめてみると、「どんなページ構成案にしたらいいのかわからない」、「ユーザーを惹きつけるキャッチコピーや文章が思いつかない」といった最初の壁に直面し、なかなか作成作業が前に進まないユーザーの方もいらっしゃるのではないかと思い、こちらの活用講座で円滑に進められる方法をとりまとめてみました。

自分が作成したいLP構成案のたたき台を、フォーマットを使って出力してもらおう

まず前提として、自分がどんなLPを作成したいかを定めておく必要があります。

その後、作成したいLPの内容をChatGPTにプロンプトと呼ばれる指示文を送って、目的の出力(今回でいうところのLPの構成案)を生成してもらいます。ちなみにこの作業のことを「プロンプトエンジニアリング」と言います。

これだけ聞くと、難しそうな作業に聞こえるかもしれませんが、以下にすぐにコピペで活用できるフォーマットを用意しましたので、そのフォーマットに沿って作成したいLPの内容を説明していくだけで、指示文が作成できるようになっています。

ChatGPTへの指示の出し方(=プロンプトのフォーマット解説)

今回のユースケースとして「EFOツールを開発している会社の社員が、CVXを使って自社のLPを作成したい時」を想定し、プロンプト(指示文)のフォーマット解説をしていきます。

以下がフォーマット通りに作成したプロンプト(指示文)です。

#お願い
あなたは、デジタルマーケティング担当者です。新しいランディングページ(LP)を作成するための構成案を考えてください。

#目的
効果的なLPを構築するためのLP構成案を考える

#情報
・ターゲット:30代~60代の自社サイトを運用している経営者向け
・コンバージョン目標:トライアルへのお申し込み
・商品:コンバージョン率を改善できるEFOツール
・競合:同様の商品を取り扱う他社が存在

#ルール
・最初にheaderを設置し、その後ファーストビューを設置。sectionは最低でも6は作成
・ユーザーの関心を惹きつけるデザインのイメージとコピーが必要

#出力
・LPの構成案を表形式にて出力
→各セクションのワイヤーフレームとデザインとリードコピー、キャッチコピー、ボディコピーもテキストにて記載

そして、以下が上記のプロンプト(指示文)に対してのChatGPTの回答です。

今回は、無料で使用できるChatGPT3.5を利用しております。

【CVX活用講座Vol.36】chatGPTを上手に活用してLPの構成案を作成してみよう

このように構成案のたたき台を出力してもらえるので、そこを起点に作業を進めると作業効率も大きく変わると思います。

次に、プロンプト(指示文)のそれぞれの項目が具体的にどういう意味なのか解説していきます。

#お願い
ChatGPTに、誰目線で意見を述べて欲しいかを定義し、具体的に何を出力して欲しいかを明確に伝えましょう。

例:) あなたは、デジタルマーケティング担当者です。新しいランディングページ(LP)を作成するための構成案を考えてください。

#目的
なぜ、その仕事を依頼しているのか、目的についても明確に伝えましょう。ちなみに、目的から外れた説明にならないように注意しておきましょう。

例:) 効果的なLPを構築するためのLP構成案を考える

#情報
事前知識として、今回の商品・サービスに関する参考情報を提供しましょう。
主に、ターゲットやコンバージョン目標など、作成したいLPの中で特に強調したい内容を明確に記載すると効果的です。

例:)
・ターゲット:30代~60代の自社サイトを運用している経営者向け
・コンバージョン目標:トライアルへのお申し込み
・商品:コンバージョン率を改善できるEFOツール
・競合:同様の商品を取り扱う他社が存在

#ルール
ランディングページの構成案という出力結果のクオリティを担保するために、さらに具体的な要件を明確に記載してみましょう。

例:)
・最初にheaderを設置し、その後ファーストビューを設置。sectionは最低でも6は作成
・ユーザーの関心を惹きつけるデザインイメージとコピーが必要

#出力
実際に出力してほしいLP構成案のアウトプットを明確に記載しましょう。

例:)
・LPの構成案を表形式にて出力
→各セクションのワイヤーフレームとデザインとリードコピー、キャッチコピー、ボディコピーもテキストにて記載

出力された構成案をさらに追加、修正してもらう

出力された内容を確認してみると、ファーストビューのリードコピーに「"トライアルでEFOツールの効果を体験しましょう"」と提案されていますが、この文面だとそもそも自社のEFOツールの効果をアピールできていないので、ChatGPTに調整してもらいましょう。

そのままメッセージにて、以下添付画像のように変更を依頼してみました。

【CVX活用講座Vol.36】chatGPTを上手に活用してLPの構成案を作成してみよう

このように部分的に内容の代替案を出してもらうことも可能です。

また、ChatGPTは、全く同じプロンプト(指示文)でも毎回違う出力結果を出してくれるので、

以下添付画像の「NewChat」から新しいチャットを開き、代替案をもらうことも可能です。

【CVX活用講座Vol.36】chatGPTを上手に活用してLPの構成案を作成してみよう

しかし、大前提として注意していただきたい内容としましては、ChatGPTから出力された提案内容は完璧ではないということです。どうしても、的を得ていなかったり、少し言い回しに違和感を持つことも多々あります。そのため最終的な仕上げについては、人の力を使って行う必要がありますので、自分でしっかりと添削を行い、編集するようにしましょう。

あくまで出力された提案内容は叩き台としての役割だとご理解いただけますと幸いです。

ChatGPTから出力された構成案をもとに、CVXでLPを作成してみよう

それでは、実際にChatGPTから出力された構成案を元にCVXLPを作成してみましょう。

出力された構成案を元に、まずは相性がよさそうなCVXのテンプレートを決める

CVXの管理画面から、使用するテンプレートを決めます。

しかし、その前にレスポンシブテンプレートを使用するか、PC/SPそれぞれでページを作成し、デバイスによって表示を分けるデバイス別でページを作成するかを決めましょう。

詳しくはこちらの過去の記事をご参照ください。

https://conversion-labo.jp/report/lp_coding/12522/

今回は、デザインもChatGPTの指示通りに変更し、ページに独自性を出していきたいため、デバイス別でランディングページを作成することにします。

※スピード重視で、テキスト内容だけ書き換え、デザインはテンプレートそのままを活かしたい方にはレスポンシブテンプレートがおすすめです。

次はどのCVXテンプレートを使用するかを決めていきます。

今回は、「EFOツールを運営している会社の社員が、CVXを使用してLPを作成したい時」なので、そのまま「EFOツール」のランディングページのテンプレートを使用することにします。

【CVX活用講座Vol.36】chatGPTを上手に活用してLPの構成案を作成してみよう

自分のサービスに合ったテンプレートがなかった場合でも大丈夫です。CVXのテンプレートはテキストも画像も全て差し替えが可能なので、イメージしているレイアウトに近いかどうかなど直感でテンプレートを選んでもらえれば基本的にフィットします。

また、ゼロからカスタマイズしてランディングページを作り上げたいという方には、以下添付画像の「スケルトン(テキスト主体のテンプレート)」を使用することをおすすめいたします。

※スケルトンは、汎用的な背景をベースに、テキストをシンプルなレイアウトで配置しているため、画像やテキストが後付けしやすいような設計でありながらも、LPの基本的なパーツが揃っている無駄のない構成になっておりますので、ChatGPTからの提案を反映させやすい仕様になっています。

【CVX活用講座Vol.36】chatGPTを上手に活用してLPの構成案を作成してみよう

実際の編集画面で、ページに反映してみよう

テンプレートも決まったところで、今度は実際に編集画面にてページを作成しましょう。

記事上部のサンプルプロンプトを作成した際の、以下出力結果を例に反映していきます。

【CVX活用講座Vol.36】chatGPTを上手に活用してLPの構成案を作成してみよう

まずは、「header」です。

headerは、テンプレートの既存デザインをそのまま使用しても問題ないかと思いますので、そのまま文言のみを変更します。

続いては、「ファーストビュー」です。

【CVX活用講座Vol.36】chatGPTを上手に活用してLPの構成案を作成してみよう

ChatGPTの提案では、「EFOツールのスクリーンショット」とありますので、既存デザインのようなEFOツールのスクリーンショットを用意し、変更しましょう。

その後、リードコピー、キャッチコピーを反映させます。

CVXの編集機能を使って、文字サイズなどを変更し、以下のように反映させました。

【CVX活用講座Vol.36】chatGPTを上手に活用してLPの構成案を作成してみよう

次はボディコピーを反映させたいのですが、既存デザインでは図が設置されています。これをCVX編集機能を使ってボディコピーに変更しましょう。

PC/SPテンプレートでは、要素の複製や移動が可能ですので図を削除した後、リードコピーを複製し、移動機能で図があった場所に移動させ、その後文字サイズや行間を変更し、以下のようにボディコピーを作成します。

CVX編集機能の編集方法や機能詳細につきましては、こちらをご確認ください。

【CVX活用講座Vol.36】chatGPTを上手に活用してLPの構成案を作成してみよう

そして、あらかじめ用意したEFOのイメージパーツ写真と背景の素材を差し替えて、各コピーの位置を要素の移動機能で調整します。

そうすると、画像を変えてレイアウトを微調整することでデザインの印象を変えることができます。

【CVX活用講座Vol.36】chatGPTを上手に活用してLPの構成案を作成してみよう

続いては、「特徴紹介」のセクション作成ですが、既存デザインではファーストビューの次に、「導入実績」のセクションがあります。特徴紹介に合ったセクションは、ファーストビューから数えて6セクション目の「3つの強み」が適しているかと思います。

これをファーストビューの次に移動させたい時は、サポート動画の機能12[セクションの入れ替え]を参照してください。

その後、ChatGPTの出力を反映させ、以下添付画像のように、ファーストビューの次に配置した上で、文言の変更を行いました。

【CVX活用講座Vol.36】chatGPTを上手に活用してLPの構成案を作成してみよう

このようにして、CVX編集機能を駆使し、ChatGPTの出力内容を参考にしながら反映させることで、スムーズに目的やこだわりがしっかり踏襲されたLPを作成することができるのです。

ChatGPTの活用で期待できるLPの高いアウトプット

今回は、ChatGPTを活用してLPの構成案を生成し、その出力内容を踏まえたランディングページ作成の方法についてご案内させていただきました。

いざLPCVXで作り始めようと思っても、どんな構成にしたらいいのか、どんな文言を入れ込んだらいいのか悩んでしまってなかなか捗らないことがあるかもしれません。

そんな時に、ChatGPTに提案をしてもらって、ページ作成の参考にしてみてはいかがでしょうか。

プロンプト(指示文)を更に細かく、更に自分なりの内容にすることでより質の高い出力内容が期待できますので、試行錯誤してみても良いかと思いますのでお試しください。

なお、CVX導入をご検討いただけるお客様に対して、今回ご紹介した内容以外の導入支援も行っていますので、興味をお持ちの方はぜひ一度お気軽にお問い合わせくださいませ。

CVXについて詳しく知りたい方はこちら

CVX