top of page

プロンプトでホームページを作るメリットとは?Wix Harmonyで伝わる書き方と例文

17 分前
読了時間: 13分
家具店のサイト「DecAteli」をAIで編集する画面。「新しいデザインを生成」などのボタンと丸いAIアシスタントAriaが表示されている

プロンプト(AIへの指示文)でホームページを作ると、テンプレート選びやコーディングの手間を飛ばして、業種や目的に合ったサイトの土台をすぐに用意できます。ただし、仕上がりを左右するのは「何を、どれだけ具体的に伝えたか」です。まずは AIでサイトを作成 できる環境を開いて、自分のビジネスを一文で説明するところから始めてみましょう。


この記事では、プロンプトでサイトを作る理由、伝わるプロンプトの書き方、そのまま使える業種別の例文、AIに任せる作業と自分で整える作業の線引きを、Wix HarmonyとAIアシスタントのAriaを例に解説します。初心者が慣れるまでのポイントは、Wix Harmonyの使いやすさの記事で紹介しています。



この記事の概要


プロンプトでホームページを作る理由と、結果を左右する書き方を、Wix Harmonyの例でまとめました。


  • テンプレートやコーディングと比べたプロンプトの強みがわかる

  • そのまま使える業種別のプロンプト例が手に入る

  • AIに任せる作業と、自分で整える作業の線引きがわかる


白紙のページを前に悩む必要はありません。業種と目的を一文で書くだけで、AIがたたき台を用意してくれます。上のボタンから、まずは気軽に試してみてください。




要点まとめ:プロンプトでホームページを作るとは


プロンプトでホームページを作るとは、作りたいサイトを文章で説明し、AIにページ構成、デザイン、文章、ビジネス機能の土台を生成してもらう作り方です。生成されたサイトは、あとからドラッグ&ドロップで自由に直せます。要点は次の表のとおりです。


項目

ポイント

プロンプトとは

AIに作りたいサイトを伝える指示文

書くべき要素

業種と地域、ターゲット、目的、必要なページ、デザインの雰囲気

AIがやること

ページ構成、レイアウト、仮の文章や画像、ビジネス機能の初期設定

自分がやること

写真や料金などの事実の入力、言葉づかいの調整、公開前の確認

向いている人

何から作ればいいかわからない人、デザインやコードの知識がない人




なぜプロンプトでホームページを作るのか


プロンプトでサイトを作る最大の理由は、最初の一歩が軽くなることです。ここでは、主なメリットを4つ紹介します。



白紙から考えずに済む


ホームページ作りで多くの人が手を止めるのは、「何から始めればいいかわからない」最初の段階です。プロンプトなら、ビジネスの説明を書くだけで、ページ構成やデザインを含むサイトの土台が先にできあがります。あとは、目の前の画面を見ながら直していくだけです。


「白紙のキャンバスを前にすると、圧倒されてしまう方は少なくありません。プロンプトを使ったサイト作成なら、自分に合わせた土台がすぐに生成されるため、最初のステップがシンプルになります。すぐに前進している実感が得られることで、作業がよりスピーディーで直感的に感じられ、続けやすくなるのです」


― レベッカ・トマシス(Wixのオーガニックグロースマーケティング責任者)



デザインやコードの知識がなくても始められる


配色、余白、レイアウトといったデザインの判断は、AIが代わりに行います。Wixのヘルプセンター によると、Wix HarmonyのAIアシスタントであるAriaは、あなたのサイトやビジネスについて把握したうえで提案や回答をしてくれます。専門用語を知らなくても、普段の言葉で相談しながら作業を進められます。



予約やネットショップなどのビジネス機能まで用意される


WixのAIは、サービス予約、ネットショップ、イベント管理など、業種に合ったビジネス機能を自動で判断してサイトに追加します。見た目だけのサイトではなく、予約や購入を受け付けられるサイトが最初から手に入るのは大きな違いです。


「Wix Harmonyなら、プロンプトひとつで、レスポンシブな商品ページを備え、ネットショップ機能一式が組み込まれ、初日からビジネスツールを使える本格的なオンラインストアを作れます」


― マヤ・イサク(WixのEコマースプロジェクトマーケティングマネージャー)



スマホ対応やSEOの土台も最初から整う


Wix Harmonyで作成したサイトは自動的にレスポンシブになり、パソコンでもスマートフォンでも見やすく表示されます。さらに、Wixにははじめから SEOツール が備わっているため、検索エンジン対策の基本設定もサイト作成と同じ管理画面で進められます。




