WORK3

飲⾷店(カフェ)のWebサイト制作

課題内容
クライアントから制作依頼された「仕事」という前提でカフェ(喫茶店)のWebサイトを制作。
クライアントの要望を理解し、⽬的を達成するためにはどんなWebサイトにすればよいかをよく考え、デザインとコーディングを⾏い、実際にネット上で閲覧できる作品を制作する。
制作フロー指示

カフェについて

  • 駅からも繁華街からも離れた住宅地
  • 既存客のいない新規店
  • 想定される競合店は、都⼼にも郊外にも展開するカフェチェーン、喫茶店、ファミレスなど

Webサイトを作る⽬的・クライアントの要望など

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

サイト仕様

  • 幅1280pxのブラウザで違和感なく閲覧できるサイズにすること
  • トップページ含め最低4ページ構成
  • コンセプトに合ったテーマカラーとロゴマークを作成する
デザインコンセプト
どんな年代・性別でも親しみを持てるWEBサイト
制作意図
ロゴ:一目見るだけでカフェと分かるように、また遠目からでもわかるようにシンプルにコーヒーカップだけのデザインにした。
サイト配色:カフェを連想させるブラウン系の色をベース、メインカラーに採用し、アクセントカラーは安心感を考えて明るい緑を採用。
画面に1セクションずつ表示されるように余白をじゅうぶんに取り、セクションごとに伝えたいことが伝わるようにデザイン。
メニューページでは、情報量が多いのでスクロールのストレスを軽減するため、各メニューごとのリンクメニューを上部で固定するように設定。また、レスポンシブではスマホ端末で一番見やすいと考えアコーディオンメニューを採用した。
全体を通して、どのように表現したらユーザーが見やすいか?を考えデザイン・コーディングを行った。
制作環境
Windows Illustrator Photoshop CS5 CC
HTML CSS Javascript
製作時間
  • デザイン制作:30時間
  • コーディング:68時間