Chat GPTをつかってWebランディングページを作成するコツ

AIによる新しいWebデザイン制作の進めかた

landing page for smartwatch made by chatgpt

この記事では、対話型AIチャットボット「ChatGPT」を、Webページ制作にどのように活用できるか、実際に試しみたのでご紹介。

スポーツマンやアスリート向け、スマートウォッチのWebランディングページを、ChatGPTの力をつかって作成します。

landing page for smartwatch made by chatgpt

Midjourneyの呪文プロンプトで生成できる、架空のスマートウォッチ。

ChatGPTがWebページのレイアウトや、各セクションのコンテンツ内容やUXライティングに、どのように役立つのか、実験を目的としたチュートリアルです。

 

ChatGPTとは何?

ChatGPTは、イーロン・マスク氏やマイクロソフト社が出資している、OpenAI社が作成した対話型AIチャットボットです。

ユーザーが、任意のトピックについて、自由に質問(日本語にも対応)をすると、AIが生成した回答例を返してくれ、その精度の高さから世界中で話題に。

2022年11月にリリースされ、1週間足らずで100万人以上が無料トライアルを体験するという、驚異的なユーザー数を記録

各社の100万人ユーザーまでの歩み。chatGPTは、たったの5日。

ちなみに、Netflixが100万ユーザーを獲得するまで、41ヶ月かかっています。

 

ChatGPTをつかった、ページ構成と要件定義

まずはWebページに掲載するコンテンツと機能面における、キホンの構造を決めます。

記述した意図を、ChatGPTがより理解できるよう、表現したい内容をはっきり決め、関連するすべてのキーワードを、追加します。

スポーツ選手向けスマートウォッチのWebランディングページに使用する、コンテンツセクションについて説明してください。

ChatGPTにランディングページの構造作成について質問

ChatGPTにランディングページの構造を作ってもらう

販売する架空のスマートウォッチが、スポーツ選手向けに開発されたことを、はっきりと伝えます。

ChatGPTの情報をもとに、以下のセクションを設計することに。

  1. ヒーローセクション : 見出しタイトルや、簡単な説明テキスト、魅力的な画像、押したくなるCTA(コール・トゥ・アクション)ボタンが特長。
  2. メイン機能: 製品のもっとも得意とする機能を、強調して表現するセクション。
  3. 技術的なスペック、仕様 : バッテリーの持続時間や内蔵センサーなど、購入を検討している潜在的なユーザーユーザーが知りたい、より詳しいハード面など
  4. ユーザーの声、口コミ : 製品をより信頼できるものにするために、実際に製品を使っているユーザーの声を、ずらりと掲載するセクション追加
  5. サポートと保証 : 壊れたときの保証や、カスタマーサポートの連絡先など。FAQセクションと一緒にしても良し
  6. ページ最後にある行動喚起 : ユーザーがページの最後に到達したときに、行動を促す部分
  7. フッター : ここでは、必要最低限の項目のみ(問い合わせ先やSNSアカウントのリンクなど)

FAQセクション、ページ最後のCTA、フッターが抜けていたので、一緒に追加。

 

ページレイアウトの設計

WebページはElementorで作成

では、ChatGPTが生成した、コンテンツの構造をつかって、Webデザインに変えてみましょう。

Web制作のスピードをアップさせるため、WordPress向けドラッグ&ドロップのページエディタ「Elementor」を利用。

作成するデモページがこちら

 

あらかじめコンテンツが配置されたワイヤーフレームを利用し、デザインも省略。

wireframe kit for elementor

 

ヒーローセクション

ヒーローセクションとは、訪問ユーザーがWebページに訪れたときに、まず最初に目にする部分。

ここさえ見れば、何のウェブサイトなのか、すぐに分かるようにしましょう。

ヒーローセクションのワイヤーフレーム

見出しタイトルや、スマートウォッチについて2〜3行の簡単な説明、CTAボタン、製品画像が必要。

 

メイン機能

注目の機能についてまとめたセクション、グリッドに並べて表示します。

これらの項目も、後ほどChatGPTでコンテンツを生成します。

メイン機能を並べて表示

 

スペック、仕様

潜在ユーザーが気になる、技術面についていくつか紹介するセクション。

誰にでも伝わる、わかりやすさが重要。

バッテリー寿命を伝えるときは、「296mAh」ではなく、「充電なしで2日間使える」のほうがわかりやすい。

技術スペックについて

 

お客さまの声、口コミ評判

製品をより信頼できるものにするために、実際に製品を使っているユーザーの声を掲載すると効果的。

お客さまの声と口コミ

 

FAQ、よくある質問

よくある一般的な質問をまとめた、FAQセクション。

製品を購入する前に確認したい、気になるポイントをまとめて表示。

よくある一般的な質問をまとめた、FAQセクション。

 

行動喚起

