Work03:新規カフェストアのウェブサイト

課題概要

「was cafe(ワズ・カフェ)」新規オープンする店舗のWebサイトを作成します。一番の目的は、ウェブサイトによって店の知名度を上げて集客につなげることです。店舗は駅からも繁華街からも離れた住宅街に新しくオープンします。クライアントの要望として、既存客のいない新規店舗のWebサイトなので、初めて訪れた人が見やすく迷わない構成・デザインにすることや、地域の人たちが気兼ねなくお店に行ってみたくなるような雰囲気づくりや、Webサイトを見て「行ってみたい」と思わせるコンテンツを作りなどがあります。また、できればスマホでも見やすいレスポンシブデザインを求めています。

制作概要
サイト仕様 幅960px程度(ブラウザサイズに合わせて変化するデザインでも可)
構成要素 サイトロゴ、メインビジュアル、キャッチコピー、オープン告知(9月1日オープン)、お店のコンセプト、店舗情報(所在地、電話番号、営業時間、アクセスマップなど)、喫茶メニューは必須要件。
アプローチ 写真は基本的に支給したデータを使うこと。どうしても他に使用したい素材がある場合は商用利用が可能な素材であることを確認の上、要相談。素材として配布された写真などから自分なりにコンセプトを考えて、店の集客につながるWebサイトを提案してください。
WAS COFFEE STAND in the PLANETARIUM 作業環境|AiCS5,PsCS5(Win10)
デザインカンプ作成期間10日
コーディング作成期間20日

ターゲット

駅から遠い住宅街であることを考慮し、地域のお客様と遠方からお車で来店のお客様をターゲットに想定しました。地元の科学館で役目を終えたプラネタリウムをコンセプトにすることによって、地元を愛する天体ファンを取り込み立地条件の悪さをカバーします。また、天文イベントを通してお客様同士の口コミからの集客も目指します。

現状分析

新規オープンのため既存の知名度はなく、また駅からも離れているため積極的な広告が集客のカギとなります。老若男女問わずカフェの魅力を直感的に理解できるようなウェブデザインが求められます。

ウェブサイトの提案

  • ファーストビューで、ここがカフェサイトであることを明確に伝える。
  • 店舗名や本文は大きくはっきりとした文字で、年代や性別や色の感じ方を特定しないサイトをめざす。
  • ベースカラーはモノクロ、アクセントカラーはピンクとブルーを使用し、性別を感じさせないデザインにする。
  • レスポンシブ対応。特にカフェサイトの利用者はモバイルからの流入が最も多いと思われるため、モバイルから見たときにもっとも見やすいように配慮する。
  • 縦長の構成のため、最後まで楽しくスクロールしてもらうために、フェードインの効果をつける。
  • カフェメニューは食品が美味しそうに見えるように、鮮やかな色を伝えるために白背景とする。
  • なぜプラネタリウムなのか。店舗オープンに至るまでのストーリーを感動的に伝え、お客様の心をとらえる。
  • イベント情報などの日々更新されるものは店主とお客様双方が使い慣れているSNSを活用する。お店の営業で忙しい店主 の負担を軽減し、またサイトのレイアウト崩れを防ぐ。
  • ロゴは、プラネタリウムとコーヒーミルのイメージを融合させたもので、パッケージにも安価で転用可能な一色刷り。
  • 星を見上げる人が、すべての情報を、星のメッセージとして受け止め見つめている情緒的な余韻を表現。

Work03