デザイナーのカンプを100%再現するためのDawnフルカスタマイズ

提供いただいたFigmaカンプは余白・タイポグラフィ・カラースキームまで緻密に設計されたミニマル系。既存テーマの制約に縛られると再現が崩れるため、Dawnをベースにフロントエンドを大幅にカスタマイズする方針を選択しました。Shopifyの堅牢な決済・在庫・カート機能はそのまま活用しつつ、見た目はカンプ100%再現を実現しています。

ブランドの世界観を損なわず「売れる仕組み」を埋め込む情報設計

余白を活かしたミニマルなデザインの中に、Best Sellers（カルーセル）・Search by Concern（タグ自動抽出）・Trial Kit Promotion（CV最大化セクション）・定期購入切替UIなど、D2Cブランドに必須の購買導線を違和感なく埋め込みました。「世界観」と「機能性」のどちらも妥協しない情報設計で、ブランディングと売上の両立を目指しています。

商品ごとに表情を変える「メタフィールド駆動の商品詳細ページ」

通常のテーマでは固定だった「成分」「使い方STEP」「FAQ」の3エリアを、すべてメタオブジェクト経由で管理画面から自由に編集できるよう設計しました。テキスト量や項目数が商品ごとに異なっても破綻しないよう、レイアウトは内容量に合わせて伸縮する仕様に。新商品追加時もエンジニアが介入せず、運用チームだけで完結する商品ページ運用を可能にしました。

メタフィールド設計で成分・使い方・FAQをデータ駆動化し、商品ごとに表示内容を自動切替。セクション独立構造により、運用者が積み木感覚で並び替え可能な「運用に強い」D2Cサイトを構築しました。