このたび、以前制作した和菓子店のホームページを作り直しました。今回はその制作意図について綴っていきたいと思います。
和菓子店ホームページ
物販のホームページでは商品画像が要となるので、全体を通して画像を大きく、印象的に見せることを意識しました。また、和風の世界観を演出するため、縦書きや明朝体、和風フォントの使用、四季の要素を取り入れる、和風庭園の画像も活用するなどの工夫を行いました。追従するメニューボタンを押すとメニューとともに電話番号も現れ、問い合わせがしやすくなっています。雰囲気とともに、利便性も大事にして制作を行いました。
ファーストビュー｜商品を主役にした設計
物販の主役である商品画像を大きく使ったファーストビューにしました。実際のホームページではフェード形式のカルーセルになっており、いくつかの主力商品がかわるがわる現れるようになっています。黒で高級感を演出し、ワンポイントカラーは和菓子店にふさわしい抹茶色にしました。また、縦書きや明朝体で和風の世界観を醸し出しています。
右上のメニューボタンは追従し、どこからでも呼び出せるようになっています。
おすすめ商品｜迷わせない設計
お品書きページへの誘導におすすめ商品の紹介を添えることにより、何を買えばいいかユーザーを迷わせすぎないようにしました。
左側に大きく商品写真を配置し、右側に「おすすめ」のふきだし・商品名・価格・説明文を整理して掲載することで、情報の理解しやすさと購買意欲の向上を両立しています。
写真のシズル感とテキストの役割を分けることで、視覚と情報のバランスを取った設計を意識しました。
季節感とコンセプト｜和菓子の価値を伝える
四季折々のコンテンツも載せてみました。四季を押し出すことにより、和風の世界観をより深められると思います。
また、コンセプトセクションでは和菓子の背景にある価値や想いを言語化することで、価格ではなく“意味”で選ばれる設計を意識しました。その下の商品画像は印象に残りやすい見せ方を意識しています。
ユーザーにとって「どんなお店なのか」が明確になり、記憶に残るページになることを狙っています。
店舗情報とフッター｜来店・問い合わせにつなげる
店舗情報・アクセス・営業時間・電話番号をひとまとめにし、「来店」や「問い合わせ」につながる設計にしています。
電話番号は視認性を高めたデザインを心がけ、スマホビューではボタンになるようにし、利便性を高めました。
また、店舗外観写真と地図の組み合せは「実在するお店である安心感」を視覚的に補強しています。
必要な情報へ迷わずたどり着けるよう、ユーザビリティを重視した構成にしました。
まとめ｜世界観と利便性を両立したホームページへ
今回のリニューアルでは、
・商品画像を主役にしたビジュアル設計
・和風の世界観を統一したデザイン
・回遊性の向上
・来店・問い合わせにつなげる情報設計
といった点を重視しました。
これからも制作をつづけ、進捗など投稿していきます。
引き続きよろしくお願いいたします。