テンプレートやコーディングとプロンプトの違い


ホームページの作り方 は、大きくテンプレート、コーディング、プロンプトの3つに分けられます。それぞれの特徴は次のとおりです。


作り方

始め方

自由度

向いている人

テンプレート

完成済みのデザインを選び、文章や写真を差し替える

構成はテンプレートに沿う

実績のあるデザインから始めたい人

コーディング

HTMLやCSSを書く、またはAIにコードを生成させる

最も高いが、サーバーやフォーム、SSLの設定も自分で行う

技術の知識があり、細部まで作り込みたい人

プロンプト

ビジネスや目的を文章で伝える

自分専用の土台を作り、あとから自由に編集できる

早く形にしたい人、何から作ればいいかわからない人


テンプレートは今も強力な選択肢です。Wixには 900種類以上のテンプレート があり、選び方は テンプレートを選ぶコツ で紹介しています。また、AIにコードを書かせる バイブコーディング も注目されていますが、公開や運用に必要な設定は自分で整える必要があります。


Wix Harmonyでは、テンプレートとプロンプトを組み合わせることもできます。緑色の「Wix Harmony」ラベルが付いたテンプレートから始め、足りないページやセクションだけをAriaにプロンプトで生成してもらう方法です。


「プロンプトでサイトを作るという流れは、テンプレートに取って代わるものではなく、できることを広げるものです。テンプレートは、実績のある構成やデザインの指針がほしい方にとって、今も非常に優れた出発点です。そこにプロンプトが加わることで、自分のビジネスを自分の言葉で説明し、自分らしさを感じられるサイトを手に入れられるようになります」


― レベッカ・トマシス(Wixのオーガニックグロースマーケティング責任者)




伝わるプロンプトに入れるべき5つの要素


AIは、プロンプトに書かれていない部分を推測で埋めます。推測で埋められる部分を減らすほど、思い通りのサイトに近づきます。基本の考え方は AIでホームページを作成する方法 でも紹介していますが、ここでは書き方の具体例とあわせて掘り下げます。



業種と地域、お店の名前を書く


業種は「カフェ」だけでなく、「京都市左京区の自家焙煎カフェ『〇〇』」のように、業種、地域、店名まで書きましょう。地域が入ると、アクセス情報や地域の雰囲気に合った文章が生成されやすくなります。



誰に向けたサイトかを書く


ターゲットは「20〜30代の観光客と近所の常連」のように、想定する読者を具体的に書きます。ターゲットがはっきりすると、文章のトーンや載せる情報が変わります。ターゲット像の作り方は ペルソナ の記事が参考になります。



サイトの目的を書く


予約を増やしたいのか、商品を売りたいのか、問い合わせを受けたいのかを明記します。目的によって、ボタンの文言やページの並び順が変わるためです。目的の整理には ホームページの目的 の記事も役立ちます。



必要なページと機能を書く


トップ、メニュー・料金、予約、オンラインショップ、ブログ、アクセスなど、必要なページを並べます。予約フォームやネットショップのように、使いたい機能も一緒に書いておくと、最初から組み込まれた状態で生成されます。



デザインの雰囲気と色を書く


デザインは「おしゃれ」のような抽象的な言葉より、「木の温かみがある落ち着いた雰囲気、ベージュと深緑」のように、雰囲気と色の名前を具体的に書くほうが伝わります。実際に、米国テキサス州ワイリーのスカウト団体「Troop 302」は、Wix Harmonyでサイトを作る際に、えんじ色とオリーブグリーン、キャンプを思わせる雰囲気をプロンプトで指定しました。


曖昧なプロンプトと具体的なプロンプトの比較


曖昧な例:おしゃれなカフェのホームページを作って。


具体的な例:京都市左京区の自家焙煎カフェ。20〜30代の観光客と近所の常連向け。目的は来店と豆のネット販売。ページはトップ、メニュー、オンラインショップ、アクセス。木の温かみがある落ち着いた雰囲気で、色はベージュと深緑。


Wix Harmonyで入力する英語の例:A specialty coffee roastery in Sakyo, Kyoto. For tourists in their 20s and 30s and local regulars. Goals: store visits and online bean sales. Pages: Home, Menu, Online Shop, Access. Calm, warm wooden feel in beige and deep green.




業種別のプロンプト例


業種ごとに、そのまま使えるプロンプト例をまとめました。日本語の列はプロンプトの意味、英語の列は実際に入力するプロンプトです。店名や地域は自分のビジネスに置き換えて使ってください。


