伝わるデザイン


伝えるとは

 

 

見やすいレイアウト、わかりやすいレイアウトを作るときの重要なポイントは、ただ闇雲に文字や絵を配置するのではなく、発表者の頭の中にある「ロジック」や「事柄と事柄の関係性」に即して文字や絵を配置することです。関係性の強いもの同士は、近くに配置したり、同じ色を使ったり、線で結んだり、大切な事項を目立つ色にしたり、目立つ場所においたり、という簡単なことです。「理論やストーリーをレイアウトする」ことが大切であるということを忘れないでください。

きちんとしたレイアウトをしようとすると、多くの知識や経験が必要になります。とはいえ、近道をしようとして、カッコいいレイアウトのチラシや雑誌をマネしても、決して良いポスターやスライドは作れません。それは、レイアウトのルールを理解していないからです。ここでは、簡単にできる基本的なルールを紹介します。これらのルールを守るだけで、発表資料は大きく変わるはずです。キーワードは、「揃える」「まとめる」「余白を取る」「コントラスト」の4つです。レイアウトの仕方次第で、見やすさや理解しやすさが大きく変わります。

 

揃える

揃えるられるところはすべて揃える

見やすくするための一つ目のコツは、整理整頓です。たいした労力がかからないわりに、大きな効果を発揮します。下の例では、はじめの状態ではテキストや図がバラバラに並べられています。そこで、赤い点線をイメージしながら、テキストと図をぴったり合わせるように配置すれば、ずいぶんと整理されます。少しでもずれていると、印象がよくない上、読みやすさも低下します。

4

 

次の例も同じです。3つの下の図に対して、テキストの行が短すぎますし、文の右側も左側も図の位置と揃っていません。見えない線を意識しながら、行の長さを調節して、図の長さに合わせましょう。こうするだけで、違和感なく見たり読んだりできます。文字を多少小さくしてでも、上下左右を揃えてみましょう。

5

 

 

センタリングではなく「左揃え」

基本的にセンタリングは避けましょう。センタリングを効果的に使うことができる場面はありますが(1文しかない場合や一つの図しかない場合)、センタリングを活かすには相当のテクニックが必要になります。また、センタリングは、行のスタート位置がバラバラになり、段落や文章を認識しづらくします(上図)。ですので、まずは基本の左揃えをお勧めします。相当の理由がない限り、左揃えにしましょう。

  2

 

 

まとめる(グループ化)

関連のある項目同士を相対的に近づける

スライドやポスターの項目のレイアウトを考える際、先述の箇条書きの例と同様に、「グループ化」という考え方が重要になります。単調にレイアウトされると直感的に理解しにくい場合でも、内容に即してグループ化を行なうことで、全体の構成やロジックが理解しやすくなります。関連の強い文章と写真同士を近くに配置(=グループ化)すると内容を直感的に理解しやすくなります。また、関連の弱いものは少し離して配置する(上下でスペースを取る)ことで、グループ化が強調されます。

1

 

下の例は、「写真」と「写真のタイトル」と「文章」で構成されています。しかし、左の例のように、写真のタイトルが写真自体よりも文章に近づいていると、タイトルであることが直感的にはわかりません。この例の場合であれば、写真とそのタイトルが一つのグループを成すわけですから、これらを相対的に近くに配置する必要があります。また、この時にも左揃えを使うと、更にグループ化の印象が強くなります。

1

 

 

長めの文章でもスペースを使ってグループ化

次の例は、2つの項目が連続しているような場合です。学会発表のポスターのように、「はじめに」「方法」「結果」「考察」などの項目で構成される場合もこれに当たります。左の例のように、タイトルと文章の間隔よりも、項目間の間隔が短いとグループを認識しづらく、全体像を把握しにくくなります。このような状況では、右のように項目ごとにグループ化しなければなりません。スペースのとり方一つで、これほどまでに見やすさが変わります。

1

 

 

色を使ってグループ化

2つの事柄があり、それに対応した2つの図があるとします。こんなときは、対応するもの同士をグループ化すると、状況を捉えやすくなります。先述のように、対応するものを近くに配置してグループ化するという方法もありますが、ここでは、距離ではなく「色により関連づける」という方法を紹介します。

