Shopifyでログイン画面をブランドカラーに設定する方法|ロゴ・色・画像

ブランドカラーに設定されたログイン画面のイメージ図

結論: 新しいお客様アカウントのログイン画面は、Shopify管理画面の「設定」→「チェックアウト」で開く編集画面で、ページセレクターから「ログイン」ページを選び、「メイン」の設定でロゴ・背景色・アクセントカラー・ヒーロー画像を変更できます。ログイン画面のURLは、初期設定では「shopify.com/authentication/(ストアのID番号)/login」の形式で、お客様アカウント用のサブドメインを作成してお客様アカウントのプライマリードメインに設定すると、「account.your-store.com」のような自社ドメインになります。

ロゴ・色・画像の設定はすべてShopify管理画面から行い、テーマのコードを編集する必要はありません。この記事の手順を終えると、ログイン画面のロゴと配色がストアのブランドカラーに揃い、ログイン画面にヒーロー画像が表示され、お客様アカウントのメニューにストアで決めた項目が並びます。共有ブランディング設定で変えたロゴと色はチェックアウトページにも反映されるため、購入手続きからログイン画面までの見た目を一度の作業でそろえられます。会員登録フォームの設置自体は、新しいお客様アカウントに会員登録フォームを設置する手順(Howdy)で説明しています。

この記事の要点

  • ログイン画面のロゴ・色・ヒーロー画像は、編集画面のページセレクターで「ログイン」ページを選び、「メイン」の「ロゴ」「色」「メディア」の各セクションで設定する
  • 共有ブランディング設定のロゴと色は、チェックアウトページ・お客様アカウントページ・ログインページに反映され、ログインページとお客様アカウントページではそれぞれ個別に上書きできる
  • ヒーロー画像はデスクトップデバイスでのみ表示される
  • お客様アカウントのメニューは、管理画面の「コンテンツ」→「メニュー」か編集画面の「ナビゲーション」から変更でき、デスクトップでは最大3段階までネストできる
  • ログイン画面のURLは、初期設定では「shopify.com/authentication/(ストアのID番号)/login」の形式で、お客様アカウント用のサブドメインを作成してプライマリードメインに設定すると、自社ドメインになる

ログイン画面のロゴはどう変更しますか?

管理画面の「設定」→「チェックアウト」で編集画面を開き、ページセレクターで「ログイン」ページを選びます。「メイン」の「ロゴ」セクションで「画像」欄から画像を選び、保存するとログイン画面のロゴが変わります。

編集画面は、「設定」セクションでカスタマイズする設定の横にある「編集」を押して開きます。「ロゴ」セクションでは画像に加えてロゴの幅も調整できます。共有ブランディング設定にロゴをアップロードしている場合、そのロゴがログインページにも表示され、ログインページの「ロゴ」セクションで別の画像に上書きできます。

プロフィールや注文履歴などのお客様アカウントページのロゴを変える場合は、ページセレクターでそのページを選び、セクションのアイコンから「ヘッダー」を開いて、「ロゴ」セクションの「画像」欄と「幅」のスライダーで設定します。

出典: Shopifyヘルプ「お客様アカウントページのカスタマイズ」

ログイン画面の背景色やアクセントカラーはどう設定しますか?

編集画面でログインページを選び、「メイン」の「色」セクションで「背景」と「アクセント」の色を選んで保存します。チェックアウトページやお客様アカウントページとは別に、ログインページだけの色を設定できます。

お客様アカウントページの色は、ページセレクターでそのページを選び、「ヘッダー」の「色」セクションでヘッダーの背景色を、「メイン」で本文の背景色とアクセントカラーを設定します。

お客様アカウントページに背景画像が設定されている場合、背景画像は削除できますが、別の画像に置き換えることはできません。削除して保存したあとは、背景画像を設定し直せません。背景画像の削除は「ストアのデフォルト」の設定から行います。

出典: Shopifyヘルプ「お客様アカウントページのカスタマイズ」

ロゴ・色の変更はチェックアウトにも反映されますか?

