モバイル版オンラインストアエディタ 「画面を見ながら指で編集」＋ Sidekick 搭載に刷新

図解 ： モバイル版オンラインストアエディタ（Sidekick 搭載） オンラインストア / 改善・管理画面 モバイル版オンラインストアエディタ 「画面を見ながら指で編集」＋ Sidekick 搭載に刷新 スマホからのストア編集が作り直された。編集中もストアのプレビュー（キャンバス）が消えず、設定は画面を覆わないコンパクトなシートで開く。タップ操作・指向けの UI・AI アシスタント Sidekick がエディタ内に統合された。 このページの構成 そもそも何が変わるのか（30秒で理解） 仕組み図解 ： 編集中の画面の動き 新機能 6 つ 従来 vs 新エディタ の比較 Sidekick の 2 つの呼び出し方 レイヤーマップとは 技術者が押さえるべき5つのポイント 業務に活かせる3つのユースケース 提案で使える1行サマリ 1 そもそも何が変わるのか モバイル版のオンラインストアエディタが ゼロから作り直された 。 キモは「編集中もストアの見た目（キャンバス）を出しっぱなしにする」こと。設定はストアを覆わない小さなシートで開き、 変更がリアルタイムで見える 。さらに指操作向けの UI と AI アシスタント Sidekick がエディタに統合された。 従来 ： 設定が画面を覆う スマホで設定を開くとストアのプレビューが隠れ、変更結果を見るには行き来が必要だった。 新 ： キャンバスは出したまま 設定はコンパクトなシートで下から開き、上にはストアが見え続ける。編集しながら変化を確認できる。 2 仕組み図解 ： 編集中の画面の動き ポイントは「設定が画面を覆わない」こと。キャンバス上のセクションやブロックを 直接タップ すると、その要素の設定が下からシートで開き、変更を加えながら結果が見える。Sidekick はエディタ内の どこからでも 質問・編集依頼ができる。 3 新機能 6 つ 1. キャンバスが消えない 編集中もストアのプレビューが見え続ける。設定はストアを覆わないコンパクトなシートで開く。 2. 要素を直接タップ キャンバス上のセクションやブロックをタップするだけで設定が開き、変更がその場で見える。 3. 指向けに UI を再設計 タップ領域を大きく、状態表示を明確に。iOS と Android で一貫した操作感に揃えた。 4. Sidekick をエディタに統合 エディタ内のどこからでも、質問したりストアの編集を依頼したりできる AI アシスタント。 5. レイヤーマップ ストアの全構造を一覧表示。セクション／ブロック／テーマ設定／アプリ埋め込みを、キャンバスをスクロールせず探せる。 6. 文脈つき Sidekick 入力 特定のセクション／ブロックを選ぶと、その対象を「すでに把握した」状態の Sidekick 入力欄が出る。 4 従来 vs 新エディタ の比較 項目 従来のモバイルエディタ 新・モバイルエディタ 編集中のプレビュー 隠れる 設定が画面を覆う 見え続ける 設定はシートで開く 要素の選択 記載なし（タップ直編集の言及なし） 直接タップ キャンバス上で選択 操作 UI 従来のコントロール 指向け 大きいターゲット・明確な状態 iOS / Android 記載なし 一貫 両 OS で統一 AI アシスタント 記載なし Sidekick エディタ内に統合 構造の把握 キャンバスをスクロールして探す レイヤーマップ 全構造を一覧 ※ 「従来」側で「記載なし」とした項目は、本記事に旧仕様の明記が無いもの。 5 Sidekick の 2 つの呼び出し方 A. どこからでも（全体） エディタ内のどの場所からでも、Sidekick に質問したり「このストアをこう編集して」と依頼できる。 B. 文脈つき（対象を選んで） 特定のセクション／ブロックを選ぶと、その対象を認識済みの Sidekick 入力欄が出る。何を見ているか説明し直す必要がない。 「どこからでも汎用的に呼ぶ」と「対象を選んで文脈つきで呼ぶ」の使い分けがポイント。後者は対象をエディタが先に把握しているため、依頼の指示が短くて済む。 6 レイヤーマップとは 7 技術者が押さえるべき5つのポイント 1. 対象はモバイル版エディタのみ 本記事はモバイル（スマホ）版オンラインストアエディタの刷新。デスクトップ版への適用や差分は記載なし。検証はモバイル端末で行う。 2. iOS / Android で挙動を統一 コントロールと入力が両 OS で一貫するよう再設計。クロス OS での操作差を前提にした手順書は、統一仕様に合わせて見直せる。 3. Sidekick は「編集の実行」もする 単なる Q&A でなく、エディタ内から「ストアの編集を依頼」できる。AI による変更が入る前提で、変更後の確認・差し戻し運用を整えておくと安全。 4. 文脈つき入力 = 対象を渡せる 選択中のセクション／ブロックを Sidekick が把握済みで入力欄が出る。指示が曖昧でも対象が固定されるため、ピンポイントな編集依頼に向く。 5. レイヤーマップで「アプリ埋め込み」も可視化 セクション／ブロック／テーマ設定に加え、 アプリ埋め込み（app embed）も一覧に出る 。どのアプリがどこに刺さっているかを構造から追えるため、テーマ移行・アプリ棚卸し・不要埋め込みの発見に使える。API / Webhook 仕様や Liquid との対応については記載なし。 8 業務に活かせる3つのユースケース USE CASE 1 店長・運用担当が「移動中・現場でストア更新」を完結 課題 セール開始・在庫切れ・バナー差し替えなど、急ぎの更新で PC を開けない場面がある。従来モバイルでは設定が画面を覆い、結果を確認しにくかった。 打ち手 新エディタでキャンバスを見ながらタップ編集。変更がその場で見えるので、外出先でも安心して反映できる。 効果 更新の即応性向上。PC に戻るまで待たずに、現場判断でストアを直せる。 技術メモ iOS / Android で操作が統一されているため、端末を問わず同じ手順書で運用できる。 USE CASE 2 非エンジニアの担当者が Sidekick に編集を「言葉で依頼」 課題 テーマ設定やブロックの場所が分からず、ちょっとした文言・色変更でも制作側に依頼が飛び、リードタイムがかかる。 打ち手 変更したいセクション／ブロックを選んで、文脈つき Sidekick 入力に「こう直して」と依頼。対象は AI が把握済みなので指示が短くて済む。 効果 軽微な編集の内製化で依頼往復を削減。制作側は設計・実装に集中できる。 技術メモ AI が変更を加える前提のため、公開前プレビューでの確認と差し戻しルールを社内で決めておくと安全。 USE CASE 3 制作・保守で「ストア構造とアプリ埋め込みの棚卸し」 課題 長く運用したストアは、どのセクション・ブロック・アプリ埋め込みがどこにあるか把握しづらい。キャンバスを延々スクロールして探していた。 打ち手 レイヤーマップでストアの全構造を一覧化。テーマ設定やアプリ埋め込みまで含めて確認し、不要要素や重複を発見してから手を入れる。 効果 引き継ぎ・監査・テーマ刷新の初動が速くなる。スクロール探索の手間を削減。 技術メモ マップから対象へ直接ジャンプできるため、検証 → 修正の往復が短い。API での構造取得可否は記載なし。 9 提案で使える1行サマリ 「モバイル版ストアエディタが刷新。 編集中もストアが見え続け、要素を直接タップして指で編集。AI の Sidekick とレイヤーマップで『探さず・言葉で・その場で』直せる。 現場・外出先での即時更新と、非エンジニアの軽微編集の内製化に効く。」 source ： changelog.shopify.com / online-store-editor-with-sidekick-on-mobile generated 2026-06-22