BLOGサブスレッドの日常
2023.04.25
配色のススメ
baba
こんにちは。
新しくサブスレッド社に入社しました。よろしくお願いします。
早速本題ですが、みなさんは何か画面を設計されている時「ここどうしよう」ということはないでしょうか。
弊社で3月に開催された勉強会にて、色やデザインについて触れる場面があり、
一つ個人的に取り入れている色の選び方をご紹介したいと思います。
Adobe社でも提供されているアプリの一機能でもあるのですが、
まずは窓の外を眺めることです。
皆さんの目には何が映るでしょうか
住んでいる場所によって見えるものはかなり異なってくるとは思うので
落ち着かない景色の場合、リラックスできる景色を思い浮かべましょう。

例えばこちらの画面から色をお借りし、
「ベースカラー」「メインカラー」「アクセントカラー」を抽出してみましょう。
【ここでおさらい】
「メインカラー」→テーマとなる色
「ベースカラー」→一番画面内で広く使われる色
「アクセントカラー」→ポイント(目立たせたい)に使う色

上記のお借りした画像から三色抽出しました。
メインカラーを「青+緑」の2色とすることもできます。
今回はそのままの色合いで使用していますが、
「ベースカラーの色をもう少し薄くしよう」など、調整していくとより視認性が上がり、
親しみやすい色合いとなります。
・何色を使いたいか
・その色が自然と馴染んでいる場面はどこか
上記を考えるとそれに近い配色が生まれてきます。
イメージが異なる場合はいくつか「その色が含まれるもの」を挙げてみましょう。
逆にちょっと緊張感のある画面、そういった配色にしたい場合は
自然ではあまりないような色を一つ差し込むとかなり緊張感の効果をもたらすことに期待できます。
今回は「配色」の色の選び方の一ヒントとして「景色を参考にする」手法を紹介しました。
ここまで読んでくださりありがとうございました。
この記事を書いた人
baba
