視覚や錯覚を利用した「絶対に外れないデザイン」　図解コーチングのプロが教えるスライドデザインの勘所

絶対に外れないデザインを作る方法

新垣才氏：もうちょっと抽象的なWhatの話をしていきます。スライドデザインの勘所ですね。「全体像はわかったけど、実際にスライドデザインってどうしていけばいいの？」という話に入ります。

それを知るためには、さっき言ったようにスライドデザインで何をしたいのか、「誰の・どんな価値を設計したいのか」を考える必要がありますよね。ただこれって100人100通りで、たぶん今日参加されてるみなさんでも1人として同じ人はいないと思うんですよね。

じゃあ結局どうすればいいのかっていうと、そんな中でもスライドをデザインする時は「この2つだけは、今参加されてる方は誰でも共通ですよね」という、当たり前すぎるぐらいの共通点が2つあるんです。1つめは、おそらくみなさんも動物に対してプレゼンすることはないでしょうから、「人」に対してデザインするということです。

そしてもう1つ、「視覚」を通して内容を伝えるということ。これもけっこう重要で、スライドを使う以上どうしても視覚に頼るしかないんですよね。スライドを使わず音声のみでプレゼンテーションするとしたら、聴覚だけでもいいと思うんですけど。スライドを使うってことは必ず視覚を通してやっているので。

つまり、人の視覚を通じた認知とか感じ方をもとにしてデザインすれば、まず絶対に外れないんですよ。なのでまずここから学んでいくと、「この本ではこのテクニックがあって、このテクニックは視覚の認知でこうなっているから、使えるんだ」という因果関係がわかるようになるんですね。なのでまず、ここをちょっと紹介していきたいと思います。

人の視覚を通じた、3つの法則

人の視覚の認知・感じ方。認知科学とか脳科学とか、そこらへんの話にも触れるような内容なんですけど、今日は大きく3つ紹介したいと思ってます。「ゲシュタルト原則」と「錯視」、目の錯覚ですね。あとは「視覚属性」を軽く紹介したいと思います。

まずゲシュタルト原則。どんなものかというと、たとえば「近接」。「人は物理的に近い要素同士を、勝手に同じグループだと認識してしまう」というものですね。黒い線の左側に6個の四角があるんですけど、パッと見ただけでなんとなくこの3つのグループ、1つのグループ、2つのグループと勝手に見えてしまう。これは、ゲシュタルト原則の近接と呼ばれてます。

他には「類同」。等間隔に並んでいても、色や形や大きさが似ていると、勝手にそれが3つのグループだと思えてしまう。9個がバラバラではなくて、3×3のように見えてしまうというものです。

次に、囲っているものが勝手に同じようなものに見える「囲み」。上が6個、下が4つとか、囲うと近いものに見えやすいんです。あとは「閉合」。部分的に欠けていても、勝手に頭の中で三角形ができてしまう。本当はただの1本の線のはずなのに「丸が一部欠けている」と思うのも、脳の勝手な補完が働いて、そう見えてしまうんです。

近いものをグループ化する「ゲシュタルト原則」

他にも、勝手に2つ円が重なってるように見えてしまう「連続」。2つの三日月と、その間に楕円が挟まってるようにとらえてもおかしくないはずなのに、たぶんみなさん全員が「2つの円が重なってる」って勝手に思っちゃいます。そして「接合」。これはさっきの「囲み」と似ていますが、同じように物理的につながってるものも同じグループだと認識しやすいです。

あとは3Dになると「面積」ですね。黒い四角と白い丸があったとして、「黒い四角の上に白い丸が乗っている」と勝手に思ってしまうんです。「黒い四角が、うしろにある白い丸でくり抜かれている」という捉え方もできなくはないはずなんですけど、パッと見どうしても黒い四角の上に、白い丸が乗っかっていると思ってしまう。

あとはこのアニメーションを使った「共通運命」。同じ方向に動いているものを同じグループだと認識してしまう。アニメーションが止まっていると、さっきの「類同」と同じで、右側の菱形2つが縦で同じグループだと思うかもしれません。でも動いていると、下2つと止まっている上2つというように見えやすくなる。同じ動きをしているもの同士が同じグループだと思ってしまうんです。

まだまだあります。「対称」。鏡張りのように対称になっているものを1つのグループだと思ったり。あとこれはみなさんご存知ですかね。「ルビンの壺」と呼ばれているものです。「図」と「地」と言いまして、人は領域を要素と背景に勝手に分けて認識しているんですけど、その時に「地」という背景にあるものはほとんど知覚されなくなってしまうんですね。

これは黒い部分を要素とすると壺に見えるんですけど、白い部分を要素だと思うと、2つの横顔が向き合っているように見える。どっちかを認識している時、どっちかが背景になってしまい、同時に2つを知覚することがかなり難しいものになっています。こういうのを「ゲシュタルト原則」と言います。

「目の錯覚」とも呼ばれる「錯視」

