カフェのサイト(架空)

OVERVIEW

HTML&CSSを用いて架空のカフェのサイトを制作しました。レスポンシブ対応もしています。

YEAR 2020

コンセプト

”日々、忙しい女性に食で元気になってほしい”そんな思いから食材にこだわったカフェをイメージしてサイトを作成しました。

ターゲット

20代後半〜30代女性。平日は忙しいけれど、健康・食(オーガニック)に興味がある女性。

・お店の検索はインスタ派。インスタで気になるお店を見つけるのがすき。

・こんなご時世なので、お店には予約して行きたい。予約は電話ではなく、隙間時間に手軽に予約できるオンライン予約が良い。

サイトの目的

①お客様の集約、オンライン予約を増やすこと ②インスタのフォローを増やすこと

こだわりポイント

トップイメージはお店の雰囲気がわかるようにjQeryを用いてスライドにしており、3枚の画像が動くようにしています。サイトは全体的にシンプルなデザインですが、色鮮やかな写真を配置することでインスタのフォロー増に繋げたいと考えています。

ユーザーの使いやすさを意識して、ボタンはホバーすると色が変わるようにしています。目的である予約を促進するために、サイトを下にスクロールするとオンライン予約ボタンが並走するように設定しています。

レスポンシブ対応について

スマホは特に操作のしやすさを大切にしました。画面の下の部分に固定のメニューを設定。その他のボタンも押しやすいように大きさを大きくしました。(下図の固定メニューは画面をスライドさせても画面下で固定するように設定しています)

サイトの全体像