【レポート】生成AI × マーケティングフォーラム 2025

Web制作AI活用術アイデア出しから実装まで「明日から使える」プロンプト設計4つの極意

海外では生成AIの導入率が93%に達するなど、AIは単なる便利ツールから「共創パートナー」へと進化している。その活用度をWeb制作において高めるノウハウを、Wixが解説する。

7:00

世界で加速するAI活用の波、海外デザイナーの「93%」

Wix.com JapanのPR・コミュニケーションズディレクターとして、WixのAI機能の広報に携わる間島氏。業務効率化とアイデア創出のために生成AIをフル活用しているという間島氏は、海外のWeb制作のトレンドを示す「93%」という数字に言及した。

これは、海外のWebデザイナーが業務で生成AIを導入している割合である。生成AIがもはや特定のタスクの補助ではなく、コンテンツ生成からサイトデザインに至るまで、Web制作のあらゆるプロセスで不可欠な存在として受け入れられていることがうかがえる。

生成AIの活用により、Webサイトの構成やデザインを効率的に行い、人の手で細部を調整することで完成度の高いWebサイトを実現できます。生成AIは単なる便利ツールではなく、もはや「共創パートナー」として位置づけられています（間島氏）

海外Webデザイナーの生成AI活用シーン
［出典：https://blog.hubspot.com/website/web-designers-ai］

国内のWebサイト運営経験者においても、経験年数が5年以上のベテラン層の利用頻度が高いという傾向が見られた。これは、経験豊富なプロフェッショナルほど、AIの力を自身の価値を広げるツールとして認識し、積極的に取り入れていることを示唆している。

Webサイトの運営経験年数別にみる生成AI利用頻度。ベテラン層のほうが頻度が高い
［出典：マーケティング担当者の生成AI活用の実態に関するへの意識調査｜Wix.com Japan / クロス・マーケティング (2025年4月)｜対象者：従業員500名以上の企業に勤務する、日本全国のマーケティングを主業務とする会社員249名］

Webサイト制作の生成AI活用、4つのシーンですぐに使えるプロンプト

海外では、デザインプロセスのあらゆる段階で生成AIが活用されている。間島氏はこの潮流にならい、生成AIをWebサイト制作に活用するための、具体的なプロンプト設計のコツを、4つのシーンに沿って紹介した。これらのプロンプトの考え方は生成AIツールに依存しないため、いま使用している生成AIツールですぐに試すことが可能だ。

AI活用シーン①アイデア出しとリサーチ

デザインアイデア、ユーザーリサーチ、SEOへの活用を目的として生成AIを活用する。

①-1 アイデアを引き出す

アイデア出しのポイントは、最初から具体的な「正解」を狙わず、広いテーマで質問することだ。

プロンプト例：30代の女性が好きなWebサイトはどんなものですか？

生成AIから返ってきた回答からアイデアを絞り込み、深掘りしていくことで、アウトプットの精度が高まり、よりオリジナリティの高いアイデアが生まれる。

プロンプトは1発で正解を狙わず、キャッチボール前提で精度を上げるのが重要です（間島氏）

デザインアイデアの一例

①-2 Webサイト訪問者のペルソナを設計する

専門的な視点からのアウトプットを得るためには、生成AIの役割を定義することも有効な手段だ。

プロンプト例：あなたはプロのUXデザイナーです。自然派コスメブランドのECサイトにおける代表的なユーザー層を3人想定してください。設計には以下の要素を含めてください

「プロのUXデザイナー」という役割を与えたうえで、抱えているニーズや行動パターンなどの人物像を具体的に求めることが、精度の高いペルソナ設計につながる。

ユーザーリサーチのペルソナ設計の一例

①-3 既存Webサイトについて深いリサーチを行う

プロンプト例：Google AnalyticsなどのデータをCSV形式で入力

制作が終わった後の運用フェーズで、Google Analyticsなどの分析してほしいデータをCSV形式で入力し、「このデータからわかることを教えて」と問いかけることで、現状のインサイトを得られる。

また、画像データからプロンプトを作成することも可能だ。分析したいSNSのスクリーンショットを読み込ませ、テキスト化する。それをもとにプロンプトを作成して深掘りすれば、SNS戦略に生かすインサイトも得られ、分析に活用できる。

既存Webサイトを深掘りする際のプロンプト例

①-4 キーワードや検索意図を引き出す

SEO視点でのAI活用法だ。生成AIに検索ユーザーになりきってもらい、リアルな検索意図やキーワードを効率よく引き出す。

