1/8 カフェHPから学ぶサイトカラー vol.3

日付が変わってしまいましたが、1/8の毎日更新HP比較をしていきたいと思います。さっきまで大学の課題をやっていてなんとなーくカフェにいきたい気分になったので気に入るサイトがあるかを調べてみました。参考にしたサイトはこちらです。

今日私が紹介するのはこの3つです。
・LA PAN
・STEEN
・コメダ珈琲店

カフェと言ったらなんとなくおしゃれなイメージがありますよね。そんなカフェのHPでは凝ったデザインが多かったです。

LA PANでは、高級クリーミー生食パンを売りにしていて、トップページで自信のある食パンの写真が使われています。また、外側に白い枠線があるのですが、ページを下にスクロールしてもこの枠線がついてきておしゃれです。メニューバーは、コンセプト・メニュー・ドリンク・アクセスの4項目で、それぞれの下に波線のようなバーがついています。カーソルを当てるとクルクルと回転して、クリックしたくなります。

次はSTEENです。STEENはとても凝ったデザインで、webページというより、紙媒体のようなデザインの印象を受けました。こちらのメニューは左側にある、ドーナツの周りに添うように並べられています。ドーナツを売りに出しているので、それをうまく活用したデザインであると思います。メニュー項目は多く、concept,menu,gallery,goods,news,accessとコンテンツが多い印象を受けます。

最後にコメダ珈琲店です。チェーン店ですが、コメダの味が出ていると思いました。メニューバーは、コメダの魅力・メニュー紹介・店舗検索・採用情報と絞られていて、利用客向けではない採用情報まで入っていました。デザインもそこまで凝っていない印象です。

カフェって落ち着く場所だと思うんです。仕事もできるし、本も読めるし、好きなことをして心を落ち着かせることができる場所です。その印象がホームページにもあらわれているような気がしていて、どのサイトも派手な蛍光色だったり、赤とか黄色とかそういう色じゃなくて、茶色のように珈琲を連想させる落ち着いた色が使われていると思いました。

そこでここからは、どんなときにどんな色を使ったらいいのかについて調べて私なりにまとめてみました。

色はwebサイトの満足度を左右する要因の一つで、その理由として色がユーザーがあることを連想させるプライミング効果を引き起こすことにあります。

言葉や物体の認識による先行刺激（プライム）が、後の課題・行動（トリガー）に無意識的に影響を与える効果
引用元:https://uxdaystokyo.com/articles/glossary/primingeffect/

この、プライミング効果をWEBサイトに応用すると、WEBサイト全体の色によって別の事柄を想起させやすくなります。

1. 赤色

引用元：The Psychology of color in marketing and branding

皆さんはどちらのボタンをクリックしたくなりますか。どちらのがCVRがいいのかABテストを実施したところ赤になったそうです。誰しもが赤のがいいということではなく、人それぞれです。
赤はエネルギッシュで活動的な色なので今回の結果が出たのかもしれません。また押させたいボタンは赤にすると効果的かもしれません。

メリット：愛・情熱・太陽・生命・恋
デメリット：危険・怒り・戦闘・破壊・闘争
引用元：https://mag.ibis.gs/creative/design/colordesign_200803/

2. 黄色

メリット：活発・天真爛漫・無邪気・幸福・軽快
デメリット：危険・緊張・注意・幼稚・希薄
引用元：https://mag.ibis.gs/creative/design/colordesign_200803/

黄色は元気や希望をイメージさせます。若々しさや愛嬌のあるイメージを与えてくれるので、家族や子供をテーマにしたwebサイトと相性がいいようです。

HP比較という観点からずれてしまったので、今回はこれくらいにしときますが、時間のあるときに他の色もまとめてみたいと思います。どんな印象をユーザーに与えたいのかによって色を工夫したいですね。

このサイトがさまざまな色についてわかりやく書かれているのでぜひ覗いてみてください。→ https://mag.ibis.gs/creative/design/colordesign_200803/