Shopifyカスタムセクション仕様書をAIで作る|Liquid実装ブリーフ自動化

Shopifyのカスタムセクション仕様書をAIで作るshopify-liquid-section-briefを解説。schema設計からpreset・UATまで、非エンジニアがLiquid実装ブリーフを数分で用意する方法を紹介します。

投稿日: カテゴリー EC×AI活用

Shopifyでオリジナルのカスタムセクションを追加したいのに、外注エンジニアやClaude Codeに渡す仕様書を書けずに止まっている。この悩みは、店舗を自分たちで運営しているShopify事業者ほどよく抱えます。「3カラムの特徴セクションを、管理画面から見出しと画像を差し替えられる形で作りたい」という要望を、エンジニアが実装できるレベルの仕様に翻訳する工程が、非エンジニアには重いためです。shopify-liquid-section-briefスキルを使えば、曖昧な要望を渡すだけで、schema設計から受け入れ基準までそろった実装ブリーフが数分で出来上がります。

このスキルでできること

shopify-liquid-section-briefは、ALSEL Agent Skillsで配布しているスキルの一つで、Claude CodeなどのAI実行環境で動きます。入力は「どんなセクションを、どのテンプレートに、管理画面のどの操作で編集したいか」という自然言語の要望です。出力は、Shopifyテーマのカスタムセクション(Online Store 2.0のsections/.liquidやblocks/.liquid)を実装するための仕様書一式になります。

具体的には、セクションの目的と配置可能テンプレート、管理画面に出す設定項目(schemaのsettings)の型と初期値、繰り返し配置するblockの構成と最大数、「セクションを追加」メニュー用のpreset(JSON完全例)、PC・タブレット・モバイル3画面幅のレスポンシブ仕様、アクセシビリティとパフォーマンスの要件、そしてUAT(受け入れ条件)のチェックリストまでが一枚のブリーフにまとまります。この設計思想の起点は「マーチャントが管理画面のどの操作でこのセクションを編集・差し替えできるか」に置かれています。コードから考えるのではなく、店舗管理者が触る画面UIから逆算するため、実装後に「マーチャントが触れないセクションができてしまう」という失敗を避けられます。

実際の使い方

起動は「Shopifyの特徴セクションの仕様書を作って」「home用の3カラムセクションのschema設計して」のように、作りたいセクションを伝えるところから始まります。目的(CVR向上かブランド訴求かナビゲーションか)、配置するテンプレート(home / product / collection / page / blog / article / cart)、管理画面で触りたい項目(テキスト・画像・色・リンク先)、既存テーマ(Dawnか別テーマか)を渡すと精度が上がりますが、不足があってもスキルが妥当な仮定を置いて先へ進めます。

出力されるブリーフでは、settings項目ごとにラベル・型・id・default・必須フラグが表形式で整理され、blockのmax_blocksも明示されます。schemaで使えるsettings型は、text / textarea / richtext / image_picker / video / url / range / select / color_scheme / collection / product / link_list など多岐にわたりますが、要望に合わせて適切な型が割り当てられます。presetはそのままコピーして使えるJSON完全例で示されるため、実装者は「セクションを追加」時の初期表示を再現できます。商品やコレクションのmetafieldを表示する構成なら、対象metafield定義の有無を確認する手順も仕様に組み込まれます。より踏み込んだデータ構造の設計は、Shopify metafieldの構造設計スキルと組み合わせると設計の抜けが減ります。

導入による業務インパクト

従来、非エンジニアがカスタムセクションを外注する場合、要望を口頭やチャットで伝え、エンジニアが仕様を確認し、実装後に「管理画面から色を変えられない」「モバイルで崩れる」といった手戻りが発生しがちでした。この往復に数日かかることも珍しくありません。仕様書をAIで先に固めておくと、依頼時点で受け入れ基準まで共有できるため、実装の一発通過率が上がり、レビューの往復が減ります。

現場で繰り返し見るのは、セクション追加が「作れないから諦める」で止まっているケースです。ブリーフの型が手元にあれば、画像から実装指示を起こすShopify LP実装ブリーフのスキルと役割分担しながら、企画から実装依頼までの導線を社内に残せます。注意点として、このスキルが作るのはあくまで仕様書であり、最終的なschemaの妥当性はShopify CLIやShopify.devのテーマアーキテクチャドキュメントで検証する必要があります。schemaのidは後から変更すると既存ストアの設定値が消えるため、初期設計での命名が重要です。

まとめ

shopify-liquid-section-briefは、Shopifyのカスタムセクションを「作りたいけれど仕様を書けない」段階でつまずいている事業者に向いています。管理画面の操作を起点に、schema・block・preset・UATまでを一枚にまとめられるため、外注やAI実装への引き継ぎが一気に軽くなります。一歩目としては、いま自店で「差し替えたいのに固定になっている」箇所を一つ選び、その編集要望を言語化してスキルに渡すところから始めるのが現実的です。

※うるチカラでは、生成AIの導入支援から運用最適化まで、貴社のEC事業に合わせたカスタマイズ提案を行っています。無料相談(30分)も実施中ですので、お気軽にお問い合わせください。
https://uruchikara.jp/contact/


【監修】齋藤竹紘(株式会社オルセル代表 / 19年・5,000社のEC支援実績)


投稿者: 齋藤竹紘

株式会社オルセル代表取締役 / うるチカラ編集長。19年・5,000社以上のEC支援実績を持ち、楽天市場・Amazon・Yahoo!ショッピング・Shopify・Shopee越境ECの実装ノウハウを保有。AI×ECに関する書籍を3冊執筆。「現場で使えるAI実装」を一次情報として発信しています。

お問い合わせ