塩パン パン・メゾン様 WEBサイト制作

OVERVIEW

店舗サービスWEBサイトの制作、WF〜デザイン、STUDIO実装(レスポンシブ含)まで対応。||使用ツール:Adobe XD、Photoshop、STUDIO||

YEAR 2021

■デザインコンセプト■

『”元祖塩パン”の信頼感や愛着が湧く、素朴だが抜け感のある親しみやすいデザイン』


◎課題

・これまでSNSでの発信がメインで、抽象度の高いコンセプトや商品のストーリー、どんな想いで作られているのかということ発信しきれていなかった。

・情報が、SNSやぐるなび、Googleレビューなどで各所に散らばっており、お客様にお店の世界観や想い、商品、お知らせなどをわかりやすくお伝えする場所がなかった。


◎前提

・対象ユーザーは都内をメインとした幅広い年代の方。

・最新の情報などはSNS( 主にインスタ)を使用していきたいので、掲載コンテンツは必要最低限にして、機能としてSNSの埋め込みが必要。


◎解決策

・WEBサイト上で、お店が伝えたい情報とお客様が必要な情報を整理し、利用前〜利用後のお客様に対して適切な情報設計を行う。

→お店の概要や店舗情報が一元化されていることで、お客様がWEBサイトを見れば欲しい情報にすぐにアクセスすることができ、新規来店・リピート来店につなげることができる。

・お店の世界観(商品のストーリーや想い)を知ってもらうことで、よりブランドに愛着をもってもらえる設計にする。

→顧客ロイヤリティの醸成


◎どんな印象を与えるサイトにするか?

・”元祖の塩パン”であり、どのような想いから生まれたパンなのかがお客様に伝わることで商品に対する信頼感や愛着といった感情が湧くサイト。

・シンプルな塩パンをメインに、パンの素朴さや美味しさが伝わる。

・焼き立ての美味しさをイメージしてもらえる。

・幅広い年代の方に愛着を持ってもらえるようなシンプルで柔らかみのある温かい雰囲気。


◎どこからそう感じる?

・ファーストビューは塩パンの写真とロゴをメインに。塩パンは、お店のディスプレイの象徴であるカゴいっぱいに入った塩パンをイメージ。塩パンがカゴいっぱいに入っているイメージ=”塩パン パン・メゾン”と想起していただけるように。

・ロゴで使用されている深緑色を使用し、統一感があり信頼感のある配色にしています。

・背景色は白ではなく、薄いクリーム色を使用することで、パンのブラウンとロゴの深緑が浮くことなくなじみます。

・今回のサイトの目的が、お客様がご来店いただく際の補助ツール(情報更新はSNS)ということでしたので、必要な情報はわかりやすく掲載。

・その他、SNSの小さな画面では伝えきれない店舗の世界観や雰囲気を、サイトだからこそ表現できる大きさを有効に利用し、余白を使用し抜け感のある印象を持たせています。



■デザイン詳細■

-配 色:

ベースカラー:薄いクリーム色

メインカラー:ロゴの深緑

アクセントカラー:ブラウン

-テイスト:シンプル&親しみやすい

-フォント:A1ゴシック、筑紫A丸ゴシック、Shippori Mincho B1

見出しはロゴのフォントに似ているものを使用し、サイト全体の世界観を統一いたしました。



<404ページ>


<閲覧イメージ>


WEBSITE