共有ブランディング設定で変えたロゴと色は、チェックアウトページ・お客様アカウントページ・ログインページの3か所に反映されます。ログインページやお客様アカウントページで個別に変えたロゴと色は、そのページだけに反映されます。

共有ブランディング設定は、編集画面でチェックアウトページとアカウントページに共通して使われる設定です。ストア全体の配色を共有ブランディング設定でそろえたうえで、ログイン画面だけ別のロゴや配色にしたい場合は、ログインページの「メイン」の設定で上書きします。お客様アカウントページとログインページの色は、それぞれ独立して上書きできます。

出典: Shopifyヘルプ「お客様アカウントページのカスタマイズ」

ログイン画面のヒーロー画像はどう追加しますか?

編集画面でログインページを選び、「メイン」の「メディア」セクションの「画像」欄からヒーロー画像をアップロードして保存します。ヒーロー画像はデスクトップデバイスでのみ表示されます。

ログインページは、お客様がアカウントにログインするための独立したページで、チェックアウトページやお客様アカウントページとは別にロゴ・色・ヒーロー画像を設定できます。ロゴ・色・ヒーロー画像以外にどこまで変更できるかは、新しいお客様アカウントのログイン画面はどこまで変えられる?|ロゴ・文言・CSSの変更範囲にまとめています。

出典: Shopifyヘルプ「お客様アカウントページのカスタマイズ」

お客様アカウントのメニューもブランドに合わせて変更できますか?

変更できます。管理画面の「コンテンツ」→「メニュー」で「お客様アカウントのメインメニュー」を開いて編集するか、編集画面の「ナビゲーション」メニューから編集します。

編集画面から変える場合は、ページセレクターで「注文」ページを選び、「メイン」のサイドバーで「ナビゲーション」メニューの「編集」を押します。メニュー項目には、プロフィールページ・アプリのページ・オンラインストアのその他のテンプレート・外部リンクを追加できます。お客様アカウントのメニューでは、URLリダイレクトは使えません。

メニューは、デスクトップでは画面の左側に縦に並び、最大3段階までネストできます。モバイルでは画面の上部に横に並び、項目が5つ以上あるとアイコンに切り替わります。

出典: Shopifyヘルプ「お客様アカウントページのカスタマイズ」

ログイン画面のドメイン(サブドメイン)はどう表示されますか?

ログイン画面のURLは、初期設定では「shopify.com/authentication/(ストアのID番号)/login」、お客様アカウントページのURLは「shopify.com/(ストアのID番号)/account」の形式です。お客様アカウント用のサブドメインを作成してお客様アカウントのプライマリードメインに設定すると、プライマリードメインが「your-store.com」の場合は「account.your-store.com」になります。

プライマリードメインを変更すると、お客様アカウントのドメインもあわせて更新されます。プライマリードメインの確認と変更は、管理画面の「設定」→「ドメイン」で行います。お客様アカウント用のサブドメインを作ると、そのサブドメインがすべてのお客様アカウントページのドメインになり、お客様は「account.your-store.com/authentication/login」からログインページを開きます。

出典: Shopifyヘルプ「お客様アカウントページのカスタマイズ」/「お客様アカウントページにカスタムサブドメインを接続する」

アカウントページにブロックやアプリのページを追加できますか?

追加できます。編集画面では、注文ページ・注文サマリー・プロフィールなどの既存のお客様アカウントページにブロックを追加できるほか、アプリが提供する新しいページをお客様アカウントに追加できます。

アプリのページは、編集画面の「アプリ」のサイドバーから作ります。直接リンクに対応したアプリのページは、編集画面か管理画面の「メニュー」ページから、お客様アカウントのメニューにリンクを追加できます。追加したページは、「アプリ」のサイドバーの「追加済み」タブか、編集画面のページセレクターから開きます。

出典: Shopifyヘルプ「お客様アカウントページのカスタマイズ」

注文がまだないお客様には、どのような画面が表示されますか?

注文がまだないお客様が「注文」ページを開くと、ストアのホームページに移動する「今すぐ購入」ボタンが表示されます。このボタンに加えて、ストアから選んだコレクションを「注文」ページに表示できます。

