ベーカリーショップのサイト制作

OVERVIEW

スクールの卒業制作として、架空のベーカリーショップのWebサイトを制作しました。企画、WF作成、デザイン、コーディングまで担当いたしました。

YEAR 2021

制作範囲:企画、WF作成、デザインカンプ、コーディング(HTML/CSS/jQuery)、レスポンシブ対応(スマホ)
制作期間:約1ヶ月
制作時期: 2021年7月



◆デザインカンプ 


【コンセプト】

世界各国のパンを販売するベーカリーショップ


【サイトの目的】

興味を持ってもらい来店につなげること


【ターゲット】

・メインはカフェ巡りや旅行が好きな20~30代女性(外出や海外旅行が好きだが、今は時勢によりなかな行けずにいる)
・サブとして、ママさんやお店の近所に住んでいる人(家族連れなど)


【デザインイメージ】

・食べたいと思ってもらえるようにパンの写真を多く使用する

・「世界各国」のパンを販売していることが分かるように、国旗や飛行機など旅を連想させるモチーフを取り入れる

・食欲が湧いてくるようなあたたかみのあるイメージ


【こだわった点】

◇配色

おいしい焼き立てのパンを連想させるブラウンをメインカラーに使用しました。

アクセントカラーには空や地球儀の色であり、旅を連想させるブルーを使用しました。


◇フォント

英文:流行に敏感で新しいもの好きなペルソナに届くように、おしゃれで少し遊ごころも感じられるJosefin sansを使用しました。

和文:視認性の高い游ゴシック体を使用しました。


◇ファーストビュー

・お店の写真を大きく配置することで、ひと目でパン屋と分かり、お店の雰囲気が伝わるようにしました。

・右下にスクロール促しのボタンを配置し、離脱を防ぐようにしました。


◇Line upセクション

パンの画像に各国の国旗をのせ、どこの国のパンなのかひと目で分かるようにしました。

マウスホバーで横に傾かせることで、楽しい雰囲気や遊びごころを演出しました。


◇Lessonセクション

スリックを使用し過去の開催の写真を流すことにより、どんな雰囲気でパン教室が行われているのか分かり申し込みに繋げやすくしました。


◇その他

・各セクションの下に飛行機のイラストを配置し、軌道で目線を誘導しスクロールしてもらいやすくなるようにしました。

・スクロール追随のトップに戻るボタンを配置し、どのセクションを見ていてもすぐにトップに戻れるようにしました。