菓子処 こはる庵

“食べる・贈る・立ち寄る”を、ひとつの流れに。

Overview

こはる庵は、和菓子の販売だけでなく、座敷での店内甘味や贈答需要まで伝える店舗サイトプラン想定の作例です。
商品の魅力、店主のこだわり、利用シーン、問い合わせ内容が自然につながるよう、1ページの中で情報を整理しました。

Challenge

課題は、和菓子店の魅力が「商品写真」だけで終わりやすいこと。
・どんな商品があるのか分かりにくい
・店内で食べられるのか伝わりにくい
・贈答相談や取り置きの導線が弱い
こうした不安を、導線と見せ方で解消することを重視しました。

Solution

• Heroで世界観を大きく見せ、固定背景と余白で上品な印象を演出
• メニューはカテゴリ切り替えで、商品数が多くても探しやすく整理
• 座敷・贈りもの・お客様の声を追加し、利用シーンを具体化
• Contactで「座敷席」「取り置き」「贈答相談」を明示し、問い合わせやすく設計

Highlights

• 和をイメージした縦型ロゴと右固定ヘッダーで、老舗感と上品な印象を演出。
• PC右固定ヘッダーとSPハンバーガーメニューで、長いページでも迷わない導線。
• ヘッダー内に舞い落ちる葉のアニメーションで、和の空気感をさりげなく演出。
• お客様の声を入れることで、座敷利用・家族利用・贈答利用の具体的なイメージを補強。

Design

淡い生成り、抹茶色、小豆色を基調に、和紙のような透け感と角丸カードでやさしい印象に。
和をイメージした縦型ロゴと右固定ヘッダーを組み合わせ、老舗らしい落ち着きと、長いページでも迷わない導線を両立しました。
商品写真を大きく見せながらも、テキスト・価格・問い合わせ導線が埋もれないよう、余白と背景濃度を調整しています。

Result

商品紹介だけでなく、店内利用・贈答・お客様の声・問い合わせ内容までつながる構成になり、店舗の雰囲気と行動導線を両立できました。
店舗サイトプランとして、世界観と実用性の両方を見せられる作例です。

Role & Deliverables

• 情報設計：商品・座敷・贈答・問い合わせ導線の整理
• UI設計：固定ナビ / メニュータブ / カードUI / お客様の声
• 制作：HTML / CSS / JavaScript