Shopifyのログインフローをマスターする：新しい顧客アカウントでログイン後に顧客をリダイレクトする方法

Shopifyの「新しい顧客アカウント」を導入したのは、パスワード不要でよりスムーズなログイン体験を実現する賢い選択です。とはいえ、デフォルトの挙動に気づいたかもしれません。顧客はログイン後、すぐに注文状況ページへ送られます。機能的ではありますが、これは必ずしも理想的な導線ではありません。途中まで見ていたページの続きを読むことを望んでいたらどうでしょう？ あるいは、ホームページで迎えたいと思うかもしれません。

幸い、ログイン後のリダイレクトをカスタマイズするのは簡単です。このガイドでは、Shopifyの「新しい顧客アカウント」を使ってサインインした後、顧客の着地先を正確に制御するための手順を、ステップごとにわかりやすく解説します。最後に閲覧していたページでも、ホームページでも、独自のウェルカムページでも、あなたのストアの流れに合わせて自由に設定できます。

なぜログイン後のリダイレクトをカスタマイズするのか？

• シームレスなユーザー体験（UX）： 最後に閲覧していたページへリダイレクトすると、手間が減り、顧客は中断したところからすぐに再開できます。

• 一貫したブランディング： ユーザーをホームページへ送ることで、ブランドを強く印象づけ、最新のキャンペーンや厳選されたコレクションを見せられます。

• 狙いを定めたエンゲージメント： ユーザーを特定のページ（「新着商品」や「マイアカウント」ダッシュボードなど）へ誘導すると、次の行動を効果的に導けます。

• 混乱を軽減： 顧客が単に買い物を続けたかっただけなのに注文ページへ着地してしまう、という戸惑いの大きい体験を防げます。

始める前に：テーマは必ずバックアップしましょう！

まずは安全第一！ コードを編集する前に、公開中のテーマのバックアップを作成してください。これで、予期しない問題が起きても簡単に元へ戻せます。

1. Shopify管理画面から、オンラインストア > テーマに移動します。

2. 現在のテーマを見つけ、アクションのドロップダウン（または ... ボタン）をクリックします。

3. 複製を選択します。

4. わかりやすいように、複製したテーマの名前を変更します（例：「Theme Backup - Pre Login Redirect Mod」）。

ステップ1：正しいShopifyテーマファイルを見つける

ログインリンクのコードは、通常ヘッダー関連のファイルにあります。正確なファイルはテーマによって異なります。

• ほとんどのテーマ（DawnのようなShopifyの無料テーマを含む）：

  • デスクトップヘッダー：sections/header.liquid

  • モバイルヘッダー/ドロワー：多くの場合、こちらも sections/header.liquid にありますが、場合によっては snippets/header-drawer.liquid や snippets/mobile-nav.liquid の中にあります。

• サードパーティ製テーマ： 同様のファイルを探してください。よくある名前は次のとおりです。

  • sections/header.liquid

  • snippets/navigation.liquid

  • snippets/account-links.liquid

ヒント： テーマのコードエディタ（Actions > Edit code）を開き、エディタ内の検索バーで routes.account_login_url またはアカウントアイコン/リンクのコードの一部を検索すると、正確な場所を特定できます。デスクトップ表示とモバイル表示の両方を確認するのを忘れないでください。

ステップ2：ログインリダイレクトURLを変更する

ログインリンクを含むファイルを見つけたら、次のLiquidコードを探します。

{{ routes.account_login_url }}

次に、希望するリダイレクト動作に応じて置き換えます。

オプションA：顧客を最後に閲覧したページへリダイレクトする

これは多くの場合、最も使いやすい選択肢です。元のコードを次のコードに置き換えます。

{{ routes.storefront_login_url }}

この変数は、顧客が「ログイン」をクリックした時点で表示していたページを自動的に取得します。

オプションB：顧客をストアのホームページへリダイレクトする

ログインした顧客を常にホームページへ送るには、元のコードを次のコードに置き換えます。

https://{{ shop.permanent_domain }}/customer_authentication/login?return_to=%2F

%2F は / をURLエンコードしたもので、ルート（ホームページ）を表します。

オプションC：顧客を特定のページ（例：「新着商品」）へリダイレクトする

特定のコレクションや専用のアカウントダッシュボードページなど、カスタムページへ顧客を誘導したい場合は、元のコードを次のコードに置き換えます。

https://{{ shop.permanent_domain }}/customer_authentication/login?return_to={{ "/collections/new-arrivals" | url_encode }}

重要： /collections/new-arrivals を、あなたの希望する着地ページの相対URL（例：/pages/welcome や /collections/all）に変更してください。| url_encode フィルターにより、URLが正しくフォーマットされます。

ステップ3：保存、テスト、公開

1. テーマファイルエディタで変更内容を保存します。

2. テーマをプレビューします。顧客アカウントからログアウトし（ログインしている場合）、ログイン操作をテストしてください。異なるページ（ホームページ、商品ページ、コレクションページ）からログインしてみて、選択したオプションどおりにリダイレクトされるか確認します。デスクトップ表示とモバイル表示の両方をチェックしてください。

3. すべてが正しく動作していると確信できたら、再び オンラインストア > テーマ に戻り、編集したテーマ（作業していた複製テーマのままかもしれません）を見つけて、公開をクリックします。

   
   

さらにコントロールする：購入後のジャーニーを強化する

ログイン後のリダイレクトをカスタマイズすることは、顧客が購入したり注文を確認したりする前の導線を洗練させる素晴らしい方法です。では、注文が確定した後はどうでしょうか？

シームレスな体験はログインで終わるべきではありません。顧客は購入後にも柔軟性を必要とすることがよくあります。サイズを間違えて選んだかもしれませんし、配送先住所を更新したいかもしれませんし、別の商品を追加したいかもしれません。ここで Revize が、Shopifyの「新しい顧客アカウント」フレームワークと完璧に連携します。

ログインフローを最適化している今こそ、Revize を使ってさらに顧客に力を与えることを検討してください。私たちのアプリなら、顧客は注文状況ページから直接、しかも簡単に自分で注文を編集できます（新しい顧客アカウントのログインからアクセスするのと同じ領域です）。これによりサポート問い合わせを減らし、顧客満足度を高められます。

Revize による注文編集のような購入後の柔軟性と、スムーズでカスタマイズされたログインリダイレクトを組み合わせることで、真に顧客中心の体験を生み出し、ロイヤルティを育むことができます。

まとめ

Shopifyの「新しい顧客アカウント」におけるログイン後リダイレクトの調整は、シンプルでありながら強力なカスタマイズです。顧客がサインインした後にどこへ着地するかを選ぶことで、より直感的でパーソナライズされたショッピング体験を作れます。最後に表示していたページへ送る場合でも、ホームページでも、特別なランディングページでも、こうした丁寧な工夫は顧客満足度に大きく貢献し、エンゲージメントにも良い影響を与えます。

カスタマイズと販売を楽しんでください！