今日は先日勝手にリデザインした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色のカラーパレットの使い方をご紹介しました。そのうちあなたが選ぶのはたったの２色だけです。センスが無いからかっこいいデザインができない、なんてのは的はずれな台詞であることがおわかりいただけたかと思います。セオリーに沿って決められた作業を行えば、だれでも野良感が少なく公式っぽさあふれるデザインを作ることができます。
本日書いた内容はすべてmaterial.ioに書かれていることを解釈してまとめているだけなので、気になった方は読んでみるといいかもしれません。それでは。