ブロードウェイミュージカルを観劇することを想像してみましょう。洗練された舞台を目にしますが、舞台裏では出演者やスタッフがオーディション、台本読み、ドレスリハーサルなどに何百時間も費やしています。観客が目にするすべては、入念な準備の賜物なのです。
同様に、ウェブ開発においても、ステージングサイトは実際のウェブサイトの「ドレスリハーサル」の役割を果たします。ライブサイトに直接更新を適用するのではなく、開発者はステージングサイトを使用してテストと修正を行い、ライブオーディエンスに公開する準備が整うまで作業を続けます。
ECサイトでステージングサイトを使用することの利点について詳しく学び、Shopifyでステージングサイトを作成する方法もご紹介します。
ステージングサイトとは？
ステージングサイトとは、ライブサイトに影響を与えることなく更新やリデザインを確認できる、プライベートなウェブサイトテスト環境です。サイトのライブ版をシミュレーションし、開発者や関係者が実際にライブ環境にあるかのようにユーザー体験を確認できます。
ステージング環境の主な目的は、不具合を発見し、修正や改善を行うことです。通常、マーケティングチームや経営陣などのステークホルダーがステージングプロセスに参加してフィードバックを提供します。
ステークホルダーがテストサイトを十分に確認し、その意見が反映されると、更新がライブ環境にプッシュされます。
新しい商品画像セクションなどの重要な更新は、変更によってサイトが正常に機能しなくなった場合、コンバージョンに悪影響を与える可能性があります。
商品ページのクリックからカートへのアイテム追加まで、ユーザー体験をシミュレートすることで、実際の顧客に影響が及ぶ前にエラーを発見し修正できます。
開発サイト、ステージングサイト、ライブサイト
ウェブ開発は開発、ステージング、ライブの主に3つの段階で行われます。まず開発サイトでコードが書かれ、次に品質評価（QA）のためにステージングサイトにプッシュされ、最後にすべてのユーザー向けにライブサイトが更新されます。
開発サイト
開発サイトは、開発者がコードを書いてアイデアを実現するサンドボックスです。通常、開発チームのみがアクセスできるローカル環境です。
この段階では、インタラクティブな商品フィルターなどのカスタム機能のために、画像、テキスト、動画、コードが追加されます。初期テストは行われますが、開発環境は通常未完成の状態です。
ステージングサイト
開発が完了すると、コードは新しいステージングサイトに公開されます。これがドレスリハーサルであり、ライブオーディエンスの前にいるかのようにすべての問題が解決されます。
ステージングサイトはオンライン上に存在し、通常はstaging.yourwebsitename.comのようなステージングドメインのURLを使用します。
ステージングサイトがインデックス化されないよう注意しましょう。つまり、検索エンジンが検索結果に表示することを防ぐ必要があります。これは数行のコードを追加することで簡単に実現できます。
今後のセールなど、顧客にまだ見せる準備ができていない情報がある場合は、ステージングサイトをパスワード保護することも検討しましょう。
ステージングサイトがライブになると、ステークホルダーがレビューしてフィードバックを提供します。その後、コードは開発サイトに戻され、開発者が懸念事項に対処し、再びステージングサイトに変更をプッシュします。このプロセスは、すべてのステークホルダーが承認するまで続きます。
ライブサイト
ライブサイトは最終的な公開版で、本番環境または本番サイトとも呼ばれます。ここで一般公開の幕が上がり、すべてのユーザーに更新が表示されます。
ユーザーは購入を行い、コンテンツに関与し、ブランドとやり取りできます。変更がライブになると誰でもアクセスできるため、ステージング段階での徹底的なQAが重要です。
ECサイトでステージングサイトを使用する理由
不完全な更新を公開すると顧客を困らせ、売上に悪影響を与える可能性があるため、ECサイトでステージングサイトを使用することは特に重要です。ステージングサイトは以下の点で役立ちます。
- ユーザー体験に影響を与えることなく要素をテストする：顧客体験を損なうことなく、デザインや新機能を実験できます。
- 公開前にバグを発見する：カートの問題、機能しないボタン、映らない商品画像などのエラーを見つけられます。
- サイトを中断することなく統合をテストする：API（アプリケーションプログラミングインターフェース）や送料計算機などのサードパーティ統合を、ライブサイトに影響を与えることなくテストできます。
- ステークホルダーと協力する：さまざまなチーム、デザイナー、ステークホルダーを招待して、レビューと修正の協力を行えます。
- ユーザー体験をシミュレートする：顧客と同じようにサイトを体験し、ショッピング体験の不足点を発見できます。これは、Figmaなどのツールでインタラクティブなデザインファイルを使用するよりも完全なシミュレーションです。
- ウェブサイトのパフォーマンスをテストする：更新によってサイトが遅くなっていませんか？ステージングサイトでは技術的パフォーマンスへの影響をテストできます。これはオーガニック検索ランキングにも影響する可能性があります。
Shopifyでステージングサイトを作成する3つの方法
標準的なShopifyサイトにはステージングサイトが付属していないため、作成する必要があります。3つの方法があります。
1. テーマを複製する
これは標準的なShopifyプランでステージング環境を作成する最も簡単な方法です。数回のクリックだけで完了する迅速なセットアッププロセスです。ステージング環境がShopifyの管理パネルに組み込まれるため、サードパーティアプリをインストールする必要もありません。
テーマを複製してShopifyでステージングサイトを作成する方法：
1. Shopify管理パネルで「オンラインストア」>「テーマ」に移動します。
2. 「現在のテーマ」>「アクション」で「複製」を選択します。
3. ライブテーマの同一コピーができます。ライブサイトに影響を与えることなく自由に編集できます。「プレビュー」をクリックしてステージングインスタンスを生成できます。
4. テストが完了したら、ライブサイトに変更を適用できます。
このオプションは、レイアウトの調整や新しいページセクションなどのデザイン変更に最適です。ただし、統合や機能変更のテスト環境は提供されません。また、既存サイトに既に追加した要素を手動で追加する必要があります。
2. 開発ストアを作成する
この方法では、新しいShopifyパートナーアカウントを作成する必要があります。これにより、テスト用の完全なストアを構築できます。パートナーアカウントは、クライアント向けにストアを構築・管理する開発者、デザイナー、代理店向けに設計されています。
無料で、開発ストアへのアクセスが提供され、ウェブサイトのデザインと機能を含むメインサイトのすべてをプライベート環境でミラーリングできます。
開発ストアを使用してステージングサイトを作成する方法：
1. Shopifyパートナーアカウントにサインアップします。
2. 「ストア」>「ストアを作成」に移動します。
3. ストアタイプとして「開発」を選択します。
4. ライブストアと区別しやすいよう「staging-yourwebsite」のような名前を付けます。
5. 商品を追加し、テーマをインストールし、ライブストアをミラーリングするようすべての設定を構成します。
これで、実際のサイトにリスクを与えることなく、完全なユーザー体験をシミュレーションできます。これは、カスタムコードやサードパーティ統合を含む機能変更に最適なオプションです。
開発ストアはテスト用に無料ですが、いくつかの制限があります。例えば、無料およびパートナー対応アプリのみインストールでき、テスト配送ラベルのみ生成できます。
追加のアプリをテストしたり、機能的な配送ラベルを作成したい場合は、ベーシックプランで新しい有料ストアを設定できます。テーマを複製した場合と同様に、追加したウェブサイト要素をステージングサイトに手動でコピーする必要があります。
3. アプリを使用する
Duplify（限定無料プランを提供）などのステージングツールを使用すると、サイト全体を複製するステージング環境を作成できます。その後、ライブ化する前に既存のページと商品をテストできます。
Rewind Stagingは類似のアプリ（無料トライアル付き）で、テーマバックアップが含まれているため、問題が発生した場合に以前のバージョンに戻すことができます。Shopifyアプリストアでステージングアプリを検索して始めましょう。
Rewind Stagingを使用してステージングサイトを作成する方法：
1. ShopifyアプリストアからライブサイトにRewind Copyをインストールします。
2. ライブストアをソースストアとして選択します。
3. 開発ストアにRewind Copyをインストールします。
4. 開発ストアを宛先ストアとして選択します。
5. ソースストアから宛先ストアにキーをコピーして、ストアを関連付けます。
6. ライブサイトをミラーリングするために、ステージングサイトにコピーする情報を選択します。
7. 両方のストア間の同期を維持するため、「継続的にコピー変更をチェック」を選択します。
8. 「タスクを開始」をクリックしてコピーを開始します。
ウェブサイトを手動で複製すると、要素が欠落する場合があるため、ステージングアプリを使用することで正確なコピーを確保できます。特に複雑なテーマを使用している場合に有効です。
ステージングサイトに関するよくある質問
本番サイトとステージングサイトの違いは何ですか？
ステージングはサイト更新のプレビューを提供します。これにより、開発者は最終公開前にバグを発見し、サイトの機能をテストし、ステークホルダーのフィードバックを収集できます。
Shopifyでステージングサイトを作成できますか？
Shopifyには組み込みのステージングサイトはありませんが、テーマの複製、開発ストアの作成、またはRewind Copyなどのアプリを使用して手動で作成できます。
Shopifyでウェブサイトをライブにするにはどうすればよいですか？
以下の手順に従ってShopifyでウェブサイトをライブにします。
1. ルートドメインのAレコードを変更し、ShopifyのIPアドレスに向けます。
2. CNAMEレコードをShopifyホスト型ドメインに変更します。
3. Shopifyでドメインを接続します。
4. Shopifyでプライマリドメインを設定します。
5. オンラインストアのパスワードを削除します。
