36.8℃

Cafe site

画像の代替テキストを入力

コンセプトからデザインを考えるのが楽しかったです!その分コーディングが苦戦しました。。


課題名 飲食店(カフェ)のWebサイト制作
課題内容

新規オープンするカフェのWebサイトのデザインとコーディングを行い、 際にネット上で閲覧できる作品を制作する。


<カフェについて>

  • 店舗は、天白区植田に2021年10月1日にオープンする「ワズカフェ」
  • 駅からも繁華街からも離れた住宅地
  • 既存客のいない新規店、近くに競合店有り(都心にも郊外にも展開するカフェチェーン)

<クライアントの要望>

  • 一番の目的は見せの知名度を上げて集客につなげること。
  • 地域の人たちが気軽に利用できるお店であることをアピールしたい。
  • 顧客を限定するような極端に個性的・先鋭的なものは望まない。

<注意事項>

  • 上記サイトマップに従ったサイトにすること。
  • 支給された原稿の文言はすべて盛り込むこと。
  • 写真は支給された素材から選んで使うものとする。
コンセプト

住宅地の中にある、ナチュラルで少しレトロなカフェ。

→競合店と差別化を図る為に、立地である“住宅地”に注目した。
アットーホームで優しい雰囲気を出し、
今の流行りでもあり、少し懐かしさを感じるようなレトロさを組み合わせた。


制作意図

<ターゲット設定>
住宅地とのことだったので、主婦や女性をターゲット。 女性に設定したのは、カフェの写真をSNSに上げたり、 近所の方に口コミで伝えたりと集客に繋げるきっかけが増えると考えた。

<訴求ポイント>
コンセプトをデザインに入れ、初めてホームページを訪れた人でも、 操作が迷いにくく、視覚的にみて分かりやすくした。

<ポイント>

  • 住宅地にあるというカフェの特徴を 印象付ける為、家の形にトリミングし、家の形のアイコンをあしらいとして入れた。 カフェの雰囲気を出したかったので、 店内の写真を使った。 照明が家の天井にあるように魅せた。
  • コンセプトは、文章を縦書きで 配置することで目に止まるようにした。
  • メニューでは写真を組み合わせることで 商品をすぐに連想できるようにした。 写真のコントラストを下げたり、 角丸でトリミングしすることで優しい雰囲気に まとめた。

<ユーザビリティーポイント>
  • ナビゲーションを左に固定し、大きく背景色を付けることで視覚的に分かりやすくした。マウスオーバーした際に色を付けた。
  • スクロールした際、見ているページのトップに移動できるように、  ページトップボタンを固定し、設置した。
  • メニューページで各項目(ランチ・パン・ドリンク・スイーツ)のナビゲーションを上に設置し、クリックすると見たい項目にリンクできるようにした。
    下までスクロールしないと見ることができないという動作をなくすことで、素早くユーザーが求めている情報を得ることができるのではないかと考えた。

制作時間 ワイヤーフレーム 5時間
デザイン制作 22時間
コーディング 25時間
制作環境 Photoshop CS5/CC
illustrator  CS5/CC
Visual Studio Code
© 2021 Webマーケティングデザイナー科養成科 第25期生 生徒作品

ページの先頭に戻る