プロンプト例：想定するペルソナ、願望や悩みをまとめる。ペルソナをできるだけ具体的に設定することがポイントとなる。生成AIが出してきたキーワードを検索意図ごとにまとめると、その後の戦略に活かしやすくなる

キーワードや検索意図を引き出すプロンプト例

AI活用シーン②ワイヤーフレームとサイトマップ作成

ワイヤーフレーム（Webサイトの骨組みや設計図）とサイトマップ作成にも、生成AIは活用できる。一般的な生成AIツールにプロンプトで指示して骨子案を作成する方法もあるが、「Wix Studio」のような専用プラットフォームは、このプロセスをさらに効率化する。「Wix Studio」には、いくつかの情報を入力するだけで、AIがサイト構造を視覚的に理解し、サイトマップや各ページのワイヤーフレームを自動で作成してくれる機能が搭載されている。これにより、設計プロセスを大幅に短縮できる（解説動画）。

ワイヤーフレームとサイトマップ作成

AI活用シーン③画像・テキスト制作の高速化

③-1 画像生成：Webサイトのヒーロー画像

画像生成は、最初からできるだけ具体的な指示を出すことが重要となる。指示が大雑把だと汎用的な画像しか出てこないためだ。

プロンプト例：自然派コスメブランドのヒーロー画像。ナチュラルで温かみのある光、葉や花を背景に製品を置き、手書き風のイラストと柔らかい色調。中央に製品が目立つ構図で、余白を広めに

色、雰囲気、構図、手書き風などのテイストなど、イメージを細かく伝えます。また、「テキストは入れない」「人物は含めない」など、除外したい要素を最初から含めておくことも、期待する画像を生成するための有効な手段となります（間島氏）

作成された画像の一例。プロンプトを忠実に表現したものとなっている

【画像生成AIを使う上での注意点】
四谷からの「画像生成AIを使うにあたって、注意すべきポイントは？」との質問に対し、間島氏は「最も注意すべきは肖像権と著作権のリスク」だと指摘した。生成AIが学習データをもとに、実在する有名人や作品に酷似した画像を生成する可能性があるためだ。トラブルに直結する可能性が高く、「人の目」でのチェックが不可欠である。

生成AIツールによっては商用利用がNGのものもあるため、利用規約の確認も必須となります。近年の欧米でのトレンドでは、企業の透明性を保つために、生成AIで作成した画像であることを明記する流れが強まっています。法律で定められたものではありませんが、明記することで企業やブランドの信頼度が高められるでしょう（間島氏）

③-2 テキスト生成：キャッチコピー生成

「刺さるキャッチコピーを考えて」といった曖昧な指示では、汎用的でつまらないコピーになってしまう。できるだけ条件を具体的にするほど、狙っているターゲット層に響くものができる。

プロンプト例：あなたはプロのコピーライターです。以下の情報をもとに、Webサイトのトップページに掲載するキャッチコピーを5案出してください

まず生成AIにプロのコピーライターという役割を与え、専門的な視点を設定したうえで、考慮したい条件を指示する。その中からよいものを絞り、さらに「自社のトーン&マナーに沿うように」「文字数を20字以内に調整して」などのやりとりを繰り返してリライトすることで、より実用レベルに近いアウトプットが得られる。

5案の中から「一番のおすすめとその理由は？」と問いかけることで、生成AIの思考プロセスを知ることもできます（間島氏）

テキスト生成では生成AIに役割を与える

③-3 ブログ記事生成

ブログ記事を作成する場合は、基本的な要素や目的を明確にすることが重要だ。

プロンプト例：あなたはプロのブロガーです。以下の条件で、ブログ記事本文のドラフトを作ってください

ここでも「あなたはプロのブロガー」と役割を与えたうえで、この記事を読んだ読者にどうなってほしいのかという目的をしっかり伝えると、読者の行動を促す質の高い記事が生成される。また、文章のトーンを指定することで文体が崩れることを防げる。

文章のトーンを指定することも有効な方法だ

AI活用シーン④コーディングと実装の効率化

④-1 コード生成

コード生成においても、最初の指示で具体的な条件をしっかり伝えることがポイントだ。

プロンプト例：ユーザーが問い合わせを送信できるフォームをHTML+CSSで作成してください

入力項目（名前、メールアドレスなど）や、デザインのスタイル（シンプルでモダンなど）、具体的な要件も指定する。

応用例として、ChatGPTで大枠のコードを生成し、実際の開発環境に貼り付けてGitHub Copilotで完成度を高めていくなど、得意分野によって生成AIを使い分けることも、効率よく開発を進める一助となる。

作成されたコードとフォーム画面

④-2 コードに誤りがないかをチェック

