色別Webサイトまとめ第2弾!ということで今回は緑(グリーン)です。ちなみに前回は黄色をうまく使ったWebサイトをまとめました。

黄色の効果(イメージ)をうまく使ったWebデザインまとめ

あなたは緑をデザイン上でどういうときに使っていますか?他の方の作ったデザインを見ると、どういう時に使っているか、どんな見せ方ができるのかを気づくことができるので勉強になりますね。

今回も参考になりそうなサイトをまとめてたので、緑を使うとどんなイメージのサイトになるのか参考にしていただければと思います。

緑のイメージ・特徴は?

緑のイメージについて

緑というとやはり自然や野菜を連想させることから、ナチュラル感や落ち着いた印象を特に感じます。

前回の黄色とは逆のイメージですね。やさしい印象を与えるためには効果的な色だと思います。遠くの緑を見ると目に良いというのは昔からよく聞く話です。

緑の配色が参考になるサイトをまとめました

実際に緑(グリーン)の色遣いが参考になるおすすめサイトをいくつかご紹介したいと思います。

緑にもトーンの違いで色々な色があるので、その色の違いでも印象が変わる点に注目です。

なかほら牧場

https://nakahora-bokujou.jp/

なかほら牧場

牧場や自然のイメージにあうグリーンを使ったサイト。彩度や明度を落とした少し暗めのグリーンが、牧場の草を連想させますね。

左側のメニューを押すと、全面グリーンのメニューが出てくるので見た目のメリハリも効いててわかりやすいです。

なかほら牧場

大分健生病院

http://www.oita-min.or.jp/

大分健生病院

患者さんが安心して通えるような安心・安全といったイメージを連想させる淡いグリーンが使われています。

これがもし赤だったり黄色だったりすると、病院のイメージが変わってしまいますよね。トップページに受付時間や交通アクセスなど最低限必要な情報が見られるようになっています。

モリ・リフォーム

http://www.mori-reform.jp/

モリ・リフォーム

リフォームの会社ということで、木材=自然とかかわるイメージを木のイラストで表現されています。

グリーンがトップにあることで、やさしい雰囲気を感じますね。線画のイラストもシンプルなタッチに仕上げています。

ダノンビオ

http://bio.danone.co.jp/

ダノンビオ

ヨーグルト商品のサイト。商品に使われている色と同じダークグリーンが配色されています。

この濃い目のグリーンだと、このヨーグルトは主に大人をターゲットにした商品なのかなと感じました。色味でターゲットの年齢層に合わせることもできる良い参考例だと思います。

ヤマト運輸

http://www.kuronekoyamato.co.jp/ytc/customer/

ヤマト運輸

ヤマト運輸のサイトはリニューアルして、個人的には使いやすくなったなと思ってます。猫が動いたりと細かい部分も味わいがあって、カスタマー向けに考えて作ったことが良くわかります。

コーポレートカラーの黄色をアクセントに、グリーンを多めに配色されています。彩度低め・明度は高めでフラットデザインで使われているトーンですね。明るい印象を持ちつつ落ち着いた印象もあってバランスが良いと思います。

グリーンを使うことで、コーポレートカラーという意味合いだけでなく、安心や安全のある印象も与えることができるので運送会社にぴったりな色だと思います。

ブロードメディア株式会社

http://www.broadmedia.co.jp/

broadmedia

黄緑に近い鮮やかなグリーンを使うと、白い背景と組み合わさってフレッシュで新鮮な、若々しい印象を与えることができます。ちょうど若葉のようなイメージですね。

彩度は低めにして少し淡い色味にしているので、派手さはないですがその分企業としての落ち着き・安定感を感じます。

サンスターGUM

http://jp.sunstargum.com/

gum

商品カラーの濃い目のグリーンを配色したGUMのサイト。ヨーグルトのダノンビオもそうでしたが、濃いめのグリーンの配色は購入ターゲットを大人に設定していると思います。

白とグリーンだけの組み合わせにすることで、商品の色(グリーン)を強く記憶に残すことができます。商品サイトの場合はこのように、キーカラーだけで構成されているページが多いですね。

街ピタ

http://www.pitat.com/machipita

街ピタ

地域の情報ブログ街ピタのサイト。

地域密着型のサイトなので親近感を感じさせるために、背景の薄いグレーと黄緑を使ってナチュラルで親しみのある配色がされています。丸を使ったデザインも親しみをより感じさせる一因ですね。

自然の写真と組み合わせてグリーンの色を使うことで、よりナチュラルな演出ができている素敵なサイトだと思いました。

まとめ

というわけで色々なグリーンを使ったサイトを見てみると、やはり自然を連想させる食品関連や建築関連、安全を感じさせるための病院・運送業などによく使われているようですね。

グリーンをうまく使うと気分を落ち着かせたり、自然なイメージを与えることができるので、そこから企業やサービスの安心感につながると思います。

というわけで緑を使ったwebデザインについてでした。それではー!