ゴチャついて見づらい"惜しい"デザインを変えるには　図解コーチが教える、よくやりがちな例と実際に使えるテクニック

実際に見やすい図を作るためのTips

新垣才氏：残りもうちょっとですね。じゃあ、実際どうやればいいの？　というHow寄りの話をしていきます。見やすい図を作るためのTipsですね。さっきのスライドの全体像の図と画の話をしたいなと思います。

「見やすい図を作るためには」というところなんですけど、けっこうありがちなのはこういう図。これは何が良くないかというと、図形に、塗りつぶしの色と枠線の色を同時に使ってしまってるんですね。

例えば左側だと薄いオレンジの塗りつぶしに、赤い枠線で囲っていて、右側だったら青い塗りつぶしに、黒の枠線で囲ってしまっているんです。これは絶対に悪いと一概には言えないんですけど、基本的には必要なのはどっちかなんですよ。

なぜかというと、塗りつぶしも枠線も、他のものと境界を区別するために存在しているのであって、二重に区別する必要がないんです。基本的には、例えば塗りつぶしだけでも、十分どこまでが他と同じグループかわかります。

こういうふうに塗りつぶしの色をなくして外側の赤枠線だけにするとか、黒い線だけにするとか。塗りつぶしか枠線かどちらかで十分伝わるのに両方をやってしまうと、その分目に入る情報量が増えて目が疲れてしまうので、基本的にどちらかで大丈夫です。

もし、図形をいくつか重ねたい場合。例えばこういうものですね。「図解フレームワーク」という囲みの中に「比較」「構造」「順序」の3つの囲みがあって、さらにその中に「マトリックス」「マッピング」っていう囲みがあって、さらにグラフの中に「円」「棒」「折れ線」みたいな、今（要素が）4重にあるんですけど。

こういう場合は塗りつぶしだけだと見づらくなってしまったり、枠線だけで囲ってしまうと、枠線が多すぎてゴチャつく印象を与えやすいです。なのでこういう図をいくつか重ねたい場合は、塗りと線を組み合わせてあげると比較的見やすくなります。

ゴチャつかない「塗り」と「線」の組み合わせ

例えばこの場合だと、一番外側が「塗りつぶし」。その上が「枠線」。その上が「塗りつぶし」。最後に一番「円」「棒」「折れ線」が「枠線」というように、「塗り」「線」「塗り」「線」の順で4層構造を作っています。こうすると枠線や塗りつぶしだけよりも見やすくなって、どこまでが1個の囲みなのかがわかりやすくなったりします。

別の順でもいいです。これは「線」「塗り」「塗り」「線」っていう順番で囲っているんですけど、こういう組み合わせでもいいですね。ずっと同じ塗りつぶしだけとか線だけだと見づらいので、塗りと線を組み合わせて順番に囲ってあげるといいです。

もしくは、そもそも4つ囲まれている時点で「別の表現に置き換えたほうが見やすいんじゃないか」と検討するのも1つの手ですね。例えば4層構造だとツリー構造にしてみるとか、こういう分け方もありです。なので、よくあるミスというか、ちょっと見づらくなってしまう「塗りつぶし」と「線」の話をしました。

あとは事前の質問にも上がっていたんですけど、画、写真の選び方を最後にお話ししたいなと思います。まず画ですね。僕は画の種類を大きく4つに分けています。まずは写真と、東京オリンピックでも有名になったピクトグラムですね。

基本的にどの国でも伝わるように作られたピクトグラムと、アイコン。これはピクトグラムよりももうちょっと広い定義のもので、イラストよりは抽象化された、あるものや概念を一目で象徴する記号のようなものです。

あとはもうちょっと情報量が多いイラストですね。「いらすとや」っていう、イラストが無料で提供されてる有名なところもありますけれども、（画としては）写真とピクトグラム、アイコン、イラストの4種類があります。

図の選び方で統一感を出す

画を選ぶコツは大きく分けると2つです。「素材の質」が1つ目です。これは起業する時のプレゼン資料もそうですが、どうしても自分で撮った写真を使うほうが便利なんですけど。やはり写真の素材サイトやプロが撮ったものだと、例えば青い空を表現したい時に、もうぜんぜんクオリティが違うので、基本的には質にこだわって選ぶほうがいいですね。

あともう1個が、さっきの「塗り」と「線」の話にも通ずるんですけど統一感ですね。例えば3つ並べた時に、アイコンとイラストをゴチャ混ぜに使うよりは、アイコンだったらアイコンで揃えて、なおかつ右側のように「塗り」と「枠線」のテイストを揃えることですね。

「枠線」が黒でかつ中に「塗り」の色も入っているように、アイコンの素材の質感も揃っています。こういうふうにやってあげるとアイコン自体の「統一感」が出ますので、意識してあげるといいですね。左側ですと「学問」は、枠線がなくて黒色のベタ塗りの塗りつぶしだけ使ってるアイコンですし、真ん中のアイコンは黒の枠線と中の塗りつぶし、「線」と「塗り」をどっちも使っているアイコン。

右側のアイコンは「塗り」だけなんですけど、ちょっと3D感のあるテイストでバラバラなので、これは同じものを使うと統一感が出ていいですね。こんな感じで「塗り」だけだったら「塗り」だけでもいいですし、「枠線」だけだったら「枠線」だけでもいいです。「塗り」と「線」どっちも使うなら「塗り」と「線」だけで統一するのがいいです。こういう図の選び方でも、けっこう統一感が出ますね。

