【サイト分析】ヤマとカワ珈琲店（余白で世界観/心のゆとりを作る/情報を絞る）
1. サイト概要
サイト名：長野県長野市のコーヒー豆屋『ヤマとカワ珈琲店』
サービス内容：コーヒー豆ネット販売/定期便/ギフト/オリジナルドリップバッグ印刷
2. サイトの目的
このサイトは主に新規顧客獲得（来店/定期便/ギフト）を目的として作られていると考えられます。
3. ターゲットユーザー
想定されるターゲットは以下だと感じました。
年齢層：30~60
性別：ー
ライフスタイル：日常的にコーヒーを飲んでいる/コーヒー好きな知り合いがいる/珈琲扱い店を経営している
ニーズ：豆にこだわったコーヒーを自宅で気軽に楽しみたい/店舗のコーヒーをブランディングしたい（ドリップバック印刷）
4. ファーストビュー分析
最初に目に入るファーストビューでは、
キャッチコピー：文言からオンライン販売をメインとしていることが一目でわかる。こだわりがわかる。
メインビジュアル：専門の機械から、コーヒー豆を販売していることが一目でわかる。ゴールドシールから特別感を感じる。信頼感を得ている。
印象：デザインに頼らずシンプルに魅せることで商品に自信を感じる。本格的。
ユーザーに信頼感を与えるデザインになっています。
5. デザインの特徴
カラー
メインカラー：テキスト/ボタン#24395B 背景#fff
サブカラー：タグ#999
アクセント：#df9d34（ゴールドベージュ）
ハンバーガーメニュー:#24395B #fff
与える印象：ゴールド・ネイビーのトーンを落とすことでで落ち着きを感じる印象となっている。ゴールドを入れることで高品質に思える。
フォント
使用フォント：NotoSans 英(見出し、装飾）MarckScript
印象：手書き書体の英字からカフェ感が出ている。ロゴと世界観を合わせている。NotoSansを使用することで読みやすさ重視となっており、誠実に感じる。
レイアウト
余白 広め。背景色をつけないことで心にゆとりを持って情報を探すことができる。この心のゆとりがカフェと繋がりを感じる。
視線誘導 情報量を極力減らすことで自然と視線誘導ができている。一般的に写真を隣に置くレイアウトが多い中、余白とネイビーの文字のみで構成されているコンテンツが美しい。コンテンツ上下余白を広く取り、画面いっぱいの白と文字のみになるタイミングが世界観を作り出している。
情報の整理 情報が絞られており、非常に見やすい。「伝えたいこと」と「売りにしているもの」がトントン拍子に頭に入ってくる。
6. UI（ユーザーインターフェース）
使いやすさの観点では
・販売コンテンツが写真とテキストの箱で丸ごとボタンになっている
・「マイページ」ボタンがあることで会員になれる環境であることがわかる
・「カートを見る」ボタンからオンライン販売があることがわかる
・ハンバーガーメニューが背景とのコントラスト比が高く見やすい
・商品ページに人んき商品などのラベルが貼られておりわかりやすい
7. UX（ユーザー体験）
・FVから「何にこだわっているのか」「実績」「コーヒー豆販売」の情報が伝わる
・オンラインストア紹介セクションでは、実際の商品やイメージ画像がテキストと同じ箱になっており想像しやすい。
・メッセージセクションでは、余白を画面いっぱいにとることで「ほっと一息」と感じる心のゆとりを持って読むことができる。
・スタッフインタビューセクションがあることによって、店舗で飲食をできることや店内の雰囲気を感じることができ、行動意欲が湧く。
・ヘッダーではプロフィールとコンテンツが左右で分けられており、フォントサイズ/ウェイトを変えることで情報が探しやすい。
8. コンテンツ構成
サイトの主な構成は以下です。
ファーストビュー
サービス紹介
強み
おすすめ商品
法人向けサービス
ブログ
スタッフインタビュー
9. 良いと感じたポイント
・余白を大きくとることで心のゆとりができる。
・情報が絞られておりまとまっている。
・実際の写真が多く購買意欲につながる。
10. 改善できそうなポイント
FVにあるコーヒー豆紹介ボタンがキャッチコピーのようになってしまっており、クリック率が下がると思われる。→ネイビーの丸に白字ボタンで統一し、矢印など装飾をつけてクリックできることをアピールする。
ヘッダーに情報量が多い→ブログのお知らせの配置を変える/マイページ、カートボタンを右に固定配置に変更/ 「サービス」「こだわり」など、アコーディオンに収納して情報量を減らす
法人向けサービスのドリップバック印刷は他にない強みだが強調できていない。→印刷済みのドリップバックの写真や卸売時の写真を大きく配置し、一目でサービスがわかるようにする
スマホ画面で見た時に法人向けサービスの画像がリピートになってしまっているので、レスポンシブデザイン/CSSを調整する。
11. 今回の学び
今回のサイト分析から、
余白を広く使った世界観/心のゆとりの出し方
情報を絞る重要性
ヘッダーでプロフィールとコンテンツをガッツリ分ける手法
などを学ぶことができました。
今後のWebデザイン制作にも活かしていきたいと思います。
