この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。
こんにちは。まいです。
サイトのデザインを作るとき、色をどうするか？というのも一つの悩みどころですよね。
そんな悩みをそっとサポートしてくれるのが「Color Scheme Designer」。
デザイナーにとっては色を決める時のサポートに、
デザイナー以外にとっては、サイト全体の配色をおまかせできちゃう優れたサイトです。
実際にちょっと使ってみましょうー。
まず、左にある丸いモノ…これで、サイト全体で何色使うかを選びます。
悩んだらとりあえず3色くらいを選んでおきます。
次に、左にある大きい円でメインの色を決めていきます。
もっと濃くとか薄くとかは後で調整できるので、とりあえずどのくらいの色にするか？
だけを小さい●をドラッグしながらきめていきます。
今回は黄緑で。
ちなみに、メイン以外は赤と紫になってますが、
ちょっと気に入らないなぁ、と思ったらこれも○をドラッグすることで変更できます。
2つのうちどちらかを動かす事で、もう一つも自動的に動いてバランスをとってくれます。
次に色の明るさやコントラストを調整します。
左が明度、右がコントラストの調整です。
なんだか全体的にビビッドなので、ちょっとパステルっぽく。
色はだいたい作ったけど…実際のサイトになるとどんな雰囲気になるのかな？
という素朴なニーズもカバーするのがColor Scheme Designerのニクいところ。
右下にある「Light（Dark） page example」をクリックすると、サンプルを見る事ができます。
ちょっと印象が違うかも？と思ったら色を調整し直して、何度でも確認できます。
色の調整もおわってこれでバッチリ！となったら、
左の円の下にある「Color List」をクリック。16進数の値が表示されるので、
間違いなく同じ色を使う事ができます。