あとは写真を全画面で表示したい時って、みなさんあると思うんですけど、画像の上に文字をのせようとすると、けっこう文字が見づらくなってしまうかもしれないですね。こういう場合はどうすればいいか。

例えば、写真の上に透明な白い図形を重ねて、その上に文字をのせてあげると文字が見やすくなります。写真と文字だけじゃなくて、写真と文字の間に半透明の図形をのせてあげると、文字が浮き立って見えるので、テクニックとしてちょっと知っておくといいかもしれないです。

例えば白い四角や、ちょっと暗くしてみたいなら逆に黒でもいいですね。黒い四角を透明度60パーセントの半透明にして重ねて、その上に白い文字をのせてあげる。こうすると、文字がしっかり見えて、かつ後ろの背景も見えます。どっちも見やすくするためには、ある程度透明度のある四角で調整してあげるのが、おすすめのやり方の1つになります。

表現の幅が広がるテクニック

あとは、画を斜めに切って見せるというものがあります。これは何かというと、たとえばこのスライドは左側に文字、右側に写真（を入れています）。よくあるスライドの使い方だと思いますし、もちろんこれでもいいんですが、例えばこんな感じに斜めに切ってあげると、ちょっとおしゃれさが増すというか、表現の幅として広がるかなと思います。

これは実はすごく簡単にできまして、今ちょっと見やすくするために緑色にしてますが、超大きな四角形を枠の外にスライドにまたがってのせてあげるんですね。この緑色の四角を、左側の白い背景と同じ真っ白にしてあげると、あたかも写真のほうがカットされているように見える表現ができます。こういうのも覚えておくといいかもしれません。

ここまでの後半のまとめに入ります。「レイアウト」の話をしましたね。これはさっき言った配置と形を整える。配形と配置の組み合わせなんですよ。そしてそれには「近接」「整列」「対比」「反復」「余白」「分割」「誘導」の大きく7つの原則があって、この原則を元にスライドを組んであげると、見やすくてわかりやすいものが作りやすくなるというお話をしました。

今日は、その中でも「整列」「対比」「余白」の3つをお話しさせていただきました。「整列」は、見えない線とか見えない四角まで揃えてあげると、より美しく見えます。「対比」ですと、どういう差をつけるかという形もそうですし、文字も位置もそうです。けっこういろんな差のつけ方があります。「ジャンプ率」の話もしましたね。

あとは「余白」ですね。見えるものだけじゃなくて見えない空間をどれだけとるかも、1つのレイアウトの要素としてあるんですよというお話になります。そして実際に具体的にどういうTipsがあるのかというところで、図を作る時には「塗りつぶし」と「枠線」を同時に使わず、どちらか1つで十分というお話ですね。

「塗りつぶし」だけでも「枠線」だけでも見えるので、同時に使うことは基本的にはしないほうがいいです。なぜなら「塗りつぶし」でも「枠線」でも他の要素との境界をつけるためにあるものなので、どっちか1つでも十分です。

学びを次の行動に生かすには

もし図を重ねたい場合は、「塗り」とか「線」を組み合わせてあげて、「線」「塗り」「塗り」「線」というふうに組み合わせるか、もしくは別の表現に置き換えてあげるといいかもしれません。

「画の種類」にも、「写真」「ピクトグラム」「アイコン」「イラスト」で、情報の解像度によっていくつかに分かれるんですよってお話と、それを選ぶ時にはもちろん素材の質にはこだわるんですけど。

あとはもう1つ、統一感ですね。さっきの情報量を合わせるのもありますし、さっき言った「塗り」と「線」、何を使っているかも揃えると、より統一感が増したスライドになります。あと最後に、さっき言ったように全画面の話と、斜めに図形を切ってあげることで、あたかも写真が加工されているかのように見せるテクニックもご紹介させていただきました。

では終わりになりますが、最後に、今日学んだことをどう生かしていくか、次に何を生かしていくかっていうお話になるんですけども。セミナーが終わったら、みなさん次はどうしますかというお話で、前回の「ストーリー編」と同じなんですが、Let’sプレゼン。「プレゼンを実際にしてみよう」というのが一番大事なんですよね。

今日学んだのはちょっと抽象度が高いお話でもあるので、実際にもう少しかみ砕いて次の行動に生かすとしたら、例えばこういうのがあるかもしれません。

今まで自分が作った資料を見返して、今日のセミナーの話と見比べて「私は整列が意識できていなかった。整列してみるとどうなるかな」とか「すごくギューギューに詰めていたから、もうちょっと余白を取ってみるとどうなるか」みたいにリデザインしてみるのもありです。

他には、お気に入りのプレゼンの動画やYouTubeのデザインに着目して、「どういうレイアウトの原則が使われているんだろう」と（スキルを）盗んでもいいですし。

あとはプレゼンのデザイン本でHowがいっぱい載ってるものをとりあえず乱読してみて、それをスライドデザインの全体像と当てはめて「こういう時はこういうパターンが使えるんだな」と、パターンを知るのもいいかもしれませんね。ということで、講座は以上になります。ご視聴ありがとうございました。