Columns2026/07/28

私たちのAI活用術：Shopifyテーマ開発編

<div class="page-body" style="text-align: start;">
<p>AI支援ツールは、特にReactのようにオープンソースのサンプルが豊富で、大規模言語モデル（LLMs）の学習データにもしっかり組み込まれているエコシステムにおいて、開発者にとって強力なサポートシステムとなっています。</p>
<p>しかし、Shopifyテーマ開発はまったく別の話です。</p>
<p>Shopifyは独自のテンプレート言語 <a rel="noopener" title="Shopify Liquid" href="https://github.com/Shopify/liquid" target="_blank">Liquid</a> を使用しています。Liquidはオープンソースですが、公開リポジトリではあまり一般的ではありません。そのためAIツールは、特にスキーマ構造、アクセシビリティパターン、Shopify特有のベストプラクティスに関して、Liquidコードを正確に解釈・生成することに苦労します。</p>
<p>Flagshipでは、このギャップを埋めるために取り組んでいます。Shopifyの <a rel="noopener" title="Shopify Dev MCP" href="https://shopify.dev/docs/apps/build/devmcp#available-tools" target="_blank">Machine Context Protocol (MCP)</a> や、Horizonテーマで公開されている <a href="https://github.com/Shopify/horizon/tree/main/.cursor">Cursorルール</a> とプロンプトを基盤にしています。さらに、グローバルのShopifyエコシステムが実際にAIをどのように使っているかを共有してくれており、これが私たちの実験や社内ツール開発に大きなインスピレーションを与えています。</p>
<p>私たちのアプローチはシンプルな現実に基づいています。AIはスピードを高めてくれますが、人間の専門知識を置き換えるものではありません。特にアクセシビリティ、レガシーコード、本番に関わる重要な変更においてはなおさらです。明確な構造と一貫したレビューこそが成果を左右します。</p>
<p><strong>AIをジュニアデベロッパーとして扱う</strong>──これが私たちの重要な洞察です。AIは有能で速くて便利ですが、正しい構造・指示・レビュー体制がなければ力を発揮できません。</p>
<p>この考え方は、エージェントとの関わり方やプロジェクトの共有ツール構築に大きく影響しています。</p>
<h2><strong>Shopifyテーマ開発におけるAIツール</strong></h2>
<p>AIツールの進化は非常に速く、私たちもいくつかのツールを試しつつ、Shopifyエコシステムの開発者が推奨するものを参考にしています。試したツールには <a rel="noopener" href="https://cursor.com/" target="_blank">Cursor</a>、<a rel="noopener" href="https://www.anthropic.com/claude-code" target="_blank">Claude Code</a>、<a rel="noopener" href="https://github.com/features/copilot" target="_blank">GitHub Copilot</a>、<a rel="noopener" href="https://chatgpt.com/" target="_blank">ChatGPT</a>、<a rel="noopener" href="https://cloud.google.com/gemini/docs/codeassist/gemini-cli" target="_blank">Gemini CLI</a>、そしてプルリクエストレビュー専用の <a rel="noopener" href="https://www.coderabbit.ai/" target="_blank">CodeRabbit</a> があります。</p>
<p>Shopify自身も、開発者と管理者の両方のワークフローにAIを統合し、この分野を積極的に形作っています。Shopify Dev MCP、Cursorルール、Sidekickアシスタントはいずれも、Shopify特有のロジックや構造、規約をAIが標準的に解釈できるようにする取り組みです。</p>
<p>Flagshipの経験から言えるのは、この時点では「どのAIを選ぶか」よりも「そのAIにどれだけプロジェクト固有のコンテキストを与えるか」が重要だということです。ルールやコンテキスト、MCPを通じて共通の制約を与えることで、どのツールを使っても一貫性のある信頼できる出力を得られます。</p>
<p>どのツールにも癖はありますが、共通の原則は変わりません──セットアップが整っていればいるほど、結果は良くなるということです。</p>
<h2><strong>ルールとコンテキスト：AIに正しい指示を与える</strong></h2>
<p>まず、ルールとコンテキストが何かを理解しましょう。</p>
<p><strong>ルール</strong>はモデルが必ず従うべき制約、<strong>コンテキスト</strong>は結果を改善するための補足情報（ただしルールと紐づかない限り必須ではない）と考えることができます。現状、ツールごとにルールとコンテキストの扱いは異なり、プロジェクトディレクトリ内でのファイル配置や記法も独自の方式を採用しています。</p>
<p>以下はツールごとの違いを示す図です。</p>
<p><img style="float: none;" alt="Visual representation taken from Twitter" src="https://cdn.shopify.com/s/files/1/2794/0956/files/Screenshot_2025-08-26_at_11.49.55_480x480.png?v=1756387550"></p>
<p>社内では、<a href="https://github.com/Shopify/horizon/tree/main/.cursor">Horizonテーマ</a>でのShopifyの取り組みから着想を得ています。ここではCursor専用の構文を使い、Liquid、JavaScript、CSS、アクセシビリティ基準に関するルールを定義する構造化アプローチが共有されています。</p>
<p>これらのルールは /<em>.cursorrules</em> フォルダに格納され、サンプルコードとセットで管理されています。これにより、AIツールが一貫性のある出力を生成しやすくなります。</p>
<p>さらにShopifyは、<a rel="noopener" href="https://www.shopifyacademy.com/video-learn-with-scott-supercharge-shopify-development-with-ai/2175693" target="_blank">Shopify Academy</a>でこのアプローチを解説する動画も公開しています。Cursor AIを用いて「spending bar」セクションを生成する方法を紹介しています。</p>
<p>私たちもこのアプローチを発展させ、各プロジェクトに <code>context.md</code> を追加しました。このファイルではプロジェクト構造やShopify MCPツールの参照方法を説明しています。これはStoretaskerの<a rel="noopener" href="https://ionlyspeakliquid.beehiiv.com/p/i-only-speak-liquid-81-shopify-mcp-agentic-development-tips" target="_blank">ニュースレター記事</a>から着想を得たもので、期待値を明確化するのに役立ちました。</p>
<p>重要な学びのひとつは、特に複雑なプロジェクトでは<strong>コードを編集する前にAIに確認質問をさせる</strong>ようにすると効果的だということです。</p>
<h3>共有標準：AGENTS.md</h3>
<p>前述のとおり、ルールとコンテキストの扱いはツールごとに異なります。しかし最近（2025年8月21日）、主要プレイヤー（OpenAI、Amp、Cursor、Gemini CLI、Jules）が新しい共有標準を提案・採用しました。それが <a rel="noopener" href="https://agents.md/" target="_blank">AGENTS.md</a> です。これは「エージェントのためのREADME」で、コンテキストと制約をAIツールに渡す方法を統一することを目的としています。</p>
<p><img src="https://cdn.shopify.com/s/files/1/2794/0956/files/agents_standard_480x480.png?v=1756437851" alt="Screenshot from the agents.md website showing the tools adopting the new standard" style="float: none;"></p>
<p>ツールは次第に、モデルが「何をすべきか（ルール）」と「何を知っているべきか（コンテキスト）」を統一的に定義できる構造を受け入れ始めています。これにより、異なるエディタやアシスタントを利用する開発者間でのコラボレーションがしやすくなり、予期せぬ挙動も減らせます。</p>
<p>ルールとコンテキストの区別は依然として存在しますが、表現の仕方が違います：</p>
<table style="width: 73.9583%; height: 79.0418px;" height="29" width="426">
<tbody>
<tr>
<td>Rules</td>
<td>Context</td>
</tr>
<tr>
<td>必ず守る</td>
<td>参照してよい</td>
</tr>
<tr>
<td>規範的（must, do）</td>
<td>記述的（example, note）</td>
</tr>
<tr>
<td>ファイル固有またはグローバル</td>
<td>一般的な参照やプロンプトに基づく</td>
</tr>
</tbody>
</table>
<p>つまり、今ではプロジェクトを構造化してツールをまたいでもAIが同じ挙動をするようにでき、これらのファイルをチーム共有の資産として扱えるようになったのです。</p>
<p>実務的な情報として、このファイルはリポジトリのルートに作成する必要があり、通常はプロジェクト概要、ファイル構造、コードスタイルガイドラインといったセクションを含みます。</p>
<p>私たちの開発経験からの推奨は、ファイルを1つだけでなく複数設けることです。たとえば、ルートディレクトリにプロジェクト構造やビルドコマンド用のファイル（webpackなどのバンドルツールを使う場合）を置き、さらに <code>/shopify</code> フォルダ内にセクション構築やローカライゼーションのガイドラインを置くとよいでしょう。</p>
<h2>Shopify Dev MCP</h2>
<p>Shopifyテーマ開発にAIを活用する上で重要なもうひとつの要素がMCPの利用です。AIアシスタントは <a rel="noopener" href="https://shopify.dev/docs/apps/build/devmcp" target="_blank">Shopify Dev Model Context Protocol</a> (MCP) を通じてShopifyの開発リソースに接続できます。これにより、Shopifyのドキュメント検索、APIスキーマの探索、関数の構築、最新のAPI情報の取得が可能になります。</p>
<p>つまり、AIアシスタントにLiquid生成やAPIコールを依頼した際、推測ではなく実際のShopifyエコシステムの情報を参照できるのです。セクションを生成・検証する際には、<code>learn_shopify_api</code> や <code>validate_theme</code> といったMCPエンドポイントを指定するよう指示することも可能です。</p>
<p>Shopify MCPは、<a rel="noopener" href="https://shopify.dev/docs/api/shopify-cli/theme/theme-check" target="_blank">Shopify CLI theme check</a> と組み合わせて使うと最も効果を発揮します。</p>
<h2>実際のユースケース</h2>
<p>最後に、私たちがShopifyテーマ開発でAIをどのように活用しているか、具体的な事例をいくつか共有します。</p>
<h3><strong>1. プロンプトによるセクション生成</strong></h3>
<p>セクションの基本レイアウトは常に標準化されています。Liquid、スタイルシートやJavaScript、セクションスキーマが含まれます。私たちはエージェントを用いたセクション作成用の独自プロンプトを調整しており、以下を含んでいます：</p>
<ul>
<li>セクションを作成する際に従うべき構造化プロンプトと手順
<details>
<summary style="cursor: pointer;">▶ View Prompt example</summary>
<pre id="25b265d1-eec0-80a0-8c17-d1357531c787" class="code code-wrap" style="background-color: #333; color: #fff;"><code style="white-space: pre-wrap; word-break: break-all; font-size: 12px; line-height: 1em;" class="language-JavaScript"># Create and localize new section

