サイトの配色を助けてくれる「Color Scheme Designer」

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

こんにちは。まいです。

サイトのデザインを作るとき、色をどうするか？というのも一つの悩みどころですよね。
そんな悩みをそっとサポートしてくれるのが「Color Scheme Designer」。

デザイナーにとっては色を決める時のサポートに、
デザイナー以外にとっては、サイト全体の配色をおまかせできちゃう優れたサイトです。

実際にちょっと使ってみましょうー。

まず、左にある丸いモノ…これで、サイト全体で何色使うかを選びます。
悩んだらとりあえず3色くらいを選んでおきます。

次に、左にある大きい円でメインの色を決めていきます。
もっと濃くとか薄くとかは後で調整できるので、とりあえずどのくらいの色にするか？
だけを小さい●をドラッグしながらきめていきます。

今回は黄緑で。
ちなみに、メイン以外は赤と紫になってますが、
ちょっと気に入らないなぁ、と思ったらこれも○をドラッグすることで変更できます。
2つのうちどちらかを動かす事で、もう一つも自動的に動いてバランスをとってくれます。

次に色の明るさやコントラストを調整します。
左が明度、右がコントラストの調整です。
なんだか全体的にビビッドなので、ちょっとパステルっぽく。

色はだいたい作ったけど…実際のサイトになるとどんな雰囲気になるのかな？
という素朴なニーズもカバーするのがColor Scheme Designerのニクいところ。
右下にある「Light（Dark） page example」をクリックすると、サンプルを見る事ができます。

ちょっと印象が違うかも？と思ったら色を調整し直して、何度でも確認できます。

色の調整もおわってこれでバッチリ！となったら、
左の円の下にある「Color List」をクリック。16進数の値が表示されるので、
間違いなく同じ色を使う事ができます。