サイトマップ

トップページ

コンテンツページ

トップページ

トップページでは、ブランドの世界観提示から人気商品閲覧、商品比較、ブランド理解へと段階的に興味を深められるよう構成しました。初回訪問ユーザーが「まず何を見るか」で迷わないよう、人気商品を上位に配置し、その後に商品一覧、楽しみ方、お知らせへと回遊できる流れを意識しています。また、フッターには会社情報や各種ポリシーをまとめ、ECサイトとしての安心感を補強しました。

コンテンツページ

各ページで必要な判断材料と次の行動を整理することで、購入時の迷いや離脱を減らす構成を意識しています。特に商品詳細ページでは、画像、レビュー、価格、商品情報、関連商品を一画面内にまとめ、比較と購入判断をしやすくしました。

Before/After

トップページBefore

トップページAfter

Beforeでは世界観訴求の比重が大きく、商品閲覧までに必要な情報量が多い構成だったため、Afterでは初回訪問ユーザーが人気商品から比較・詳細閲覧へ自然に進めるよう、商品導線を上位に再設計しました。ブランド理解やお知らせは後方に整理し、ECサイトとしての回遊性と判断のしやすさを高めました。

トップページ

トップページデザインカンプ

トップページワイヤーフレーム

役割

ブランドの世界観を伝えながら、人気商品への興味喚起と商品一覧への導線形成を担うページにしました。

導線設計

ファーストビューでブランドの雰囲気を見せたあと、人気商品 → 商品一覧 → クラフトビールの楽しみ方 → お知らせの順で、興味喚起から比較・回遊へつなげる構成にしました。

安心設計

初回訪問ユーザーが迷わないよう、人気商品を早い位置に配置して「まず何を見ればよいか」を明確化。さらに、お知らせやフッターの会社情報・特商法表記・利用規約への導線を置き、ECサイトとしての信頼感を補強しました。

UI/実装の工夫

人気商品・商品一覧はカード形式で統一し、商品名・味の特徴・価格が一目で把握できるよう整理しました。。ホバー時には opacity を用いて、リンク可能要素であることをやわらかく伝える実装にしています。

色設計

背景は白を基調にし、商品写真やカード内の情報が見やすくなるよう、全体をシンプルに整理した。オレンジのアクセントカラーはボタンに集中させ、回遊や購入につながる導線を明確にしました。

フォント設計

見出しはクラフト感と印象の強さを持たせつつ、本文には Noto Sans JP を使用し、商品情報や説明文の可読性を高めた。世界観表現と可読性の両立を意識しました。

商品一覧

商品一覧デザインカンプ

商品一覧ワイヤーフレーム

役割

商品の比較検討をしやすくし、一覧性を保ちながら詳細ページへの遷移を促すページにしました。

導線設計

商品画像、商品名、味の特徴、価格、アルコール度数、CTAをカード内で上下に整理し、ユーザーが複数商品を見比べながら自然に詳細ページへ進めるよう設計しました。

安心設計

商品名だけでなく、味の特徴、容量、価格、アルコール度数を一覧上で確認できるようにし、詳細ページに入る前の判断材料を増やした。比較に必要な情報を事前提示することで、「押してみないと分からない」不安を減らしています。。

UI/実装の工夫

カード構造を統一することで、一覧表示でも比較しやすいリズムを作りました。アルコール度数は小さなラベルで補足し、情報量を増やしつつ視認性を損なわないよう調整しました。コード上でも同一カードの再利用を意識し、構造をそろえて実装しています。

色設計

背景色を控えめにし、ビールの色味そのものが違いとして見えるようにしました。オレンジのボタンのみを強調色とし、比較から詳細への行動ポイントを明確にしています。

フォント設計

商品名は識別しやすいよう視認性のある表現にし、説明文と価格は情報階層に合わせて整理。一覧性を優先し、読み流しやすい構成を意識しました。

商品詳細

商品詳細デザインカンプ

商品詳細ワイヤーフレーム

役割

商品理解を深め、購入判断を後押しするページにしています。

導線設計

メイン画像 → 商品名・評価・説明 → 価格 → 数量選択 → カート追加の順で、購入判断に必要な情報を上から自然に読める構成にしました。その下に商品情報、レビュー、関連商品を置き、迷った場合も比較・再検討しやすい導線にしています。

安心設計

レビュー、商品情報、問い合わせページへの導線を配置し、購入前に気になる要素を確認できるようにしました。「どんな味か」「信頼できるか」「困ったらどうするか」を補うことで、初回購入時の不安軽減を意識しています。

UI/実装の工夫

サムネイル切り替えにより、複数画像から商品イメージを把握できるようにしました。数量選択とカート追加は視線の近い位置にまとめ、操作の負担を減らしました。レビューや関連商品を下部に配置することで、離脱ではなく検討継続につながる構成にしています。

色設計

情報量が多いページのため、装飾色を増やしすぎず、評価やCTAなど必要な箇所のみアクセントを使用しました。購入判断に必要な情報が埋もれないよう、視線の優先順位を意識しました。

フォント設計

商品名は印象を強く、説明文や商品情報は読みやすさを優先しました。レビュー欄も含め、長文でも負担なく読めるように構成しています。

ショッピングカート

ショッピングカートデザインカンプ

ショッピングカートワイヤーフレーム

役割

現在の購入内容を確認させ、購入手続きへ迷いなく進ませるページにしました。

導線設計

商品情報と合計金額を左右で分け、左で「何を買うか」、右で「どう進むか」が分かる構成にしました。主CTAである「購入へ進む」を目立たせ、補助導線として「お買い物を続ける」を配置しました。

安心設計

合計金額や送料に関する文言を表示し、手続き前の不安を減らしました。数量変更・削除もページ内で確認できるようにし、「戻らないと修正できない」不便さを防いでいます。

レスポンシブ対応デザインカンプ

トップページ

商品一覧

商品詳細

カート

トップページ

PC版では世界観訴求と商品導線の両立を意識し、SP版では人気商品やCTAが埋もれず把握しやすい構成にしました。

商品一覧ページ

PC版では一覧性を活かした比較を重視し、SP版では1カラム構成に整理することで、商品情報を順に把握しやすい構成にしました。

商品詳細ページ

PC版では情報を広く見渡せる構成とし、SP版では購入判断に必要な情報を縦の流れで追いやすい構成しました。

カートページ

PC版では購入内容と金額確認を左右に整理し、SP版では確認から購入手続きまでを縦の流れで追いやすい構成にしました。