2023年8月29日8 分
最終更新: 2023年11月2日
Wix は長年にわたり、ビジネスをクリエイティブに、そして自由に楽しめるツールの開発に取り組んできました。洗練された予約管理方法を探している飲食店経営者の方や、はじめて EC サイトを開設しようと考えているブランドオーナーの方など、業種やニーズにかかわらず Wix は多彩なサービスを提供しています。
そんな中で新しく登場したのが、最先端の API と便利な SDK（Node.js）、エンタープライズレベルのパフォーマンス、セキュリティ、そして信頼できるインフラを兼ね備えた Wix Headless です。
Wix Headless があれば、Wix が運用しているシステムと同じビジネス管理プラットフォームや CMS サービスに、自作のアプリや Web サイトから自由にアクセスすることができます。
たとえば、Wix と Netlify の統合（英語）を例に挙げてみましょう。Netlify は Wix の初のデザインパートナーで、Wix Headless との統合を通じて Netify のユーザーは Wix の強力なスケジュール管理・予約サービスを利用できるようになりました。
この記事では Wix Headless のメリットや仕組みについて掘り下げていきますので、ぜひご覧ください。
サイト制作に役立つ機能を搭載したノーコードの Web 制作ツールはたくさん登場していますが、こうしたツールは機能に制限があり、それによってビジネスの成長が妨げられてしまうことも少なくありません。Wix Headless はこうしたよくある悩みの種を以下の方法で解消しています。
将来性
Wix Headless は、Wix のコマース、ビジネス、マーケティング向けの幅広いツールを搭載した柔軟性かつ拡張性の高いソリューションでビジネスの成長を支援します。これにより、ビジネスが新たなプラットフォームに移行・拡張することになった場合も、時間とお金を費やして基盤となるインフラをゼロから再構築する必要がなくなります。
最適化されたフロントエンドデザイン
従来のノーコード・ローコードのサイト制作システムでは、システム内で用意されたデザインしか利用できず、選択の幅が制限されてしまうことがほとんどでした。しかし、フロントエンドは型にはまった「汎用的」なものしかないという状態よりも、特定のユースケースに応じて必要な形で最適化できるのが理想です。Wix Headless は Wix のビジネスソリューションやパワフルな管理ダッシュボードといった便利な機能はそのままに、独自のフロントエンドデザインを作成し、より見やすく最適化されたユーザーエクスペリエンスを実現できます。
包括的なビジネス管理ダッシュボード
Wix Headless には、ビジネスを効率的に管理・監視できるオールインクルーシブのバックオフィスシステムが備わっています。直感的に使えるダッシュボードでは、KPI（重要業績評価指標）の追跡、顧客データの管理、売上やマーケティングの成果をまとめて確認できます。こうしたデータ集約型のパワフルなツールでビジネス全体をしっかりと把握することで、データドリブンな意志決定やプロセスの合理化が可能になります。
API 連携もスムーズ
Wix Headless では、さまざまなバックエンドサービスをひとつの多機能な API に統合し、ビジネス管理のプロセスをシンプルに整理できます。これにより、請求サイクルや統合の複雑さが異なる複数の API に依存する必要がなくなります。Wix Headless の API には、Eコマース、ブッキング、イベント、販売プランなど、ビジネスに不可欠な機能を備えた強力なモジュールが含まれています。包括的なサービス一式を単一の API で提供することで、Wix Headless は開発プロセスを簡素化し、ビジネスの運用効率アップに貢献します。また、プロジェクトで追加の API が必要な場合は、必要に応じて自由に統合することができます。
Wix Headless にはさまざまな用途があり、複数のデバイスにおけるより魅力的なショッピング体験の設計から、異なるユーザーグループに向けた多岐にわたるコンテンツの提供まであらゆるシーンに対応します。
以下でより具体的なシナリオを見ていきましょう。たとえば、自社でネットショップを運営しており、WhatsApp* のような利用者の多いメッセージングプラットフォームを通じて顧客に独自のショッピング体験を提供したいと考えているとします。Wix Headless を利用すれば、Wix ストアとシームレスに統合するチャットボットを構築できるため、顧客は WhatsApp プラットフォーム内で直接商品を閲覧したり、カートに商品を追加することができます。
（注釈：Whatsapp は欧米で利用されているメッセージアプリです。）
このようなチャットボットの統合を実装する際にはこちらのコード (Github) が参考になります。以下では、この統合に必要な重要なコンポーネントの概要をご紹介します。
wix_client.mjs
Wix の API クライアントを設定し、OAuth 認証を管理することで、チャットボットが Headless API を通じて Wix のネットショップと通信できるようになります。
message_handler.mjs
WhatsApp で受信したメッセージとユーザーとのやり取りを処理し、チャットフローを管理します。
products_api.mjs
Wix ストアで購入できる商品を取得します。
token_management.mjs
ユーザーのトークンと Wix の API 認証を管理し、チャットボットが個人ユーザーの代わりに Wix ストアとやり取りできるようにします。
商品購入までの過程すべてをチャットボットで誘導し、商品のカタログビュー、個別の商品情報（商品画像を含む）、カートへのアイテム追加、または支払い手続きといったオプションを提供できるようになります。
では、ここからは WhatsApp のチャットボットのフローの内容を取り上げ、Wix Headless API の役割を解説します。
チャットボットが商品カタログを表示し、ユーザーが購入可能な商品を探せるようにします。この動作は、Wix Headless API を使用して Wix ストアから商品情報を取得することで実現できます。
ユーザーはそれに対応する番号を送信することで、商品を選択できます。
選択された商品の詳細情報と画像をチャットボットが表示します。
ユーザーは選択した商品をカートに追加することができます。この操作には Wix Headless API を使用し、Wix ストア内のユーザーのカートを管理します。
チャットボットがカートに追加された商品を確認し、現在カート内にあるアイテムを表示します。
顧客は支払い手続きに進むことも、商品一覧に戻ってショッピングを続けることもできます。
ユーザーが支払い手続きに進むと、チャットボットがネットショップの Web サイト上で決済を完了するためのリンクを提示します。Wix Headless API は、支払い手続きセッションを作成し、それに対応する決済用 URL を生成する際に使用されます。
この処理の全容について、もう少し技術的にご説明しましょう。
Wix Headless API は、ネットショップで購入可能な商品一覧を読み込むために使用されます。この処理には、products_api.mjs ファイル内で wixClient.products.queryProducts().find() メソッドを呼び出す getAvailableProducts() 関数を使用します。
チャットボットは各ユーザーとネットショップのやり取りの状態を管理します。これには、ユーザーの現在のショッピングフロー内のステージや、閲覧した商品、カートに追加したアイテムなどが該当します。こうした状態の管理には、state_manager.mjs ファイル内の getUserState()、setUserState()、removeUserState() 関数を使用します。
message_handler.mjs ファイルにある handleMessage() 関数は、WhatsApp ユーザーから受信したメッセージを処理するための主なエントリーポイントとなります。これは、ユーザーの現在の状態を基に、入力への応答を決定し、商品一覧の表示、特定の商品の情報提示、カートへのアイテム追加などの動作を実行します。
ユーザーのカートにアイテムを追加するには、wixClient.currentCart.addToCurrentCart() メソッドを呼び出す handleAddToCart() 関数を使用します。ユーザーが支払い手続きを行うと、handleCheckout() 関数がwixClient.currentCart.createCheckoutFromCurrentCart() メソッドを使用して支払い手続きセッションを作成し、Wix ストアサイトで商品の購入を完了するためのリンクをユーザーに提示します。
今回の例では、Wix のビジネスソリューションを WhatsApp のような人気のメッセージングプラットフォームと組み合わせた場合についてご紹介しました。顧客が使い慣れた WhatsApp のインターフェース内でショッピング体験全体を完結できるようにすることで、ユーザーのエンゲージメントを向上し、コンバージョンを増やすことにつながります。もちろん、これ以外にも Wix Headless を活用できるユースケースは無限にあります。
Wix Headless は、Wix のビジネスソリューションの包括的な機能、堅牢性、利便性を活用し、さまざまなチャネルでユーザーの心をつかむ卓越した体験を創出することを可能にする革新的なプラットフォームです。また、Wix Headless ならブランドアイデンティティ、データ、および顧客関係といった重要なビジネスアセットをまとめてしっかりと管理することができます。
Wix Headless をご利用いただくには、Wix のプレミアムプランにご加入の上、セットアップガイド (英語) に従って設定を行ってください。現在、セットアップガイドは英語でのみの提供となっております。日本語でご参照になりたい場合は、こちらの Google 翻訳ページを併せてご利用ください。
(注釈：自動翻訳による誤訳に関しましては、いかなる責任も負いかねます。)
執筆者：Yitzi Ginzberg
Developer Advocate
編集者：Kyohei Fukuda
Solution Engineer, Developer Advocate