これまでの内容をすべて統合し、実務でそのまま使える「完全ガイド」として記事を再構成しました。

Figmaでの設計から、Shopify Dawnへの実装、そして「UI Kitを使う場合」と「使わない場合」の分岐まで網羅しています。

Figma × Shopify Dawn：効率と自由度を両立するECサイト構築完全ガイド

Shopifyの無料テーマ「Dawn」は、OS2.0に準拠した非常に強力なベースです。これをFigmaデザインと組み合わせることで、低コストかつ高品質なサイト構築が可能になります。本記事では、その具体的な手順と作業詳細を解説します。

1. デザインフェーズ：Figmaでの設計

Shopifyは「セクション」を積み木のように組み合わせてページを作ります。Figmaでもこの構造を意識することが成功の鍵です。

パターンA：Shopify Dawn UI Kitを活用する（スピード重視）

既存のDawnのパーツをベースに色や文字を差し替える手法です。

• 作業詳細:
  • WavebrainなどのUI KitをFigmaにインポート。
  • キット内の「Local Variables（変数）」をブランドカラーやフォントに変更。
  • 既存セクション（Image Banner, Featured Product等）を並び替えてプロトタイプを作成。
• メリット: 実装時の再現性が100%に近く、ノーコードでの構築が容易。

パターンB：UI Kitを使わない完全カスタム（独自性重視）

ブランドの世界観をゼロから構築する手法です。

• 作業詳細:
  • グリッド設定: Dawnの標準幅（通常1200px）に合わせてLayout Gridを設定。
  • セクションの定義: 「画像＋テキスト」「スライダー」など、Shopifyのセクション単位でデザインを分ける。
  • 余白ルール: 上下左右のPaddingをコンポーネント化し、統一感を持たせる。
• メリット: Dawnらしさを消し、フルスクラッチのような独自サイトに見せられる。

2. 準備フェーズ：Shopifyの基盤構築

デザインを反映させる前に、Shopify側の「受け皿」を整えます。

• 開発環境のセットアップ: Shopifyパートナーアカウントから開発ストアを作成し、最新のDawnをインストール。
• データ投入: 商品、コレクション、ナビゲーション（メニュー）を仮でも良いので登録。これがないと実際の表示確認ができません。
• Shopify CLIの準備: コードカスタマイズを行う場合は、ローカル環境と同期できるよう設定します。

3. 実装フェーズ：FigmaからShopifyへ

ここが最も重要な「転記」の作業です。

① テーマエディタでの基本設定（ノーコード 7割）

• Typography & Colors: Figmaのスタイルガイドに基づき、テーマ設定からフォントと配色を反映。
• Layout: ページ幅やセクション間の余白をFigmaの設計値に合わせる。

② カスタムCSSとLiquid（カスタム 3割）

標準機能で届かない箇所の調整です。

• カスタムCSS: 各セクションの「Custom CSS」欄、または base.css に記述。
• カスタムセクション: sections/ ディレクトリに新しい .liquid ファイルを作成し、Figma独自のレイアウトを再現。

③ 実装を加速させるツール

• Instant / Replo: Figmaのデザインを直接Shopifyセクションとして書き出せるアプリ。コードを書かずに自由なレイアウトを挿入したい場合に有効です。

4. 比較：どちらの手法を選ぶべきか？

5. 公開前のチェックリスト

• [ ] レスポンシブ: 実機（スマホ）で崩れがないか？
• [ ] パフォーマンス: PageSpeed Insightsで画像サイズ等が最適化されているか？
• [ ] 運用性: クライアントが管理画面から画像やテキストを簡単に変更できるか？

まとめ

「最速で立ち上げるならUI Kit、こだわり抜くなら完全カスタム」。

どちらの道を選んでも、「Shopifyのセクション構造」をFigmaのレイアウトに反映させることが、修正の少ないスムーズな構築への最短ルートです。