オンラインストア / 改善・管理画面

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

スマホからのストア編集が作り直された。編集中もストアのプレビュー(キャンバス)が消えず、設定は画面を覆わないコンパクトなシートで開く。タップ操作・指向けの UI・AI アシスタント Sidekick がエディタ内に統合された。

このページの構成
  1. そもそも何が変わるのか(30秒で理解)
  2. 仕組み図解 : 編集中の画面の動き
  3. 新機能 6 つ
  4. 従来 vs 新エディタ の比較
  5. Sidekick の 2 つの呼び出し方
  6. レイヤーマップとは
  7. 技術者が押さえるべき5つのポイント
  8. 業務に活かせる3つのユースケース
  9. 提案で使える1行サマリ

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

モバイル版のオンラインストアエディタが ゼロから作り直された
キモは「編集中もストアの見た目(キャンバス)を出しっぱなしにする」こと。設定はストアを覆わない小さなシートで開き、変更がリアルタイムで見える。さらに指操作向けの UI と AI アシスタント Sidekick がエディタに統合された。

従来 : 設定が画面を覆う

スマホで設定を開くとストアのプレビューが隠れ、変更結果を見るには行き来が必要だった。

新 : キャンバスは出したまま

設定はコンパクトなシートで下から開き、上にはストアが見え続ける。編集しながら変化を確認できる。

2仕組み図解 : 編集中の画面の動き

①ストアを表示 ②要素をタップ ③下からシート 変更反映 ④即プレビュー Sidekick どこからでも 質問・編集依頼
ポイントは「設定が画面を覆わない」こと。キャンバス上のセクションやブロックを直接タップすると、その要素の設定が下からシートで開き、変更を加えながら結果が見える。Sidekick はエディタ内のどこからでも質問・編集依頼ができる。

3新機能 6 つ

1. キャンバスが消えない

編集中もストアのプレビューが見え続ける。設定はストアを覆わないコンパクトなシートで開く。

2. 要素を直接タップ

キャンバス上のセクションやブロックをタップするだけで設定が開き、変更がその場で見える。

3. 指向けに UI を再設計

タップ領域を大きく、状態表示を明確に。iOS と Android で一貫した操作感に揃えた。

4. Sidekick をエディタに統合

エディタ内のどこからでも、質問したりストアの編集を依頼したりできる AI アシスタント。

5. レイヤーマップ

ストアの全構造を一覧表示。セクション/ブロック/テーマ設定/アプリ埋め込みを、キャンバスをスクロールせず探せる。

AI

6. 文脈つき Sidekick 入力

特定のセクション/ブロックを選ぶと、その対象を「すでに把握した」状態の Sidekick 入力欄が出る。

4従来 vs 新エディタ の比較

項目従来のモバイルエディタ新・モバイルエディタ
編集中のプレビュー 隠れる 設定が画面を覆う 見え続ける 設定はシートで開く
要素の選択 記載なし(タップ直編集の言及なし) 直接タップ キャンバス上で選択
操作 UI 従来のコントロール 指向け 大きいターゲット・明確な状態
iOS / Android 記載なし 一貫 両 OS で統一
AI アシスタント 記載なし Sidekick エディタ内に統合
構造の把握 キャンバスをスクロールして探す レイヤーマップ 全構造を一覧

※ 「従来」側で「記載なし」とした項目は、本記事に旧仕様の明記が無いもの。

5Sidekick の 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 とレイヤーマップで『探さず・言葉で・その場で』直せる。
現場・外出先での即時更新と、非エンジニアの軽微編集の内製化に効く。」