2022年11月のリリース以降、2ヶ月で1億ユーザーを突破するなど、驚異的なペースで普及が進むChatGPT。

その活用の範囲は多岐にわたり、上手に活用すれば、ChatGPTでWebサイトを作成することもできます。

本記事では、ChatGPTを活用してWebサイトを作成する方法を、プロンプト例やコツとともにわかりやすくご紹介します。

また、AI総研では経験豊富なコンサルタントによる、AI・ChatGPT活用の個別無料相談会を実施しております。自社に合った活用方法や導入の進め方などでお困りの方はお気軽にご相談ください。

⇒AI・ChatGPT活用の個別無料相談会の詳細はこちら

ChatGPTでWebサイトを作成する方法

ChatGPTでWebサイトを作成するためのステップは以下の通りです。

• ①目的とテーマの設定
• ②構成案の作成
• ③Html・cssの作成

それぞれについてわかりやすく紹介していきます。

※AI/ChatGPTを導入する前に必ず押さえておきたい、基礎知識や導入方法３パターンの比較、リスクと対策などをまとめた資料をダウンロード頂けます。
⇒AI/ChatGPT導入マニュアルの資料ダウンロードはこちら(無料)

①目的とテーマの設定

まずは、Webサイトを制作する目的とテーマを設定します。誰をターゲットに何をテーマとしたWebサイトを制作するのか、大枠を確定させましょう。

②構成案の作成

テーマが決まったら、Webサイトに掲載する項目を洗い出します。他の企業のWebサイトを参考にしつつ、ChatGPTにアイデアを出してもらうことで、幅広く検討することができます。

【プロンプト例】

あなたは優秀なWebデザイナーです。

XXXに関するWebサイトに掲載する項目を洗い出してください。

【実際の回答例】

※上記は、生成AIに関するサービスを提供する企業のWebサイトに掲載する項目を洗い出してもらった結果です。Webサイトに掲載した方が良い項目を幅広く洗い出しており、検討時間を大幅に短縮することができます。

③Html・cssの作成

作成した構成案をもとに、Html・css形式での出力を行います。Htmlとcssは別々に出力するのがおすすめです。

【プロンプト例】

作成した構成案をもとに、HTMLコードを作成してください。

【実際の回答例】

※上記は、②で作成したWebサイトの構成案をもとにHtmlコードを生成した結果です。複雑なコードが一瞬で生成されました。cssコードについても同様の方法で制作することができます。

Webサイト作成に使えるChatGPTのプロンプト４選

Webサイト作成に使えるChatGPTのプロンプトとして、以下の4つが挙げられます。

• ①ブログ記事の執筆：そのまま投稿できるほど自然な文章を自動で作成
• ②キャッチコピー：見る人をひきつけるクリエイティブなコピーの作成
• ③画像の作成：Webサイトを彩るキャッチーな画像を瞬時に作成
• ④FAQの作成：ユーザーに寄り添ったわかりやすいFAQの作成

それぞれについてわかりやすく紹介していきます。

※ChatGPTなどのAIツールを活用する際に、コピペで使える定番のプロンプト21選や、上手に書くコツをまとめた資料をダウンロード頂けます。
⇒ChatGPT/AIツールの定番プロンプト21選の資料ダウンロードはこちら(無料)

①ブログ記事の執筆：そのまま投稿できるほど自然な文章を自動で作成

ChatGPTにWebサイトに掲載するブログ記事の文章を作成させることができます。文量や文体、含める内容、ターゲットとなる読者などを具体的に設定することで、自分の目的に合致した文章を生成することができ、一から自分で文章を作成するよりはるかに効率的になります。

【プロンプト例】

あなたは人気のブログ記事のライターです。

以下の条件に基づき、XXについて解説するブログ記事の文章を作成してください。

###条件：”””

・400文字程度

・「です」「ます」調

・2～3行ごとに改行をする

・メリットとデメリットを併記

・XXX

“””

【実際の回答例】

※上記は、生成AIを解説するブログ記事の文章を作成させた結果です。正確で自然な日本語で書かれており、このままコピペしても問題ないくらい質の高い回答となっています。

②キャッチコピー：見る人をひきつけるクリエイティブなコピーの作成

