生成AIを活用したWEBサイト制作とは

生成AIを活用したWEBサイト制作のメリット

従来のWEBサイト制作では、ページ構成や原稿作成、デザイン、コーディングなど、多くの工程を人の手で行っていました。そのため、時間とコストがかかり、思うようなサイトを制作するのが難しいという課題がありました。

しかし、近年、生成AIの活用により、WEBサイト制作の効率化とクオリティの向上が実現できるようになってきました。

生成AIを活用したWEBサイト制作には、以下のメリットがあります。

作業効率化：生成AI（特にGPT-4など）を活用することで、ページ構成や原稿作成、SEO対策などの作業が高速化します。例えば、これまで数か月かかっていたサイト制作が、AIの活用によって数週間で完成するケースもあります。

デザインの柔軟性：画像生成AI（Midjourneyなど）による自動画像&ロゴ生成機能を用いることで、企業独自のデザイン要素を手軽かつ迅速に作成できます。これにより、ビジュアルにおいても競合他社と差をつけることが可能です。

マーケティングへの応用：生成AIを活用することで、サイト制作だけでなくSEO対策やウェブ広告、アクセス解析など、後続のマーケティング活動にも一貫した高品質なサポートが可能となります。

生成AI（ChatGPT、Bardなど）でペルソナを作成する

まずは、ターゲットとなるユーザーを明確にし、彼らがどのようにWebサイトを利用するのかを考えましょう。ペルソナとジャーニーマップを作ることで、Webサイトの目的やターゲットユーザーのニーズを明確にすることができます。

AIへの指示（プロンプト）の精度を上げることで、望んだ回答をする可能性が高まります。ここでは、ペルソナを作成するためのプロンプトを紹介します。ChatGPTを使う場合、Custom instructions(カスタムインストラクション)を利用し、企業情報を事前に伝えたり、具体的に回答させたりと、さらに精度を上げることも可能です。

また、一度で完璧なものを作ろうとせず、『もっと健在層のペルソナとして改善して』などとキャッチボールをしながら最適化してください。

ペルソナ作成のプロンプト例

あなたは経験豊富なマーケターです。
以下の”# 参考情報”を踏まえて、ペルソナを考えて”# 項目”を記載して下さい。その際に”# 目的”を参考にして下さい。
そして、そのペルソナを”# 目的”にかなうように3回改善を繰り返しながら自分でブラッシュアップして下さい。
また、改善するたびに以下の”# 採点基準”で自己評価で点数とその理由を教えてください(100点満点)。# 目的:
“””
ペルソナを定義し、XXX株式会社の見込み顧客を可視化することで、サイト制作やマーケティング施策に活用したい
“””# 採点基準:
”””
プラス評価
・具体性が高い
・端的でわかりやすい言葉を使っている
・ストーリー性がある
・XXX株式会社にとって有益な顧客である
・現実的にボリュームのある顧客層である
マイナス評価
・抽象的過ぎる
・表層的な内容に留まっている
・非現実的な顧客層である（ボリュームが少ない顧客層である）
”””# 項目:
“””
名前: ペルソナに名前をつけることで具体性が高まり、更にリアルな人物像を描くことができます。
年齢と背景: ペルソナの年齢とそれに伴う社会的な背景を設定します。たとえば、学生か、働いているか、などの情報です。
主な情報収集方法:ペルソナが普段どのような手段を使って情報収集をしているか詳しく描写します。
生活スタイル: ペルソナの日常生活を描写します。どのような趣味を持っているか、一日の過ごし方などです。
ストーリー: ペルソナがXXX株式会社をどのように利用していくかのストーリーを描写します。これはペルソナがリアルな存在となるために重要な要素です。
所属企業名：ペルソナが働く具体的な企業名を記載します。
業界：ペルソナが働く会社の業界を記載します。
企業規模：ペルソナが働く企業規模（社員数、年商など）を記載します。
事業内容：ペルソナが働く会社の事業内容を記載します。
役職：ペルソナの役職を記載します。
担当業務：ペルソナの業務内容を簡潔に記載します。
課題：業務上の課題や悩みを記載します。課題や悩みが発生している原因を詳しく記載します。
検討事項：課題や悩みを解決するために必要な検討事項を記載します。
期限：課題や悩みを解決する期限を記載します。
予算：課題や悩みを解決するために使える費用を記載します。
その他：課題や悩みを解決するために必要なその他の要素があれば記載します。
“””# 参考情報:
XXXXX

