制作物を作っていると、よく悩みがちなのが色の組み合わせ。
自分ではセンスが良いと思っていても、実際他人に見せたら「何それ？ダサくない？」みたいな微妙な反応を頂いてしまったなんていう経験がある方も少なくないはず。
そこで今回は、色の組み合わせを提案してくれるWEBサービス「Colorable」の使い方について解説します。
もし転職ポートフォリオを作っているけど、見た目や色の使い方に自信がないという方は、ぜひ参考にしてみてください。
制作物において色選びが重要になる理由
使われている色次第で、制作物を見た方に与える印象が変わってしまうからです。
例えば、赤だと情熱・興奮といったアクティブな印象を与えるに対し、青だと落ち着きや信頼といった安心感を与えます。
なので、赤は人々を熱狂させるスポーツの大会やオリンピック・青は初めての取引先に対しても安心感を持たせるため会社のホームページなどに起用されます。
このように、与える印象や雰囲気が変わってしまうので、使われる場面・作られる制作物に応じた色の使い分けが重要になってくるというわけです。
転職ポートフォリオの配色を決めるのに役立つWEBサービス「Colorable」の使い方を解説
とはいえ、制作物を作る以上、単色ではなく複数の色を使う必要があります。
そこで、最も悩むのが組み合わせる色の種類。
色相・明度・彩度など、経験から来るセンス・法則に対する心得があっても、悩んでしまう方も多いはず。
とくに自分のセンスに自信がないと尚のこと。制作物の進捗もその場止まりになってしまうことも少なくありません。
そこで、活躍するのが「Colorable」です。
「Colorable」は、色同士の組み合わせがまとまりあるものになっているかを数値で評価してくれます。
Colorableの画面の見方について
画面の見方は、以下の通り。
▼画面詳細
①コントラストの数値結果：3以下であれば「Fail」が表示され、組み合わせ的にNGと判断されます。逆に3以上からは「AA Large」というアルファベットの判定が重なり、「AAA」>「AA」>「AA Large」>「Fail」の順で組み合わせのレベルを判定します
②Text：文字色
③Backgroud：背景色
④Hue：色相
⑤Saturation：彩度
⑥Lightness：明度
まとめると、相性の良い色を選びたいというのであれば、①のコントラストの数値が3以上&「AAA」になるよう②〜⑥を調整し、結果の高い組み合わせの文字色と背景色を使うようにできればセンスの良い色選びができるというわけです。
16進数のカラーコードの入手方法
使い方は分かったけど、そもそも文字色と背景色のカラーコード？
っていうのは覚えていないんだけど、どうやったら分かるかな？
これは簡単で、Google検索で「カラーピッカー」と検索してみましょう。
すると色のパレットが出てくるので、マウスでお気に入りの色を指定して「HEX」と記載のあるところから、カラーコードをコピペして貼り付ければ完了です！
文字色か背景色どちらか片方だけ決められれば、それに合わせた色を探すのに役立ちます。
配色のパターンを提案してもらう方法
色の種類多すぎて自分で決めるの面倒くさいんだけど…
このようにメインの色どころか組み合わせを自分で探すの自体も億劫だなと感じることもあるでしょう。
その場合は「Colorable」の左下にある「Random」ボタンを押してみてください。
そうすることで、コントラストの数値結果の高い配色パターンを無限に提案してくれます。
もし基軸となる色も決められそうにないという場合は「Random」ボタンも活用してみてください。
お気に入りの配色パターンを憧れの媒体から抽出する方法
◯◯さんの媒体、いつも色使いキレイだな…
どうやったらこれって再現できるんだろう…？
このように、自分が気に入った媒体の配色パターンを真似したいと思うこともあるかもしれません。
その際は「ColorPick」を使いましょう。詳細な使い方については、下記の記事で紹介しています。気になった方は合わせてチェックしてみてください。
おわりに
今回は、転職ポートフォリオの配色を決めるのに役立つWEBサービス「Colorable」の使い方について解説しました。
色合いを自分で決められないと悩んでいる方は、ぜひ活用してみてください。