ChatGPTに、Webサイトで販売する商品等のキャッチコピー案を作成してもらうことができます。

自分では思いつかない表現や売り文句を考えてくれるため、より良いコピーの作成が可能となります。

【プロンプト例】

あなたはプロのコピーライターです。以下の条件に基づき、Webサイト上で××という商品を紹介するキャッチコピーを5個作成してください。

###条件：”””

・15文字以内

・XXのXXという特徴を強調

・消費者が思わずほしくなるような魅力的な内容

”””

【実際の回答例】

※上記は、Webサイト上に掲載する化粧水製品のキャッチコピーを作成してもらった結果です。いずれも実際の広告にありそうな魅力的でキャッチーなコピーとなっています。

※200事例の分析に基づく、企業のAI/ChatGPT活用方法の９つの定石と最新事例をまとめた資料をダウンロード頂けます。
⇒AI/ChatGPTの活用アイデア集の資料ダウンロードはこちら(無料)

③画像の作成：Webサイトを彩るキャッチーな画像を瞬時に作成

ChatGPTは、文章だけでなく、画像を作成することができます。デザインスキルがなくても、Webサイトに掲載するイラスト・背景・アイコンなどの画像を思い通りに作成することが可能です。

【プロンプト例】

以下の条件に基づき、XXに関するWebサイトに掲載する画像を作成してください。

###条件：”””

・XXをイメージした画像であることが一目で分かる

・アニメ調

・縦：横=1：2

”””

【実際の回答例】

※上記は、AIに関するサービスを提供する会社のWebサイトに掲載するために、人とAIが協力してよりよい社会を創り上げていく様子をイメージした画像を作成してもらった結果です。伝えたいイメージをしっかりと再現し、かつ、見る人をひきつけるような鮮やかな画像となっています。

④FAQの作成：ユーザーに寄り添ったわかりやすいFAQの作成

ChatGPTを上手に使えば、Webサイトに掲載するFAQも自動で作成することができます。具体的な方法は、以下の通りです。

• ⑴ 問い合わせ履歴を読み込ませる
• ⑵ 同業界での一般的なFAQを読み込ませる
• ⑶ 回答文のダブルチェック

それぞれについてわかりやすく紹介していきます。

⑴ 問い合わせ履歴を読み込ませる

まず、ChatGPTに過去の問い合わせ履歴を読み込ませます。過去の質問と回答の履歴から、ユーザーの満足度が最も高かったものを学習させ、これに基づいて最高のFAQを完成させます。

【プロンプト例】

以下は、過去X年間にユーザーから寄せられた問い合わせ履歴です。この履歴をもとに、以下の3つの作業を順番に行ってください。

###作業１

まず、これらの履歴データの中で、最も頻繁に登場するユーザーからの質問のトピックを特定してください。

###作業２

次に、これらの問い合わせに対して提供された回答の中でユーザーの満足度が高かったものを分析してください。

###作業３

作業2の分析をもとに、一般的な質問とそれに対する効果的な回答を含むFAQを作成してください。

⑵ 同業界での一般的なFAQを読み込ませる

次に、同じ業界でよくある一般的なFAQをリストアップし、①で作成したFAQと比較して、必要に応じて修正していきます。

一般的なFAQのリストアップもChatGPTに行わせることができます。

⑶ 回答文のダブルチェック

最後に、生成した回答文を、ChatGPTと人間が共同でダブルチェックします。

ChatGPTが生成した文章は基本的には正確なものですが、まれに誤りや不適切な内容が含まれることがあるので、FAQを公開する前に人間によりダブルチェックを行うことが必要不可欠です。

ChatGPTでWebサイトを作成する際の３つの注意点

ChatGPTでWebサイトを作成する際の注意点として、以下の3つが挙げられます。

• ①個人情報や機密情報を入力しない
• ②生成したコンテンツが著作権を侵害しないか確認する
• ③生成されたコンテンツを業務等に活用する場合はダブルチェックをする

それぞれについてわかりやすく紹介していきます。

※AI/ChatGPTを導入する前に必ず押さえておきたい、主要なリスクと具体的な対策をまとめた資料をダウンロード頂けます。
⇒AI/ChatGPT導入のリスクと対策ガイドブックの資料ダウンロードはこちら(無料)

