レモンな向上心|WEBサイト100選

No.020 コメダ珈琲店 公式WEBサイト

*視点


名古屋発祥のコーヒーチェーン、コメダ珈琲店。元々固定ファンの多い老舗ですが、

近年ではそのボリュームたっぷりのメニューが”逆写真詐欺”(※メニュー表の写真よりも明らかに大きな商品が提供される)とSNSで話題となりました。

今回はそんなコメダ珈琲店のコンセプト”「街のリビングルーム」としてくつろぎを届ける”という思いが明確に伝わってくるコメダ珈琲店 公式WEBサイトをレビュー。

こだわりあふれるディテールに着目してまいります。

 

フォント


  • 見出しや本文には、ゴシック体が使われており、読みやすいレイアウト。

  • 太字・大きめサイズの見出しで視線を誘導。本文内もストレスなく読める行間にまとまっています。

*色彩計画


  • ベースは白背景に木材やベージュ〜ブラウンを配し、温かみと安心感を演出。

  • アクセントとして深い赤を用いた縞模様のセクションが入る。
    店舗内で使用されている同じ配色のソファーをイメージしたデザインがいかにも”コメダらしい”雰囲気を引き立てます。
  • 見出しには濃いグレーが使われ、本文の視認性を強調。

    No.020 コメダ珈琲店 公式WEBサイト レモンな向上心|WEBサイト100選
    No.020 コメダ珈琲店 公式WEBサイト レモンな向上心|WEBサイト100選

*サイトデザインについて


  • メインビジュアルには大きく”心にもっとくつろぎを”の言葉を配置。
    その後ろには温かみ溢れるメニューイラストと写真が6つ並び、アニメーション付きで入れ替わります。
    どの画像にもくつろぎ・安心・おもてなしを感じさせます。
  • ヘッダーは縦型に配置。ナビゲーションが並び、左端に固定されているのでスクロールしても必要な情報にアクセスしやすい。

  • セクションごとの余白が充実しているので自然とスクロールが進む構成。背景を各セクションで変えている点にもこだわりを感じます。

  • 各見出しに対応した写真が効果的に挿入され、文章と画像の配分が読みやすい。

  • リンクがついた箇所の写真はサイト全体で一貫してホバー拡大する構造。UIとして分かりやすい効果。
  • レスポンシブ対応も良く、スマホ閲覧でもストレスなく見られる設計に配慮されています。

    No.020 コメダ珈琲店 公式WEBサイト レモンな向上心|WEBサイト100選
    No.020 コメダ珈琲店 公式WEBサイト レモンな向上心|WEBサイト100選

    *所感


コメダ珈琲店 公式WEBサイトブランドの世界観とサイトデザインがリンクしており、ユーザーにとって共感しやすい深い“らしさ”が感じられました。

くつろぎ・安心・おもてなしという核が本文であったり、様々な画像であったり、UI全体から感じられ、整合性のとれた雰囲気づくりが秀逸です。

サイト全体を通して“居心地の良さ”を視覚的に伝える、サイトデザインとなっておりました。

 

レモンな向上心|WEBサイト100選

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です