就労継続支援B型事業所かなうラボの記事を更新♪

Schoo講義「感覚に頼らない論理的で楽しい配色方法」のご紹介

eラーニング
この記事は約4分で読めます。

こんにちは!かなうラボ利用者のカナタです。

今回は、オンライン学習サービス「Schoo(スクー)」で以下の講義を視聴したので、内容と感想をご紹介します。

【講義名】感覚に頼らない論理的で楽しい配色方法

【講師】たじま ちはるさん(ディレクター/デザイナー)

たじまさんは『配色デザイン良質見本帳 イメージで探せて、すぐに使えるアイデア集』の著者でもあります。

私はデザインする際の色選びが苦手なので、こちらの講義を視聴してみました。

👩‍💻<Schooとは>
Schooは、ITスキル・ビジネススキル・デザイン・プログラミングなど、様々なジャンルの講義を視聴できるオンライン学習サービスです。

業界の最前線で活躍するプロから、実践的な知識やスキルが学べます。

かなうラボでは、学習の一環としてSchooが取り入れられています。

🎨<講義のハイライト>

・色を決める流れは、メインカラーを決める(印象を捉える)▷サブカラーを決める(調和チェック)▷配色のバランスをとる(調整する)
→まずはすでにあるものから色を選ぶ(ブランドやイベントの色から)。既存のものがない場合は自分でカラーを決める


・色の面積で感じ取れる印象がガラリと変わる
例:同じ赤でも全面に使うのか、一部に使うのかで印象が異なる

・70:25:5の法則で色の割合を考えてみる

→70%がベースカラー・25%がサブカラー・5%がアクセントカラー

・色そのものを変えるのではなく「明度」を変えることでも色の幅を出せる
→例:明度の高い赤は優しい印象だが、明度の低い赤はシックな印象になる

・文字と背景色で明度差をつけると読みやすい→明度の差がコントラストの差に繋がり、文字が読みやすくなったり、目立たせたい部分に目が行くようにしたりできる

※実際の講義では、講師の先生がスライドで図解や配色見本を見せながら解説してくれるので、私の記事よりわかりやすく情報量も多いです。

💡<明度とは>

今回の講義の主役は「明度」でした。

明度とは、色の明るさの度合いを示す言葉です。

色がどれだけ明るいか、あるいは暗いかということ。

明度の最も高い色が白で、明度が最も低い色が黒です。

講師の先生いわく「(色相環において)黄色を頂点としたとき、上が一番明るく、下が一番暗い」とのこと。

なお、色を組み合わせる際、色同士に明度差をつけるとコントラストの差につながり、情報が見やすくなるそうです。
文字と背景色の組み合わせでは、適切な明度差を確保しないと文字が見づらくなる原因に。

ご参考までに、以下の具体例を作ってみました。

例えば、純色の黄色と白の組み合わせでは、両方とも明度が高いので、文字が読みづらく感じます。

一方で、純色の青と白では、明度差があるぶん色のコントラストが強く、文字が読みやすく感じます。

文字の色は同じでも、背景色との明度差によって読みやすさが一変するのですね。

👩‍💻<所感>

今回の講義で最も印象深かったのが「文字と背景色で明度差をつけると読みやすい」ということでした。

デザインにおいて、注意すべきポイントのひとつが「文字の可読性」(文字の読みやすさ)です。

私はWebデザインコースの課題でバナーを作った際に、先生から「文字が背景色に埋もれて見えにくい」旨のフィードバックをいただいたことがありました。

そのときは、背景の色相(色み)を変えることばかり考えていたのですが、背景色と文字の明度差をつけない限り問題は解決しないことに、今回の講義で気付きました。

(仮に背景の色相を変えたとしても、また同じような明度の色を選んでしまっては、文字と明度差がつかず見やすくならないため。)

「背景色も文字も明度が高くて読みづらいので、片方の明度を低くして差をつけよう」と、先生は伝えたかったのだなと。

講義のおかげで、先生のフィードバックの意図をより深く理解できました💡

今後もSchooの講義で知識を補強しながら、Webデザインコースの課題を進めていきたいと思います。

最後までご覧いただき、ありがとうございました🌸

*****************************************

 


 

かなうラボのことが気になった方は、
ぜひ一度見学予約、相談、お問い合わせください!

かなうラボは新時代の就労継続支援B型事業所です。

 

 

お問い合わせはこちら