デザイン勉強 ver.5 : web CAFE dot

1.案件定義

クライアント情報： CAFE dot

競合会社・企業：周辺にあるカフェ

制作物：webサイト

課題：
   ①認知度がない
   ②Instagramだけではこだわりが伝わらない

期待する効果： 
　①店を認知 → 足を運んでもらつ
　②こだわりを伝える → 他店舗との違いを明確化

完成物を見た人に与えたい印象：
　①行きたい
　②美味しそう
　③こだわりがすごい

必須コンテンツ：
　①mv → アクセスへ移動するボタン
　②メニュー → DRINK・DESERT・FOOD
　③ブログ → 最新の2.3記事を表示
　④PICK UP → コーヒー・焼き菓子・パンケーキ
　⑤フッター → 店舗の情報

ペルソナ：
　・性別：女性
　・年齢：10〜20代
　・職業 (収入)：90万〜300万
　・家族構成：一人暮らし
　・居住地：東京
　・趣味：カフェ巡り
　・休日の過ごし方：友達とインスタで調べたカフェに行く
   ・悩んでいること：最近はインスタの写真に惹かれて行ったお店が、想像と違うことがある
   ・何を探しているか：ちゃんと美味しくて、映えるカフェ

トンマナ：
　・印象：シンプル・無機質感
　・色：ベース #FFFFFF　メイン #495464　アクセント #DEDEDE
            → 無機質をイメージさせる色合い
            → 同系色で雰囲気を出す
            →  カフェのイメージと合わせる

　・素材：全て自分で用意

　・タイポグラフィー：Bahnschrift
           → 無機質なデザインに合うシンプルなフォント

　・レイアウト： 正方形などを用いてシンプルに



2.デザインの言語化
・カフェの雰囲気をWebサイト全体で再現
   → このWebサイトがおしゃれで好き ＝ このカフェも好き
・MVで店の内観やコーヒー、食べ物をスライドショーで流す
   → 最初にしっかりお店をアピールして離脱率を減らす
・MVにアクセスに移動させるボタンを配置
   → このサイトの目的は、カフェに足を運んでもらうこと
・白背景の商品写真で全体の雰囲気を統一
・ブログは重要度が低いため、記事を2.3個程度表示    
   → このカフェのターゲットはインスタをよく利用する人
   → 文章はほとんど読まれない可能性が高い
   → 知ってもらいたい新商品についてはInstagramを利用
・MENUとBLOG部分の余白が少ない
   → PICK UPに入る前に余白を大幅に確保
・PICK UPはより興味を惹くために、画像を大きく配置
   → 雰囲気に合ったアイコンも追加
・フッターの店舗情報は、アイコンで視認性を高める