メモ：Building Your Color Palette / Refactoring UI
Refactoring UIという本（？）はUIデザインの注意すべきポイントがとても具体的に書かれていてよさそう。
電子書籍＋動画で$80くらいして高いんだけれども、2記事だけ無料で見ることができる。
その2記事のうちの、カラーパレットの作り方の記事を見てみた。
用意する色について
- grayの色は8～10くらいのシェードがいる
- Primary colorは5～10くらいのシェードがいる
- Accent colorは複数必要になることもある
- 新着バッジとかに使う、目を引くための色。青緑とか黄色とかピンク系のもの
- 破壊的な変更を行うときの警告色。赤とか。
- 黄色を警告色として用意するときもある
- 緑をポジティブなサインに使うように用意するときもある
- これらのアクセントカラーでも5～10くらいのシェードが必要だったりする
シェードの作り方
まずはベースの濃さの色を決める。ボタンの背景になるくらいの色をベースにするといい。
そのあと、一番暗い色と、一番明るい色を決める。
一番明るい部分のシェードはアラートの背景色に使われるくらいの色をイメージ選定する。暗めのシェードはそのアラートボックスのなかで見出しに使えるような色を選定するといい。
ここで、ベースの色を500、一番暗いのを900、一番明るいのを100として並べてみて、間の700、300の色を決める。
その後、必要であれば同じような感じで、800、600、400、200の色を決めていく。
その他
実際にこのカラーシステムを使ってデザインし始めてから、シェードを修正したくなるはずなので、修正する。
はじめは数値的に各シェードを決めていくけど、結局は数値じゃなく自分の目を信じて、シェードを修正していく必要がある。
新しいシェードは頻繁に追加しないようにする。
必要だしどんどん追加してもいいじゃん、と思えるくらいであれば、そもそもカラーシステムは用意しないほうがいい。
