ナチュラルな配色カラーパレットをUIデザインにうまく活用する方法

わたしたちの生活のなかで、もっとも美しいものは何でしょう。私にとってそれは自然で、海や川、山、森、草原、花や動物たちです。地球上には素晴らしい風景画たくさんあり、それらは人間の手で作られたものより驚くほど衝撃的です。

もちろん人々にインスピレーションを与える驚くような場所や芸術、デザインなどもあります。しかし歴史上の芸術家たちは、インスピレーションを得るために自然を眺め、絵画や彫刻、家具の作品に最適な色を見つけてきました。

この記事では、UIデザインに自然なナチュラルカラーの組み合わせを利用する方法について、私のアイデアをご紹介します。まずはこの記事のサムネイル表紙を見てみましょう。たくさんの素敵な色の組み合わせがあり、うまく調和した見た目となっているのが分かります。

何かをデザインするときに、配色を念頭に置いて作業をすることはいいことですが、新しい色の組み合わせを試すのもとても価値があります。たくさんの花や鳥、動物は鮮やかな美しい色をしており、デザインをよりナチュラルで魅力的にするためのインスピレーションとして利用することができます。

たとえばリンゴを連想するために、２つの赤色の色合いを利用することで、ポジティブな感情を呼び起こすことができます。色を使って異なる感情を感じさせる可能性は無限です。赤や緑、青色などを数値で表すことができ、コンピューター上でも反映させることができます。

実際、カラーピッカーを使用して適切な色を見つける作業は本当にむずかしいものです。自然を撮影した写真は、デザインのインスピレーションにとって優れており、どのような色が調和するのか、多くのことを学ぶのに役立ちました。もしかしたら素晴らしい色の組み合わせを見つけるには、カラーピッカーを使わずに風景や植物、花、空の写真を参考にしたほうが簡単かもしれません。

マテリアル・デザイン配色カラーパレット

Google によって提起された、マテリアルデザインの原則が個人的には大好きで、とても才能のある人たちによって作成されています。それらの優れたテンプレートや形を使うことで、わたしの仕事に多くのインスピレーションを与えてくれます。

マテリアルデザインの配色カラーパレットは見た目は良いですが、組み合わせがむずかしい配色もあり、すべての色の組み合わせでうまくいくというわけではありません。たとえばカード型レイアウトの素材には、色が明るいために実際に利用するのはむずかしいでしょう。

Android 用アプリのデザイン作業を手がけるとき、デザイン原則とガイドラインに従いますが、独自のカラーパレットを選択することで、アプリケーションをよりユニークにします。インスピレーションとして自然でナチュラルな配色を取り入れることで、基本的な色の組み合わせを確認することができます。

基本カラー（英: Basic Colors）

だれもが基本的な七色の虹色を知っているでしょう。問題は、どの色がうまくフィットするかです。たとえばみどり色は、どんな色とも組み合わせやすく、うまくいくことを知っていると思います。では上記サンプルを参考に見てみましょう。黄色、赤、むらさき、青色の花は美しい見た目です。ここでは異なる緑色の色合いが必要となり、ダークグリーンは明るい黄色との相性が良く、オリーブグリーンは鮮やかな赤色との相性に適しています。

赤と青色の組み合わせはどうでしょう。ここでは色合いがとても重要になります。海に沈む真っ赤な夕日がどれだけ美しいかみなさんも知っているでしょう。日暮れの様子からも赤色と明るい青色はうまく合うことがよく分かります。じっくりと自然をたのしむことで、多くのすばらしい色の組み合わせを見つけることができるでしょう。

パステルカラー（英: Pastel Colors）

鮮やかな色が今のトレンドですが、パステルカラーも忘れてはいけません。テキスタイル、壁紙、家具、絵画、自然なオーナメントなど、19世紀頃のフランスのデザインには、パステルカラーを使った素晴らしい例がたくさんあります。

配色はいつもきれいで明るい必要はありません。パステルカラーがデザインにおいてあまり人気がないのは、なにかが欠けているように感じます。これらの配色もうまくフィットさせることで、よりナチュラルな見た目を実現できます。

色の組み合わせCombinations of Colors

intro-to-natural-palette-5

