伝わるデザイン

レイアウト


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

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

ルール1:余白をとる

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

さて、スライドやポスターの「全体のレイアウト」でも余白が重要です。下のスライドの例を見てください(左上)。テキストと図の高さが揃っているのはよいのですが、赤い三角をつけた部分にスペースが少なすぎます(右上)。これでは、とても窮屈で、非常に読みにくいスライドになります。むやみに文字を大きくするのではなく、ゆとりをもって配置できるような文字サイズにしましょう。「文字とスライドの端」、「文字と文字」、「文字と図」の間にはしっかりとスペースを空けましょう。スペースが美しければ、スライドも美しくなります(左下)。また、プロジェクターの具合によっては、スライドの端がスクリーンからはみ出てしまうこともあるので、そういった意味でも、スライドでは周囲にスペースを作ることは重要です。スライドの場合は、最低でも本文の文字の1文字分の余白(右下の図で薄い赤色で示したくらいの余白)を設けるようにしましょう。2文字分くらいの余白をとると、かなりゆったりした資料になり、確実に見やすくなります。研究発表では必要のないことかもしれませんが、余白が多いほどオシャレな印象になりやすいです。

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

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

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

もう少し具体的な例を見てみます。枠の中の文字が窮屈すぎると読みにくい上に、印象もよくありません。どうしても枠を大きくできないとか、文字数を減らすことができない場合ならば、少々文字を小さくした方が読みやすいこともあります。相当の理由がない限り、ニアミスは避けるようにしましょう。ちなみに、分量(行数)が少ないほど、枠内の余白は少なくてもよいです(スライド全体には1文字分の余白が必要だが、タイトル部分やフローチャートの部分は、0.5〜0.7文字分でも構わない、という意味です)。

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

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

これらの問題を一気に解決する最も簡単な方法は、枠とテキストボックスを別々に作ることです。下の例のように、枠のオブジェクトと、背景色や枠色のないテキストボックスを作るというわけです。もちろん、オブジェクトやテキストボックスの内側に余白を設定した上で文字を直接書き込むという方法もありすが、プレゼン資料などは、オブジェクトや文字などを「重ねていく」という発想で作ることをおすすめします。

ルール2:揃える

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

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

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

重要なので、繰り返し見てみましょう。小見出しや図のキャプションがあってもう少し複雑な場合も同じです。やはりできるだけ揃えます。少なくとも左側と上側だけは揃えましょう。構造によっては右側や下が揃わない場合もありますが、それはそのままでも問題ありません(例えば、段落内で強制的に改行をすると右側が揃わなくなります)。

タイトルより上に中身を書かない

人はふつう左上から右下の方に目が動きます。そのため、左上にタイトル(小見出し)を付けた場合、そのタイトルに関連する内容(中身)はタイトルよりも「右下」にあるほうが、読みやすくなります。下の例で、点線で囲った部分が「中身」を書くのに使える領域になるのです。もちろん、ダイナミックなレイアウトにしたいときには、この領域をはみ出すことがあるでしょうが、通常は、この領域内に収めた方がベターです。決して、「中身」をタイトルの真横やそれより上のスペースに書かないようにしましょう。このルールは、どんな小さな小見出しの場合でも同じです。

小見出し(下の例の場合は、結果)の横にスペースがあるからといって、ここに文章や図を入れてはいけません。このルールを守らないと、左側の例のように、全体の構造が曖昧になってしまいます。右側のように改善すると、「結果」というタイトルの中に、1と2の実験が含まれていることが明確になり、理解しやすくなります。タイトルの横にスペース(余白)ができたおかげで、窮屈な印象もなくなります。

この例でわかるように、レイアウトをするときにはスペースができることを恐れず、むしろスペースをうまく使っていくことが重要になります。スペースの使い方については、次の項目でも説明します。

パソコンを信じずに「目で見て」揃えることも大切

前述のとおり、左寄せにすることはとても重要です。でもパソコンに頼って左寄せ(場合によっては、右寄せやセンタリング)することは必ずしもよくありません。問題になるのは、たとえば、小見出しを強調するために使う【 】などの記号です。|や( )などの記号や約物でも同じことですが、こういった記号が行頭にきてしまうと、たとえ下の段落と左揃えにしても(青いラインを見てください)、左側が不揃いになってしまいます。ワープロソフトでは、このような現象がしばしば生じます。これは、記号の字形上、どうしようもないことです。

解決の方法はソフトによりいろいろあります。PowerPointやKeynoteでは、見出しと本文を別のテキストボックスにした上で、目で見て合わせるのがもっとも手っ取り早いはず。上の例のように、自分の目を信じ、パソコンに頼らず位置を合わせるのがもっとも簡単でもっとも美しいです。こうするだけで、圧倒的に読みやすくなります。まさに機能美。