下の例では、左上の図は右上の文章に対応し、左下のテキストは右下の図に対応しているとしましょう。こんなときは、例えば、図に枠を付け、その枠と小見出しを同じ色にしてみると、テキストと図の関係がより密接なものになり、理解を助けてくれます。

3

 

より具体的な例で見てみましょう。下の例では、テキストの色と図中の各部位の色を統一させることで、テキストと図の対応が容易になっています。図中の各部位から引き出し線を引いて遺伝子名を記してもよいのですが、それでは図がごちゃごちゃしてしまう上に、テキストと図を対応させることも難しくなります。

1

 

 

余白をとる

重要! スライドの周囲、図の周囲には余白を取る!

さて、スライドやポスターの「全体のレイアウト」でも余白が重要です。下のスライドの例を見てください(左上)。テキストと図の高さが揃っているのは良いのですが、赤い三角をつけた部分にスペースが少なすぎます(右上)。これでは、とても窮屈で、非常に読みにくいスライドになります。むやみに文字を大きくするのではなく、ゆとりをもって配置できるような文字サイズにしましょう。「文字とスライドの端」、「文字と文字」、「文字と図」の間にはしっかりとスペースを空けましょう。スペースが美しければ、スライドも美しくなります(左下)。また、プロジェクターの具合によっては、スライドの端がスクリーンからはみ出てしまうこともあるので、そういった意味でも、スライドでは周囲にスペースを作ることは重要です。いずれにせよ、ちょっと言い過ぎかもしれませんが、右下の図で薄い赤色で示したくらいの余白(本文の文字で1文字分くらい)をスライドの4辺に取るべきです。

2

 

 

余裕をもった配置でニアミスを避ける

しばしば枠の中に単語や文章を入れることがあります。このとき注意したいのが「ニアミス」。文字が枠のギリギリになってしまうと、枠の近くの文字が非常に読みにくくなります。「ギリギリだけど収まったからいい」なんてことはありません。枠の中に、余裕を持って文章を配置しましょう。文章を枠内に入れる場合は、上下に1文字分ぐらい余白を確保するといいでしょう。

ニアミス

 

文章だけではなく、短い語句でも同じです。枠は大きめにとりましょう。ちょっとしたことですが、こういった積み重ねが全体の読みやすさを大きく変えます。

2

 

もう少し具体的な例を見てみます。枠の中の文字が窮屈すぎると読みにくい上に、印象も良くありません。どうしても枠を大きくできないとか、文字数を減らすことができない場合ならば、少々文字を小さくした方が読みやすいこともあります。相当の理由がない限り、ニアミスは避けましょう。スライド全体にも余白があったほうが読みやすくなります。

2

 

 

美しい余白のために、枠と文字は別に作る

PowerPointの場合、四角や丸などのオブジェクトの中に文字を直接書き込むことができますし、テキストボックスの背景色を設定することで枠の中に字が入ったように見せることもできます。しかし、このような方法は以下の二つの理由から、オススメできません。一つ目は、余白が狭くなりすぎる問題です。左の例を見ればわかるように、テキストボックスは上下左右の余白が充分にないので、単に背景色を付けるだけでは窮屈になってしまいます(余白の設定を変えれば、解決できないこともないですが)。もう一つの問題は、文字の上下左右の余白が均等にならないという点です。フォントによっては(例えば、メイリオ)、中央よりも上に寄ってしまう場合あります。

これらの問題を一気に解決する最も簡単な方法は、枠とテキストボックスを別々に作ることです。右の例のように、枠には枠だけ、テキストボックスにはテキストだけにするというわけです。テキストボックスに色をつけるという方法は読みやすさ、カッコよさの観点から避けましょう。

2

 

 

コントラスト

重要性に応じてコントラストをつける

スライドやポスターでは、文字が単調に書かれていると、聞き手はどこに注目すれば良いのかわからなくなります。したがって、しゃべるときに抑揚を付けるように、文字の視覚的な目立ちやすさも、それぞれの文や単語の重要性に応じて変える必要があります。重要な箇所は強調し、そこに聴衆の目を誘導することで、ポスターやスライドを格段に見やすくすることができます。