訪問したユーザーが購入ボタンを押すなど、行動を促す文字テキストを含め、CTAボタンと一緒に表示。

行動喚起セクション、ユーザーに最後のひと押しを。

 

フッター

今回のデザインでは、お問い合わせ先やSNSリンクなど、必要最低限のミニマル仕様となっています。

フッターセクション

文字と画像を変えるだけで、ウェブページが完成するので、制作スピードアップ、時短にも。

ドラッグアンドドロップが基本なので、Webページを「できるだけ手軽に」作成したいときは、ぜひおすすめ。

 

実際のコンテンツでレイアウトを埋める

現段階では、ダミー画像とテキストが表示された状態のため、ChatGPTをつかって、実際のコンテンツを追加していきます。

ヒーローセクション

見出しタイトルと、簡単な製品の説明が必要なため、ChatGPTに聞いてみます。

スマートウォッチのヒーローセクションの見出しと、スマートウォッチを使用する主な利点の要約をして

ヒーローセクションの項目をChatGPTで作成

見出しはそのまま使えそうですが、製品についての要約が長すぎるので、短く抜粋して表示します。

画像はのちほど、MidJourneyで自動生成します。

Hero Section with japanese real text

 

メイン機能

ユーザーが購入するきっかけにもなり、製品の強みでもある、メイン機能を表示。

各機能について短く、ポイントを抑えた説明をすることを心がけよう。

GPS追跡、心拍監視、ワークアウト追跡などのスマートウォッチの機能が、どのようにスポーツ選手のパフォーマンス向上や、目標達成に役立つかを説明して。

key-features-by-chatgpt

見事に4つの特長を挙げ、それぞれについての説明テキストも表示されました。

少し長いので、ここも抜粋してコンテンツに利用します。

chatGPTで生成された内容をコンテンツに流用

 

スペック、仕様

製品が提供する、防水性やWiFi接続など、ハードウェアの詳細をまとめたセクション。

技術的な知識がない人が見ることを前提に、わかりやすさも重要。

良いスマートウォッチの機能を、ChatGPTに質問してみた

ここでも、ChatGPTは技術的な詳しい内容をリストアップ。

さら、誰でにもわかるような、簡単な「言い回し」で表現してくれました。

chatGPTの答えをもとに、スペック仕様についてコンテンツを埋めた。

 

お客さまの声、口コミ

実際のホームページでは、製品をつかったユーザーの声が必要ですが、ここではChatGPTに生成してもらいます。

実際にスマートウォッチを使用し、その効果を実感したスポーツマンの体験談を3つ書いて

ChatGPTに口コミを生成してもらいました。

ChatGPTの文章は、長くなりがちなので、短くしてもらいましょう。

体験談をもう少し短くしてくれませんか

長すぎたので、短くしてもらいます。

本当に、短くしてくれました。

まるで誰かとチャットしているような感覚で、ごくごく自然に反応してくれます。

お客さまの口コミも、ChatGPTが生成する時代がくるかもしれません。

 

よくある質問コーナー

参考例として、保証サポートと修理について、ChatGPTに質問してみます。

スマートウォッチに関する会社のサポートと保証の方針、およびカスタマーサービスへの連絡方法に関する情報の一例を提供して

support and warranty which are made by chatgpt

そのままFAQコーナーに使えそうな、有益な文章テキストを瞬時に生成。

これらをもとに、ウェブページのコンテンツを埋めていきます。

faq japanese

 

行動喚起(CTAセクション)

ヒーローセクションと同じ文章テキストでも構いませんが、製品を購入したくなる、押しの一言がほしいところ。

スポーツ選手に適したスマートウォッチのランディングページで使えるコールトゥアクションボタンのラベルを提案して

cta section made with chatGPT

ChatGPTで生成された、良さそうなキーワードをつかって、見出しタイトルと抜粋文、CTAボタンのラベルなどを決めましょう。

最後のダメ押し、行動喚起のCTAセクション

MidJourneyをつかって、架空のスマートウォッチ画像を生成し、配置したら完成。

そして実際にできあがったページがこちら

全部で30分もかからずに、製品向けWebランディングページを作成できました。

 

AIをうまく活用しよう

Midjourneyで生成した、高級スマートウォッチ

ご覧の通り、ChatGPTで制作プロセスを改善できた、と言えるでしょう。

ウェブサイトの基本となる要件定義から、実際のコンテンツ生成まで、まるで考えるという「思考」を、サポートしてもらっているような、不思議な感覚。

もちろん、現時点では、すべてをそのまま利用できるほど、完璧というわけではありません。

ChatGPTの長くなりがちな文章の抜粋なども必要です。

しかし、AIによる画像生成も含め、全体を通して、ウェブデザインの制作プロセスを、大幅に向上させてくれることは、間違いなさそうです。

快適なAIライフを👍