業種

プロンプトの意味(日本語)

入力するプロンプト(英語)

ポイント

美容室・ネイルサロン

渋谷区で1人で営むネイルサロン。20〜40代の女性向け。目的はオンライン予約。メニューと料金、予約、ギャラリー、アクセス。白とくすみピンクで上品に

A one-person nail salon in Shibuya, Tokyo, for women aged 20–40. Goal: online bookings. Pages: Menu & Prices, Booking, Gallery, Access. Elegant, white and dusty pink.

予約を目的に書くと、予約ボタンが目立つ構成になりやすい

カフェ・飲食店

鎌倉の海沿いにある朝ごはんのカフェ。観光客と地元客向け。目的は来店。メニュー、営業時間、アクセス、Instagramへのリンク。明るく爽やかに

A seaside breakfast cafe in Kamakura for tourists and locals. Goal: more visits. Pages: Menu, Opening Hours, Access, Instagram link. Bright and fresh.

営業時間とアクセスを入れると来店につながる情報がそろう

家具・インテリアショップ

無垢材の家具ブランドのネットショップ。30〜40代の家族向け。目的は商品の販売。商品一覧、ブランドの想い、配送について、お問い合わせ。ナチュラルで上質に

An online store for a solid-wood furniture brand, aimed at families in their 30s and 40s. Goal: product sales. Pages: Shop, Our Story, Shipping, Contact. Natural and refined.

ネットショップと書くと商品ページの土台も生成される

ヨガ・ピラティス教室

横浜のピラティススタジオ。初心者の女性向け。目的は体験レッスンの予約。クラス紹介、料金、インストラクター、予約。落ち着いた緑系で

A Pilates studio in Yokohama for beginner women. Goal: trial class bookings. Pages: Classes, Prices, Instructors, Booking. Calm, green tones.

体験レッスンなど最初の行動を具体的に書く

税理士・士業

大阪の税理士事務所。個人事業主と中小企業向け。目的は無料相談の予約。サービス、料金の目安、事務所紹介、相談予約。信頼感のある紺と白

A tax accounting office in Osaka for sole proprietors and small businesses. Goal: free consultation bookings. Pages: Services, Fees, About Us, Book a Consultation. Trustworthy navy and white.

信頼感など、与えたい印象を言葉で指定する

フリーランスのデザイナー

グラフィックデザイナーのポートフォリオ。企業の広報担当者向け。目的は仕事の依頼。作品、プロフィール、サービス内容、お問い合わせ。白を基調にシンプルに

A portfolio for a freelance graphic designer, aimed at corporate PR teams. Goal: new project requests. Pages: Work, About, Services, Contact. Simple, mostly white.

作品を主役にしたいと伝えると、余白の多いレイアウトになりやすい


言語についての注意:現在、Wix HarmonyとAriaは英語での利用が前提です。そのため、この表では実際に入力するプロンプトを英語で掲載しています。対応言語は今後拡大される予定のため、最新情報は ヘルプセンター をご確認ください。


トップページの写真をAIで作りたい場合は 画像生成AIのプロンプト例 を、プロンプトそのものの基本を知りたい場合は ChatGPTのプロンプトの基本 もあわせてご覧ください。




生成後は追加のプロンプトで磨き上げる


最初のプロンプトで完璧なサイトを目指す必要はありません。Wix Harmonyでは、AriaなどのAIツールを使い、キャンバス上で直接セクションを作り直したり、レイアウトを調整したり、テキストや画像を改善したりできます。たとえば、次のような追加のプロンプトが使えます(かっこ内は入力する英語)。


  • トップの見出しをもっと短く、親しみやすくする(Make the hero headline shorter and friendlier.)

  • 予約ボタンをファーストビューに置く(Add a booking button to the first screen.)

  • 3つのプランを載せた料金表のセクションを追加する(Add a pricing section with three plans.)

  • サイト全体の色を落ち着いたトーンにする(Change the site colors to a calmer palette.)


追加のプロンプトは、1回につき1〜3点に絞るのがコツです。「それ以外は変えないで(Keep everything else the same.)」と添えると、気に入っている部分を残したまま直せます。




AIに任せる部分と自分で整える部分


プロンプトで作るサイトは、AIと自分の分業で完成します。役割分担の目安は次のとおりです。


作業

AI(Aria)

自分

ページ構成

目的に合わせてページとセクションを提案する

