BLOG MENU

Chat GPTとは？シャンプーのLPを作りながら使い方と特徴を探ってみた

この記事では話題のAI チャットボット「ChatGPT」を実際に使いながら、その使い方と特徴を探ってみました。

作ったのはシャンプーのランディングページ（LP）です。LPの作り方から、構成、テキストに至るまで、とにかく ChatGPT に質問して作ってもらっています。

結論として ChatGPT は、想像していたよりずっと質の高い答えを返してくれました。今後のWeb制作を変えうるポテンシャルがあることが十分に感じられた実験だったと思います。

「 ChatGPT で何ができるだろう」
「どんな使い方をすればいいだろう」
と思っている人はぜひ読んでみてください。

Chat GPTとは？

AIの研究・開発を行う企業であるOpenAI社によって開発された AIチャットボットです。人間の話す言葉に近い自然な文章でユーザーとやりとりができるほか、プログラミング言語でコードを書いたり冗談を言ったりすることができ、各方面で話題となっています。

アクティブユーザー数はローンチ後１週間で100万人、2ヶ月後には史上最速で1億人に到達（推定）しました。ちなみに現在メジャーになっている各種アプリがアクティブユーザー数1億人達成に要した期間は以下のとおり。ChatGPTの成長がいかに早いかがよくわかります。

TikTok：9カ月
Instagram：2年半
Facebook：4年半
Google翻訳：6年

これについて ChatGPT に「ChatGPT は史上最速で成長しているアプリですか？」と聞いてみたら、「ChatGPT は大規模な自然言語生成モデル」で「成長速度を特別に最速と呼ぶことはできません」という謙虚な答えが返ってきました。こういうことができるAIチャットボットなのです。

Chat GPTの使い方をわかりやすく解説

ChatGPT はアカウントさえ作ればすぐに使えるようになります。所要時間は5分ほど。

まずOpenAIのサイトにアクセスして、ページ左下の「TRY CHATGPT」をクリックします。

まだアカウントがない人は「Sign up」をクリック。

メールアドレスもしくは Googleアカウント、Microsoftアカウントを登録すればChatGPT のアカウントができます。

あとはページ下部の枠の中に質問を書き入れてリターン、もしくは右端の矢印アイコンをクリックすれば答えてくれます。簡単ですね。

Chat GPTを使ってみた

オーガニックシャンプーのランディングページ（LP）を ChatGPT に質問しながら作ってみました。

LPを作れるかどうかより、LP 制作を通して ChatGPT の能力と特徴を体感し、適切な使い方を探るのが目的です。オーガニックシャンプーを取り上げたのも LP になっていそうだったからで、なんとなく選びました。

こんなふわっとした設定で ChatGPT と一緒に LP を作ってみます。わからないことを ChatGPT に質問し、その答えをもとにデザインツール「Figma」を使って簡単なデザインに起こしていきました。

ちなみに私はノンデザイナーで Figma の扱いには慣れていません。ChatGPT に質問し、Figma に苦戦しながら3時間ほどでできたのがこちらのLPデザインです。

画像は私のチョイスで適当に入れましたが、テキストはほぼ100％、ChatGPT の提案によるものです。

結果だけ見るとすんなり作れたように見えるかもしれません。しかしChatGPT の使い方には工夫が必要でした。ここからは制作過程をお見せします。

Chat GPTでLPを作った工程

LPの構成について質問してみた

まずストレートに「オーガニックシャンプーのLPを作ります。作り方を教えてください」と聞いてみました。回答はこちら。

タイトル
イントロダクション
製品の特徴
使い方
メリット
販売ページへの誘導

「タイトル」や「イントロ」などの項目だけでなく、テキストまでつけてくれており親切です。方向性も間違っていなさそうですが、正直、物足りない印象ではあります。

そこでより具体的な内容を引き出すため「LPの構成を作ってください」と質問したら、途端に英語になってしまいました。

