あしらいの私

Bakery Cafe WAKU様の
WEBサイトリニューアルの詳細

あしらいの私
wakuのheader
wakuのheader

headerは左にロゴ。右寄りにはわかりやすくアイコンを使ったメニューを配置しています。アイコンはお店のアットホームな雰囲気を出すため、スタンプのような加工をしました。
お店からのお知らせは主にInstagramを利用しているので、Instagramへのリンクもheaderに配置しました。

headerは左にロゴ。下にわかりやすくアイコンを使ったメニューを配置しています。アイコンはお店のアットホームな雰囲気を出すため、スタンプのような加工をしました。
お店からのお知らせは主にInstagramを利用しているので、Instagramへのリンクもheaderに配置しました。

wakuのスライドショー
wakuのスライドショー
wakuのスライドショー
wakuのスライドショー
wakuのスライドショー
wakuのスライドショー

ファーストビューはお店の外観と商品であるパンの写真、3点をスライドショーにしています。お店の外観はお店に来られる方が迷子にならないよう、必ず目にするように一番最初にしました。
コロナのことで直接お店へ取材に伺うことができなかったので、写真は全てクライアントがスマホで撮ったものです。
そのまま使うとインパクトにかけると思い、ラフな線で囲んで印象に残るような形にしました。パンの一部を形からはみ出させ、見る人の印象に残ることを狙ってます。
リニューアル前のサイトに書かれていた文章で中で、一番大切にしている思いを表現しているのが「手作りで安全なパンを日常のおともに」だと思ったので、この一文をキャッチコピーに選び、配置しました。
キャッチコピーは親しみを持ってもらえるようにKosugi Maruを使ってます。強い色だと重すぎるので白文字にし、そのままだと可読性が低いので若干影をつけました。

wakuのコンセプト wakuのコンセプト

ターゲットは年配な方なので、トップページはなるべく大きな文字、大きな画像で構成しました。近くにいる年配者に老眼鏡なしで見えるか確認してもらってます。
ここからはheaderのメニューと同じものを大きく配置してます。headerのメニューアイコンに気づけなかった方が、下層ページに入れないということがないようにこの形にしました。

文章はコンセプトページからお店の特徴がわかる文章を抜粋しました。
背景にはクライアントが拘ってお店に飾っているドライフラワーを配置し、このスペースは店のこだわりを詰め込みました。
挨拶の「こんにちは、Bakery Cafe WAKUです!」から初め、お店の特徴が分かる文章の流れにしました。挨拶は特別に文字色を中タイトルと同じピンクにし、タイトル文字より若干小さい文字にしています。
お店の素材のこだわりから興味を持ってもらうことを狙っています。

wakuの商品紹介 wakuの商品紹介

元のWEBサイトは商品情報がずらっと載っているだけで、初めてお店を伺おうと思った方にはとっつきがなく不親切だと感じていました。お店のチラシを見せていただいたら、そこにはおすすめパン情報が掲載されていたので、この情報もWEBサイトに載せた方が良いと思い載せることにしました。
掲載するパンの数が多かったので、整理整頓の必要性を感じ、他のパン屋のWEBサイトを参考にしつつ、ジャンル分けをしました。
写真には透明度50%の茶色をのせ、マウスカーソルを合わせたときに茶色がとれて「美味しそう」と思ってもらえるよう工夫しました。

wakuの店舗紹介 wakuの店舗紹介

店舗情報はお店の商品が並んでいる写真を配置し、ここから店舗情報に入れると視覚的にわかるようにしました。
サイズ感が悩んだのですが、この写真なら商品が並んでいるところをたっぷり見せた方がいいと判断して、このサイズにしました。
ここだけボタンを写真の中に入れたのは、コンテンツとして写真のみだったので、写真の中にボタンがあったほうが1つのコンテンツとしてまとまるとの判断でそうしました。

wakuの最新情報 wakuの最新情報

最新情報はInstagramに書かれているので、Instagramのリンクを配置しています。写真は興味を持ってもらえそうなものをイメージで配置しました。
このお店には看板犬がいるので看板犬の写真を使い、犬好きにも興味を持ってもらうことを狙っています。

wakuのカレンダー wakuのカレンダー

クライアントは時々イベントに参加をしたり、定休日ではない日にお休みをすることがあるので、営業日を知らせるカレンダーが重要なのでトップページに配置しました。
クライアントは忙しい方なので、簡単に更新ができるシステムが良いと思い、Googleカレンダーを採用してます。しかしそのままのGoogleカレンダーだとデザインが合わないので、javascriptのライブラリ「FullCalendar」を使ってカスタマイズしています。
このWEBサイトはボタンなど重要なものは緑を使っているので、カレンダーではお休みを緑色にしました。

wakuの愛犬 wakuの愛犬

愛犬の紹介ページは、この写真のみから入れるようにしました。
お店に来る全ての方が犬好きではないので、愛犬については控えめに配置しました。犬好きは一番最後に配置しても愛情で見つけてくれると信じて、あえて目立たない位置に配置してます。

wakuのfooter wakuのfooter

このお店は電話で事前に取り置き、予約ができるので、重度の高い専用電話番号を大きく載せました。
住所やお問い合わせフォームは全てのページで表示した方がいいとの判断でFooterに配置しました。