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

図解 ： Customer Accounts サインインページのリフレッシュとエディタ編集対応 Customer Accounts / Improvement サインインページが刷新 ＋ エディタで自分でカスタマイズできるように 2 カラム化された新デザインに切り替わり、右側に背景画像を置いてブランド表現が可能に。Checkout & Accounts エディタからプレビューしながら直接編集でき、API 経由の高度カスタマイズにも対応。 このページの構成 何が変わったのか（30秒で理解） 新レイアウト図解 ： Before / After カスタマイズできる場所 ： 3 つの編集ルート 主な変更点まとめ 利用条件と前提 編集の流れ（3ステップ） 技術者が押さえるべき5つのポイント 業務に活かせる3つのユースケース 提案で使える1行サマリ 1 何が変わったのか Customer Accounts（顧客アカウント）の サインインページ がリフレッシュされ、 左にサインインフォーム／右に背景画像 の 2 カラム構成に。 さらに、 Checkout & Accounts エディタ からプレビューしながらカスタマイズできるようになった。 2 カラム化 左 ： サインインフォーム ／ 右 ： カスタマイズ可能な背景画像。 エディタ編集対応 Checkout & Accounts エディタからプレビューしつつ直接編集。 API でも制御可 Checkout And Accounts Configuration API で高度なカスタマイズ。 2 新レイアウト図解 ： Before / After ポイントは「ロゴ以上の視覚的なブランド表現が可能になった」こと。これまでロゴだけだったブランド面積が、 右側のビジュアル領域 として丸ごと開放された。 3 カスタマイズできる場所 ： 3 つの編集ルート エディタ ・ 共通 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）の階層化。ブランド一貫性とページ個別最適のバランスを設計次第で取れる。 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 エディタからプレビューしつつ編集。デプロイ不要。 USE CASE 2 マルチブランド／マルチストア運用での「サインイン体験の一括統制」 課題 複数ブランド／複数ストアを運営しており、各ストアでサインインの見た目がバラバラ。手作業での揃え込みが運用負荷。 打ち手 Checkout And Accounts Configuration API でストア横断にスタイル構成をコード管理。Shared settings をテンプレ化して横展開。 効果 ブランドガイドラインを API ベースで強制でき、新規ストア立ち上げ時の意匠ぶれを抑制。 技術メモ API 名称 ： Checkout And Accounts Configuration API。具体的なエンドポイント・スキーマは記事に 記載なし 、別途公式ドキュメント参照。 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 限定 。」 source ： changelog.shopify.com / a refreshed sign-in page for customer accounts generated 2026-05-23