顧客アカウントページが デザイン刷新（Design Uplift）

図解 ： Shopify Customer Accounts デザイン刷新（顧客アカウントページのデザインアップリフト） Customer Accounts / Improvement 顧客アカウントページが デザイン刷新（Design Uplift） 注文の確認・追跡・アクションがしやすくなる刷新。シングルカラムのすっきりレイアウト、より直感的でアクセシブルなナビゲーション、モバイルファーストの最適化が入る。 このページの構成 そもそも何が変わるのか（30秒で理解） 買い手体験の改善 5 点（図解） モバイル Before / After サインインページ・ブランディングのカスタマイズ 提供開始とアップグレード経路 技術者が押さえるべき5つのポイント 業務に活かせる3つのユースケース 提案で使える1行サマリ 1 そもそも何が変わるのか 顧客アカウントページ（マイページ）の見た目と導線が刷新される。 ポイントは ① シングルカラムのすっきりレイアウト ・ ② より直感的でアクセシブルなナビゲーション ・ ③ モバイルファーストの最適化 の 3 つ。 シングルカラム 情報を縦一列に整理。視線の移動が減り、どこに何があるか掴みやすい。 直感的・アクセシブルな導線 ナビゲーションがより分かりやすく、アクセシビリティにも配慮した設計に。 モバイルファースト 小さい画面でも操作が完結するよう最適化。タップ回数を減らす方向に統一。 2 買い手体験の改善 5 点 1. モバイルでメニューがインライン表示 ナビゲーションリンクが 最大 4 つ までなら、ハンバーガーアイコンに隠れず ページ上部にそのまま並ぶ 。どの画面サイズでも導線が常に手の届く位置に。 2. 注文詳細がモバイルで見やすく 注文サマリーが折りたたまれず インライン表示 。商品画像は そのまま商品ページへリンク 。注文サマリーに追加したアプリ機能も 余計なタップ無しで表示 。 3. 注文アクションが上部に露出 ネイティブ／拡張機能ベースの注文アクションが、メニューの中ではなく 各注文サマリーの最上部 に。注文一覧・注文ステータスページの双方で見つけやすく。 4. 注文ゼロの顧客にレコメンド表示 まだ注文の無い顧客には、空っぽの画面ではなく マーチャントが選んだおすすめ商品 を表示。販売中の商品を発見してもらえる。 5. サインインページのカスタマイズが拡張 サインインページで ロゴ・カラー・セクションスタイル・独自のブランド画像 をより細かく設定できるように。ログイン前の第一印象からブランド体験を統一できる。 刷新されたアカウントページは checkout and account editor（チェックアウト＆アカウントエディタ） で独自のブランドルックにカスタマイズでき、アプリで機能を追加することも可能。 3 モバイル Before / After 従来 刷新後 ※ 図はイメージ。実際の表示はストアの設定・テーマ・アプリ構成によって変わる。 4 サインインページ・ブランディングのカスタマイズ カスタマイズ対象 内容 編集場所 ロゴ サインインページに自社ロゴを設定 checkout and account editor カラー ブランドカラーに合わせた配色 セクションスタイル 各セクションの見た目の調整 ブランド画像 独自のブランドイメージ画像を追加 機能追加 アプリでアカウントページに機能を追加 同エディタ＋アプリ サインインページは ログイン前に顧客が最初に触れる画面 。ロゴ・カラー・ブランド画像を揃えることで、未ログイン状態からブランド体験を一貫させられる。 5 提供開始とアップグレード経路 1 本日からロールアウト開始 更新は今日（2026-06-17）から順次提供が始まる。 2 数週間かけて全ストアへ 最新版の customer accounts を使う全ストアに、今後数週間で展開される。 3 レガシー版はアップグレード レガシー版でも「新しい注文ステータスページ」はこのページ分の更新を受け取る。全体の刷新を反映するには最新版へのアップグレードが必要。 新しい注文ステータスページを持つレガシー版 customer accounts のストアも、当該ページの更新は受け取る。ただし 全アカウントページに刷新デザインを反映するには、Shopify のガイドに従って最新版の customer accounts へアップグレード する必要がある。具体的な対象国・プラン・正確な完了時期は記事に記載なし。 6 技術者が押さえるべき5つのポイント 1. 「最新版 customer accounts」が前提 刷新は 最新版 のアカウント機能に乗る。レガシー版を使い続けているストアは、まずアップグレード経路の棚卸しが必要。新旧どちらを使っているか管理画面で確認すること。 2. 拡張アクションが「上部」へ移動 ネイティブ／ extension ベースの注文アクション が注文サマリー最上部に露出する。アカウント／注文ページ向けに拡張を入れている場合、表示位置と優先度の前提が変わるので動作確認を。 3. 注文サマリーのアプリ機能が常時表示 注文サマリーに足したアプリ機能が 追加タップ無し で出るようになる。折りたたみ前提でレイアウトしていた UI は、常時表示でも崩れないか見直す価値あり。 4. ナビは「4 リンクまで」がインライン閾値 モバイルでインライン表示されるのは 最大 4 リンク 。アカウントメニューにアプリ等でリンクを足し過ぎると閾値を超え、従来挙動に戻る可能性がある。リンク数を意識した設計を。 5. カスタマイズは checkout and account editor に集約 サインインページのロゴ・カラー・セクションスタイル・ブランド画像、そしてアプリ機能の追加は checkout and account editor で行う。チェックアウトとアカウントの編集が同じエディタに乗るため、ブランディング作業を一箇所で完結できる。なお Admin API / Webhook 仕様への言及は本記事には記載なし 。 7 業務に活かせる3つのユースケース USE CASE 1 モバイル比率が高いストアの「マイページ離脱・問い合わせ削減」 課題 スマホ流入が中心で、注文確認・追跡・再注文の導線がハンバーガーや折りたたみの奥にあり、顧客が辿り着けず CS への問い合わせが発生している。 打ち手 最新版 customer accounts へ移行し、刷新デザイン（インラインナビ・注文サマリー常時表示・アクション上部露出）を有効化。アカウントメニューのリンクは 4 つ以内に整理。 効果 「注文どこ？」系の問い合わせ削減と、セルフ解決率の向上。モバイルでのアクション完了がスムーズに。 技術メモ インライン表示の閾値は最大 4 リンク。アプリ追加リンクで超えないよう棚卸ししてから移行する。 USE CASE 2 D2C ブランドの「ログイン前後の世界観統一」 課題 店頭（ストアフロント）は作り込んでいるのに、サインインページ／マイページだけ素の Shopify 然としていてブランド体験が分断している。 打ち手 checkout and account editor で、サインインページのロゴ・ブランドカラー・セクションスタイル・独自ブランド画像を設定し、アカウントページもブランドルックに統一。 効果 ログイン前の第一接触からブランド体験が地続きになり、会員ページの満足度・再訪率の向上に寄与。 技術メモ チェックアウトとアカウントの編集が同一エディタに乗るため、デザイン資産を共通管理しやすい。アプリで機能追加も可能。 USE CASE 3 新規会員の「空のマイページ」をクロスセル面に転換 課題 会員登録だけして未購入のユーザーが、注文ゼロの空のマイページを見て離脱。せっかくの来訪が次の購買に繋がっていない。 打ち手 注文なしの顧客向けに、マーチャントがキュレーションしたおすすめ商品を表示する機能を有効化し、看板商品・新作・定番を出す。 効果 空状態が商品発見の入口に変わり、初回購入のきっかけを創出。会員登録から購買への転換を後押し。 技術メモ 表示する商品はマーチャントがキュレーション。季節商材・在庫状況に合わせて定期的に見直す運用を組むと効果的。 8 提案で使える1行サマリ 「顧客アカウントページがシングルカラム＋モバイルファーストに刷新。 ナビ・注文詳細・アクションが常に手の届く位置に出て、注文ゼロの顧客にはおすすめ商品、サインインページはブランディング自由度アップ。 最新版 customer accounts へ移行すれば、追加開発ほぼ無しで会員体験を底上げできる。」 source ： changelog.shopify.com / customer-accounts-get-a-design-uplift Shopify Changelog ・ 2026-06-17 公開（Improvement / Customer accounts）