ウェブデザインにおけるカラーのグリーンの重要性と効果的な使い方 -Eco Friendly Green

ウェブデザインにおけるカラーのグリーンの重要性を学び、実例を見ながら制作における効果的な使い方や気をつけたいポイントを紹介します。

サイトのキャプチャ

Anatomy of Colors: How to Create Eco-Friendly Green Website

Anatomy of Colorsのシリーズは前回、ホワイトを紹介しました。

最近はデスクトップの壁紙もベタ塗りグリーンなので、今回はグリーンを紹介します。
以下、グリーンの各ポイントを意訳したものです。

グリーンの重要性

インスピレーションを与える最もよい情報提供元は何ですか? もちろんそれは自然です!カラーのグリーンの重要性とウェブデザインでのグリーンの効果的な使い方についてお話します。

グリーンは自然に溢れている

グリーンは人の目に優しい

わたし達は大好きな色、そして色の組み合わせをもっています。日常生活や仕事場でこの大好きな色、色の組み合わせを使うでしょう。インテリアにはこの色が好き、このプロジェクトにはこの色があっている、など。

デザイナーも同じことをします。唯一の違いはデザイナーは仕事で自身の大好きなカラーパレットを使用するということです。たとえ色の数を無制限に選ぶことができるとしても、デザイナーはカラーパレットから色を選ぶことに決めます。

あなたのゴールは、あなたのウェブデザインやプロダクトで必要な色の効果的な組み合わせを見つけることです。ユーザーの第一印象はサイトを見てすぐに決まります、これは色による影響は非常に大きいです。

グリーンの基礎知識

グリーンはカラースペクトルの真ん中で、平均の波長は520-570nmです。この色は人間の目で認識しやすい色で、さまざまなグリーンを認識することができます。

グリーンの波長

グリーンの波長

グリーンは、イエローとシアンを混ざるとできます。

色素の三原色

色素の三原色

また、グリーンは光の三原色のうちの一つです。

光の三原色

光の三原色

ウェブデザインにおけるグリーンの使い方

ウェブデザインでもグリーンは人気のカラーです。グリーンのウェブサイトはエコ、自然、環境をキーワードとした環境系のコンテンツによく利用されます。いわゆるエコデザインです。

グリーンはさまざまな色、テクスチャ、シャドウと合わせることができ、それらを変えることでユーザーに与える印象もヴィジュアル的にコントロールできます。テクスチャを加えて色を暗くしたり、光沢を与えて豊かさと深さを加えることもできます。

経験豊かなデザイナーは、色がどのようになぜ機能し、他の色と組み合わせるか理解しています。

サイトのキャプチャ

Green Infrastructure Inc

グリーンは自然、フレッシュ、春といったキーワードに結びつけられます。デザインする上でこういったカラーの使用法は正しい解決です。健康やビューティといったキーワードにも完璧なカラーです。ユーザーに信頼感を与えることができるでしょう。

また、健康、権力、金融、成功にも結びつけられます。銀行や金融系の会社でもグリーンはよく利用されています。グリーンは本質的に人の目に入るカラーなので、目に最も優しいカラーです。

グリーンを使うことの意味

グリーンはリラックスでき、創造力を刺激します。感情を穏やかにし、ムードを改善し、ストレスを減らし、そして落ち着かせるカラーです。グリーンをラッキーカラーにしている人も多いでしょう。

サイトのキャプチャ

Netlife Research

グリーンの文化的な背景

ロシアでは、グリーンはネガティブな意味で青年期と関連づけられています。彼あるいは彼女が若くて、未経験であることを「グリーン」と呼びます。

サイトのキャプチャ

Tori's Eye

アメリカでは、お金や成功といったキーワードに結びつけられ、前進を意味します。交通の信号がグリーンに変わったら、前へ進むという意味です。

サイトのキャプチャ

Brogdale CIC

イギリスではグリーンはロビンフッドの影響が強く、英雄の色です。イスラムや日本の文化ではスピリチュアルな重要性があり、イスラムは敬意、日本では永遠の命を意味します。

さまざまなグリーンの使い方

グリーンにもちょっと暗いグリーン、ほのかに明るいグリーン、オリーブ、イエローグリーンなど、さまざまなグリーンがあります。グリーンはエコや安定性といったキーワードと結びつけられますが、微妙な変化で異なる意味付けがされます。

Dark Green

グリーンを少し暗めで使用すると、特にアメリカではお金と権力をイメージします。これは貪欲、嫉み、野心といったキーワードと相関関係を起こすことができます。

サイトのキャプチャ

dConstruct 2010

サイトのキャプチャ

Duplos

Bright Green

明るいグリーンは安全で、信頼性が高いです。安定や忍耐といった印象を与えるでしょう。プロダクトのエコロジーにフォーカスする時はこのカラーがベストです。

サイトのキャプチャ

Lipton Green Tea

サイトのキャプチャ

The Fruit Box

Yellow Green

イエロー寄りのグリーンは使い方が難しいです。病気や嫉妬をイメージするので注意深く使用してください。

サイトのキャプチャ

Alex Buga

サイトのキャプチャ

Elmwood

Olive Green

オリーブグリーンは自然と結びつけられます。平和、平穏、清潔といったキーワードが連想されます。

サイトのキャプチャ

Olive Barand kitchen

サイトのキャプチャ

Kooba

グリーンを使ってみよう

グリーンはどんな色とでも簡単に組み合わせることができます。ただし、あまりにも多くの色を使うことは勧めません。鮮明でカラフルなウェブサイトをつくるなら別ですが、3色くらいで設計してみてください。
ここでいくつかのグリーンをベースにした素晴らしいデザインのサイトを紹介します。

サイトのキャプチャ

Petbudde

サイトのキャプチャ

Irvine Family Cupuncture

サイトのキャプチャ

Taste of Boston

サイトのキャプチャ

The 20/20 Group

サイトのキャプチャ

Vitala Foods

サイトのキャプチャ

Touchtech

サイトのキャプチャ

Pixel Salada Studio

サイトのキャプチャ

Peppermint Dental Vancouver

サイトのキャプチャ

Appboy

サイトのキャプチャ

Andreas Fretz

サイトのキャプチャ

Teleton

サイトのキャプチャ

ubiant

サイトのキャプチャ

Mighty Matcha

サイトのキャプチャ

Barras de Granola

サイトのキャプチャ

Sweete Stevia

元記事ではもっと多くの事例が紹介されています。

top of page

©2017 coliss