編集画面のページセレクターで「注文」ページを選び、「メイン」の「注文なし」セクションで設定します。「コレクション」メニューの「コレクションを選択」から既存のコレクションを選ぶか、「コレクションを作成」で新しく作って保存します。

出典: Shopifyヘルプ「お客様アカウントページのカスタマイズ」

Advanced ShopifyやShopify Plusのプランではさらに何ができますか?

Advanced または Plus のプランでは、マーケットごとにお客様アカウントページをカスタマイズできます。ブランディング・設定・ブロックに加えて、お客様アカウントのメニューや注文に対する操作のボタンも、マーケットごとに変えられます。

複数の国・地域に展開しているストアで、国内のお客様にだけアカウントの機能を追加したり、海外のお客様のアカウントに配送の遅れについての案内を表示したりするときに使う設定です。

出典: Shopifyヘルプ「お客様アカウントページのカスタマイズ」

設定を進める順番

共有ブランディング設定のロゴと色はログインページにも反映され、ログインページではそのロゴと色を上書きできます。この記事の設定を、管理画面で操作する順に並べると次のとおりです。

  1. 管理画面の「設定」→「チェックアウト」で編集画面を開き、共有ブランディング設定でロゴと色を設定する(チェックアウトページ・お客様アカウントページ・ログインページに反映される)
  2. ページセレクターで「ログイン」ページを選び、「メイン」の「ロゴ」「色」セクションで、ログイン画面だけのロゴと配色に上書きする
  3. 同じ「メイン」の「メディア」セクションで、ヒーロー画像を追加する(表示はデスクトップデバイスのみ)
  4. 「コンテンツ」→「メニュー」で「お客様アカウントのメインメニュー」を開き、メニュー項目を編集する
  5. 管理画面の「設定」→「お客様アカウント」の「URL」で「ドメインを変更」を押してサブドメインを作成し、「設定」→「ドメイン」でそのサブドメインをお客様アカウントのプライマリードメインに設定する

出典: Shopifyヘルプ「お客様アカウントページのカスタマイズ」/「お客様アカウントページにカスタムサブドメインを接続する」

関連記事

よくある質問

Q. ログイン画面のロゴはどう変更しますか?A. 管理画面の「設定」→「チェックアウト」で編集画面を開き、ページセレクターで「ログイン」ページを選びます。「メイン」の「ロゴ」セクションで「画像」欄から画像を選び、必要に応じて幅を調整して保存すると反映されます。
Q. ログイン画面の背景色やアクセントカラーはどう設定しますか?A. 編集画面でログインページを選び、「メイン」の「色」セクションで「背景」と「アクセント」の色を選んで保存します。チェックアウトページやお客様アカウントページとは別に、ログインページだけの色を設定できます。
Q. ログイン画面のヒーロー画像はどう追加しますか?A. 編集画面でログインページを選び、「メイン」の「メディア」セクションの「画像」欄からヒーロー画像をアップロードして保存します。ヒーロー画像はデスクトップデバイスでのみ表示されます。
Q. ログイン画面のドメイン(サブドメイン)はどう表示されますか?A. 初期設定では、ログイン画面のURLは「shopify.com/authentication/(ストアのID番号)/login」の形式です。お客様アカウント用のサブドメインを作成し、「設定」→「ドメイン」でお客様アカウントのプライマリードメインに設定すると、「account.your-store.com」のような自社ドメインで表示されます。

Howdyは14日間無料で試せます

ログイン画面のロゴ・色・ヒーロー画像の設定とあわせて、会員登録フォームの設置もHowdyで行えます。会員登録フォームで取得した誕生日・住所などの項目は、ブランドカラーに整えたプロフィールページにそのまま表示できます。顧客メタフィールドの作成、会員登録フォームの項目設定、プロフィールページのブロック配置は、Howdyの専任チームが無料で代行します。

Shopify App StoreでHowdyを14日間無料で試す

ブログ一覧へ戻る

まずは14日間、無料でお試しください

初期設定は専任チームが無料で代行します。相談したい方は、お問い合わせからご連絡ください。