①個人情報や機密情報を入力しない

ChatGPTに入力した情報は、ChatGPTが学習するために、基本的にはクラウド上で保管されます。

そのため、会社内部の機密情報や顧客の個人情報などを入力してしまうと、サービス提供者や他のユーザーに機密情報が流出してしまうリスクが存在します。

ChatGPTに機密情報を入力しなければならない場合には、ChatGPTに入力したデータを学習させないようにするオプトアウト機能をオンにすることで、情報漏洩リスクを回避することができます。

ChatGPTのオプトアウト機能の設定方法や注意点については、以下の記事でわかりやすく紹介しています。

⇒ChatGPTのオプトアウト機能とは？情報漏洩を防ぐ設定方法を紹介

②生成したコンテンツが著作権を侵害しないか確認する

ChatGPTの提供元であるOpenAI社は、ポリシーにおいて、ChatGPTが生成したコンテンツについて著作権をもたないことを明示しています。そのため、ChatGPTが生成した文章や画像などのコンテンツを業務等で利用しても、OpenAI社の著作権は侵害しません。

しかし、ChatGPTが生成した画像が、他社のコンテンツと類似する場合には、他社の著作権を侵害する可能性があります。

そのため、ChatGPTが生成したコンテンツが、他社のコンテンツと類似していないかを確認することが重要です。

③生成されたコンテンツを業務等に活用する場合はダブルチェックをする

ChatGPTが生成したコンテンツは、基本的には適切なものですが、中には不適切な表現が含まれているコンテンツが生成されることもあります。

そのため、ChatGPTが生成したコンテンツを業務等に活用する場合には、事前に人の目でダブルチェックをすることが重要です。

OpenAI社が推奨するプロンプトを上手く書く８つのコツ【実例有】

OpenAI社が公式ページで推奨するプロンプトを書くコツとして以下の8つが挙げられます。

• コツ①最新モデルのChatGPTを使用する
• コツ②指示/命令と補足情報を書き分ける
• コツ③できるだけ具体的に書く
• コツ④参考になる回答例を書く
• コツ⑤最初はシンプルに書き、その後修正していく
• コツ⑥あいまいな説明や表現を避ける
• コツ⑦何をしないべきかよりも何をすべきかを書く
• コツ⑧コード作成時は書き始めで適切な回答に誘導する

それぞれについてわかりやすく紹介していきます。

※これさえ読めば、ChatGPTの機能・できること・活用方法まで全てわかる、最新情報をまとめた資料をダウンロード頂けます。
⇒【5分でわかる】ChatGPT活用ガイドブックの資料ダウンロードはこちら(無料)

コツ①最新モデルのChatGPTを使用する

最新モデルのChatGPTを使用することで、より精度の高い回答を得ることができます。

現在ChatGPTの最新モデルはGPT-4であり、月額20ドルの有料プランである「ChatGPT Plus」を契約することで利用が可能です。

GPT-4は無料プランで利用できるGPT-3.5に比べ、最新のデータを学習していたり、日本語での入出力性能が向上していたりと、性能が大幅に向上しています。

※生成AIツールの導入を検討される方に、ChatGPTを含む10大生成AIツールの特徴や選び方、活用方法をまとめた資料をダウンロード頂けます。
⇒10大生成AIツール徹底比較の資料ダウンロードはこちら(無料)

コツ②指示/命令と補足情報を書き分ける

プロンプトの構成要素は、大きく①指示/命令②文脈の補足情報③出力形式の指示の３つに分けられますが、最初に①指示/命令を書くことが重要です。

また、これらの構成要素を、「###」や「”””」といった区切り記号を使い、書き分けることで、ChatGPTはそれぞれのテキストが何を意味しているのかを高精度で理解してくれます。

×悪いプロンプト例

※ある程度正しい回答が得られていますが、基礎知識がない人には、やや理解が難しい専門用語や表現が使用されています。

◯良いプロンプト例

※冒頭の指示に加えて、文脈や出力形式を書き分けて入力することで、自分の目的にマッチする回答を引き出すことができています。

コツ③できるだけ具体的に書く

自分が期待する回答を得るためには、5Ｗ1Ｈを示したり、文字数や文章構成を指定するなど、プロンプトをできるだけ具体的に書くことが重要です。

