03.HTML&CSS

カフェのWEBサイト制作

温かみがありパンが美味しそうなカフェだと印象付けられるWEBサイトを目指した。様々な年齢の方が使いやすいよう可読性や操作性に留意しデザインした。

課題概要

クライアントから制作依頼された仕事という前提で、開業準備中のカフェのWebサイトを制作する。クライアントの要望を理解し、指定原稿を使用しつつ⽬的を達成するためにはどんなWebサイトにすればよいかを検討する。デザインとコーディングを⾏い、実際にネット上で閲覧できる作品を制作する。

目的

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

ターゲット

・出店地である天⽩区植⽥の近隣住民
※出店地は、駅からも繁華街からも離れた住宅地。既存客のいない新規店という設定

デザインのポイント

1.アクセントカラーは赤を採用。コーヒーの実の色であり、遠くからでも視認性が高く食欲が沸きやすい色ともいわれるため。
2.ロゴはコーヒーを想起させられるようカップをモチーフにした。
3.グランドオープンから賑わうことがその後の話題性・顧客獲得に繋がるのではと考え、全ページにオープン日時を配置し、開店直後の来店促進を狙った。なおオープン後の更新性を考慮し、オープン告知文を上部帯で配置した。
4.PCではサイドメニューの方式を採用し、クリック数少なくページ遷移できるサイト構成とした。
5.下層ページへ遷移しなくとも店舗概要が把握しやすいよう、トップページでに各下層ページの情報を一部を掲載したり、メニューがスライドで表示されるようにしたりした。
6.ランチサービスのページでは、ランチタイム限定惣菜パンメニューをステップ形式で掲載。分かりづらさを軽減し、選べる楽しさを演出した。

  • ■制作物:WEBサイト、デザインカンプ
  • ■企画・制作:60時間
  • ■ツール:Illustrator(CS5,CS6)、Photoshop(CS5,CS6)、Visual Srudio Code