Shopifyのテーマエディタ（Theme Editor）に搭載されたAIアシスタント「Sidekick」は、マーチャントがストアの視覚デザインやレイアウト構成を調整する手法を大きく刷新しました。自然言語によるプロンプトを入力するだけで、設定パネルの階層を何重にも辿ったり、手動でブロックを並び替えたり、ブランドカラーを1箇所ずつ変更したりする手間を省くことができます。しかし、多くのストアオーナーの間で「Sidekickはフロントエンド開発者を完全に代替できるのか」「どこまでLiquidコードを扱えるのか」という認識の曖昧さが生じています。
Sidekickが得意とする実用機能と、従来のLiquidカスタム開発が必要となる技術的境界線を正しく把握することは、テーマの整合性を保ちながら効率的なストア運営を実現する上で不可欠です。
テーマエディタ内でSidekickを活用する手順と機能
テーマエディタにおけるSidekickは、マーチャントとテーマ設定レイヤーをつなぐ対話型ナビゲーターとして機能します。サイドバーの設定項目を手作業で探す代わりに、日常の言葉で指示を出すことで迅速にデザインや配置を変更できます。
1. 起動とコンテキスト認識
- Sidekickの起動: テーマエディタ上部のツールバーにあるSidekickアイコンをクリックするか、ショートカットキー
Ctrl + .（macOSはCmd + .）を押して起動します。 - コンテキスト認識: Sidekickは、現在開いているページテンプレート（ホームページ、商品ページ、コレクションページなど）や、選択中のセクション（Section）およびブロック（Block）を自動的に認識します。全体設定を指示しない限り、プロンプトは現在フォーカスされている要素に対して適用されます。
2. スタイルおよび視覚的微調整
Sidekickは、テーマのスキーマ（Schema）で定義された既存の設定項目を自然言語から正確に特定し、反映します。
- カラーパレットとカラースキーム: 「このセクションの背景カラースキームをダークに変更して」「メインボタンにコントラストの高いアクセントカラーを適用して」といったプロンプトにより、カラー設定値を素早く変更できます。
- タイポグラフィと余白調整: 「セクション見出しをセリフ体にして上下のパディングを広げて」と入力すると、テーマ内で用意されているフォント設定や余白スライダーが連動して切り替わります。
- 配置とレイアウト表示: 「ヒーローバナーの見出しとサブテキストを中央揃えにして」「デスクトップ表示で商品カードを4列グリッドにして」などの指示により、既存のレイアウトオプションを切り替えます。
3. レイアウト構造とセクション管理
スタイルだけでなく、JSONテンプレートに基づくページの構造管理も対話形式で行えます。
- セクションの並び替え: 「お客様の声セクションを特集コレクションの上に移動して」と指示することで、ページの縦方向の並び順を即座に変更できます。
- 要素の表示・非表示: 「商品ページテンプレートで告知バーを非表示にして」「サブボタンを削除して」と入力すれば、対象の設定項目を探すことなく表示状態を切り替えられます。
- アプリ埋め込みの管理: インストール済みの対応アプリアプリ埋め込み（App Embeds）の有効化・無効化や基本設定の変更もSidekickに依頼できます。
4. コンテンツ生成とテーマブロックの自動作成
エディタ内では、テキスト生成とコードブロック生成の2種類の生成AI機能が活用できます。
- 入力フィールドでのテキスト生成: 見出しや告知バーなどの対応テキストボックスにある生成アイコン（Magicアイコン）をクリックすると、ブランドのトーンに合わせたコピーを直接生成できます。
- テーマブロックの自動生成: 対応セクションで「ブロックを追加（Add block）> 生成（Generate）」を選択し、「顧客のアバター、引用文、顧客名、5つ星評価を含むレビューブロックを作成して」などのプロンプトを入力します。Sidekickはテーマコードの
blocks/フォルダ内に独立したLiquidブロックファイルを自動生成し、エディタ上に編集用設定項目を展開します。
安全なワークフロー：プレビュー、検証、ロールバック
Sidekickが実行した変更が、マーチャントの承認なしに公開中のストアへ即座に反映されることはありません。
- エディタ内プレビュー: 変更内容や生成されたブロックは、まずテーマエディタのプレビュー画面にのみ反映されます。
- マルチデバイス確認と反復修正: デスクトップ表示とモバイル表示を切り替えてレスポンシブ崩れがないか確認し、意図と異なる場合は追加のプロンプトで微調整します。
- 取り消し履歴に関する注意点: Sidekickによる変更を適用すると、エディタの標準的な「元に戻す（Undo）」履歴スタックはクリアされます。以前の状態に戻したい場合は、Sidekickに直接「先ほどの変更を戻して」と指示するか、エディタ上部の「テーマ履歴（Theme history）」から以前のバージョンを復元します。
- 手動保存による確定: マーチャントが「保存（Save）」をクリックして初めて設定が確定します。大幅なデザイン改修を行う前には、テーマの複製（バックアップ）を作成しておくことが推奨されます。
SidekickとカスタムLiquidコードの技術的境界線
Sidekickはテーマの設定変更と独立ブロック生成を担う高度な支援ツールであり、任意のコードを自由に改変できるコンパイラやエンジニアではありません。
Sidekickが操作できる領域
- テーマ設定パラメータ:
settings_schema.jsonや各セクションの{% schema %}に宣言されている既存の設定項目。 - テンプレート構造: ページのJSONテンプレートに記述されているセクション一覧およびブロックの並び順。
- 独立したブロックファイル: テーマの
blocks/ディレクトリ内に生成される完結型の単一Liquidファイル。
Sidekickが実行できない領域（カスタムLiquid開発が必要な領域）
| 機能・要件 | テーマエディタのSidekick | カスタムLiquid・フロントエンド開発 |
|---|---|---|
| 既存セクションのHTML構造変更 | 既存のスキーマ設定を切り替えるのみ。セクションのDOMツリー構造そのものは変更不可 | HTML構造の自由な改変、ラッパー要素の追加、DOM設計の再構築が可能 |
| 既存コアファイルの書き換え | sections/、snippets/、layout/ 内の既存 .liquid ファイルを直接編集・リファクタリング不可 | theme.liquid を含むすべてのテーマファイルに対する完全な読み書き・改変権限 |
| サーバーサイドのビジネスロジック | Liquidの制御構文（{% if %}、{% case %}、複雑なループ処理、カスタムフィルタ）の新規記述不可 | 顧客タグ別の会員価格、複数拠点の在庫閾値判定、カスタム割引計算などの高度なロジックを実装可能 |
| メタフィールド・メタオブジェクト連携 | テーマ側で動的ソースの紐付けが事前許可されている入力枠へのバインドのみ | Liquidタグを用いてメタオブジェクトやメタフィールドの配列を展開し、独自の動的UIや表を作成可能 |
| 高度なクライアントサイドJavaScript | 非同期通信によるカートドロワー（Ajax Cart）や動的フィルタリングのJavaScriptロジック構築不可 | Shopify Cart APIと連携したカート機能、状態管理マシン、高パフォーマンスなJSコンポーネントを構築可能 |
| 外部API・カスタムWebhook連携 | インストール済みApp Embedのオン/オフ切り替えに限定 | 外部データAPIの呼び出し、カスタムトラッキングタグの挿入、Headless構成との連携が可能 |
| 公式サポートと品質保証 | AIが生成したブロックコードの不具合について、Shopify公式およびサードパーティ開発元のサポート対象外 | 専門エンジニアによるコード品質管理、クロスブラウザ検証、継続的なデバッグと保守対応 |
本質的な構造差：構成の操作（Configuration） vs 実装の開発（Implementation）
- Sidekickは「構成（Configuration）」を操作する: テーマ開発者がセクションスキーマ内ですでに用意している選択肢（列数切り替え、背景色、文字配置など）が存在する場合、Sidekickはそれらを自然言語で瞬時に操作します。
- Liquid開発者は「実装（Implementation）」を構築する: テーマ内に存在しない新しい振る舞い（例：ログイン状態に応じて動的に納期を計算し、バンドル商品をセット販売するUI）を既存セクションに組み込む場合、Sidekickでは対応できません。既存のLiquidファイルを手動でコーディングし、新しい構造を開発する必要があります。
判断基準：Sidekickを使うべき場面と開発者に依頼すべき場面
Sidekickの利用が適している場面
- 既存テーマの範囲内でカラー、フォント、余白などのデザインを素早く刷新したいとき。
- セールや季節のプロモーションに合わせて、トップページや特集ページのセクション順を並び替えたいとき。
- バナー見出しや告知バー、商品説明のコピーライティングを素早く生成したいとき。
- レビューカード、特徴紹介アイコン、信頼バッジなどの自己完結した標準的なUIブロックを追加したいとき。
- コード破損のリスクを冒さずに、複数のレイアウトパターンを試してみたいとき。
Liquid開発者への依頼または手動コーディングが必要な場面
- 複雑なバリエーション選択や名入れプレビュー、カスタムバンドルビルダーを商品ページに導入したいとき。
- テーマ共通のベーステンプレート（
theme.liquid）やカート機能、チェックアウト拡張を抜本的に改修したいとき。 - GoogleのCore Web Vitals改善のため、不要なDOMの削減、クリティカルCSSの最適化、スクリプトの遅延読み込みを行いたいとき。
- 複雑なメタオブジェクト（Metaobjects）や外部基幹システム（ERP/CRM）と連携した商品カタログを構築したいとき。
- 過去のアプリ削除に伴う不要コードの競合やLiquid構文エラーを解消したいとき。
日常の軽微な調整や視覚テストにはSidekickを活かして作業スピードを高め、構造的なカスタマイズや重要な業務ロジックの実装にはLiquid開発者の専門知識を頼ることが、ストア運営の安全性と柔軟性を両立する最善のアプローチです。