Canvas ストアの全ページを「1枚の無限キャンバス」で設計する

図解 ： Canvas（ストア全体を一枚で設計できる新しいデザイン面） Online Store / 新機能 Canvas ストアの全ページを「1枚の無限キャンバス」で設計する 全ページが一つのインタラクティブなワークスペースに並ぶ新しいデザイン面。パン＆ズームでストア全体を見渡し、要素を直接クリック編集、または Sidekick にチャットで指示して、変更がリアルタイムに反映される。 このページの構成 そもそも何が変わるのか（30秒で理解） Canvas でできる4つのこと 仕組み図解 ： 編集〜プレビューの流れ 始め方（3ステップ） ローンチ時点の非対応・制約 従来テーマエディタ vs Canvas の比較 技術者が押さえるべき5つのポイント 業務に活かせる3つのユースケース 提案で使える1行サマリ 1 そもそも何が変わるのか これまでのテーマ編集は「1ページずつ開いて直す」作業だった。 Canvas は ストアの全ページを1つの無限ワークスペースに並べ 、ストア全体の雰囲気を見ながら、どの部分でも文脈の中で編集できる新しいデザイン面。 従来 ： ページ単位の編集 現行のテーマエディタ。ページを切り替えながら個別に編集する。Canvas 導入後も元テーマはこちらに残る。 Canvas ： 全ページを一望 全ページが一枚に並ぶ。パンで移動、ズームで細部へ。要素を直接クリック編集、または Sidekick にチャットで指示。 2 Canvas でできる4つのこと パン＆ズーム 全ページを横断移動し、任意の細部を拡大 直接クリック編集 要素をクリックしてその場で編集 Sidekick に指示 セクション単位〜ストア全体の刷新までリアルタイム反映 実ストアのプレビュー インタラクション・アニメーション・商品／コレクション・画面サイズ切替 3 仕組み図解 ： 編集〜プレビューの流れ プレビューは静的なモックではなく 「本物の、動くストア」 と記載されている。Sidekick の変更範囲は「単一セクション」から「ストア全体のリデザイン」まで。Sidekick の具体的な指示例・制限は記事に記載なし。 4 始め方（3ステップ） 1 オンラインストア ＞ テーマ 管理画面の Online Store > Themes を開く。 2 Canvas でテーマを作る 新規テーマを Canvas で作成、または Shopify テーマ／カスタムテーマを Canvas に複製。 3 元テーマはそのまま オリジナルのテーマは現行テーマエディタに残る。 既存ストアへは 今後数日かけて順次ロールアウト 。「複製」方式なので、現行テーマを壊さずに Canvas を試せる。対象プラン・料金は記事に記載なし。 5 ローンチ時点の非対応・制約 非対応 Theme Store のサードパーティテーマ Shopify Theme Store のサードパーティ製テーマは Canvas で扱えない。 非対応 Markets Markets はローンチ時点でサポート外。 非対応 Rollouts rollouts はローンチ時点でサポート外。 非対応 翻訳（translations） 翻訳はローンチ時点でサポート外。 非対応 App blocks / App embeds アプリのブロックや埋め込みはローンチ時点でサポート外。 注意 テーマアップデートが届かない Canvas で編集したテーマはテーマのアップデートを受け取らない。 非対応項目の今後の対応予定・時期は記事に記載なし（「At launch」＝ローンチ時点の制約とだけ書かれている）。 6 従来テーマエディタ vs Canvas の比較 項目 現行テーマエディタ Canvas 作業面 ページ単位 全ページ一望 無限ワークスペース 編集手段 記事に記載なし 2通り 直接クリック ＋ Sidekick チャット プレビュー 記事に記載なし 動く実ストア（インタラクション・アニメーション・商品／コレクション・画面サイズ） サードパーティテーマ — 非対応 （ローンチ時点） Markets / 翻訳 / Rollouts / アプリブロック — 非対応 （ローンチ時点） テーマアップデート — 受け取らない 7 技術者が押さえるべき5つのポイント 1. 「複製して移行」が前提 Canvas 用のテーマは新規作成か複製で作る。元テーマは現行エディタに残るので、本番テーマと並行して検証できる。 2. テーマアップデートから切り離される Canvas で編集したテーマは更新を受け取らない。テーマ提供元の修正・新機能を取り込む運用は別途考える必要がある。 3. App blocks / App embeds 非対応 アプリ依存（レビュー・CRM・計測タグ等をアプリ埋め込みで入れている）ストアは、Canvas テーマに切り替えると機能が欠ける前提で評価する。 4. 多言語・多市場ストアは現時点で不向き Markets・翻訳・rollouts が非対応。越境／多言語構成のストアは、ローンチ時点では現行エディタ継続が無難。 5. 開発者向け仕様の言及は無い Liquid／テーマファイル構造への影響、Shopify CLI や GitHub 連携との関係、Canvas テーマを現行エディタへ戻せるかは記事に記載なし。 コード管理しているテーマを触る前に、複製テーマで差分の出方を確認すること。 8 業務に活かせる3つのユースケース USE CASE 1 リブランディング時の「ストア全体リデザイン」を短期で回す 課題 ブランド刷新でトーンを変えたいが、ページごとに直すと全体の統一感を確認しづらく、修正の往復が増える。 打ち手 現行テーマを Canvas に複製 → 全ページを並べて俯瞰しながら、Sidekick にストア全体のリデザインを指示 → 細部は直接クリックで調整。 効果 ストア全体の見え方を一枚で確認しながら進められ、ページ間の不整合に早く気づける。元テーマは残るので比較・切り戻しもしやすい。 技術メモ Canvas 編集後はテーマアップデートが届かない。アプリ埋め込み・翻訳を使っていないかを事前に棚卸し。 USE CASE 2 クライアントとの「デザインレビュー会」を実ストアで行う 課題 静的なデザインカンプでは、アニメーションやスマホ表示、実商品が入った状態の見え方が伝わらず、公開後に手戻りが出る。 打ち手 Canvas で全ページを並べて見せつつ、プレビューで商品・コレクション・画面サイズを切り替えながら、その場で直接クリック編集して合意を取る。 効果 「動く実ストア」で確認できるため認識ズレが減り、レビュー 1 回あたりの決定事項が増える。 技術メモ レビュー用は複製テーマで行い、本番テーマは現行エディタ側に温存。共同編集・権限の扱いは記事に記載なし。 USE CASE 3 Canvas 移行可否の「適合診断」をサービス化する 課題 マーチャントから「Canvas に乗り換えるべきか」と相談されても、非対応項目が多く即答できない。 打ち手 チェックリスト化して診断：① Theme Store のサードパーティテーマか ② Markets／翻訳／rollouts を使用中か ③ App blocks／embeds 依存があるか ④ テーマアップデートを今後も受けたいか。 効果 単一市場・アプリ依存が少ないストアから優先して Canvas を提案でき、移行後の機能欠落トラブルを防げる。 技術メモ 非対応はいずれも「ローンチ時点」の制約。対応状況が変わる可能性があるため、診断時に Help Center の最新情報を確認する前提で運用。 9 提案で使える1行サマリ 「ストアの全ページを一枚に並べ、クリック or Sidekick で直して動く実ストアで確かめられる新デザイン面。 複製して試せるので本番は無傷。ただし Markets・翻訳・アプリブロック・サードパーティテーマは未対応、テーマ更新も届かない。 単一市場・アプリ依存の少ないストアから試すのが現実解。」 source ： changelog.shopify.com / design-a-fully-bespoke-store-with-canvas 公開日 2026-10-01