大抵の場合、ポスターやスライドでは、各項目のタイトル(小見出し)や、結論/まとめが重要になってきます。下の例のように、重要な箇所とそうでない箇所に、思い切ってコントラストを付けましょう。コントラストは、文字の「太さ」や「サイズ」、「色」を変えることにより付けることができます。また、背景に色をつけるというのも良い手段かも知れません。

4

 

 

重要なところは視認性の高い「太い文字」を駆使する

重要な文字に色を付けると、周囲とのコントラストが大きくなって、確かによく目立ちますが、何でもかんでも重要な箇所に色を付けていると、全体が散漫なイメージになったり、見づらくなったりします。一方、太い文字を使ってコントラストを高めると、高い視認性(目立ちやすさ)を保ちながらも、散漫なイメージをなくすことができます。下の例のように、文字にコントラストをつけようとするときには、「太字」を使うという選択肢をつねに頭に置いておいてください。そのためにも、太字に対応した書体を選んでおく必要があります(詳細は「読みやすく」を参照)。

太い文字

 

 

ジャンプ率を高めてコントラストをつける

「ジャンプ率」とは、本文の文字サイズに対するタイトルや見出しの文字サイズの比率のことです。ジャンプ率が低いと落ち着いた印象になり、ジャンプ率が高いと躍動感のある印象になります。ポスターやスライドでは、通常、タイトルはとても重要です。タイトルには、自分の言いたいことが凝縮してあるからです。下の例のように、タイトルのジャンプ率を高くすればするほど、タイトルが強調されていることがわかります。絶対的な大きさではなく、本文に対する相対的な大きさが、目立ちやすさや躍動感を決めているのです。

12

 

 

小見出しにもコントラスト

「小見出し」は、文章にリズムを生み出し、文章の区切りを明確にします。また、各項目/文章の「まとめ」としての機能も果たします。したがって、小見出しを有効に活用すれば、読みやすい文章を作ることができます。小見出しを小見出しらしく目立たせるためには、日本語の文章の場合、「太字を使う」「色を変える」「サイズを変える」「書体を変える」「下線を付ける」といった方法で本文とタイトルにコントラストを付けることができます。下の例を見れば、これらの効果が一目瞭然です。ただし、3つ以上の方法を併用(太くして、書体も変えて、サイズも変えて、色も変えるなど)すると、くどくなり過ぎて、逆に読みやすさが低下することもあるのでご注意ください。

 

あ

 

 

英語の文章の場合は、日本語の場合に加えて「斜体を使う」というのも有効な方法となります。3つ以上の方法を併用して目立たせようとすると、目立ちすぎて読みにくくなってしまうというのは、日本語の場合と同じです。

d

 

【補足】「太字を使う」「色を変える」「サイズを変える」「書体を変える」「下線を付ける」「斜体を使う」といった方法は、小見出しだけではなく、文字を目立たせたいときにいつでも使える方法です。また、文字を目立たせるために「3つ以上の方法を併用しないほうがいい」というのも、およそどんな時にでも当てはまるルールです。覚えておいて損はありません。

 

 

まとめ

ルールを守れば、読み手は「迷子」にならない

下の図は典型的な迷子ポスター(制作者の勝手な呼び名)です。左上から順に下へ読み進むような気がしますが、その後どこに行ったらよいのかわからず途方に暮れてしまいます。そればかりか、テキストがどの図に対応しているのかもわかりません。これが、読んでいてゴールのわからなくなる迷子ポスターです。「揃える」「まとめる」「余白を取る」「コントラスト」というルールを守るだけで、迷子になる人を大幅に減らすことができます。ポスター等、情報量が多くなる資料の場合、受け手が読む順番を間違えないかどうかを意識しながら、レイアウトを改善して行きましょう。

1

 

「グループごとに枠で囲う」というルールを採用すれば、さらにわかりやすくなるかもしれません。下の例のようにすれば、迷子になる心配は少し減ります。実際には、「はじめに」や「方法」、「結果」、「実験1」、「実験2」、「考察」などの小見出しを付けたり、各項目に番号を付けることで、さらに読む順序がわかりやすくなるはずです。

3

 

 

 

inserted by FC2 system