Customer Accounts / Improvement

サインインページが刷新 +
エディタで自分でカスタマイズできるように

2 カラム化された新デザインに切り替わり、右側に背景画像を置いてブランド表現が可能に。Checkout & Accounts エディタからプレビューしながら直接編集でき、API 経由の高度カスタマイズにも対応。

このページの構成
  1. 何が変わったのか(30秒で理解)
  2. 新レイアウト図解 : Before / After
  3. カスタマイズできる場所 : 3 つの編集ルート
  4. 主な変更点まとめ
  5. 利用条件と前提
  6. 編集の流れ(3ステップ)
  7. 技術者が押さえるべき5つのポイント
  8. 業務に活かせる3つのユースケース
  9. 提案で使える1行サマリ

1何が変わったのか

Customer Accounts(顧客アカウント)の サインインページ がリフレッシュされ、左にサインインフォーム/右に背景画像の 2 カラム構成に。
さらに、Checkout & Accounts エディタからプレビューしながらカスタマイズできるようになった。

2 カラム化

左 : サインインフォーム / 右 : カスタマイズ可能な背景画像。

エディタ編集対応

Checkout & Accounts エディタからプレビューしつつ直接編集。

API

API でも制御可

Checkout And Accounts Configuration API で高度なカスタマイズ。

2新レイアウト図解 : Before / After

BEFORE (従来 ・ 1 カラム中心) LOGO Sign in ロゴ+フォームのみ AFTER (新 ・ 2 カラム + 背景画像) LOGO Sign in フォーム 背景画像 refresh
ポイントは「ロゴ以上の視覚的なブランド表現が可能になった」こと。これまでロゴだけだったブランド面積が、右側のビジュアル領域として丸ごと開放された。

3カスタマイズできる場所 : 3 つの編集ルート

① Shared settings 全サーフェスで共通の スタイル(色・フォント等) → 一括で揃える ② Tailored styling サインインページ独自の 見せ方を調整 → 個別に尖らせる ③ Configuration API Checkout And Accounts Configuration API → より高度な制御
エディタ ・ 共通

Shared settings

サインイン/チェックアウト/アカウント等の各面に一貫して効く共通スタイル設定。

エディタ ・ 個別

Tailored styling

サインインページ単体のスタイル要素を調整して独自感を演出。プレビューしながら編集可能。

API

Configuration API

エディタ UI を超える「more advanced」なカスタマイズ制御は API 経由で実現。

4主な変更点まとめ

項目従来今回の変更
レイアウト サインインフォーム中心の構成 2 カラム(左 : フォーム / 右 : 背景画像)
ブランド表現 ロゴ程度 背景画像でビジュアル的に表現可能
編集場所 記載なし(直接編集不可) Checkout & Accounts エディタで直接編集+プレビュー
共通スタイル Shared settings で一括適用
API カスタマイズ 追加 Checkout And Accounts Configuration API
対象 最新版 customer accounts のみ(legacy は対象外)

5利用条件と前提

最新版 customer accounts であること

本機能は最新版の customer accounts に限定して提供。今回のリフレッシュ/エディタ編集/背景画像はすべてこちらが前提。

legacy customer accounts は対象外

旧版を使っているストアは利用不可。Shopify の案内に従ってアップグレードを完了する必要がある。

提供プラン・国・追加コストの明示は記事に 記載なし。アップグレード可否・実施手順は Shopify の公式ガイドに従うこと。

6編集の流れ(3ステップ)

1

Checkout & Accounts エディタを開く

サインインページを選択してプレビュー画面を表示。

2

Shared settings + 背景画像を設定

共通スタイルを揃えつつ、右カラムの背景画像でブランド表現。

3

必要なら API で高度な調整

エディタで足りない領域は Configuration API で補完。

編集は プレビューを見ながら直接行える。コードを触らずブランドビジュアルを差し替えられる点が、これまでとの大きな違い。

7技術者が押さえるべき5つのポイント

1. レイアウト : 2 カラム固定が前提

左 : フォーム / 右 : 背景画像 という構造。任意の自由レイアウトではなく、Shopify が用意した「2 カラム枠」を活かす設計。

2. 編集面は「Checkout & Accounts エディタ」

チェックアウトと同じエディタに統合されている=チェックアウトのスタイル運用と同じ枠組みで管理できる。役割分担・権限設計はチェックアウトに準ずる。

3. Shared と Tailored の二層構造

共通スタイル(Shared)と個別スタイル(Tailored)の階層化。ブランド一貫性とページ個別最適のバランスを設計次第で取れる。

API

4. Checkout And Accounts Configuration API

エディタで届かない高度カスタマイズは API。IaC 的に構成管理・複数ストア横展開する場合の起点になる API 名を覚えておく。

5. legacy customer accounts では使えない = アップグレードが事実上の前提

「最新版 customer accounts のみ」と明記。レガシー運用中のストアは、まずアップグレード(公式ガイドに従う)が先決。リプレイス/改修案件ではこの順序を必ずワークプランに入れる。

8業務に活かせる3つのユースケース

USE CASE 1

ブランドサイトと同じ世界観に寄せた「ログインの入り口」演出

課題
本サイトはこだわって作っているのに、サインインページだけ無機質で、ブランド体験が途切れている。
打ち手
2 カラムの右側にブランドビジュアル(商品・モデル・店舗写真など)を背景画像として設定。Shared settings でフォントと色も整える。
効果
サインインから世界観が地続きになり、リピーター体験の質を底上げ。コード変更ゼロで実装可能。
技術メモ
Checkout & Accounts エディタからプレビューしつつ編集。デプロイ不要。
A B C D
USE CASE 2

マルチブランド/マルチストア運用での「サインイン体験の一括統制」

課題
複数ブランド/複数ストアを運営しており、各ストアでサインインの見た目がバラバラ。手作業での揃え込みが運用負荷。
打ち手
Checkout And Accounts Configuration API でストア横断にスタイル構成をコード管理。Shared settings をテンプレ化して横展開。
効果
ブランドガイドラインを API ベースで強制でき、新規ストア立ち上げ時の意匠ぶれを抑制。
技術メモ
API 名称 : Checkout And Accounts Configuration API。具体的なエンドポイント・スキーマは記事に 記載なし、別途公式ドキュメント参照。
legacy new
USE CASE 3

legacy customer accounts からの「アップグレード推進」の口実づくり

課題
クライアントが legacy customer accounts のままで、最新機能を入れる根拠が薄かった。
打ち手
「新サインインページのブランド表現+エディタ編集+API カスタマイズは最新版限定」という事実を提案根拠にし、アップグレードを計画化。
効果
UI 刷新/ブランド体験向上を「機能アップグレードのリターン」として説明しやすくなり、移行プロジェクトの稟議が通しやすい。
技術メモ
移行の具体手順は Shopify 公式ガイドに従う。記事内のリンク先("follow our guide")を起点に確認。

9提案で使える1行サマリ

「Customer Accounts のサインインページが 2 カラム+背景画像に刷新され、
Checkout & Accounts エディタで直接プレビュー編集可能に。
高度な制御は Checkout And Accounts Configuration API で。ただし 最新版 customer accounts 限定。」