あなたのその資料、色を変えるともっと伝わるかも。
この記事は2018年11月16日にクラウドワークスデザイナーブログで公開されたものです。
この前やっと秋になったと思ったら、恵比寿ガーデンプレイスはクリスマスのデコレーションですっかり年末モードになってきました。
こんにちは。10月にフロントエンドエンジニアとして中途入社しましたみーたです。
一応エンジニアだけどデザインの方が興味あるのでこっちもお邪魔します。よろしくおねがいします。
■ 物申したい。
さて、早速ですが皆さん、人前で発表することはありますか？
社内での施策発表や外部イベントでのLTなど...登壇の機会が増えてきているかと思います。
弊社のUXデザイナーも先日、リブランディングのみでピボットした話をしていました。
年末だ！忘年会だ！LT会だ〜〜〜！！みたいなノリで11月・12月はイベントが多いですね。 エンジニアもデザイナーもLT大好き勢が増えてきましたよねー。
登壇者の皆さん、かなり質の高い内容を発表してくださって、私もLT聴きに行くの大好きなんですが、ここで声を大にして言いたい。
■ なんでそんな事言うのか
とある資料がプロジェクターで映し出された時に、使われている色が薄すぎて内容が見づらい。ということがありました。 1度か2度くらいそんな資料に出会ったことないですか？
以下のプレゼンもとても良い内容で感動していたのですが、最前列で聞いていたのに色が飛んでしまっていて読みづらかったです。 細かい内容はぼかしていますが、なんとなく飛んでしまって読みづらいのが伝わりますでしょうか。
こういったパステルカラーを使う資料って人気なんですが、正直プロジェクター投影向きではないかと思います。
■ プロジェクターとディスプレイだと何故こんなにも変わるのか
もちろん、プロジェクターの設定で調整すれば良くなる場合もありますが、以下のことは意識しといても良いのかなと思います。
プロジェクターは光によって投影し、それが反射して私達の目に入ってきています。 直接光が入ってきていない分、距離が遠くなり、光量は減少します。
そうなると色の弱い「薄い色」は白に近づき、コントラストが認知しづらくなる＝読みづらくなるという現象に陥ります。
なのでなるべく背景と文字のコントラストがはっきりする配色にしたほうが伝わりやすくなります。
「Colorable」というツールを使うと、AAA(最良)〜AA〜AA Large〜Fail(最悪)の4段階で背景色と文字色のコントラストを測ってくれて、今使っている色が見やすいか確認できます。
また、「Adobe Color CC」で「補色」を選択すると自分の使いたい色に合った色を提案してくれるので参考になるかもしれません。
■ 最後は自分の目で確認を
ツールとか紹介しておいてなんですが、最後に信じるのは自分の目！！ 最終確認をしっかりしましょう。
・運営に会場の設備を確認しましょう。
・DMMさんやCybozuさん等は大型液晶。明度の高いものは見にくいです。
・OptさんやCrowdWorks等はプロジェクター。彩度の低いものは見えにくいです。
・自社にプロジェクターがあれば、試しに投影してみましょう。
・もちろん機種によっても発色は変わってくるので一概に言えませんが、「大体こんな感じか」は分かるかと思います。
・可能ならイベント開始30分前には来場して、リハーサルしましょう。
■ 色の見え方は人それぞれ
色の見え方についても少し書いておきます。
今あなたの見ている色は隣の人とは違うかもしれません。 日本人男性の20人に1人、女性でも500人に１人が赤緑色覚の違うタイプ(明度で色の差を感じ取るタイプ)であると言われています。
・赤と緑
・青と紫
・薄いピンクとグレー
・緑と黒
などの組み合わせは違いを検知しづらいようです。 アクセントカラーとして文字色に使う時など気を配れると良いかもしれません。
私はMacのアプリの「Sim Daltonism」を使って明度の違いを確認しています。 きっとwindowsでも確認するアプリあるはず...
ちなみに今回説明で使用している「いらすとや」のイラストも誰にも親しまれる素晴らしいデザインになっています。
■ 最後に
長くなってしまいましたが、いかがでしたでしょうか。
少し気を配ることで、たくさんの人に正しくしっかり情報を伝えられるようになります。 これはwebでもアプリでも情報と関わるものには同じこと。
情報社会に生きていくならば、伝わる情報を発信していきたい！
という私の志を書いて終わりにしようと思います。ありがとうございました。
この記事が気に入ったらサポートをしてみませんか？