DAILY

制作概要

オーガニック石鹸ブランド「DAILY」のECサイト構築プロジェクト。Figmaのデザインカンプを元に、
Liquidを用いたテーマ開発を行いました。ブランドの持つ『透明感』を表現するUI実装と、
クライアント自身が更新しやすい管理画面設計を両立させています。

※あくまでデモサイトのため作成していないページや画像の設置箇所に違和感あります。

こだわりポイント

1. 追加費用ゼロでの機能拡張
月額課金アプリを使わずに「ランキング」「レコメンド」機能を自作し、ランニングコストを削減しました。

2. 更新性を高めるSchema設計
画像やテキストはすべて管理画面から変更可能にし、HTMLに触れずに運用できる設計にしています。

3. ブランド体験を高めるマイクロインタラクション
スクロール連動のアニメーションやホバーエフェクトを実装し、心地よい操作感を実現しました。

技術メモ

Dawnテーマをベースにしつつ、ヘッダーや商品セクションはほぼフルスクラッチで再構築しています。
特に『動的ランキング』は、コレクションとメタフィールドを組み合わせることで、
手動・自動のハイブリッド運用ができるロジックを組みました。

プロセス

課題・背景

「世界観」と「機能性」の両立を目指したフルスクラッチ構築

既存テーマの制約に縛られず、ブランドが持つ透明感や独自のデザイン性を100%表現するため、Figmaデザインからのコーディングを選択しました。Shopifyの堅牢なカート・決済機能はそのまま活用しつつ、フロントエンドを自由に構築することで、ECとしての安心感とブランドの世界観を両立させました。

設計・判断

自然な「回遊」を生み出す動線設計

単に商品を陳列するだけでなく、ユーザーがサイト内を楽しみながら回遊できる設計を最優先しました。トップページや商品ページに「ランキング」や「関連商品（レコメンド）」セクションを戦略的に配置。ユーザーの興味を途切れさせず、自然と他の商品へ誘導することで、客単価アップ（クロスセル）を狙える構成にしています。

実装・構築

運用負荷を下げつつ、鮮度を保つ「動的ランキング機能」

通常のテーマにはない「ランキングセクション」をLiquidで独自開発しました。メタフィールドを活用することで、管理画面から直感的に順位や商品を入れ替えられる仕様に。手動での順位指定はもちろん、将来的な自動化も視野に入れたロジックを組み込み、運営者の更新コストを最小限に抑えつつ、常に鮮度の高い売り場を作れるようにしました。