ひだまり焼き菓子店

想定した整理前の課題

実在店舗の改修前画面ではなく、小規模店舗で起こりやすい情報整理の課題を想定しています。

• 商品情報が散らばると、初めての方が何を買えるのか判断しにくい。
• 営業時間、所在地、支払い方法が見つけにくいと、来店前の不安が増える。
• スマートフォンで読みにくい構成では、問い合わせまで進みにくい。

対応方針

• 代表的な焼き菓子3点を、説明と価格が一緒に確認できるカードへ整理する。
• 店のこだわり、店舗情報、問い合わせの順に読み進められる1ページ構成にする。
• PCとスマートフォンの両方で、文字と導線が読みやすい余白と配置にする。

公開画面

制作範囲

企画、文章、デザイン、HTML / CSS / JavaScriptによるレスポンシブ実装、店舗情報と問い合わせ導線の整備。

確認した内容

• PC版1440 x 900で主要な案内と商品情報が確認できる。
• スマートフォン版390 x 844で横方向のはみ出しなく閲覧できる。
• 自主制作デモ・架空店舗の表記がページ上部と下部にある。
• 問い合わせボタンは実送信されないデモ仕様になっている。