header-logo
はじめましょう!Wix でサイトやビジネスを構築する方法をご紹介します。テンプレートを使用してサイトをカスタマイズしたり、パートナーに依頼してウェブプレゼンスを確立しましょう。
サイトの作成Wix エディタの使い方とサイトコンテンツの管理方法について学びましょう。訪問者のプライバシーを保護し、サイトをよりアクセシブルにします。
アカウント・お支払いアカウント設定を確認し、定期購入とプレミアムプランを管理、請求内容を把握しましょう。
Wix モバイルアプリの使用Wix Owner アプリを使用してビジネスを効率的に運営し、訪問者と関わり、コミュニティを構築しましょう。
ドメインの接続ドメインの購入・接続・移管方法と、サイトデータを安全に保つ方法について理解しましょう。
ビジネスの管理支払いの受け付け、分析、訪問者とのつながりなど、ビジネスを構築し成長させるための適切なツールを見つけましょう。
サイトの宣伝検索エンジンでサイトを宣伝し、メルマガを送信し、有料広告を掲載する方法を学びましょう。
Wix Studio・パートナー・エンタープライズWix Studio、パートナー、エンタープライズアカウントを最大限に活用し、ビジネスを拡大しましょう。
ヘルプサイトのパフォーマンスや技術的な問題を解決するための情報を入手しましょう。製品ロードマップでは今後の機能について確認できます。
placeholder-preview-image
Wix Learnコースとチュートリアルでスキルを習得する。
Wix ブログウェブデザインやマーケティングなどのヒントを得る。
SEO ラーニングハブ検索エンジンからのトラフィックを増やす方法について学ぶ。
Website developmentフルスタックプラットフォームでカスタムサイトを構築する。
Wix パートナーに依頼あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image
この記事では下記を説明します:
  • ステップ 1 | Headless ビジネスを作成する
  • ステップ 2 |(オプション)ビジネスソリューションとアプリを設定する
  • ステップ 3 | 好みの AI ツールを使用してフロントエンドを作成する
  • ステップ 4 | サイトの運営を開始する
  • よくある質問

Wix Headless:AI ツールを使用してサイトを作成する

この記事内
  • ステップ 1 | Headless ビジネスを作成する
  • ステップ 2 |(オプション)ビジネスソリューションとアプリを設定する
  • ステップ 3 | 好みの AI ツールを使用してフロントエンドを作成する
  • ステップ 4 | サイトの運営を開始する
  • よくある質問

現在、Wix Headless は、Wix Studio ワークスペースにて英語でのみご利用いただけます。

Wix Headless を使用すると、ビジネスの運営は使い慣れた Wix ダッシュボードから行い、訪問者に表示するサイトは好みのツールを使用して構築することができます。カスタムサイト(フロントエンド)は、ダッシュボードから AI コーディングエージェントや Vibe コーディングプラットフォームを使用して作成・接続することができます。

この記事では、ダッシュボードに必要なビジネスソリューションやアプリを追加して、カスタムサイトを作成・接続する方法について説明します。

始める前に:
  • 新規登録して、無料の Wix アカウントを作成します。

  • サポートされている AI エージェント、または Vibe コーディングプラットフォームにアクセスできることを確認してください。

  • 詳細については、Wix Headless 開発者向け文書をご覧ください。


ステップ 1 | Headless ビジネスを作成する

まず、サイトのビジネスを管理するバックエンドの作成から開始します。これにより、ダッシュボード、各種ビジネスソリューションやアプリ、およびそれらのデータが設定されます。

Headless ビジネスを作成する方法:

  1. Wix アカウント内の「サイト」にアクセスします。

  2. 新規サイトを作成」をクリックします。

  3. Headless ビジネス」を選択します。

Headless ビジネスを作成するためのオプションが表示されている様子を示したスクリーンショット。
注意:

これにより、Wix ダッシュボードが表示されますが、デザインを行うためのエディタページは表示されません。ダッシュボードには、代わりにカスタムのフロントエンドを作成・接続するための各種ツールが表示されます。


ステップ 2 |(オプション)ビジネスソリューションとアプリを設定する

ビジネスソリューションやアプリとは、サイトのビジネスをバックエンドで支える Wix の各種サービスのことを指します。これには、すべてダッシュボードから管理できる、商品カタログ、カート、購入手続き画面、予約、イベント、ブログなどの機能が含まれています。

Wix ストアWix ブッキングなどのビジネスソリューションやアプリは、ダッシュボードから追加することができます。必要なビジネスソリューションやアプリを追加したら、商品、サービス、コンテンツなどの詳細を入力して設定を行います。Wix CMS を追加すると、CMS コレクションを使用してコンテンツを管理することも可能です。

ヒント:
  • フロントエンドを作成する前にビジネスソリューションやアプリを追加しておくと、AI ツールがそれらを自動で検出し、対応するページを構築してくれます。

  • AI エージェントをサイトに接続するためのツールである Wix MCP を設定しておくと、AI があなたに代わってサイトを管理し、商品、サービス、コンテンツを自動で更新してくれます。


ステップ 3 | 好みの AI ツールを使用してフロントエンドを作成する

フロントエンドとは、訪問者が目にするウェブサイトやアプリのことで、Wix の各種ビジネス機能を視覚的に表示した画面やページなどのことを指します。

プロンプトを使用してフロントエンドを作成できるツールには、以下の 2種類があります:

  • AI コーディングエージェント:Claude Code、Cursor、Codex など、ターミナルや IDE(統合開発環境)で動作する開発者向けのツール。

  • Vibe コーディングプラットフォームBase44 など、作成したいものを言葉で説明して構築できるブラウザベースのプラットフォーム。

選択した AI ツールに送信するプロンプトには、自動的に Wix Headless スキルが含まれるようになっていて、Wix にフロントエンドを接続するための方法が AI エージェントに伝えられます。

フロントエンドを作成する方法:

  1. Setup(設定)」タブで「Create Frontend(フロントエンドを作成)」をクリックします。

  2. 該当するツールを選択します。

  3. 作成したいものを説明します(例:「商品カタログと購入手続き画面を備えた、手作りの陶器を販売するためのネットショップを構築してください」など)。

  4. 選択した AI ツールに応じて、以下の該当する手順に進みます:

Wix Headless に、「新しいフロントエンドを作成」のポップアップが表示されている様子を示したスクリーンショット。

ステップ 4 | サイトの運営を開始する

フロントエンドを構築して Wix ダッシュボードに接続したら、Wix を介してサイトの運用を開始することができます。ビジネスに関するデータを更新すると、その内容が自動的にサイトに反映されます。

追加または変更したい内容がある場合は、いつでも AI エージェントや Vibe コーディングプラットフォームに戻って、希望する内容を自然な言葉で指示することができます。たとえば、以下のような操作を行うことが可能です:

  • 新しいページや機能の追加

  • サイトのデザインやレイアウトの変更

  • ビジネスソリューションとの連携

注意:

フロントエンドを構築した後に、ダッシュボードにビジネスソリューションやアプリを追加した場合は、AI エージェントや Vibe コーディングプラットフォームに戻り、フロントエンドを更新するよう指示してください(例:「サイトに Wix ブッキングを追加したので、フロントエンドに予約ページを追加してください」など)。

次のステップ:

よくある質問

詳細については、以下の質問をクリックしてください。

Helpmate

こんにちは、さん

さらにヘルプが必要ですか?
Unlock personalized helpLog in to get the most out of Helpmate.