01
HIBI ORIGINAL白磁のマグ
毎日使える、手になじむ器。
¥2,800
CASE STUDY / Lifestyle Store / EC
HIBI
商品を見つけ、特徴を比べ、購入へ進みやすい小規模ECサイト。
このページは架空の店舗・ブランドを想定したケーススタディです。実際の顧客案件ではありません。
02
HIBI ORIGINALリネンクロス
使うほどやわらかくなる一枚。
¥1,650
03
HIBI ORIGINAL真鍮のトレイ
小物を静かにまとめる道具。
¥3,300
04
HIBI ORIGINAL糸綴じノート
書く時間を心地よく。
¥1,980
ABOUT HIBI
長く使いたいものを、日々のそばに。
素材と使い心地を大切にした、架空のライフスタイルブランド。商品を探す、比べる、選ぶというECの流れを中心に設計しています。
DEMO SITE — 実際の予約・注文・決済・個人情報の送信は行いません。
CONCEPT
暮らしの道具を扱う小規模ブランドを想定。装飾を抑え、商品が主役になる情報設計と買い物の分かりやすさを重視しました。
制作目的商品を探しやすく整理し、ブランドを知って購入するまでを支える。
ASSUMED ISSUES
想定した課題
仮想案件として設定した課題です。
- SNSでは商品をカテゴリ別に探しづらい
- 商品の特徴や価格を比較できる販売場所がない
- ブランド紹介から購入までをひとつの流れにしたい
APPROACH
課題へのアプローチ
- カテゴリと商品一覧を早い段階に置き、発見を優先
- 商品名、説明、価格、購入ボタンの位置を統一
- カート追加・削除の動作をデモとして実装
DESIGN
デザインの理由
- オフホワイトと深いグリーンで、商品を邪魔しないミニマルな配色
- グリッドとフィルター風ナビを使い、ECらしい機能的な印象を形成
- カード内の情報順を統一し、一覧でも比較しやすい密度に調整
RESPONSIVE
モバイルで重視したこと
- 商品カードを1列にして情報を省略せず表示
- 価格と購入ボタンを同じ位置にそろえる
- カート状況を読み上げられるライブ領域として実装
FEATURES
デモ内の機能・情報
- カテゴリナビゲーション
- 商品一覧・価格・説明
- 商品ビジュアル
- 追加・リセット可能なデモカート
- ブランド紹介
TECHNOLOGY
使用技術
- Astro
- HTML
- CSS
- TypeScript
このデモの既存コードから確認できる技術のみを掲載しています。
LET'S TALK
業種と目的に合うWebを考えます。
デモのどの部分が気になったか、相談時にお知らせください。