カフェサイトのモックアップ集合 OPEN Cafe Site!

課題名

飲食店(カフェ)のWebサイト

課題内容

指示内容
  • · 天⽩区植⽥に2024年9⽉1⽇にオープンする「ワズカフェ(Was Cafe)」
  • · 駅からも繁華街からも離れた住宅地
  • · 既存客のいない新規店
  • · 想定される競合店は、都⼼にも郊外にも展開するカフェチェーン、喫茶店、ファミレスなど
クライアントの要望
  • · 店の知名度を上げて集客につなげること
  • · 地域の⼈たちが気軽に利⽤できるお店であることをアピールしたい

制作意図

コンセプト

地域住民に周知いただき憩いの場として根ざしていくために、”場所”に焦点を当ててデザインを考えました。

テーマカラー 背景色は、立地が植田駅から坂を上った見晴らしのよい丘の上にあることから、そこから眺められる空の青さと、木造建築であることから木目柄に設定しました。
メインカラーは、木目柄に合わせて焼き印風に仕上げ、小見出しやポイントイラストなどにあしらいました。
ロゴ 店名を覚えてもらうためと、カフェであることが一目でわかるように、店名とカップのモチーフをメインにしました。
一押し商品であるコーヒーとパンを連想させるイラストを配置し、飾りとして使用した書体の”&”を湯気にみたて(coffee&bread)、Wasの”W”と人々の”輪”を連想しサークルに納めました。
ユーザビリティ TOPページにお店の特徴3点を提示し、そこで興味を持ったところから各ページを参照できるようリンクを貼りました。メニューページでも全体のメニューを把握できる画像を作成し、各リンクを貼りました。

制作工程

制作日

2024年7月2日~7月31日

制作時間
  • ワイヤーフレーム 約10h
  • デザインカンプ 約16h
  • コーディング(レスポンシブル含む) 約60h
制作環境 Windows11 / IllustratorCS5 CC / PhotoshopCS5 CC / Figma / Visual Studio Code
風船を持つキャラクターの絵

<感想>

デザインに苦手意識があり、ワイヤーフレームとデザインカンプを作るのにとても苦労しました。普段から色んなサイトを見ておけばよかったです。コーディングは、背景画像を多くしてしまったせいで配置が本当にえらいことになってしまいました。レスポンシブを優先したので動きまでつけられなかったのですが、この時点では全力で作りました。

風船をつけた猫の絵