南国の鳥や動物、花などの写真を見ることで、素晴らしい色の組み合わせが見つかります。どれもユニークで美しいのが特長です。配色のために自然なガイドラインに従い面白いものを作成するのは、個人的にとても良い考えだと思います。

ユニークな色の組み合わせによって、アプリケーションやウェブサイトがより印象に残るようになり、個性的に仕上げることができます。製品において配色は、もっとも重要な要素のひとつで、人々がデザインにおいてもっとも鮮明に覚えている点となるでしょう。

チャレンジする課題について

およそ一年前にナチュラルな配色を利用するアイデアを思いつき、これまでにもたくさんの仕事で本当に助けとなったので、この記事を書くことを決意しました。

ナチュラルカラーの配色パレットを使った、いくつかのサンプル例を作成し一緒に共有しています。UIデザインにナチュラルな配色パレットを使用する方法や、自然からインスピレーションをうまく見つける方法について詳しくみていきましょう。

パート１: カード型レイアウト

個人的にはマテリアルデザインのカード型レイアウトが好みで、良い形と構成からなっています。マテリアルデザインのカード型レイアウトは、コンテンツと形状のバランスが抜群で、デザイン作業にもよく利用されています。

しかしマテリアルデザインの配色カラーパレットは、どれも明るすぎるので合わせづらいときがあります。そんなときは、ナチュラルなカラーパレットを利用して、カード型レイアウトを再デザインするというアイデアを活用してみましょう。

ままままま

ToDoリスト型ノートの再デザイン

まずはノートアプリからはじめたいと思います。これはとても良い見本の一例で、レイアウトがフィットするするために、より良いカラーパレットの作成が必要です。

既存のノートアプリを作り直して、ナチュラルなカラーパレットを追加しようとしましたが、ノートのようなアプリケーションには問題がひとつあり、鮮やか過ぎる色を利用することはできません。たとえばマテリアルデザインよりカラーパレットの500番の明るい色でカードを塗りつぶしたとき、うまくまとめることはできません。

解決方法として、花壇を連想してみましょう。異なる多くの花が、どのように一緒にうまくまとまっているのか考えてみましょう。どれもスッキリとした色使いというわけではなく、いくつかは灰色で不完全な形をしており、明るい色や暗い色が混ざっています。

上記サンプルの右側が、再デザインしたコンセプト例です。他の色とうまく合わせるために、みどり色をメインカラーとしました。次に花や鳥から見つけた、ナチュラルな配色カラーパレットを採用しました。鳥のなかには、自分で決して考えつかない素晴らしい色の組み合わせを持つ鳥がいます。自然をじっくり観察することで、配色に必要なたくさんのインスピレーションがあるのに気付くでしょう。

クリスマス関連イベント

わたしの次の挑戦は、マテリアルデザインのカード型レイアウトとナチュラルカラーを使った、クリスマスイベント向けアプリの作成です。ときとして通常の配色カラーパレットでは見た目が悪く、特定のイベントには利用できないことがあります。そんなときにクリスマスに最適な色を見つける方法は、ただひとつだけです。

まずいくつかのクリスマス関連の写真を参考にしてみました。クリスマスツリーの濃い緑色や、サンタクロースの赤い衣装、オレンジ色のマンダリン、チェリーを乗っけて金箔をふりかけたチョコレートケーキなど、クリスマスに関連する色があるでしょう。ここではそれらの色をすべて組み合わせて、カテゴリ用のカードレイアウトを作成しました。アイコンや見出しタイトルなしで、このカラフルなカードを見ることで、クリスマスを連想させます。

特定のイベントには、いつも特定の色やシンボルが関連付けされています。それらをじっくり考えることで、素晴らしいデザインと平凡なデザインに差が出てくるでしょう。

サマーイベント

最近はどんどん寒くなっており、みんながクリスマスを楽しみにしていますが、赤道から南側は暑い夏であることも覚えておきましょう。次のプロジェクトでは、夏を過ごすのに最適なオーストラリアのサマーイベントアプリを作成しました。ここにはビーチやクルーズ、パーティー、サーフィンなどのイベントの他、世界でここでしか見れない動植物も数多く存在しています。