不要なページを削り、順番を決める

デザイン・配色

雰囲気に合う配色とレイアウトを生成する

ブランドの色とフォントに合わせて微調整する

文章

仮の見出しと本文を作る

自分の言葉づかいに直し、事実を確認する

写真・画像

仮の画像を配置する

実際の店舗や商品、作品の写真に差し替える

料金・営業時間などの情報

入れる場所を用意する

正しい情報を入力する

公開前の確認

改善のアイデアを提案する

スマホ表示、リンク、SEO設定を確認する


Wix Harmonyでは、AIが生成した要素もドラッグ&ドロップで動かせ、サイト全体のフォントや色もまとめて変更できます。スマートフォンでの表示もモバイルビューで微調整できます。なお、Wix Harmonyではカスタムコードを追加できませんが、AIパーツ生成ツールで独自のパーツを作れます。高度なデザインやコードが必要な制作には、Wix Studioが向いています。違いは Wix StudioとWixの違い で確認できます。


「Wix Harmonyは、AIにすべてを任せるためのものではありません。AIと一緒に作るためのものです」


― レベッカ・トマシス(Wixのオーガニックグロースマーケティング責任者)


具体的な操作手順は Wix Harmonyの使い方 と WixのAIでホームページを作る手順 で詳しく紹介しています。




プロンプトで作れるWixのサイトの種類


Wixでプロンプトを使ってサイトを作る方法は、主に2つあります。


  • WixのAIサイトビルダー:チャットで作りたいサイトを伝えると、AIがサイト構成や外観を含むクリエイティブブリーフを作成し、それをもとにサイトを生成します。

  • Wix Harmony:AIとビジュアル編集を組み合わせた新しいエディタです。現在は段階的にリリース中で、パートナー向けの早期アクセスから提供が始まっています。ヘルプセンターによると、現時点ではWix Harmonyのサイトはヘルプセンターに記載された専用リンクからのみ作成できます。概要は Wix Harmonyとは をご覧ください。


どちらの方法でも、店舗・サロン、飲食店、ネットショップ、ポートフォリオ、ブログ、イベントなど、幅広い種類のサイトを作れます。開発者の場合は、Wixヘッドレス を使って、独自のフロントエンドとWixのビジネス機能を組み合わせる方法もあります。




よくある質問



プロンプトは日本語と英語、どちらで書けばいい?


Wix HarmonyとAriaは、現在英語での利用が前提です(今後ほかの言語にも対応予定)。まず日本語で業種、目的、ページ、雰囲気を整理し、それを短い英文にすると伝わりやすくなります。この記事の業種別の例文も英語版をそのまま使えます。



プロンプトは長いほうがいい?


長さよりも、業種と地域、ターゲット、目的、必要なページ、デザインの雰囲気という5つの要素がそろっているかが大切です。3〜5文程度で十分で、細かな希望は生成後に追加のプロンプトで伝えましょう。



テンプレートから始めてもプロンプトは使える?


使えます。Wix Harmonyでは、テンプレートやプリセットのセクションを使いながら、Ariaにプロンプトでページ全体やセクションを生成してもらえます。



AIが作ったサイトは後から全部編集できる?


編集できます。AIが生成したテキスト、画像、レイアウトは、すべてドラッグ&ドロップなどで自由に変更できます。セクション単位でAIに作り直してもらうことも可能です。



プロンプトでサイトを作るのに料金はかかる?


AIを使ったホームページ作成は無料で始められます。独自ドメインの接続にはプレミアムプランへのアップグレードが必要で、料金は月額1,300円からです(2026年10月時点)。オンライン決済や予約を受け付ける場合は、ビジネス向けのプランが必要です。Wix HarmonyでAriaなどのAI機能を使うために、AIクレジットを購入する必要はありません。




まとめ:まずは業種と目的を一文で伝えることから


プロンプトでホームページを作る方法は、白紙から悩まずに、自分のビジネスに合ったサイトの土台を手に入れられる作り方です。ポイントは次の3つです。


  • 白紙から始めず、AIにたたき台を作ってもらう

  • 5つの要素を入れて伝え、追加のプロンプトで磨き上げる

  • 写真や事実、言葉づかいは自分で整えて仕上げる


現在、Wix HarmonyとAriaは英語での利用が前提のため、この記事の英語の例文を活用してください。まずは業種と目的を一文で書き、AIと一緒にあなたのサイトを形にしていきましょう。



ja03.png
bottom of page