こういう時は「日本語にしてください」で訳してくれます。

構成はとくに変わらずでしたが、各セクションに入れる文言を考えてくれました。しかし「厳しい化学物質にさようなら、優しいクリーンへ」のように、日本語は不自然なところが多いです。

構成も文章も期待したほどではありませんでした。「話題の ChatGPT の力とはこんなものなのか。。。」と諦めかけたとき、ふと思いました。「英語でやってみよう」と。

そしたら人が変わったようにしゃべり始めたのです。

英語で質問してみた

「オーガニックシャンプーのLPを作ります。作り方を教えてください」を英語で聞いてみました。翻訳は「DeepL」を使っています。

ご覧のとおり、発話量がぜんぜん違います。しかも日本語で聞いたときより回答が早いです。ChatGPT は英語の方がかなり得意なようです。

オーガニックシャンプーのLPの作り方として ChatGPT が教えてくれたステップを要約すると、以下になります。

ターゲット層を明確にする
製品を選ぶ
プラットフォームを選ぶ
LPをデザインする
魅力的なコピーを書く
コールトゥアクションを設置する
テストと最適化

日本語のときより質問の意図に合った回答です。しかも簡単な説明までついています。

さらに「Create an LP structure to sell organic shampoo.」と質問しました。LPの構成を聞いています。結果がこちら。

Hero section（ヒーローセクション）
Product benefits（製品のメリット）
Customer testimonials（お客様の声）
How it works（機能）
Product specifications（製品の仕様）
Frequently asked questions（よくある質問）
Call to action（コールトゥアクション）

日本語の回答に比べると、かなりいいです。LPの構成っぽくなっている。

LPのワイヤーフレームを作ってもらった

構成が思いの外よかったので、同じ構成でワイヤーフレームもお願いしてみました。

テキストで作ってくれました！　しかもセクションごとに入れる内容まで書いてくれている。あとはこれに沿って中身を入れていけば、かなり作れるはずです。

ではセクションの中身を入れていきましょう。

ヒーローセクションを作ってみた

まずヒーローセクションのヘッドラインをどうするか聞いてみました。

Q. ヒーローセクションのヘッドラインの例をあげてください

ChatGPT の出した答えは
「栄養たっぷりのオーガニックシャンプーで、くすみやダメージのある髪にさようなら」

かなりいい感じの答えです。

驚いたのはその後。コピーの意図まで書いてくれています。

「この見出しは、オーガニックシャンプーの主な利点（栄養補給の特性）と解決する問題（くすんだ髪や傷んだ髪）を即座に伝えています。この見出しは、強いアクション指向の言葉を使うことで、切迫感を与え、この製品がどのように健康で輝く髪を実現できるのか、訪問者にもっと知ってもらうことを促しています。また、短く、印象的で、わかりやすい見出しは、ターゲットオーディエンスの注意を引くのに効果的です」

ちなみに日本語で同じ質問をすると、「私たちのオーガニックシャンプーで髪を栄養補給」というお答えでした。意図についての言及もなし。回答のレベルがぜんぜん違います。

さらにベネフィットの記述についても聞いてみました。

Q. ベネフィットについて短い記述の例をあげてください。

回答はこちら。

「健康で輝く髪のために、最高級の天然成分のみで作られた栄養価の高いオーガニックシャンプーで、あなたの髪を変えてみませんか？」

すばらしい。個人的には満点です。

解説もすごいです。

「このステートメントでは、オーガニックシャンプーの主な利点（栄養成分）を明確に伝え、より健康的で持続可能なヘアケアの選択肢を探している消費者にアピールできるよう、その天然成分を強調しています。シンプルで理解しやすい言葉を使うことで、この製品の価値提案を素早く伝え、訪問者に詳細を知ってもらうことを促しています」

「より健康的で持続可能なヘアケアの選択肢」を探しているターゲットに向けて「天然成分」を強調しているとのこと。言うことありません。

