この記事は、以前公開したHorizon テーマの UI デザインキット（Horizon UI Kit）を使って、架空のアパレルストアを要件定義 → Figma で画面デザイン → 実際の Shopify ストア構築まで、実際に通しで作ってみたサンプル事例です。要件定義が済んでいれば、そこから先は約2時間で一気に作成できます。
UI Kit にはこういう使い方がある、という一例として、どんな順番で何を決め、Figma で何をして、ストアにどう反映したのか。実際の画面を見ながら順に紹介します。この流れの中で、人がやったのは「何を作るか」を決めることと、できたものの確認だけです。決めた内容をもとに Figma 上に画面デザインのテンプレートを組んだのも、その Figma を読み取ってテーマファイルを作ったのも AI です。今回は Claude Code（Claude や Codex のような、パソコン上のファイルやツールを操作できる AI のコーディングエージェント）に任せました。
この記事でわかること
・Horizon UI Kit を使ったストア立ち上げの全体の流れ
・要件定義シートに何を書けばよいか（画面一覧と掲載内容）
・最初に要件を決めたあと、AI がどこまで一気に進めてくれるか
・Figma で作ったデザインが、AI によってどのようにテーマファイルになるか
作ったもの：架空のアパレルストア「HIYORI」
題材は、天然素材のニットと定番服を扱う架空のブランド「HIYORI（ひより）」です。毎年同じ定番色を続け、色違いで買い足してもらう、というコンセプトにしました。
最終的にできあがったのは次のとおりです。
| 項目 | 内容 |
|---|---|
| 画面（テンプレート） | 19種類 × デスクトップ／モバイル = Figma 上で38枚 |
| 商品 | 7商品（カラー・サイズのバリエーション付き）＋ギフトカード |
| コレクション | 9（新作・カテゴリ別・価格帯別ギフトなど） |
| ページ | ブランドストーリー、ルックブック、素材とお手入れ、ギフトガイド、定番色の紹介、ご利用ガイド、サイズガイド、お問い合わせ など |
| ブログ | ジャーナル（記事8本） |
| ポリシー | 返金・配送・利用規約・特定商取引法に基づく表記・連絡先 |
商品写真やモデル写真は、すべて画像生成 AI で作ったものです。
今回使った要件定義シートと Figma ファイル、完成したストアは公開しています。記事と合わせて実物を見てみてください。
- 要件定義シート（HIYORI 記入例）
- Figma ファイル（Horizon UI Kit Practice）
-
完成したストア（HIYORI）（閲覧パスワード：
storedojo）
全体の流れ
作業は大きく3つのステップに分かれます。
| ステップ | AI（Claude Code）がやったこと | 人がやったこと |
|---|---|---|
| 1. 要件定義 | 人が決めた内容をシートに書き起こし、必須の画面の抜けを補う | どんなストアにするか、どの画面が必要か、各画面に何を載せるかを決める |
| 2. Figma でデザイン | シートを読み取り、Figma 上で UI Kit のセクションを並べてテンプレートの種類ごとに代表画面を組み、文言と写真を入れる | できた画面を見て、直してほしい点を伝える |
| 3. ストア構築 | 商品・ページ等の登録。Figma を読み取ってテーマファイルを作り、構成・見た目を反映し、実際の画面で照合する | 公開前の確認、管理画面でしかできない操作 |
ポイントは、人が最初に要件を決めれば、あとは AI が一気に進めてくれることです。AI は要件定義シートに沿って、UI Kit のテンプレートを必要な種類の数だけ複製し、Figma 上に代表画面を組みます。続けて、その Figma と登録した商品情報を読み取り、テーマファイルまで作ります。Figma が「設計図」になり、並び順・文言・余白・文字サイズがそのままテーマの設定に変換されます。
ステップ1：要件定義シートを埋める
最初に、Google スプレッドシートで要件定義シートを作ります（今回の記入例）。大事なのは細かい設定値ではなく、次の3つです。
- どんなストアを作りたいか（ブランド・お客様像・世界観）
- 必要な画面はいくつあるか（画面一覧）
- それぞれの画面に何を載せるか（掲載内容）
テーマの設定項目との対応表のような「作り手向けの詳細」は書きません。色やフォントも「生成り色」「見出しも本文もゴシック」のような言葉で十分です。具体的な値は Figma 側で決めるからです。
1. ストア概要
「基本情報」「どんなストアか」「サイトの目的」「デザインの基本」「機能・運用」の区分で、ブランドコンセプト、メインのお客様、選ばれる理由、雰囲気、メインカラーやフォントの雰囲気、カートの形、更新の担当と頻度などを書きます。記入のヒント欄に例を入れておくと、迷わず埋められます。
「1. ストア概要」タブ
2. 画面一覧
必要な画面を1行ずつ並べ、それぞれ「何のための画面か（お客様に何をしてほしいか）」を書きます。
ここで忘れやすいのが、デザインの主役ではないけれど、ストアとして必ず必要な画面です。今回はシートの段階で次のものを【必須】として入れておきました。
- ページが見つからない（404）、検索結果、カート、公開前のパスワード画面
- 返金・プライバシー・利用規約・配送・特定商取引法に基づく表記・連絡先の各ポリシー
- ギフトカード受取画面、会員アカウント、チェックアウト完了画面（Shopify 標準で用意される画面）
「2. 画面一覧」タブ。必須の画面には【必須】の印を付けています
また、売上につながるコンテンツも画面一覧の段階で定義しました。ブランドストーリー（世界観を伝える）、ルックブック（着こなしを見せる）、素材とお手入れ（購入前の不安を解消する）、ギフトガイド（客単価を上げる）、定番色の紹介（色違いでのリピートを促す）などです。「とりあえずトップと商品ページ」で終わらせず、なぜその画面が必要かを先に決めておくと、Figma で組むときに迷いません。
3. 掲載内容
画面ごとに、上から順に「何を載せるか」を書きます。見出しや本文の文言、ボタンのリンク先、使う写真、見せ方のイメージまでをここで決めます。
「3. 掲載内容」タブ。この内容がそのまま Figma の各セクションになります
ステップ2：Figma で代表画面をデザインする
要件定義シートができたら、Claude Code が Horizon UI Kit を使って、Figma 上にテンプレートごとの代表画面を組みます（今回の Figma ファイル）。
ここで作るのは、ストアの全ページではなくテンプレートの種類ごとの代表画面です。Shopify では、商品ページ・コレクションページ・記事ページなどは、1つのテンプレートをすべての商品・コレクション・記事で共有します。今回の7商品もすべて同じ商品テンプレートで表示されるため、Figma では代表の1画面を作れば足ります。HIYORI では19種類のテンプレートを、デスクトップとモバイルの2サイズで作りました。
UI Kit の各パーツは、Horizon テーマのテーマエディタで選べるセクション・ブロックと同じ名前・同じ構造で作られています。たとえば Figma の「section:product-list」は、テーマエディタの「商品リスト」セクションに対応します。そのため、Figma で並べたものはそのままテーマで再現できます（Figma とテーマの対応の仕組みはこちらの記事で解説しています）。
Figma 上に並べた HIYORI の全テンプレート（左のレイヤー一覧が各テンプレートの代表画面）
Claude Code は、Figma を AI から操作するための仕組み（Figma の MCP サーバーやプラグイン）を通じて、Figma のファイルを直接編集できます。「シートの内容どおりに必要なテンプレートを組んで」と指示し、次の作業をさせました。人は途中の画面を見て、直してほしい点を伝えただけです。
- 画面一覧に合わせて、UI Kit のテンプレートを必要なテンプレートの数だけ複製する（19種類 × デスクトップ／モバイル = 38枚）
- 掲載内容シートの順番どおりに、UI Kit のセクションを上から並べる
- 見出し・本文・ボタンの文言をシートの内容に差し替える
- 生成した商品写真・モデル写真を配置する
- デスクトップ（幅1280px）とモバイル（幅390px）の両方を作る
- ストア全体の色とフォントを、要件定義の内容（文字色 #2b2b2b、日本語フォント Noto Sans JP）に揃える
Figma で組んだトップページ（デスクトップ版の上部）
Figma で決めることと、決めないこと
Figma で決めるのは、画面の構成・文言・写真・余白・文字の大きさや太さ・色・ボタンの形です。
商品リストに実際に並ぶ商品は、ストアに登録した商品とコレクションのデータで決まります。この対応づけも、AI が登録済みの商品情報を読み取って設定しました。
ステップ3：ストアに反映する
最後に、Figma の内容を実際のストアに反映します。ここは Claude Code にまとめて任せました。
商品・コンテンツの登録
Shopify の Admin API（管理画面と同じ操作をプログラムから行う仕組み）を使って、商品・コレクション・ページ・ブログ記事・ポリシー・メニューを登録しました。登録前に対象ストアを確認し、変更前の状態を記録してから実行しています。
テンプレートの生成
Claude Code が Figma の各画面を読み取り、Horizon のテンプレートファイル（templates/*.json：どのセクションをどの順番で並べ、各設定をどうするかを書いたファイル）を作ります。テーマのコード（Liquid）には一切手を入れていません。テーマの公式アップデートを今後もそのまま受けられる状態を保つためです。
できたテーマは GitHub に置き、Shopify の GitHub 連携でストアに接続しました。以降は GitHub を更新すれば、ストアのテーマにも自動で反映されます。
Figma の「見た目」まで AI に反映させる
ここが今回いちばん大事なところです。テンプレートを作るだけでは、セクションの構成と文言しか反映されません。余白や文字サイズはテーマの初期値のままになり、Figma で調整した見た目が失われてしまいます。
そこで Claude Code に、Figma から各セクションの値を読み取り、テーマの設定に変換して上書きさせました。値の読み取りから、どの設定に当てはめるかの判断、テーマファイルの書き換えまで、AI が行っています。
| Figma で決めた値 | 反映先（テーマ側の設定） |
|---|---|
| 見出しの文字サイズの段階（56 / 40 / 32 / 24px） | テーマ設定の見出しサイズ（h1〜h4） |
| 本文の文字サイズ（14px） | テーマ設定の本文サイズ |
| ボタンの角丸（10px） | テーマ設定のボタンの角丸 |
| 文字色（#2b2b2b） | テーマ設定のカラーパレット |
| 各セクションの上下の余白・要素の間隔 | 各セクションの余白・間隔の設定 |
| 個々の見出しの大きさと太さ | 各テキストブロックの文字スタイル |
| 写真の上に載る白い文字・白いボタン | テキストブロックの文字色、ボタンの個別色 |
反映後は、Claude Code が実際のストアの画面を Figma と同じ幅で開き、16ページ・全セクションの余白・文字サイズ・ボタンの角丸を計測して Figma の値と照合しました。テーマで設定できる項目は、すべて Figma どおりになっています。
左が Figma、右が実際のストア（トップページ）
左が Figma、右が実際のストア（ルックブック）
間に Figma を挟むメリット
今回は、Horizon に標準で用意されているセクションとブロックで表現できる範囲で作りました。実際のストアでは、標準のセクションやブロックだけでは表現できない部分も出てきます。その場合は独自のセクションやブロックを追加する必要があるなど、この記事の流れだけでは済まず、もっと複雑な工程をたどります。
だからこそ、AI エージェントにいきなりテーマファイルを直接操作させるよりも、要件定義とストア構築の間に Figma を挟み、先に全体を設計しておくほうが進めやすいと感じています。Figma を挟むことには、次のようなメリットがあります。
- 必要な画面数を漏れなく定義できる：テンプレートを並べてみると、足りない画面や、要件定義で決めきれていなかった画面に気づける
- 全体のバランスを見て、デザインやトーンを調整できる：すべての代表画面を一覧で見比べながら、余白や文字の大きさ、写真の雰囲気をそろえられる
- 運用開始後に新しいページを作るときも、デザインしやすい：既存のページを横に並べて見ながら、同じトーンで新しいページを組める
- 作る前に、関係者と完成イメージを合意できる：ストアに反映する前の段階で、マーチャントやチームと画面を見ながら確認できる。直すのも Figma 上なので手戻りが小さい
- AI への指示と、できあがりの確認の基準になる：「Figma のとおりに」と指示でき、反映後も Figma と実際の画面を並べて照合できる
- スマホでの見え方を先に決められる：モバイル版も並べておくことで、写真の切れ方や見出しの折り返しを、作る前に確認・調整できる
- 必要な写真や素材を洗い出せる：どの画面に、どんな写真が、どの比率で何枚必要かが、撮影や画像生成の前にわかる
まとめ
Horizon UI Kit を使うと、「要件定義 → Figma → ストア構築」を一本の流れでつなげられます。人が最初に要件を決めれば、AI が UI Kit で必要な画面を組み、登録した商品情報も読み取ってテーマファイルまで一気に作ります。今回は、要件定義のあと約2時間で架空ストア1つ分を形にできました。
- 人が決めるのは、最初の要件（ストア像・画面一覧・掲載内容）と、できたものの確認だけ
- AI が、UI Kit のテンプレートを必要な種類の数だけ複製し、Figma 上に代表画面を組む
- AI が、Figma と登録した商品情報を読み取り、余白・文字・色・ボタンまで Figma どおりにテーマファイルを作る
Figma で調整したデザインがそのままストアの見た目になるので、デザインを検討する時間がそのまま成果につながります。Horizon でのストア立ち上げやリニューアルを考えている方は、ぜひ UI Kit を試してみてください。