This guide helps you create a new Shopify section with proper localization support for both schema and storefront text.
All localization and section rules are defined in the following references:

- `/rules/localization.mdc` → localization coding standards and best practices
- `/rules/locales.mdc` → locale file structure and translation development standards
- `/rules/sections.mdc` → section structure rules (file naming, presets, schema conventions)
- `/rules/example/section-example.liquid` → **canonical section template**

Always follow those files when adding or editing translations.
> The generated code **must mirror the structure** of `section-example.liquid`. Do not reorder parts.

## Usage

Use this prompt whenever you want to generate a new Shopify section.

Basic syntax:

```
Create localized section: [SECTION_NAME]
```

Optional parameters:

```
Blocks: [BLOCK_TYPES_AND_FIELDS]
Settings: [SETTINGS_LIST]
Purpose: [BRIEF_DESCRIPTION]
```

Full syntax example:

```
Create localized section: text-banner
Blocks: heading:text, subheading:text, content:richtext
Settings: container_width:select(sm|md|lg), padding_top:number, padding_bottom:number
Purpose: A simple hero banner without scripts
```</code></pre>
</details>
</li>
</ul>
プロジェクト全体で既に使用されている命名規則Shopify MCPへの参照参考とする既存セクションへのリンク
<p>保存済みのプロンプトやテンプレートを使うことで、リクエストを標準化し、機能ごとに一貫性のある出力を得ることができます。また、これらのプロンプトや <code>context.md</code> をチームで共有・バージョン管理することも有効です。</p>
<h3><strong>2. スキーマのローカライズ：バイリンガルテーマを容易に</strong></h3>
<p>AIは<strong>スキーマ設定やストアフロントテキストのローカライズ</strong>に特に役立ちます。スキーマのローカライズとは、Shopifyテーマエディタに表示されるラベル、説明、デフォルトコンテンツを多言語化することを指します。日本向けのプロジェクトでは、セクションやブロックのラベル、説明文、デフォルトコンテンツを自然な日本語に翻訳し、英語版と同期させる用途があります。</p>
<p>もちろん、ローカライズは追加の確認が必要なため、最終的にはネイティブスピーカーによるレビューを行います。</p>
<p>私たちはAIにこう依頼します：「次のセクションスキーマをビジネスに適したEコマーストーンで日本語に翻訳してください。命名は英語版と一貫させてください。translations.mdの規約を使用してください。」</p>
<h3><strong>3. リンティングを超えて：命名と一貫性の強制</strong></h3>
<p>開発ではリンターが役立ちますが、クラス命名規則やメタフィールド構造、スキーマパターンなど、プロジェクト全体のロジックを強制することはできません。ここでAIがそのギャップを埋めます。</p>
<p>テーマ開発におけるAIの使い道として：</p>
<ul>
<li>スキーマ間での不一致な命名を検出</li>
<li>セクション設定を内部パターンに合わせてリファクタリング</li>
<li>
<code>aria-label</code> の追加など、よりアクセシブルなデフォルトを提案</li>
</ul>
<p>この領域では、AIはコード生成ツールというより「スタイルガイドの補助」として機能します。</p>
<h3><strong>4. プルリクエストレビュー</strong></h3>
<p>Flagshipのフロントエンド・バックエンド開発チームで広く使われているのが <a rel="noopener" href="https://www.coderabbit.ai/" target="_blank">CodeRabbit</a> です。Shopify Liquidへの対応が非常に優れており、脆弱性の可能性を検知したり、プルリクエストの変更点を要約してくれます。さらに、コード変更をプロジェクトの文脈に基づいて図解する機能もあります。</p>
<p>プルリクエストを作成すると、CodeRabbitが自動で解析し、提案やコメントを生成します。レビュー担当者が「この提案は採用しない」と理由を添えて返答すると、CodeRabbitはそれを学習し、将来同じ指摘を繰り返さなくなります。</p>
<h3><strong>5. Sidekickで管理画面の商品検索</strong></h3>
<p><a rel="noopener" href="https://help.shopify.com/en/manual/shopify-admin/productivity-tools/sidekick/set-up" target="_blank">Shopify Sidekick</a> は、特定のメタフィールド値を持つ商品を管理画面で探す際に頻繁に使っています。大規模なカタログや、管理画面でフィルタリングできない未構造化のメタフィールドがある場合に特に便利です。</p>
<p>例えば、新しいテーマ機能をテストしたいときに、それが特定のメタフィールドの組み合わせを持つ商品のみに適用される場合、Sidekickが非常に役立ちます。</p>
<h2><strong>AIをジュニアデベロッパーとして</strong></h2>
<p>Shopifyテーマ開発者として、AIは構造・制約・明確な目的意識を持って使うことで強力な支援者となります。</p>
<p><a rel="noopener" href="https://www.youtube.com/watch?v=3hvxBte_I8w" target="_blank">Scaling Shopify Dev with AI</a> でAnn Thomas氏が語ったように、AIはジュニア開発者として扱うべきです：</p>
<ul>
<li>明確なプロンプトを与える</li>
<li>期待値を定義する</li>
<li>すべての出力をレビューする</li>
<li>与えるコンテキストを継続的に改善する</li>
</ul>
<p>そしてジュニア開発者と同じように、きちんとオンボーディングに投資すれば成果は大きくなります。</p>
<h2><strong>まとめ</strong></h2>
<ul>
<li>ツール選びよりも構造が重要：ルールとコンテキストを定義し、一貫した出力を得る</li>
<li>AIはジュニア開発者：有能で速いが、指示とレビューが必要</li>
<li>
<a rel="noopener" href="https://agents.md/" target="_blank">AGENTS.md</a> と <code>context.md</code> を使ってチームで共有できる規約を作成する</li>
<li>チーム内で事例やベストプラクティスを共有し、品質と学習をスケールさせる</li>
</ul>
<p>AIツールは進化を続け、Shopifyも開発者リソースを磨き続けています。こうしたワークフローが今後どのように成熟していくのか、私たち自身とても楽しみにしています。ここでご紹介した基本は今後も変わらず役立つはずですが、私たちも常に新しいアプローチを模索し続けています。</p>
<p>皆さんのチームではどのようにAIを活用していますか？ぜひ実践例や工夫を共有いただければ嬉しいです。</p>
</div>