では、もう一つ、フォントサイズが違うだけで不揃いになってしまう例を出しておきます。下の例では、ふたつのテキストボックス(小見出しと本文)をちゃんと左寄せにしているのに、本文よりも小見出しのほうが内側に寄ってみえてしまいます。これは、小見出しのフォントサイズが大きいため。こういった場合も、上の例と同様、「美しい左寄せ」をしたいならば、位置合わせ機能を使わず、目で見て合わせるほうが賢明です。細かい話でごめんなさい。神は細部に宿ります。細部をバカにしてはいけません。

おさまりの悪いイラストやグラフは四角で囲う

「見やすく」の「レイアウト」の項目で解説したとおり、文字や写真、図などはできるだけ位置を揃えて配置した方が見やすくなります。しかし、位置を揃えにくい図や文字、位置を揃えても揃って見えない図や文字が存在することも確かです。写真などの輪郭のはっきりしたオブジェクトは輪郭に沿って他のオブジェクト(文章や写真)に合わせればよいので位置合わせはとても簡単ですが、厄介なのは、輪郭のはっきりしない(あるいは輪郭が複雑な)イラストやグラフなどのオブジェクトです。こういったオブジェクトは、他のオブジェクトと位置を合わせても、おさまりが悪く、フワフワと余白に浮いているように見えたり、妙に左に寄ってしまったりして、煩雑なレイアウトに見えてしまいます。時間をかけて図を修正してレイアウトしやすいものを準備したり、レイアウトを一からやり直して、煩雑さをなくすこともできるかもしれませんが、大抵、そんなことに時間をかけている場合でありません。

このような悩みが生じた場合は、問題になっているオブジェクトを薄い灰色の四角形などで囲ってしまって、はっきりとした輪郭を無理やり作ってしまいましょう。この輪郭を基準に他のオブジェクトを位置合わせすると、中のオブジェクトがどんなものであろうと、オブジェクト同士が整然と並んでいるように見えます。灰色以外の薄い色(できれば既存の色と同系色)の四角などで囲っても同じような効果が得られます。また、配置に困った短い文や単語も、同様の方法で囲うと、美しくレイアウトできる場合があります。

以下は、四角で囲うことで、オブジェクトがきれいにレイアウトされた例です。

便利なテクニックですが、「囲い・枠」が多くなると全体が煩雑になるので、濫用は避けましょう。また、煩雑にならないためにも、濃い色で囲うの避けたほうがよいでしょう。

ルール3:まとめる

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

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

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

色を使ってグループ化

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

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

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

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

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

ルール4:コントラスト

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

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

アイキャッチャーでさらに魅力的に!

どんなポスターでも、内容を見てもらうためには、まず人の目を引くものでなくてはなりません。歩いている人の目を引くかどうかは、0.3秒で決まるといわれています。この一瞬を逃さないようにポスターを作ると、より効果的なポスターができます。内容で目立つことが最も大切なことですが、見た目で目立つこともある程度重要です。ただし、ただ目立たせればいいという訳ではありません。あまりに派手な色にしてしまうと、いざ読もうとしたときに読みづらいポスターになってしまいます。

そこで、可読性を損なわずに、一瞬で人の目を捉えるための素材が必要になります。このような素材はアイキャッチャーと呼ばれます。文字や図形、イラスト、写真などを効果的なアイキャッチャーにすることができます。例えば、文字の邪魔にならない範囲で背景に大きな絵を入れたり、研究を代表するような写真や絵を大きめに配置することで、人の目を引くことができます。大きい文字も人の気持ちをつかむにはもってこいのアイテムです。タイトルを大きくするのは効果的です。大きな円やギザギザの円は、さらに効果的なアイキャッチャーになります。雑誌の表紙やテレビCMを見ていると、こういったアイキャッチャーが目につきます。そういったものも参考にしながら、好みのアイキャッチャーを配置してみるとよいかもしれません。

ルール5:繰り返す

パターンを繰り返して統一感を出す

全体を通じて、同じようなパターンを繰り返し使うと、統一感が出ます。たとえば、タイトル部分の塗りや囲い、タイトルの横のイラスト、スライドの外枠を繰り返し使うということです。スライドを作るときに、こういった素材を準備し「同じ位置に繰り返し配置」することで、スライドの完成度が高くなります。毎ページ毎ページ違うデザインのスライドが出てくると、聞き手は知らぬ間に違和感を感じてしまい、内容に集中することができません。「繰り返す」というテクニックを使うことで、安定感のあるスライドを作ることができます。このような配慮により、聞き手は無意識のうちに安心し、内容に集中できるはずです。もちろん目立ち過ぎはよくありませんので、聞き手の気持ちになってデザインしましょう。下のスライドは、実践例です。

まとめ

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

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

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




もどる すすむ






TOP

 制作者情報   更新情報   講演実績・サイトの実績   サイトポリシー   お問い合わせ 

オフィス伝わる

Copyright © 2018 Office Tsutawaru, All rights reserved.