CASE STUDY

SOW.

SOW.
CLIENT / ROLE
自主制作(架空ブランド)
構築 / Liquid実装 / メタ設計
種別:Shopifyストア構築期間:約1ヶ月
TECH STACK
ShopifyLiquidJudge.me
ACCESS
333
デモ閲覧時は上記パスコードを入力してください。
実際のサイトを見る

制作概要

架空のスキンケアブランド「SOW.」を題材にした自主制作。実案件を想定してデザインカンプを用意し、Liquidとメタフィールド設計で、運用者が触れる範囲を最大化したD2Cサイトを構築しました。

※コンセプト検証用のデモサイトです。一部ページ・画像はダミーです。

こだわりポイント

1. メタフィールド駆動の可変商品ページ
成分・使い方STEP・FAQをメタオブジェクトで定義し、商品ごとに表示内容を自動切替。固定枠を排除して、内容量に合わせて伸縮するレイアウトを実装しました。

2. セクション独立構造での運用設計
FV・人気ランキング・Search by Concern・Trial Kit・Concept・News・Instagramの全セクションを上下マージン独立で構築。運用者が管理画面から積み木感覚で並び替え可能です。

3. 状態変化UIとパララックス演出
単品/定期購入の価格切替UI、ホバーエフェクト、Aboutページのパララックス背景演出を、ライブラリ不使用のLiquid+CSSのみで実装しました。

技術メモ

Dawnテーマをベースに、ヘッダー・FV・商品詳細・Aboutページをほぼフルスクラッチで再構築しました。
特に「Search by Concern」はShopifyのタグ機能と連動した自動抽出ロジックを組み、個別の特集ページを作らずに6つの悩み別カテゴリを実装しています。

プロセス

課題・背景

想定カンプを忠実に再現するためのDawnフルカスタマイズ

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

設計・判断

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

余白を活かしたミニマルなデザインの中に、Best Sellers(カルーセル)・Search by Concern(タグ自動抽出)・Trial Kit Promotion(CV最大化セクション)・定期購入切替UIなど、D2Cブランドに必須の購買導線を違和感なく埋め込みました。「世界観」を保ったまま購買導線を差し込む情報設計にしています。

実装・構築

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

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

成果・反響

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

CONTACT

同じような構成を検討中の方へ

同じような構成のサイトを検討中の方は、要件が固まっていない段階でもご相談いただけます。

相談無料・24時間以内に返信します