資料で言いたいことが多すぎて、見た目がごちゃついてしまって分かりにくい...そんなお悩みを持つ人に意識して欲しいのが「コントラスト」と「余白」です。この2つを意識することで「ごちゃつき」が解消される=認知負荷*が下がるので、情報の受け手にとって見やすく分かりやすいものに仕上がります。(*認知負荷に関してはこちらの記事を参考にしてみてください。）本記事では誰でも「コントラスト」と「余白」が使いこなせるように解説していきます。コントラストコントラストは「デザインの4原則」の記事でもご紹介したように「要素間の差異を際立たせることで情報の優先度を視覚的に伝えること」です。これは言い換えると要素間に色やサイズの違いを持たせることで「受け手が情報を処理する順番を視覚的に伝える」ということになります。例えば、すべての文字サイズが同じスライド資料では、どれが重要な情報か一目では分からないため理解するのに少し時間がかかります。一方で文字サイズに強弱をつけるとどうでしょうか。見た瞬間に大きな文字サイズのものがまず目に飛び込んでくる=情報を処理する順番が考えなくても瞬間的に理解できます。特に情報が多い資料などを作る場合はコントラストを意識しないと受け手が情報量の多さに圧倒されてしまう場合があります。コントラストを上手に用いると受け手に情報処理の優先度が自然と伝わるので、ストレスを与えることなくスムーズに内容を伝えることができます。コントラストの基本的な作り方ここからはコントラストの基本的な作り方について解説していきます。コントラストの基本的な考え方は「他とは違うことを視覚で伝える」です。具体的には色、形、サイズ、テクスチャなどを変えることで視覚的な差異を生み出します。これには様々なやり方があるのですが、スライド資料の作成など日々の業務の中で役立つのは主に「大小(サイズ)」と「色」で差異を生み出す方法です。「色」に関しては別の記事「色のイロハ」にて詳細に説明しているので、そちらを参照してください。「大小(サイズ)」に関しては非常にシンプルで「優先度の高いものを大きくする」のが基本です。この「大小(サイズ)」での対比を一番よく使うのは「文字」であり、文字のサイズの比率のことをデザインの専門用語で「ジャンプ率」と呼びます。「文字の大小」ジャンプ率の基本ジャンプ率は文字サイズの大小の比率のことです。この比率を適切に設計することで、コントラストが効いた見やすい資料になります。基本的な考え方としてはまず一番言いたいこと=見出しを大きく、その説明である詳細をそれよりも小さくします。また見出し間の重要度の違いによって大きさを変えることもあります。例えば大見出しが一番大きく、次に中見出し、そして小見出しといった形で見出しのレベルが下がるにつれて文字サイズを小さくしていくのが一般的です。そして肝心の文字サイズの比率ですが、基本的には4pt以上の差をつけるようにしてください。4pt以下の差、例えば2pt程度の差だと人はその違いを判別しづらいため、コントラストが効いた状態になりません。4pt以上の差があればその差は一目瞭然のため、しっかりとコントラストを効かせることができます。まとめると重要なメッセージを大きくするフォントサイズの差は4pt以上にするとなります。ここまでがコントラストの説明でした。非常にシンプルなテクニックですが、適切に使えるととても効果が高いのでぜひ活用してみてください。余白余白はその名の通り何も要素が配置されない余った空間のことです。余った空間だからと言って無駄なものではなく、適度な余白は認知負荷を下げ伝わりやすさを向上させます。余白はなんとなくで作っている方も多いと思うのですが、それだとセンスの良し悪しという話になってしまうため、本記事ではセンスではなく誰でも余白が使えるように解説していきます。何に余白は生まれるのか余白を考えるにあたって今回はデザインの要素を「原子」「パーツ」「グループ」に切り分けて考えてみたいと思います。原子：それ以上分解できない最小単位パーツ：グループを構成する部品グループ：同じ意味の塊 = 近接させるもの余白はこの3つそれぞれに生まれ、考え方が少しづつ異なります。原子：コンテンツの最小単位原子はそれ以上分解できない最小単位、つまり文字やボタンの背景などのことです。原子は必ず余白を持っており、基本的にこの余白は無くしてはいけません。また、原子の余白があまりにも狭いと見にくさの原因にもなるので、原子には適度な余白を作るように心がけましょう。パーツ：グループを構成する部品パーツはタイトルや詳細説明文、ボタンなど意味のまとまり＝グループを構成する部品のことです。パーツの余白は基本的にはパーツを構成する原子が持っている余白をどれだけ拡張するかを考えることが重要です。余裕のあるゆったりとしたデザインにしたい場合はパーツの余白を大きく取り、載せたい内容が多くそのすべてをしっかりと説明したい場合は少し狭めに取るなど意図を持って調整します。ただ狭めに取る場合でも、原子が持つ余白まで潰してしまうと見づらくなってしまうため、原子が持つ余白は潰さない範囲の適度な余白は必ず残すようにしましょう。グループ：同じ意味の塊 = 近接させるものグループは一つの意味の塊のことで、基本的には近接させるもののことを指します。例えば、メルカリなどのECサイトのデザインでは、商品一覧のページにたくさんの商品が載っています。1つの1つの商品ごとに「商品画像」「商品名」「金額」「ボタン」というパーツがあり、このまとまりがグループです。グループの余白を考える際にはグループの内外の2つの余白を考えます。まずグループ内部ですが、そのグループを構成するパーツはそれが同じグループであることを示す必要があるため、基本的には近づける(近接)ようにします。(別記事「デザインの4原則」内の「近接」の章を参照)つまりグループ内部の余白は基本的に小さくなります。一方でグループの外、つまりグループ同士の余白はそれが違うグループであることを明示させる必要があるため、基本的には内部よりも広めに取ります。こうすることで情報の受け手は一目で、何が同じ意味のかたまり＝グループで、何が違うグループなのかを判断することができるようになります。余白を作る際に意識すること余白を作る際にはなんとなく作るのではなく、「ルール」「軸」「グリッド」を意識すると綺麗な余白が生まれやすくなります。ルールルールは余白として設定する幅に「決まり」を作ることを指します。要素を配置してなんとなく余ったスペースを余白としてしまうと、全体としてまとまりのない見た目になってしまいがちです。そうではなく例えば上下左右の余白の幅にルールを定め、そのルールに則って余白が生まれるように要素を調整すると美しくまとまりやすくなります。余白が上手く作れないと悩む人のスライド資料などを見ると、その多くがなんとなく余白を作っていて結果としてまとまりがない状態であることがよくあります。極端な話、スライドの上下左右の余白だけでも揃えてあげると、それだけでグッと見やすくなることもあるので、ぜひ自分の中でルールを作って意図的に余白を作るようにしてみてください。軸軸は画面全体を通して要素を整列させる起点のことです。要素の整列に関しては意識できている人が多いのですが、画面全体に一本の軸を通し、それに従ってすべての要素を整列させるまで意識できている人は多くありません。軸が通っていないとまとまりに欠いたデザインになってしまい、これも見づらさの原因になってしまいます。縦横一本の軸を意識するだけで、自然と要素が揃い綺麗な余白が生まれやすくなります。例えば以下のスライドでは全ての要素を縦横1本の軸を起点に配置しています。すると、要素が自然と軸寄りに集まるため、オレンジのハイライトで示すような余白が意識せずに生まれます。グリッドグリッドは軸を起点に等間隔に縦横の線を引いて区切った空間、に従って要素を配置する手法です。等分されたスペースに要素を配置するため、すべての要素が美しくまとまり、調和の取れたデザインになりやすくなります。またグリッドも綺麗な余白を自然と生み出します。以下のスライドではグリッドが採用されています。グリッドに区切られた小部屋内部では、それぞれ要素を整列させる力が働きます。するとオレンジのハイライトで示すような余白が自然と生まれるようになります。まとめ今回はコントラストと余白について解説しました。コントラスト、余白それぞれ特に情報量が多い場合に有効に活用すると認知負荷の低減に大きく役に立ちます。ぜひ使いこなせるように練習してみましょう。