LOFTBREW

制作概要 OVERVIEW

職業訓練課題として、クラフトビールECサイトを想定した架空サイトを制作しました。
ブランドの世界観を伝えるだけでなく、人気商品、商品一覧、商品詳細、レビュー、関連商品などを通して、
迷わず商品選びができるECサイトを目指しました。

サービス設定 PREMISE

・クラフトビールを販売する架空のECサイト
・複数の商品を比較しながら購入できる
・初めてクラフトビールを購入するユーザーにも分かりやすく、味や特徴を伝える
・商品詳細、レビュー、関連商品を通して購入前の不安を減らす

ターゲット TARGET

20〜40代のクラフトビールに興味がある男女。
クラフトビールを初めて購入する層から、複数の商品を比較して自分に合う商品を選びたいユーザーを想定しました。

目的 PURPOSE

クラフトビールの魅力や商品ごとの違いを分かりやすく提示し、初回訪問ユーザーが迷わず商品比較と購入判断へ進めることを目的としました。 また、ECサイトとして必要な情報を整理することで、商品選びから購入までの流れをスムーズにすることを意識しました。

課題 → 解決PROBLEM / SOLUTION

クラフトビールは種類や味の違いが分かりにくく、初めて購入するユーザーにとって「どの商品を選べばよいか」が迷いやすい点が課題だと考えました。
そこで、トップページでは人気商品を上部に配置し、まず注目商品から比較できる流れを作りました。商品一覧では、商品名、味の特徴、価格、容量をカード形式で整理し、一覧で比較しやすいようにしています。 商品詳細ページでは、商品画像、価格、レビュー、商品情報、関連商品をまとめ、購入前に必要な判断材料を確認しやすい構成にしました。

安心設計TRUST DESIGN

初めて訪れたユーザーでも安心して購入を検討できるよう、価格、容量、アルコール度数、レビュー、商品情報を分かりやすく配置しました。 商品詳細ページでは、購入前に確認したい情報を一画面内に整理し、レビューや関連商品を設けることで、商品の比較や購入判断がしやすくなるようにしています。 また、フッターには会社情報、利用規約、プライバシーポリシー、特定商取引法に基づく表記などをまとめ、ECサイトとしての信頼感を補強しました。

デザイン DESIGN

クラフトビールの持つこだわりや親しみやすさが伝わるよう、落ち着いた色味と余白を意識してデザインしました。 商品情報が多くなるECサイトでは、視覚的な印象だけでなく、ユーザーが比較・購入判断しやすいことが重要だと考え、文字サイズ、情報のまとまり、画像とテキストの配置に気をつけています。

フォントは、商品名や見出しが読みやすくなるよう視認性を重視し、全体の情報が整理されて見えるようにしました。 カラーは、ビールの色味やクラフト感を連想できる落ち着いたトーンを中心に使用し、購入ボタンや価格などの重要な情報が埋もれないようコントラストを意識しています。

装飾は大きく入れすぎず、商品画像やカード型のレイアウト、区切り線、余白、ボタンなどで情報のまとまりが分かるようにしました。 派手な装飾よりも、初回訪問ユーザーが「どの商品を見るか」「どこを比較するか」「次にどの行動を取るか」を迷わないことを優先しています。