顧客アカウントが刷新 「シングルカラム」レイアウトと拡張機能の見え方が変わる

図解 ： Shopify 顧客アカウントのレイアウト刷新（フィーチャープレビュー） Platform / フィーチャープレビュー 顧客アカウントが刷新 「シングルカラム」レイアウトと拡張機能の見え方が変わる ナビゲーション・レイアウト・デバイス間の一貫性を改善するビジュアルリフレッシュ。新レイアウト上で自分の Shopify Extensions を今すぐプレビュー＆テストできる。プレビュー期間は 2026 年 6 月 12 日まで。 このページの構成 何が変わるのか（30秒で理解） 3つの変更点 図解 拡張機能の幅 ： inline と full-page の挙動 注文系拡張の可視性アップ（モバイル） 既存ターゲットの互換性とスケジュール プレビュー開始の手順 技術者が押さえるべき5つのポイント 業務に活かせる3つのユースケース 提案で使える1行サマリ 1 何が変わるのか 顧客アカウント（Customer accounts）が ビジュアルリフレッシュ 。 ナビゲーション・レイアウト・デバイス間の一貫性が改善され、ネイティブページが デスクトップ／モバイル共通のシングルカラム になる。 あわせて拡張機能（Shopify Extensions）の表示幅と見え方も変わるため、 マーチャント公開前に自分の拡張をテストできる期間 が用意されている。 シングルカラム化 ネイティブページがデスクトップとモバイルで同じ単一カラムに統一。ナビゲーションも簡素化される。 拡張の表示幅が変わる inline 拡張は従来より狭い幅で描画。full-page 拡張は狭いネイティブ準拠か、データ量重視の広い幅かを選べる。 注文系拡張が目立つ order action 拡張がより見やすくなり、order summary 拡張はモバイルで「タップして表示」の裏に隠れなくなる。 2 3つの変更点 図解 3点とも「見た目（レイアウト）」の刷新で、 既存の拡張ターゲットはすべて新レイアウトにマッピング済み 。ただし表示幅が変わるため、自分の拡張が新レイアウトで崩れないかの確認が推奨されている。 3 拡張機能の幅 ： inline と full-page の挙動 inline 拡張 従来より狭い幅で描画 ネイティブページ内に埋め込まれる inline 拡張は、これまでの広いレイアウトと比べて 狭いページ幅 でレンダリングされる。横幅前提のレイアウトを組んでいる場合は要確認。 full-page 拡張 狭い／広いを選べる フルページ拡張は、ネイティブページと揃う モバイルファーストの狭いレイアウト を採用するか、データ量の多いコンテンツ向けに 広いレイアウト へ拡張するかを選択できる。 4 注文系拡張の可視性アップ（モバイル） 拡張の種類 従来 新レイアウト order action 拡張 埋もれがち より目立つ 顧客が発見・利用しやすい order summary 拡張 モバイルでタップして表示 タップ不要 隠れずに表示される 注文まわりに構築した機能（再注文・返品申請・配送追跡など）が、 モバイルでも顧客の目に入りやすくなる 。発見性が利用率に直結する拡張ほど恩恵が大きい。 5 既存ターゲットの互換性とスケジュール 全ターゲットが引き続きサポート 現行のすべての拡張ターゲットは新デザインへマッピングされ、互換性が保たれる。ページごとの拡張ターゲットの対応はドキュメント（extension targets by page）で確認できる。 プレビューは 2026/6/12 まで フィーチャープレビューは 2026 年 6 月 12 日まで利用可能。今テストしておけば、マーチャント向けに本リリースされる前に必要な調整を先行して進められる。 マーチャントへの 正式リリース（一般公開）日は記載なし 。記事では「これらのデザイン更新がマーチャントに公開される前にテストするのが理想」とだけ述べられている。具体的な GA 日程は別途要確認。 6 プレビュー開始の手順 1 ドキュメントを開く 公式ドキュメントの案内に従ってフィーチャープレビューを開始する。 2 新レイアウトで拡張をテスト inline / full-page / 注文系拡張が新しい幅・配置で正しく表示されるか検証する。 3 フィードバックを共有 Shopify community で質問・フィードバックを投稿できる。必要な調整を本公開前に洗い出す。 7 技術者が押さえるべき5つのポイント 1. ネイティブページがシングルカラムに デスクトップ／モバイルが同一の単一カラムへ統一され、ナビゲーションも簡素化。レイアウトの前提（横並び等）に依存している実装は影響を受ける可能性がある。 2. inline 拡張は幅が狭くなる 従来の広いレイアウトより狭いページ幅で描画される。固定幅やワイド前提のUIは折返し・はみ出しが起きないかをプレビューで確認する。 3. full-page は幅を選択できる ネイティブ準拠の narrow か、データ量の多いコンテンツ向けの wide かを選べる。表やダッシュボード系は wide、案内系は narrow と、コンテンツ特性で使い分ける。 4. 注文系拡張の露出が増える order action がより目立ち、order summary はモバイルでタップの裏に隠れなくなる。露出増を見越して文言・CTA・情報量を再設計する余地がある。 5. 既存ターゲットは互換維持だが「今がテストの好機」 現行のすべての拡張ターゲットは新レイアウトにマッピングされ、引き続きサポートされる。ただしプレビューは 2026/6/12 まで 。マーチャント公開前に検証しておくことで、必要な調整を先行できる。GA 日・API/Webhook 仕様への言及は記事に 記載なし 。 8 業務に活かせる3つのユースケース USE CASE 1 自社の顧客アカウント拡張を「公開前」に総点検 課題 inline / full-page 拡張が、新しいシングルカラム＆狭い幅のレイアウトで崩れないか分からない。マーチャントに公開されてから不具合が出ると影響が大きい。 打ち手 2026/6/12 までのプレビュー期間に、全拡張ターゲットを新レイアウト上でテストし、折返し・はみ出し・幅依存のスタイルを洗い出す。 効果 本リリース前に修正を完了でき、移行時の表示崩れリスクをゼロに近づけられる。 技術メモ inline は従来より狭い幅で描画。full-page は narrow / wide を選べるので、コンテンツに応じて宣言を見直す。 USE CASE 2 注文系拡張の「発見性アップ」を使い倒す 課題 再注文・返品・配送追跡などの order action / order summary 拡張が、モバイルでタップの裏に埋もれて利用率が伸びない。 打ち手 order action がより目立ち、order summary がタップ不要で表示される新挙動を前提に、文言・CTA・表示情報を再設計する。 効果 顧客が機能を発見・利用しやすくなり、再注文やセルフサービス系拡張の利用率向上が見込める。 技術メモ モバイルでの「タップして表示」が無くなる前提でファーストビューの情報量を調整。可視性向上は記事に明記された挙動。 USE CASE 3 full-page 拡張のレイアウトをコンテンツ特性で最適化 課題 データ量の多い管理系フルページ拡張を、狭いネイティブ幅に押し込むと一覧性が落ちる。逆に案内系を広げると間延びする。 打ち手 表・ダッシュボード等のデータ量重視のものは wide レイアウト、シンプルな案内はネイティブ準拠の narrow を選択する。 効果 コンテンツに最適な幅で、ネイティブページと一貫したUXを保ちながら見やすさを確保できる。 技術メモ full-page 拡張は mobile-first の narrow か wide を選べる、という記事記載の挙動を前提に幅を決定する。 9 提案で使える1行サマリ 「顧客アカウントがデスクトップ／モバイル共通の シングルカラム に刷新。 inline 拡張は幅が狭くなり、full-page は narrow/wide を選択、注文系拡張はモバイルでも目立つ。 全ターゲットは互換維持だが、2026/6/12 までのプレビュー期間に表示崩れを検証しておくのが安全。 」 source ： shopify.dev / changelog / feature-preview-customer-account-improvements 公開日 ： May 20, 2026 ／ Tag ： Platform