タイトル
mockup

カフェ情報サイト

  • Web design
  • Ai
  • Ps

架空のカフェの情報サイトのトップページをデザイン。会員登録しているユーザー
は口コミを投稿したり、別のユーザーをフォローしたり、SNS要素を持つサービスのサイト
という仮定とする。サービスのテーマは、忙しい毎日のなかで一息つけるコーヒーショップを
探すお手伝いをするというもの。      

デザイン全体を見る

STRUCTURE

サービスのテーマを元に、サイトの目的はコーヒーショップを見つけてもらう事に設定。
トップページは様々な切り口でコーヒーショップを見つけてもらうコンテンツを表示する
ように構成を考えた。

構成図
図
First view

今いる場所の近くのコーヒーショップを検索したい場合や、特定のロースターの豆を使用しているお店を探したいなど、 すでに探す条件が決まっている人向けにファーストビューに設置した。

Contents

行ったことのないコーヒーショップ探しや暇つぶしにサイトを眺めているユーザーはサイトのコンテンツを楽しむことで行きたいコーヒーショップに出会うように導線を作りたい。そのため、トップページに各コンテンツの入り口を設けた。コンテンツの配置は多くの人が興味のあるコンテンツから特定の人に対してのコンテンツという順番で設置。

Content1

口コミ評価のランキングのコンテンツを1つ目のコンテンツ入り口に設定。口コミサイトを見ているユーザーが一番興味のあるコンテンツだと考えられる為、最初のコンテンツとして設置。

Content2

最新の口コミを2番目のコンテンツとして設置。新しい情報の表示と、また、ユーザーがアクティブに投稿しているサービスだという点のアピールは、サービス利用の向上に繋がると考えられるため2番目に設置  

Content3

好きなコーヒーの味から自分だけのお気に入りのコーヒー/コーヒーショッップを見つけたい人のために質問に答えるだけで好みのコーヒーの味に沿ったコーヒーメニューやコーヒーショップを提案するコンテンツを3つ目に設置。このコンテンツに興味を持つユーザーは流行りではなくコーヒーに対してある程度知識のあるユーザーと考えられ、割合も少ないと考えられるため3番目に設置。

Content4

コーヒーに関する記事。コーヒーが好きでもコーヒーに対しての知識を深めたいユーザーはマニアックな層と考えられるため、4番目に設置。記事は登録されているコーヒーショップが書くものであり、記事を読むことでユーザーが新しいコーヒーショップに出会える。  

DESIGN


サービスのテーマを元に穏やかさ、お洒落さをデザインのイメージとして設定。
彩度が低い色味を使い落ち着いた雰囲気で統一した。アクセントカラーに2019年の
カラー・オブ・ザ・イヤーに選ばれたLiving Coralを使用することで、
今年のトレンドを取り入れ、暗い雰囲気にならないように注意した。

説明図

Color

#cededd
#ef6a6a
#ffffff
#0f0f0f

Font

キャッチフレーズ:Bree Serif
各大見出し:Roboto Thin
本文:游ゴシック体