また、複雑な指示をする場合には、複数のステップに分けて指示を出すなどの工夫をすることで、精度の高い回答が得られる可能性が高まります。

×悪いプロンプト例

※内容はある程度正しいですが、回答が冗長で、やや理解が難しい専門用語や表現も使用されています。

◯良いプロンプト例

※説明する対象や文量を具体的に指定することで、自分の目的にマッチしたわかりやすい回答を引き出すことができています。

コツ④参考になる回答例を書く

プロンプトに、自分が期待する回答の例を含めることで、自分が求める回答が出力される確率を高めることができます。

例えば、ある会社について説明してほしい場合には、回答に含めてほしい内容の例（CEOの名前、設立年、所在地、代表的なサービスなど）をプロンプトに含めることで、自分が求める情報が得られる可能性が高まります。

×悪いプロンプト例

※内容はある程度正しいですが、質問が漠然としているため、自分が求めていない情報も多く含まれています。

◯良いプロンプト例

※回答に含めてほしい内容の例や回答の形式を示すことで、自分が求めている情報を含んだ回答を引き出すことができています。

※文章作成やリサーチなど日々の業務効率化に使える、おすすめAIツールや５大活用方法、ポイントをまとめた資料をダウンロード頂けます。
⇒【今日から使える】AI/ChatGPT活用仕事術大全の資料ダウンロードはこちら(無料)

コツ⑤最初はシンプルに書き、その後修正していく

プロンプトを書く際は、最初は具体例や形式の指示などを入れずにシンプルに書き、その後、具体例を示したり文章構成を指定したりして修正していくことがコツです。

特に複雑な指示を出す場合には、一回の指示で自分の望む回答を得ようとするのではなく、シンプルな指示から得られた回答をもとに、地道にプロンプトを修正していくと、うまくいく可能性が高まります。

シンプルなプロンプトの例　

例えば、ChatGPTについてあまり知らない人が、ChatGPTを利用するメリットを知りたい場合、まずは、以下のように、シンプルに質問を入力します。

ChatGPTのメリットを様々な角度から説明してくれていますが、今回はデスクワークの場面で利用するメリットに絞って知りたかったため、期待する回答は得られませんでした。

修正のためのプロンプトの例

次に、上記のプロンプトを修正し、デスクワークで利用するメリットをシーンごとに説明するように依頼し直しました。

これにより、期待していた通り、デスクワークを効率化するヒントを得ることができました。

コツ⑥あいまいな説明や表現を避ける

プロンプトにあいまいな説明や表現を含めると、自分が意図しない回答が出力される可能性があります。このような記載は避け、できるだけ明確に指示を出すことが重要です。

×悪いプロンプト例

※「環境問題について」「できるだけわかりやすく」というあいまいで抽象的な表現を用いたため、様々な話題が散在してしまい、脈絡のない回答になっています。

〇良いプロンプト例

※環境問題の中でも特に何が知りたいのかを、文量や文体とともに条件として示すことで、自分が求めている回答をうまく引き出せています。

コツ⑦何をしないべきかよりも何をすべきかを書く

プロンプトには、「何をしないべきか」よりも「何をすべきか」をしっかりと書いた方が回答の精度が高まります。

×悪いプロンプト例

※「専門用語を使わない」「文量が多くなりすぎない」という「してはいけないこと」を指示しました。確かに専門用語は使われていませんが、「まるで物語を作る作家のように」「友達のようなもの」といった余計な表現が含まれ、簡潔さやわかりやすさの点ではいまひとつです。

〇良いプロンプト例

※「初心者にも理解できるように」「200文字以内」という「すべきこと」を指示したため、初心者でも理解できるような簡潔でわかりやすい回答を得られています。

コツ⑧コード作成時は書き始めで適切な回答に誘導する

ChatGPT でコードを作成する場合には、最初にリーディングワード（コード生成時にモデルを特定のプログラムに誘導する言葉）を使うことで、適切なコード生成が行われやすくなります。

例えば、ChatGPTでPythonのコードを作成したい場合には、以下のように「import」というPythonのリーディングワードを追加することで、ChatGPTにPythonでコーディングすべきであることを認識させることができます。