クラフトビールECサイト

概要

職業訓練課題として、クラフトビールECサイトを想定した架空サイト作成。

【目的】
商品の魅力に興味を持ってもらい、購入につながる導線設計

【ターゲット】
20~40代のクラフトビールに興味がある男女。
初めてクラフトビールを購入する層から、複数の商品を比較したいユーザーを想定。

【使用ツール】
Photoshop/Dreamweaver

【制作時期】
2025年12月17日~2026年2月16日

【制作期間】
約2か月

現在、レスポンシブ対応を並行して制作中です。

課題

ブランド優先の情報設計により、商品選択の優先順位が不明確だった。

仮説

初回訪問ユーザーは「おすすめ」を基準に判断するため、基準提示が必要と考えた。

解決策

人気商品をファーストビュー直下に配置し、導線を一本化。購入行動順に再設計した。

ユーザーの判断コストを下げ、購入までの動線を最短化することを目的に、
人気商品を優先表示。初回訪問時の判断負荷を軽減し、セクション構成を「提示 → 比較 → 行動」の流れに再構築した。

【役割】
サイト全体の入口として、ブランドの世界観と商品カテゴリを直感的に把握できる場として構成。
【導線設計】
初めて訪れたユーザーでも迷わないよう、カテゴリ導線を上部に配置。
【安心設計】
価格帯や商品の雰囲気が視覚的に伝わる写真を使用し、購入への心理的ハードルを下げた。

商品一覧ページ

【役割】
商品を比較、選択する場として構成。
【導線設計】
カードレイアウトと詳細ボタンの位置を統一し、次の行動が直感的に分かる導線設計。
【安心設計】
価格・容量・アルコール度数を明確に表示し、購入前の不安を軽減した。

商品詳細ページ

【役割】
購入判断を行う場として構成。
【導線設計】
商品画像 → 商品情報 → レビューの順に配置し、興味喚起から意思決定までの流れを意識した。
【安心設計】
レビュー掲載や税込価格表示により、安心して購入を検討できる構成とした。

フッター

• 会社情報・利用規約・SNSを掲載し、信頼性を担保した。

年齢表記

• 20歳未満の飲酒に関する注意喚起を明示し、信頼性と配慮を意識した。