こうしてChatGPTに作ってもらったテキストで作ったヒーローセクションがこちらです。

背景の画像は私が適当に選びましたが、どんなテキストでどんなパーツを入れるのかは ChatGPT の提案どおりです。

以後のセクションも同じやり方で作りました。結果は前掲したLPの画像を拡大してご覧ください。

Chat GPT を使ってみてわかったこと

前評判どおりにすごかった Chat GPT でしたが、高いパフォーマンスを引き出すには質問の仕方が大事だと思いました。

日本語より英語が得意

現時点では英語のほうが高いパフォーマンスを上げられそうです。同じ質問をしても日本語と情報量や深みが違います。

日本語の答えが物足りないのは翻訳だけの問題ではないと思いますが、翻訳も得意ではないようなので割り切ってDeepL に任せるのがよさそうです。

いずれ日本語でも遜色ない対応ができるようになるかもしれません。今のところは英語の方がいい回答を得られます。

例を挙げるのは得意

「お客様の声」などの例を挙げるのがうまいです。まるでインタビューしてきたかのようにバリエーションに富んだ答えを返してきます。

これを逆手にとって「〇〇の例を挙げてください」という形式で質問していました。Chat GPT が答えやすく質問するのも大事ではないでしょうか。

「それらしい答えが返ってきたけれど調べてみたらでたらめだった」と他の記事で読んだことがありますが、これも例を作るうまさの裏返しかなと思います。

Chat GPT でWeb制作はどう変わるか？

今回LPを作ってみて思ったのは、「Web制作は Chat GPT のような AI により高速かつ効率的になっていくだろう」ということです。

本記事の実践でもテキストをかなりの質で早く大量に作ることができました。しかしChatGPT に作ってもらったテキストをWeb制作の現場でそのまま使うわけにはいきません。「Google ウェブ検索のスパムに関するポリシー」でも独自の価値を生み出したり、十分な価値を付加したりすることのない、プログラムで生成されたコンテンツをポリシー違反としています。

そのままは使えないとしても仮置きなら十分です。ChatGPT 作成の文章を元にカスタマイズしていくのであれば、ゼロから作るよりはるかに早くテキストを作ることができるでしょう。

今回試したテキスト生成以外にも、「HTMLやCSSが書けた」「ワードプレスのプラグインが作れた」といった例もあります。 ChatGPT が大枠を作り、それに人が手を加えることで従来よりも早く簡単にサイトやアプリができるようになると思われます。

最後に ChatGPT に「ChatGPTでWeb制作はこれからどう変わりますか？」と聞いてみました。

いろいろ答えてくれましたが、最後の要約だけ書きます。

「全体として、ChatGPTは、Webサイト制作をより速く、より効率的に、よりユーザー中心にする可能性を秘めており、チームは最高のユーザー体験を提供することに集中することができるようになります」

まとめ

以上、ChatGPT で LP を作りながらその特徴と使い方を探ってみました。今すぐ何もかもが楽になるようなものではありませんが、遠くない未来にWeb制作を早く効率的にしてくれるポテンシャルは十分に感じられました。

ChatGPT はまだ使い方を模索する段階です。現段階でも使い方次第で、大幅な時間短縮や効率化が可能な分野もあるでしょうが、とにかく使ってみないことにはアイデアは浮かびません。ChatGPT は始めるのも簡単です。ぜひ使ってみてください。

【画像生成AI】無料の3種を比較してみた｜プロンプトはChatGPTで作成

この記事を書いた人

クーシーブログ編集部

1999年に設立したweb制作会社。「ラクスル」「SUUMO」「スタディサプリ」など様々なサービスの立ち上げを支援。10,000ページ以上の大規模サイトの制作・運用や、年間約600件以上のプロジェクトに従事。クーシーブログ編集部では、数々のプロジェクトを成功に導いたメンバーが、Web制作・Webサービスに関するノウハウやハウツーを発信中。