Customer Accounts / Improvement

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

注文の確認・追跡・アクションがしやすくなる刷新。シングルカラムのすっきりレイアウト、より直感的でアクセシブルなナビゲーション、モバイルファーストの最適化が入る。

このページの構成
  1. そもそも何が変わるのか(30秒で理解)
  2. 買い手体験の改善 5 点(図解)
  3. モバイル Before / After
  4. サインインページ・ブランディングのカスタマイズ
  5. 提供開始とアップグレード経路
  6. 技術者が押さえるべき5つのポイント
  7. 業務に活かせる3つのユースケース
  8. 提案で使える1行サマリ

1そもそも何が変わるのか

顧客アカウントページ(マイページ)の見た目と導線が刷新される。
ポイントは ① シングルカラムのすっきりレイアウト② より直感的でアクセシブルなナビゲーション③ モバイルファーストの最適化 の 3 つ。

シングルカラム

情報を縦一列に整理。視線の移動が減り、どこに何があるか掴みやすい。

直感的・アクセシブルな導線

ナビゲーションがより分かりやすく、アクセシビリティにも配慮した設計に。

モバイルファースト

小さい画面でも操作が完結するよう最適化。タップ回数を減らす方向に統一。

2買い手体験の改善 5 点

no hamburger

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 リンク。アプリ追加リンクで超えないよう棚卸ししてから移行する。
brand
USE CASE 2

D2C ブランドの「ログイン前後の世界観統一」

課題
店頭(ストアフロント)は作り込んでいるのに、サインインページ/マイページだけ素の Shopify 然としていてブランド体験が分断している。
打ち手
checkout and account editor で、サインインページのロゴ・ブランドカラー・セクションスタイル・独自ブランド画像を設定し、アカウントページもブランドルックに統一。
効果
ログイン前の第一接触からブランド体験が地続きになり、会員ページの満足度・再訪率の向上に寄与。
技術メモ
チェックアウトとアカウントの編集が同一エディタに乗るため、デザイン資産を共通管理しやすい。アプリで機能追加も可能。
recommended
USE CASE 3

新規会員の「空のマイページ」をクロスセル面に転換

課題
会員登録だけして未購入のユーザーが、注文ゼロの空のマイページを見て離脱。せっかくの来訪が次の購買に繋がっていない。
打ち手
注文なしの顧客向けに、マーチャントがキュレーションしたおすすめ商品を表示する機能を有効化し、看板商品・新作・定番を出す。
効果
空状態が商品発見の入口に変わり、初回購入のきっかけを創出。会員登録から購買への転換を後押し。
技術メモ
表示する商品はマーチャントがキュレーション。季節商材・在庫状況に合わせて定期的に見直す運用を組むと効果的。

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

「顧客アカウントページがシングルカラム+モバイルファーストに刷新。
ナビ・注文詳細・アクションが常に手の届く位置に出て、注文ゼロの顧客にはおすすめ商品、サインインページはブランディング自由度アップ。
最新版 customer accounts へ移行すれば、追加開発ほぼ無しで会員体験を底上げできる。」