AWAKEN COFFEE

迷わせず、買わせる導線設計。

Overview

ECサイトは「商品が増えるほど複雑になる」構造です。
AWAKEN COFFEEでは、商品追加・ページ増加・UI変更が前提になることを想定し、 最初から「崩れにくい構造」を優先して設計しました。

Challenge

EC制作で起きがちな問題は、ページが増えるほど修正コストが跳ね上がることです。
見た目ごとにCSSを書き足していくと、どこを直せばよいのか分からなくなります。 今回はその状態を最初から避ける必要がありました。

Solution

• UIを「共通コンポーネント」と「ページ固有」に分離し、CSSの責務を明確化
• ボタンやバッジは役割ベースで設計し、見た目変更を一箇所に集約
• ヘッダー・フッターをinclude化し、全ページでの修正漏れを防止

Highlights

購入までの迷いを減らすために、UIの反応と情報の置き方を細部まで設計しました。 作品としては、ECに必要な“運用性”と“体験”の両立を意識しています。

• カートの体験設計：数量変更の反応（ふわっ）＋小計更新の視線誘導で、操作の手応えを強化
• 購入単価を自然に引き上げ：「送料無料まであと◯円」バーで、次の一品を自然に促す
• 壊れにくい実装：商品追加・UI変更を前提に、データ（JSON）と表示（JS）と見た目（CSS）を分離
• 運用体験の可視化：在庫変動・公開状態を疑似管理画面で体験可能

Result

見た目だけでなく、更新や修正を前提とした「壊れにくいEC構造」を形にできました。
商品追加やUI変更にも対応できる設計により、運用フェーズでも価値が続くECサイトを実現しています。

Role & Deliverables

設計〜実装まで一貫して担当し、運用前提で崩れにくい構造に落とし込みました。

• Role：情報設計 / UIデザイン / フロント実装（HTML・CSS・JS）
• Deliverables：商品一覧・商品詳細・カート（localStorage）・バッジ連動
• Highlights：数量変更のフィードバック（ふわっ）/ 送料無料バー / CSS責務分離