生成AI（ChatGPT、Bardなど）でカスタマージャーニーを作成する

続いて、ジャーニーマップの作成です。

プロモーション戦略・マーケティング戦略を考えるうえで、ペルソナとのタッチポイントや施策立案を可視化していく際にジャーニーマップは有効です。また、サイト制作時にコンテンツ候補をMECEに議論する際にもジャーニーマップは役立ちます。

前項でペルソナを作成したら、同じAIチャット内で、下記のようなプロンプトを作成し、ジャーニーを作成しましょう。別のAIチャットでジャーニーを作成する場合は、ペルソナを事前情報や参考情報としてAIに情報提供した上で、ジャーニーマップを作成してください。

カスタマージャーニーマップのプロンプト例

上記で作成したペルソナのカスタマージャーニーマップを以下に従って記載してください。
以下の”# 項目”を記載して下さい。その際に”# 目的”を参考にして下さい。
そして、そのペルソナを”# 目的”にかなうように3回改善を繰り返しながら自分でブラッシュアップして下さい。
また、改善するたびに以下の”# 採点基準”で自己評価で点数とその理由を教えてください(100点満点)。# 目的:
“””
どのような心理でサイトに訪問しているのか可視化し、サイトのコンテンツ企画やUI/UX改善に役立てる
“””# 採点基準:
”””
プラス評価
・具体性が高い
・ストーリー性がある
マイナス評価
・抽象的過ぎる
・表層的な内容に留まっている
・ウェブサイトに関係がない
”””# 項目:
“””
ステージ
・認知
・興味関心
・比較検討
・問い合わせそれぞれのステージで以下の項目を記載しなさい。
思考
行動
感情
ホームページ利用シーン
ホームページで訴求すべきコンテンツ
KPI
“””

生成AI（ChatGPT、Bardなど）でワイヤーフレームを作成する

サイト制作でよくある、サイトマップの作成やワイヤーフレームの作成にも生成AIは活用できます。上記で紹介した、ペルソナ・ジャーニーマップのプロンプトを参考に、サイトマップやワイヤーフレームを作成できます。

サイトマップはそれほど難しくないと思うので、参考情報や注意点をAIに指示しながら、作成ください。

ワイヤーフレームについては、以下のプロンプトのように、アウトプットイメージを伝えてると良いと思います。弊社のコーポレートサイトを作る際に使用したプロンプトを参考に記載します。

（まだ現時点では私は使ったことが無いので、利用したら記事にしようと思いますが）Microsoft 365 CopilotやRelumeを使えば、GPTが考えたワイヤーフレームを、図説したものに一瞬で作成も可能だと思います。

ワイヤーフレーム作成のプロンプト例

あなたは経験豊富なライター兼Webディレクターです。
コーポレートサイトの原稿とレイアウトを作成しようとしています。
以下の#サービス名称に関するサービスの原稿を作成してください。
その際に以下の#会社情報と#想定ターゲットを参考にしてください。
そして、その生成した文章をもっと#想定ターゲットにとって興味関心が高くお問合せに繋がるように5回改善を繰り返しながら自分でブラッシュアップしてください。
また、改善するたびに以下の#採点基準で自己評価で点数を教えてください（100点満点）#採点基準:”””
プラス評価
・想定ターゲットにとって興味関心が高い内容になっている
・会社情報の得意領域を加味した内容になっている
・サービス内容の趣旨に合っている
・ユーザーが飽きないビジュアルおよびレイアウトになっている
マイナス評価
・一般的な内容で他社との差別化がされていない“””#会社情報:”””
AI技術の活用と革新が我々の特徴です。AIチャットボットの開発から短期ウェブサイト制作、デジタルマーケティングまでを一手に担うチームで、経営にインパクトをもたらすAI活用と、デジタルマーケティング領域に精通したメンバーが揃っています。業界を先導する新たな価値創出に挑戦中です。“””#想定ターゲット:”””
・安くクオリティの高いWeb制作を短期間でつくりたい
・経験豊富な会社に短期間でWebサイトを制作してほしい“””#サービス名称:”””
短期間AIサイト制作サービス“””#特徴:”””
・制作日数が3分の1でハイクオリティのサイト制作
・ご提案時にモックアップを提示
・経験豊富なWebディレクターが対応“””#Desired Format:”””
1.ヒーローセクション:
∟レイアウト
∟ビジュアル/イラストレーション: サービスが対象とする課題や解決策を視覚化。
∟キャッチフレーズ: サービスが解決する特定の問題を明確に示す。
2.サービスの課題と解決策:
∟レイアウト
∟ビジュアル/イラストレーション
∟目の前の課題: あなたのサービスが対象とする具体的な問題や痛みを列挙。
∟解決策: 提供するサービスがどのようにこれらの課題を解決するのかを具体的に説明。
3.サービスの詳細な説明:
∟レイアウト
∟ビジュアル/イラストレーション
∟詳細な説明
4.主要な特徴
∟レイアウト
∟ビジュアル/イラストレーション
∟利点
∟サービスの価値と影響:　サービスの提供がもたらす具体的な変化や効果をリスト形式で提示。　現段階での成功事例がない場合、類似の事例や、サービスが提供可能な可能性を説明。
“””

