【社内勉強会その①】非デザイナー向け配色の話

こんにちは！ScopeNext広報担当の中川です。

今回は以前ご紹介した勉強会について詳細な内容を掲載いたします！

弊社では定期的に勉強会が開催されており、全社員向け、職種、チームごとに行っているものがあります。

自ら技術や知識を強化し、共有することで社員全体の技術力向上を図るといった試みです。

今回の社内勉強会は「非デザイナー向け配色の話」をテーマに実施していただきました。

色彩検定2級を持ち、Illustratorを用いて資料作成などを行っているクライアントエンジニアがデザインの基本を押さえ、全社員向けにわかりやすく解説してくださっています。

非デザイン職の方でも読みやすい内容となっていますので、是非、一読してみてください。

「非デザイナー向け配色の話」の目的は、大きく2つあります。

・勉強会をやる人に向けて、色選びに悩まないように

・エンジニア以外の人にも発信してもらいたい

他職種を知ることはとても大事なことです。

普段はエンジニア向けの勉強会が多く行われていますが、

お互いの職業を知るためにも他職種の方にも発表していただきたいと思い実施しました。

とはいえ前例がないとやりづらいと思うので、自分が率先して発表することで発表のハードルを低くしたいと思ったのが目的です。

今回のターゲット

・色について何も知らない人が最低限ダメな配色をしないようになる

▼目次

１．色の基本知識

２．視認性の話

３．配色方法の紹介

１．色の基本知識

色は「色相」「明度」「彩度」という色の三属性と呼ばれており、3つの要素で成り立っています。

色相

赤、緑、青など色の性質の事ですね。

右の図のように円状になっているものは色相環と言います。

ちなみに色のあるものは有彩色、モノクロ系は無彩色と呼びます。

明度

色の明るさの度合いですね。

本来、明度は明るい暗いではなく、高い低いで表します。

彩度

色の鮮やかさのことです。

本来は明度同様、高い低いで表します。

２．視認性の話

まず初めに例を2グループ用意しました。

左右どちらが見やすいか考えてみてください。

右側の方が見やすいのが分かりますよね。

隣接している色同士の差が大きいと見やすいことが分かるかと思います。

この差のことをコントラストと言います。

コントラスト差は図のように色相・明度・彩度の要素内で幅を持たせるのを意識すると付けやすいです。

基本的に視認性が悪いとはコントラストが弱い状態を指します。

読ませたい、強調したいものはコントラストを強くしましょう！

とはいえ、画面を作っているとちゃんと見えるのか分からなくなることがあります。

モノクロで見てみよう

コントラストの大きさは簡単に言うと明度差です。

一度モノクロ画面を表示してみると視認性の問題に気付くことがあります。

文字の読みやすさだけではなく商品などの視線誘導にも使えるので意識しておくと良いです。

ホーム・戻るなどは目立たずタイトルやガチャのボタンなど目立たせたいものが、

コントラスト差で目立つようになっている

３．配色方法の紹介

色相分割

色相環を使用して等間隔の色を使用しましょう。

2分割は、色相環で見て反対側の色を使用する方法です。これを補色といいます。

また、色相環をベースに三角形、四角形と等間隔の色を使用することでコントラスト差のある配色を作ることが出来ます。

メインの色を決めたら、色相環に当てはめるだけなのでわかりやすい配色方法です。

配色サンプルは２分割、３分割、４分割を使用したカラーです。

色相、トーンを揃える

色相、またはトーン(明度・彩度)を揃えた色を選ぶと統一感が出ます。

左図は色相を揃えていて、右図はトーン(明度・彩度)を揃えています。

配色サンプル上段、中段は色相を合わせたもの

配色サンプル下段はトーン(明度・彩度)を合わせたものです。

自然の法則に合わせる

自然の色は黄色に近い方が明るく、青色に近い方が暗く見えるのでその法則に合わせます。

配色サンプルは全て自然の法則に合わせて色を組み合わせています。

例として上げると森なんかがとても分かりやすいですね。

明るい方にかけて黄色みが増していて、暗くなるにつれて青みが増していますよね。

自然の法則が存在しており、実際に存在する物と同じような形になるので違和感のない配色になります。

まとめ

ここまで配色方法を紹介しておいてなんですが、自分で考えずにAIサイトやパワーポイントのテンプレートに任せるのが一番良かったりします。

自分で全ての配色を選ぶと違和感が出ることもありますからね。

そういうときはAdobe Colorなど便利なツールがあるので、メインカラーを自分で決めてあとはAIに任せるのも一つの手だと思います。

https://color.adobe.com/ja/create/color-wheel

いかがだったでしょうか。

非デザイナー向け配色の話をご案内いたしました。

今回は全社員向けでしたが、チームや職種ごとであっても知識の共有はとても大切なことです。

勉強会を行うことで知識が強化され技術力も上がり、社員全体の向上に繋がりますよね。

ー最後にー

ScopeNextでは定期的に社員勉強会やコミュニケーションを目的としたイベントを開催しております。

この記事を読んで興味が湧いた、楽しそうだと感じた方がいらっしゃいましたら、ぜひ一度お話を聞きにきてください！

皆様とお会いできることを心から楽しみにしております。