Shopifyテーマ「Horizon」のUIデザインキット for Figmaを公開しました
Shopifyの最新テーマ「Horizon」のUIデザインキットをFigmaで作成しました。テーマカスタマイズの設計やクライアントへの提案時に、実際のテーマ構造に基づいたデザイン検証ができるようにすることが目的です。
無料で公開していますので、Horizonテーマを使ったストア構築やリニューアルを検討されている方はぜひご活用ください。
【Horizon】Shopifyテーマ「Horizon」UIデザインキット for Figma
なぜUIデザインキットを作ったのか
Shopifyのテーマカスタマイズを設計する際、テーマエディタはプレビューの読み込みがやや重く、セクションの入れ替えや設定変更のたびに待ちが発生するため、スピーディーにデザインを検証しづらい面があります。また、Horizonはセクションとブロックの組み合わせパターンが豊富で、レイアウトの自由度が高い分、事前にデザインを固めておく価値があります。
しかし、Figmaでゼロからデザインを起こすと、テーマの実際の構造との乖離が生まれやすく、「デザインでは良かったけど、テーマエディタでは再現できない」という問題が起こります。そこで、Horizonのセクション＆ブロック構造に準拠したFigmaコンポーネントとして設計することで、デザイン段階からテーマの制約を意識した検証ができるようにしてみました。
キットの構成
セクション＆ブロック構造への準拠
Shopifyのテーマエディタでは、ページは「セクション」の縦積みで構成され、各セクションの中に「ブロック」と呼ばれる編集可能なパーツが配置されます。このキットでは、Figmaのコンポーネント階層をこの構造にできる限り合わせています。
- Templates：トップページ、コレクションページ、商品詳細ページの基本テンプレート
- Sections：Horizonテーマの各セクション（Featured collection、Image banner、Slideshow など）をパーツとして配置
- Components：ブロック単位のUIパーツ。セクション内で入れ替えや追加が可能な単位で分割
つまり、Figma上でセクションを並べ替えたりブロックを差し替えたりする操作が、そのままテーマエディタでの編集操作に対応するイメージです。
⚠ ブロックのネスト構造について
Horizonテーマではブロックが最大8段階までネストされる構造を持っています。このキットではFigmaコンポーネントとしてこのネスト構造を表現していますが、深くネストされたブロックの組み合わせをそのままテーマエディタで再現できるとは限りません。Figmaでのデザインと並行して、テーマエディタ上でも同じ構成が実現可能かを検証しながら進めることを強くおすすめします。Figmaだけで完結せず、必ず実機確認をセットで行ってください。本デザインキットはあくまでも参考用としてお使いいただくことを前提としています。必ずしも本番再現可能なデザイン表現を担保しておりませんのでご注意ください。
⚠ 複数カラムセクションの構成について
特集商品（Featured collection）や特集コレクション（Collection list）など、複数カラムを設定できるセクションについては、カラム数ごとに別のセクションコンポーネントとして用意しています。Figmaのオートレイアウトで回り込み（Wrap）を有効にすると、画面サイズに応じて意図しないカラム落ちが発生し、設定したカラム数どおりの表示を維持できないためです。カラム数を固定したセクションを選択することで、デザイン意図に沿った正確なレイアウト検証が可能です。
組み合わせによるデザイン検証
セクションやブロックをパターンとして用意しているため、それらを自由に組み合わせてページ構成を検討できます。バリアント切替を使えばフレームを複製する必要もなく、カルーセル表示とグリッド表示の比較なども即座に行えます。
また、既存コンポーネントの組み合わせで新規セクションを構築できるため、ゼロからフレームを作る必要がありません。たとえば：
- トップページのヒーローを「Image banner」にするか「Slideshow」にするか
- 商品一覧の下に「ブログ記事セクション」を置くか「ブランドストーリーセクション」を置くか
- フッター手前にCTAを入れるか、ニュースレター登録を入れるか
こうした構成の比較を、テーマエディタを触る前にFigma上で素早く試せるのがポイントです。クライアントへの提案時にも、複数パターンを並べて見せられます。プロトタイプ機能を使えばページ遷移のシミュレーションも可能です。
一括差し替えによる検証
Figmaコンポーネントの特性を活かし、画像・カラー・フォントを変更すると全テンプレートに即反映されます。
例えば、デモ用のダミー画像で構成したトップページデザインを、実際のクライアントの商品画像に一括差し替えすれば、「このテーマでうちのストアがどう見えるか」をすぐに確認できます。テキストも同様で、キャッチコピーや商品説明を差し替えるだけで、異なるブランドでの見え方を比較検証できます。バナーやキャッチコピーのサイズ感も、アップロード前に実寸で確認できます。
ただ、あらゆるバリエーションを検証できているわけではないため、実際にはめ込んでみたらレイアウトがズレてしまった、という点などありましたらご容赦ください。
期待できるメリットと活用シーン
- バリアント切替でレイアウト比較：フレーム複製不要で、カルーセル/グリッド等を即座に比較
- 既存コンポーネントの組み合わせで新規セクション構築：ゼロからフレームを作る必要がない
- プロトタイプでページ遷移シミュレーション：クライアントプレゼンに活用
- 本番環境を触らずにデザイン検証：公開中のストアに影響を与えない
- 複数パターンの並行検討：季節キャンペーン用、セール用、通常時を事前に作り置き
- 画像・テキストの実寸確認：アップロード前にバナーやキャッチコピーのサイズ感を確認
- 社内共有・承認フローの効率化：Figmaリンク1つで共有、コメントでフィードバック集約
- Shopifyセクション＆ブロック構造に準拠：テーマエディタの構造とFigmaの構造が一致し、共通言語になる
- 新規ストア構築前のデザインプランニング：テーマ購入前にHorizonで実現できるデザインの全体像を把握
- 既存ストアのリニューアル提案：現行デザインとHorizon移行後のデザインを並べて比較
- カスタマイズ前のレイアウト検討：セクションの組み合わせやブロック構成を事前に検証
このキットはHorizon 3.4.0をベースに作成しています。テーマのアップデートに合わせて更新予定ですが、最新版にすぐにキャッチアップできない点につきましてはあらかじめご了承ください。
Horizonテーマでのストア構築やカスタマイズを検討されている方に、設計段階での時間短縮や品質向上のお役に立てれば幸いです。キットは無料で公開していますので、ぜひお気軽にお試しください。