画像生成AI（BingやMidjourneyなど）で画像生成する

サイト制作時には、ロゴやイメージ画像を作成することがあります。デザイナーさんは、素材集から画像を選ぶことに費やす時間もかなりのボリュームなのではないでしょうか。
MidjourneyやBingを用いて、AIが独自にデザインした画像を生成することができます。これにより、オリジナリティあふれるサイトを制作することができますし、画像を探す時間も短縮することが可能です。
ただし、AIチャットと同じように、プロンプトが重要になってきますので、画像生成AIプラットフォームに適したプロンプトの特性をキャッチアップしていくことが重要です。
特にMidjourneyでは以下のような多くのパラメータがあるので、使いこなすには時間がかかります。

ここでは、Midjourneyでウェブサイトのメインビジュアルを作るプロンプト例と、Midjourney特有のパラメータを紹介します。

Midjourneyのプロンプト例

top page for website, ux/ui, ux, ui,
Background color: Futuristic color tones, Title text size image: Medium to large, Title layout: Top or center, Robot illustration: Modern AI robot, Keyboard operation: The robot typing on the keyboard, Website completion representation: Visual effect of instant website generation –ar 3:2 –q 2

Midjourney特有のパラメータ例

①基本的なパラメータ:
・アスペクト比 (aspect/-ar): 画像のアスペクト比を指定します（例: 3:2または1920×1280）
・幅 (w) と 高さ (h): 画像の幅と高さを指定します②高度なパラメータ:
・ベータ (beta): 実験的なアルゴリズムを使用して画像を生成します
・HD (hd): 高解像度の画像を生成するための古いアルゴリズムを使用します
・シード (seed): 画像生成のためのシード値を指定します
・同じシード (sameseed): すべての生成画像に対して同じシード値を使用します​
・いいえ (no): 画像から特定の要素を禁止します（例: -no plants）
・画像プロンプトの重み (iw): 画像プロンプトの重みを設定します
・スタイル化 (stylize): 画像スタイルの強さを指定します
・品質 (q): 画像の品質を調整します​
・カオス (chaos): 画像のランダム性を制御します③効率とコストに関連するパラメータ:
・速度 (fast): 画像をより速く、一貫性が低く、コストが低く生成します
・停止 (stop): 画像の生成プロセスを停止します④その他のパラメータ:
・ビデオ (video): 画像生成の進行状況のビデオを保存します
・v <1または2> (v): 最後の改善のために古いアルゴリズムを使用します
・アップライト (uplight): 画像を生成するために“light”をよりアップスケールに使用します

生成AI活用のご相談について

PixPotでは、生成AIの活用コンサルティングや、高品質＆短納期のサイト制作サービスを提供しています。
さらに、DXコンサルティングとして、サイト制作後に課題として多く見受けられる、SEO対策、ウェブ広告、アクセス解析、CRMやMAツール導入などの幅広いサポートを提供します。
お気軽に、お問い合わせください。