あとは他にも「錯視」がありますね。これもみなさんきっとご存知だと思います。「ミュラー・リヤー錯視」という名前がついてるんですけど、例え同じ長さの線でも、矢羽を内側に付けると短く見えたり、（外側に付けると）長く見えてしまうとか。あとは周りが相対的に大きいか、小さいかで、同じ大きさのものが小さく見えたり大きく見えたりしてしまう。周りにどういうふうに囲まれているかですね。

同じ長さでも頂点に近いほうがちょっと長く見えたり、ちょっと大きく見えたりとか、周りが狭いか広いかによっても、同じもののはずなのに大きさが異なって見えてしまうとか。同じ図形なんですけど、内側に置かれたほうが長く見えたり、大きく見えてしまうのもありますね。こういうのもスライドデザインの元になっているものです。

あとは同じ大きさなのに45度回転させただけで、菱型のほうがちょっと大きく見えてしまうとか。1本の線を引いたはずなのに、周りに四角を置くと、ちょっと線がずれてるように見えてしまうとか。

あとはカフェウォール錯視。線が斜めって見えてしまうものとか。これは一番端の左の線と一番右の線のちょうど真ん中に、右から2番目の黒い線があるはずなんですけど。左側が詰まってるのでちょっと右に押されてるように見えて、真ん中にあるように見えづらいとか。

それから色にも「錯視」があります。周りの背景が相対的に暗いか明るいかによって、同じ色でも周りが暗いと明るく見えるし、周りが明るいと暗く見えてしまうんです。

グレースケールだけじゃなくて、色がついているのもそうですね。緑色が背景にあると、ちょっと赤みがかって見えてしまう。それを補色と言うんですけど、緑の補色は赤なので、同じグレーのはずなのにちょっと赤みがかって見える。こういう「錯視」もありますね。

これは「シュブルール錯視」と言います。黒からグレーまでの6個の長方形があるんですけど、これをくっつけてしまうと、勝手にグラデーションがかかったように見えてしまうんですね。この錯視を使って応用すると、ピッタリ図形をくっつけないほうが、色としては間違って認識されないんです。

「視覚が何の属性をもとに判断しているか」を表す「視覚属性」

あとは「視覚属性」もあります。これは専門用語なんですけど、ちょっとここでクイズを挟みましょうか。今赤色の四角が3列6行ずつで18個あるんですけど、この中の真ん中の行、左から2列目の四角に注目させたいとします。何をしてもいいので、みなさんだったらどうやってこれを目立たせますか？

チャットありがとうございます。ああ、いいですね。「角度を傾ける」「色を変える」。「丸で囲む」「大きくする」そうですね。今、おっしゃってるのはどれも正解だと思います。例えば「色を変える」。ちなみに色を変えると言っても、赤を緑にするというような色相と、明るさ（明度）や鮮やかさ（彩度）を変える。こういう3つの変え方があります。

あとは印をつける、囲う、位置をずらすのと、角度を傾ける。向きを変えるとか、長さや大きさ、太さを変えちゃう。ここらへんから何でもありなんですけども、湾曲、歪ませて形さえ変えてしまう。目立たせるためにはどういう要素を変えればいいのか、視覚が何の属性をもとに判断しているかを「視覚属性」と言います。

ポインタで指し示すのもそうですね。こういうふうに、人の視覚に合わせて、位置や色使いを調整し、設計、デザインしていくといいですよというお話です。ちょっと抽象的な話が続いたので、いったんここまでの話をまとめますね。

「人の視覚」を軸にしてデザインする

まず、デザインの定義として、大きく2つあるというお話をしました。広義の意味だと「設計」、狭義では「見た目」の話。これは英単語では、「appearance」とか「styling」っていう別の言葉が割り当てられます。けっこう日本人のデザインというとこの2つが混同するんですけど、分けて使えるようになるとデザインに対する解像度が上がって見えます。

じゃあデザインって何なのかっていうと「設計」なんですけど、その中でも「誰にどんな価値を提供したいのか」という「対象」と「目的」に合わせた価値の設計という話をしました。

ではスライドのデザインは、どんな要素を使って、どんな手段を使って組み合わせていくのかというと、めちゃめちゃいろいろあるように見えるんですけど。ちょっと抽象化すると「文字と図形と画をどこにどんな形で置くか」「どんな色で置くか」あとは「質感をどうするか」と、また動きをつけるのもありますが、実はこれだけしかないんですよと。

スライドデザインを実際にどうしていくかというと、そもそも「誰がどんな価値を設定したいの？」って話で、究極言っちゃうと人によりけり。そんな中でも「じゃあ共通点ってどこなの？」となると、人の視覚なんですよね。

人の視覚に訴えるのがスライドのデザインなので、その認知とか感じ方を知ってデザインするのが一番強いですよね。ということで、さっきの「ゲシュタルト原則」「錯視」「視覚属性」の3つの例をお話ししてきました。