生成AIで生成したコードには誤りがあるケースもある。そのチェックも生成AIで実行可能だ。

プロンプト例：以下のHTML/CSSコードに誤りがないかチェックしてください

生成AIはレイアウト崩れの原因、不要なタグ、アクセシビリティの課題まで洗い出してくれる。修正案も提示してくれるため、コーディングの初心者でも修正対応が可能となる。

コードとともにチェックポイントを指示する

【海外向けWebサイトの一次チェック】
四谷の「海外向けのWebサイト制作で注意すべき点や、使えるプロンプトはあるか？」との問いに対し、間島氏は「海外向けのWebサイトでは文化的な配慮が必要となる」と答えた。

たとえば、実際に使われている海外WebサイトのURLと共に「インド向けに作られたECサイトです。問題点があったら教えて」と聞くことで、不適切なスラングや、ヒンズー教において神聖な存在である牛の画像が不適切に使われていないかなど、文化的な一次チェックができる。ただし、あくまで一次チェックであり、公開までには現地の専門家のレビューをもらうべきだ。

日本のWeb制作者のリアルな声

つづいて間島氏は、Wixを使うプロのWeb制作者を対象とした独自調査の結果を紹介した。

生成AIの進化は「脅威」か「機会」か？

70%以上の人が生成AIの進化を「機会（チャンス）」と捉えている。生成AIは自分たちの仕事を奪うものではなく、価値を広げるツールだと考えているからだ。

まだちょっと怖いという方もいるかもしれませんが、国内でもここまで前向きな流れが来ています（間島氏）

70%以上が生成AIの進化を肯定的に捉えている

どのような業務で生成AIを活用しているか？トップ5

日本のプロフェッショナルが活用している業務トップ5は以下のとおりだ。

テキストコンテンツの作成（キャッチコピーの制作時間短縮など）
クライアントへの提案資料の作成（リサーチの時間短縮など）
ブログ記事の構成案作成、執筆
SEOキーワードの選定・提案
サイトデザインのアイデア出し

生成AIの活用による制作業務への変化は？

制作時間が大幅に短縮（53%）
提案の質や創造性が向上（36%）
新たな領域の案件を受注（8%）
経営の質が向上（3%）

具体的に感じていること

生成AIに“提案書の骨組み”の作成を補助してもらうことで、肉付けやクリエイティブな部分に集中でき、よい受注につながった
SEOキーワードやコンテンツの提案だけでなく、外注していたライティングまで一貫してこちらで請け負えるようになった
生成AIの活用で、コーディングにかかる時間が大幅に短縮され、専門分野外の知識についてソースも含めて情報を得ることができた

生成AIに基礎部分を効率化させ、人間がやるべき価値の高い戦略的・クリエイティブな作業に時間を使う、これが新しい制作フローになりつつあります（間島氏）

ビジネスを次のステージへ進めるWixの生成AI機能

Wixのプラットフォームは、この新しいワークフローを支えるため、制作・運用に関わるすべての機能に生成AIを統合している。下記がその代表的なものだ。

レスポンシブ AI
デスクトップ表示用の画面で要素を追加し「レスポンシブ AI」を実行するだけで、写真やテキストの段落が自動的に比例して縮小され、すべてのデバイスで最適化されたレスポンシブセクションが生成される。
Wix Studio（ビジュアルサイトマップとワイヤーフレーム生成ツール）
作成したいWebサイトについてターゲットオーディエンス、ビジネスの特徴、Webサイト作成の目的、文章表現のスタイルなどをWixからの質問に回答する形で進めるだけで、ワイヤーフレームとビジュアルサイトマップが自動生成される。
AI テキストクリエイター
Wixの編集画面で使用し、プロンプトで指示すると、テキストを生成してくれる。そのままWebサイトに貼り付けることも可能であり、コンテンツ制作の高速化を実現する。

ほかにもチャット形式で質問ができ、Wixに関する疑問を短時間で解消できるAIアシスタント「Astro」、Webサイトを作成してくれる「AI サイトビルダー」など、多彩な生成AI機能を提供している。

Wixが提供するその他の生成AI機能

また、企業規模やニーズに合わせ、3種類のプラットフォームも用意されている。

ニーズに合わせた3つのWixプラットフォーム

生成AIを共創パートナーとして使いこなす

間島氏は、AI活用を推進するWeb制作のプロフェッショナルに対して、「私たち自身が積極的に生成AIに飛び込み、使いこなしていくことが重要です。これからの時代、生成AIは単なるツールではなく、私たちのクリエイティビティを次のステージに引き上げてくれる強力な共創パートナーになるでしょう」と締めくくった。