7ch

報告15: 下手な配色が許されるのは小学生までだよね

煽りタイトルですみません。毎日投稿しているとタイトルが思いつきません。

さてそろそろ卒論発表の時期ではなかろうか。大学4年生のころは自身もあまり発表になれておらず、ゼミのゆるっとした環境での発表があるのみで、あまり発表資料にも力を入れてこなかったように思う。しかし大学院生となり、学会での発表や研究会での発表など「外部に見てもらう」ための発表をする機会が増え、発表資料の作成も力を入れざるを得なくなった。上手な発表ができているとは言わないが、少なくとも見れるレベルの発表にはなってきたと思うし、発表資料の作成も質が向上してきたように思う。

一方でひどいスライドとしてはよく役所のスライドが槍玉に上げられる。

確かにこのような資料となる合理的な理由はあってその理由に納得できるのだが、やはり発表の場には適さない。この資料をもって発表した際には「1スライドに伝えたいことを1つ」だとか、「文章を書かずに伝えたいキーワードを書く」だとかの指導が入ることが多い。

しかし、色、特に配色に気を使うべきという指摘はあまり入らないことが多いのではないか。配色に気を使わない資料は目を疲れさせてしまう(逆にこの性質を利用することもできそうだが)し、何よりもカッコ悪い。他の人の発表資料を眺めている際には「配色に気を使えばもっと良い資料になるのに」と思うことが多い。そこで今回は配色に関する話がしたい。インターネットさえあればたとえセンスが絶望的であっても、楽に綺麗で見やすいスライドを作成することができるのだ。

私が愛用しているのはColorSpaceというサービスである。

mycolor.space

使い方は非常に簡単だ。まずは色を選択する。

f:id:nakahara_nanase:20220126183522j:plain

今回は筑波大学のスクールカラーを使ってみよう(ちなみに学内発表のときにその学校のスクールカラーを基調にすると、親しみやすい資料になるような気がする、個人的な感想だが)。入力が終われば、あとはGENERATEボタンを押すだけである。

f:id:nakahara_nanase:20220126183841j:plain

Generic Gradientという綺麗なグラデーションを作成することができた。あとはコピペで色を指定していくだけだ。

また3-Color-Gradientという機能は、3色指定してシームレス(切れ目のない)なグラデーションカラーを作成することができる優れものだ。私は#FF80B3、#B380FF、#80E6FFというカラーを好んで使うのだが、この3色に対してうまく間の色を補間することで、下の画面の背景のような綺麗なグラデーションを作成することができる。

f:id:nakahara_nanase:20220126192646p:plain

これらをもとに斜め45度に色をつけてみよう。f:id:nakahara_nanase:20220126192727p:plain

ColorSpaceの綺麗なグラデーションをうまく再現することができた(Pythonのmatplotlibという機能を用いている。 y=x+kとして kをいろいろ動かすことで色に変化をつけている。数学が役に立つ一例だ。)。また我らがPowerPointでも再現してみよう。

f:id:nakahara_nanase:20220126200157p:plain

最初はこのようなグラデーションだが角度と色を調整し、

f:id:nakahara_nanase:20220126195443p:plain

ここまでの仕上がりになる。PowerPointではグラデーションの分岐点を10個までしか置くことができないので、3-Color-Gradientで生成した色のうち一部の色については除く必要がある。またそのまま使うと色が濃すぎるため透明度などをうまく調整する必要がある。その際分岐点の透明度を一律で設定するのではなく、各点ごとに小さく調整していくことで自然な仕上がりになる。どうだろう今にもAppleの文章なんかを喋り出しそうではないか。

f:id:nakahara_nanase:20220126200201p:plain

今回は配色に気を配ろうという記事であった。確かに基調の色を決めて配色を決めて、調整してという過程は面倒なのだが、配色に気をつけるだけでグッと見栄えが良くなるのでぜひ活用してみてほしい。

とはいえ先ほどまでに紹介してきた配色は、あくまでタイトルスライドやスライド上部(すなわちヘッダ部分)などでの使用を想定している。これは色覚の多様性に配慮するためである。色覚バリアフリーな資料を作成するためには気をつけるべきポイントがいくつかあるのだが(ぜひこちらとこちらをみてほしい)、色が重要な情報を持つ時は色覚の多様性に配慮した配色が必要である。たとえば、以下の2つの図は一見上の図のほうがおしゃれに見えるのだが、これが重要な結果であり最も伝えたいものであった場合には適さないといえる(かもしれない)。これは隣り合った色がいずれも暖色系であり見分けづらいのだ。

f:id:nakahara_nanase:20220126180228p:plain

f:id:nakahara_nanase:20220126180159p:plain

2枚目の図は違いに寒色系と暖色系が交互になっているため1枚目よりは色覚バリアフリーな図となっている(個人的には緑と赤の部分はもう少し明度に差をつけるべきだと思っているが...)。

また、背景が白のスライドにも注意が必要だ。背景が真っ白であると見ている人が疲れてしまうのだ。そこで以下の図のように少しばかりグレーのものを背景色にするとよい。1枚目のスライドよりは明るさが落ちついておりめに優しい背景になっている。

f:id:nakahara_nanase:20220126202255p:plain

 

本当はフォントにもこだわるべきなのだが本ブログで扱う内容を大幅に超えるので省略する。私は和文はメイリオ、欧文はSegoe UIを使用している。ということでこれから発表を控えている全ての人に向けて、見落としてしまいがちな色に関するアドバイスを書いた。おしゃれな配色を生み出してくれたデザイナーさんや、色覚バリアフリーに関する研究をおこなっている人など様々な人の業績の積み重ねに感謝したい。

最後になるが配色といえばMika Pikazoさんの配色が好きだ。

浅い感想だが、鮮やかな色を何色も使うのにすごく綺麗にまとまっていて、キャラがいきいきとしていて本当に素晴らしいと思った。