グラデーションデザインは自然から配色を学ぶ

今回は「グラデーションデザインは自然から配色を学ぶ」というテーマについて書いていきます。

グラデーションデザインが普及してきた

ここ数年のデザインは、フラットデザインをベースとして、色数を抑え統一感を出すようなパターンがかなり多くなっていた。それに伴って、ほとんどの配色パターンがどこか既視感のあるものとなってしまっていることは言うまでもない。

そんな中で近年注目されているデザインの中に、グラデーションデザインがある。ブランドに対して、ロゴなどから一貫して一つのグラデーションを基調としたデザインをする。既視感のない新しさ（モダンさ）を持つ印象を与えることができるため、変化する価値を求められるブランドなどが採用している例も増えている。

グラデーションデザインの例

イメージが湧きずらい方もいると思うので、グラデーションが採用されているロゴの例をいくつか挙げてみようと思う。

⚫︎Instagram

まずが言わずと知れた、facebook社が運営するSNS「Instagram（インスタグラム）」通称インスタ。インスタのロゴは、当初インスタントカメラをイメージした地味めな色のロゴだったことはまだ記憶にある方も多いと思う。2016年に、ブランドイメージを一新するべく現在のような紫→オレンジのグラデーションロゴに変更、2020年現在では、このグラデーションを見るだけでインスタグラムを連想する方も多いと思う。

SNSが多大な影響力を持ち、インスタグラマー/インフルエンサーなどの単語が散見されるようになったのも現在のロゴになってからのことだ。まさに時代を代表するブランドロゴだと思う。

⚫︎SHIBUYA 109（マルキュー）

２つ目に、都内に住んでいる方はすっかり見慣れたかもしれない「SHIBUYA 109（マルキュー）」のロゴを挙げてみた。SHIBUYA 109のロゴは、2018年に一般投票10435件により選ばれ、40周年である2019年春に正式にビルの外装として設置された。

制作したのはイラストレーター&デザイナーのハナガキダイジュさんと、会社員の池田敦美さんで、若者の流行の発信地をカラフルなグラデーションで表している。元々は少し男性的な赤く力強いセリフ体のロゴだっただけに、インパクトはかなり大きかったのではないだろうか。

⚫︎Amazon Prime（アマゾンプライム）

次に挙げたのはAmazon（アマゾン）が提供するサブスクリプションサービスである「Amazon Prime（アマゾンプライム）」だ。スマホ用アプリのアイコンをはじめ、サイト内のアイキャッチなど、様々なところにグラデーションを取り入れており、光沢感をイメージさせるようなパターンが使用されている。

Amazon Prime Videoだけでなく、Amazon Prime Musicも色違いのグラデーションが使用されているため、積極的にグラデーションをブランドイメージの構築に取り入れている印象が見られる。

グラデーションデザインをするときに気をつけること

グラデーションデザインが増えてきていることは、ここまでの内容で十分にわかっていただけたと思うが、実際にグラデーションを使用したデザインを行う時に気をつけている点について書いてみる。

グラデーションのパターン
グラデーションの方向

ベタなフラットデザインをするときと大きく違う一つ目は、グラデーションにはいくつかのパターンがあるということ。つまりは色を変化させていくパターンのことで、やろうと思えば7色で虹のようなグラデーションも作れるし、２色を基準とした幅の狭い滑らかなグラデーションも作ることができる。

グラデーションの幅を広くすればするほど、他に類が少ない斬新なイメージを生み出すことができるが、一方で統一感が出し辛く、ロゴ以外に展開しづらいことによりブランドイメージの定着に結びつかない可能性も考えられる。

２つ目にグラデーションの方向だ。グラデーションには方向があり、上から下、右上から左下、といった方向が存在する。これを逆転させるだけでガラッとイメージが変わってしまうこともあり、方向の選択には少し注意を払っておいた方がいい。暗めの色と明るめの色をグラデーションに用いる場合、方向によって光源の場所が変わることでイメージも左右されることもある。

違和感のないグラデーションを作るには

とはいえまずはグラデーションのパターンを決めることが、グラデーションを取り入れたデザインを作るときに優先される。その時の基準となる色の抽出には、自然界から色を持ち寄るのがおすすめだ。

自然界に存在する色であれば、多くの人はそれほど違和感なく受け入れられる可能性が高い。

ここからは具体的な例を見ていくことにする。

自然からグラデーションを抽出

自然の中からグラデーションを抽出する時は写真を使うと手っ取り早い。また、ここでいう自然とは、緑の多い森などだけでなく、近代的な都会に存在する人工的なグラデーションも含む。理由は先ほど述べたように、多くの人が見かけたことのあるグラデーションは違和感が少ないからである。

イラストレーターのスポイトツールを使えば簡単に色を抽出できる。実際は、スポイトで抽出した色は少しくすんでいる場合が多いので、微調整を目で見て行う。

太陽のあたった車のバンパー、夕焼けの海、森の湖など、様々な写真から色を抽出することで、違和感の少ない比較的美しいグラデーションを簡単に見つけ出すことができる。

まとめ

グラデーションをデザインに使う時は、パターンと方向に気を遣う。パターンを決めるときには、写真から色を抽出すると、容易に美しいグラデーションを見つけることができる。

【運営会社】 合同会社meno
：https://www.meno-inc.com/