配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド

今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。

はじめるよ

レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオワ、オワリです。さっそくこのPolipoliベッチュー、タタキケンサキエディションに色をつけていきます。

1. メインカラーを選ぼう

まずはじめにメインとなるカラーを決めます。Polipoliのテーマカラーはピンクなのでブラウザの検索欄に「pink flat ui design」と打ち込みます。イメージに近い色が出てきたらスポイトで吸い取りましょう。著作権にはくれぐれも注意してください責任は負いません。

Polipoliに関しては最初からメインカラーが決まっていたので「#E9546A」を使おうと思います。

2. アクセントカラーを選ぼう

Coolors.coというサイトに行きましょう。先ほど選択したメインカラーを一番左のカラムに設定し、ロックします。あとはひたすらスペースキーを連打。メインカラーと同じくらいの明るさで、メインカラーとはかなり異なる色を選びましょう。今回は下画像一番右の#59C5BFが良さそうなのでこれにします。なれないうちは何度もUIに当てはめて確認してみてください。

色を定義する
僕は下の画像のように色を命名しています。たとえばテキスト用にもう少し濃いPrimaryがほしい場合はPrimary-60と命名することで新しい色を追加することができます。薄くする場合は数字を、基本的には10刻みで下げていきます。

3. 黒とグレーをマスターする

これが一番大切です。多分テストに出ます。使用するのは4つだけ。

・dark-087: rgba(0,0,0,0.87)
・dark-054: rgba(0,0,0,0.54)
・dark-026: rgba(0,0,0,0.26)
・dark-012: rgba(0,0,0,0.12)

上から順に真っ黒を87%に薄めたもの、54%に薄めたもの、26%に薄めたもの、12%に薄めたものです。それぞれ以下のように使い分けます。

・dark-087: 普通のテキスト、タイトル
・dark-054: サブテキスト
・dark-026: 使えない、押せない、存在を潜めたいもの
・dark-012: この世のすべてのborder

ちなみに白に関しても同様に4つですが、微妙に透明度が違うので注意してください。

・light-100: rgba(255,255,255,1.00)
・light-070: rgba(255,255,255,0.70)
・light-030: rgba(255,255,255,0.30)
・light-012: rgba(255,255,255,0.12)

実際に色を塗ってみる

user名、コメント内容、参加人数をdark-087にしています。ユーザーステータスと、「xx人が参加」は54%、投稿時間は26%にしていますね。Tab(BottomNavigation)では、アクティブなアイコンがPrimary、非アクティブなアイコンは26%とヒエログリフに記されていたことが最近発見されました、覚えておきましょう。

コメントの吹き出しの背景と、スクリーンの背景が若干濃い気がしますね。ここであると便利な色、「alto」を投入します。

altoはdark-012よりも薄い色です。alto-010は吹き出しや強調したいセクションの背景に、alto-020はスクリーンのボディーカラーに使用します。選び方が難しい場合は上の画像のものをそのまま使うと良いと思います。

altoがいい仕事していますよね。あとはカードにシャドーをつけてあげれば完成です。

今回はセオリー通りに作成しましたが、僕はいつもはここにアレンジを加えます。真っ黒をそのまま使うのではなく、LIPSには赤紫を、LUCRAにはオレンジを、ひま部にはブルーを混ぜて、アプリ全体の統一感に貢献させています。

ただ、しっかりと色の使い方になれるまではセオリー通りの白黒、Primary、Accentを自分で決めて、トレースしたアプリを全く別の色に変えてみるという練習を繰り返し行うと良いと思います。

最後に

どんなアプリも素敵に彩る12色のカラーパレットの使い方をご紹介しました。そのうちあなたが選ぶのはたったの2色だけです。センスが無いからかっこいいデザインができない、なんてのは的はずれな台詞であることがおわかりいただけたかと思います。セオリーに沿って決められた作業を行えば、だれでも野良感が少なく公式っぽさあふれるデザインを作ることができます。

本日書いた内容はすべてmaterial.ioに書かれていることを解釈してまとめているだけなので、気になった方は読んでみるといいかもしれません。それでは。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

510

Taiki IKEDA

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
38つのマガジンに含まれています

コメント1件

いつも他人の配色に感動ばかりしていますが、参考にさせていただきます。良いnoteありがとうございました。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。