伝わるデザイン

図解と描画

図解で複雑な情報をわかりやすく

図解はとても効果的です。文章で書いたり箇条書きにしても、全体像や事柄同士の関係性が理解しにくいことがしばしばあります。例えば下の例です。タイトルがあって、その下に箇条書きがあります。この場合はそれほど複雑ではないので理解可能かもしれませんが、図解化すると個々の単語の関係や全体像がずっとわかりやすくなります。

図解の仕方は様々ですが、例えば、以下のようなものがあります。関係性の複雑な事柄については、図解化することで効果的に伝えることができます。作るときに注意する点などは、「カッコよく」の項目を参考にしてください。

重要! 塗りと線の両方に色を付けない!!

スライドを作るとき、オブジェクト機能を使って、テキストを囲う枠を作ったり矢印や円を描いたりすることがよくあります。このとき、一つのオブジェクトに「塗り」と「枠」のどちらにも色を付けると煩雑な印象を与えてしまいます。色を付けるのは「塗り」だけ、あるいは「枠」だけにするのが賢明です。なお、PowerPoint(特に古いバージョン)では、デフォルトで「塗り」と「枠」のどちらにも色がついた状態で、オブジェクトが現れるので注意しましょう。

上の例は、「枠の色」をなくした場合です。これで、不要な要素がなくなって、かなりすっきりしたはずです。下の例は、「塗りの色」をなくした場合です。雰囲気こそ上の例とは違いますが、煩雑さはなくなって、カッコ悪さがなくなります。

異なる種類の図形の併用をできるだけ避ける

もう一つ、オブジェクト機能の話です。丸、四角、角の丸い四角を使って、枠を描いたりすることがあります。このとき、一つのスライド、あるいは一つのポスターの中で、異なる種類のオブジェクトを使わないでください。丸、四角、角の丸い四角では、受ける印象がまるで違います。これらを併用すると、全体の統一感が損なわれます。

楕円はなるべく使わない

同じ種類のオブジェクト(図形)を使う場合であっても、基本的には、楕円形は避けるべきです。歪んだ円はあまり美しい形ではないですし、楕円は縦幅や横幅によって、違う形に見えます。そのため、楕円を多用すると、統一感のないスライドになってしまいます。円や四角、角丸四角を使うことをお勧めします。

楕円の悪い使われ方の例をもう一つ。重要な箇所を強調するとき、「楕円」を使う人がよくいます。絶対にダメだというわけではありませんが、楕円はあまり美しくないですし、対象の物をちゃんと囲うことが意外と難しいです。「表」のように直線的なイメージの強いオブジェクトには、なおさら楕円は合いません。下の例のように、四角形で囲んだほうがスマートで、見やすくなります。

角丸四角の「角」に注意(アールを統一)

四角や円では問題になりませんが、下のような角が丸い四角では、少しややこしい問題が生じます。それは、角の丸み(アール)にバリエーションがあるからです。アールの程度は、どんなソフトでも変更可能ですので、複数の角丸四角を使う場合には、アールを統一しましょう。そうすれば美しくなります。下の例を見れば明らかです。

ただし、角丸四角の中に別の角丸四角を入れる場合、2つのアールが同じだと下図のように違和感があります。これは、枠と枠の間の余白が不均一になって見えるためです。こんなときだけは、内側の角丸四角のアールを小さくして、違和感をなくしましょう。

丸みをつけ過ぎない&スペースを均等に

大判のポスターなどでは、項目ごとに枠で囲ってまとまりをもたせることがあります。ただし、枠の付け方や枠の配置の仕方によって、見栄えが大きく変わります。

下の図のように、角丸四角の枠は優しい印象になりますが、角が丸すぎる枠は少し野暮ったく感じます。「四つ角のところで内側の文字と枠が接近してしまうこと」と「四つ角の外側に大きな空間が空いてしまうために、枠間の余白が不均一になること」が原因です。角丸の四角を使う場合は、角を丸めすぎないようにしましょう。右の例ぐらいが適切だと思います。もちろん、角の尖った四角ならこの心配はありません。きちんと揃えて余白が均一になるようにしましょう。

角丸四角をうっかり歪めない

角丸四角は、描いた後に縦横比を変更すると、角の形が変形してしまうことがあります。これはスライドをダサくする原因です。PowerPointで作業していると、このミスを犯しやすいです。例えば下の図のように。

左のように角が歪んでいると、美しくありません。角の丸い「吹き出し」の場合も同様の問題がしばしば生じます。PowerPointの場合は、「頂点を編集する」という方法もありますが、それよりは、もう一度四角を描き直すほうが賢明でしょう。

補足:Ilustratorでの解決方法

Illustratorの場合は、CS6以前のバージョンだと、角丸四角を描いたときに、PowerPointと同様に、変形時に角の丸みが歪んでしまうという症状が出てきます。そうならないためには、はじめから角丸四角を描くのではなく、角の尖った四角を描いた後に、<効果>→<スタイライズ>→<角を丸くする>にして、角丸四角を作らなければなりません。そうすれば、その後いくら変形させても、角の丸み(アール)は歪みません。こうして作れば、<アピアランス>からいつでもアールの大きさを修正することも可能です。なお、CC以降のバージョンでは、この問題は生じません。

PowerPointの吹き出しオブジェクトには要注意

吹き出しは、2つの点に注意して下さい。一つ目は上で説明した通り、角の変形に気をつけること、もう一つは吹き出しの突出部分の形が変形していないかということです。下図の通り、PowerPointでは、どういうわけか吹き出しオブジェクトを横に伸ばすと、突出部分まで不気味に変形します。これでは、吹き出しなのか何なのか全くわかりません。

これを改善するには、①PowerPoint上で「頂点の編集」をするか、②吹き出しオブジェクトを使わずに、三角と四角を組み合わせて自前で吹き出しを作るかのどちらかです(その場合は、三角と四角を描いた後、<図形の結合>機能により、2つの図形を<接合>させます)。なお、Keynoteではこのような心配はありません。

また、PowerPointなどに入っているいろいろなオブジェクトも、あまり歪めてはいけません。ギザギザの爆発オブジェクトや雲のオブジェクトは、多少歪めてもさほど気になりませんが、大きく歪めるといびつになり、美しくありません。なるべく元のままの形で使いましょう。

矢印も下手に変形させるとカッコ悪い

矢印も同じです。矢印の長さを変えても、意味もなく「矢じり」の形や「柄」の太さを変えないようにしましょう。矢じりが太くなったり、変に長くなったりすると統一感がなくなります。また、長さに対して矢じりが大きすぎるのもカッコよくありません。矢印は、三角と線を組み合わせるなどして、自分で作った方が美しいです。

矢印をムダに目立たせない

矢印は多くの場合、主役ではありません。流れを示すために用いるものであって、あくまでも主役は文字だったり、図だったりします。したがって、矢印が目立ちすぎると、主役が目立ちにくくなり、全体の流れが把握しづらくなります。ムダに大きな矢印や、ムダに濃い色の矢印、ムダに装飾のある矢印はできるだけ避け、シンプルな矢印を使うように心がけましょう。もちろん、矢印にとても重要な意味があるときには矢印が目立つようにしてください。

線の細い矢印を使ったり、別のオブジェクトと同じ色の矢印を使ったり、薄い灰色の矢印を使ったりすると、落ち着いた印象になり、見栄えよくなります。

フローチャートを美しく

フローチャートは、実験のデザインや手順の説明、研究のまとめを行なうときによく使われ、複雑な理論や流れをわかりやすく説明するためにはもってこいのツールです。だからこそ、よりわかりやすく、見栄えよくする必要があります。

下の例は、文字と矢印でシンプルに作ったものです。左寄せにすると、文字と矢印の位置関係がどうもしっくりきませんし、センタリングをしただけはやはりガタガタした印象になるでしょう。そんなときに一つの提案として、「同じ大きさの枠に入れる」というのがあります。下のような感じです。この例では、角丸四角の枠の中に文字を入れていますが、ただの四角でも構いません。こうすると、上で述べたような問題はある程度解決でき、そこそこカッコいいフローチャートができると思います。矢印も一工夫するとさらによいです。

囲みすぎに注意!!

すでに述べたように、文章や図を枠で囲うことで「まとまり」を表すことは悪いことではありません。また、小見出しを枠で囲って強調することも悪いことではありません。でも、どんなことでも度が過ぎるとよくないものです。なんでもかんでも枠で囲っていると、本当に重要な区分けが曖昧になってしまいます。それは、下の例を見れば明らかです。

枠を付けるのは最低限にしましょう。「まとまり」を表現したいのであれば、枠に頼らず余白で囲みましょう。また、枠を使うにしても、枠線に色をつけないほうがよいです。小見出しなどを強調したいのであれば、文字の太さや大きさを変更しましょう。枠と同様に、仕切り線(罫線)もなるべく減らす努力をすべきです。

今回はポスターを例に解説しましたが、スライドやその他の資料でも全く同じことがいえます。

PowerPointのグラフィックをそのまま使わない

PowerPointの便利な機能に、フローチャートや図解の作成支援があります(SmartArt)。これを使えば複雑なオブジェクトの組み合わせも、簡単に作ることができます。しかし、初期設定の色やフォントなどがあまり美しくありません。それだけではなく、「影」や「グラデーション」「枠線」「色が多い」など、余計な要素が多すぎて、スライド全体の統一感を一気に損ねてしまうほどのインパクトがあります。オブジェクトを使うときには、複雑な要素を取り除き、資料に馴染むオブジェクトに直しましょう。以下にいくつかの例を示します。

下の例は、循環を示す典型的な図解です。グラデーションのせいで文字が読みにくい箇所があります。影のせいでシンプルさがなく、ちょっとくどいです。MSPゴシックは少々読みにくいです。改行の位置も悪いです。このような場合は、フォントを変え(今回はメイリオ)、改行の位置を調整し、影やグラデーションを取り除くとよいでしょう(下の左)。これだけで、随分と落ち着いた印象になります。ただし、このように色数の多いオブジェクトはスライドに馴染みにくいかもしれません。配色自体にそれほど意味がないのであれば、灰色一色にしてしまうというのもとても有効な手段です。これで必要最低限の図解ができます。

次の例も同様です。立体感やグラデーション、影といった要素は、内容を伝えるために必要な要素ではありません。煩雑なオブジェクトは受け手の理解を妨げるだけです。このような場合は、影やグラデーション、立体感の設定を解除し、シンプルにしましょう。先ほどの例のように、色を使わない(灰色だけにする)というほうが使い勝手がよく、見栄えのよい資料ができます。

既存のオブジェクトは使わない

某ソフトに入っている既存のオブジェクトは、使うのを避けましょう。どれも、いまいちバランスがよくありませんし、なんだか不自然な感じです。なにより、こんな派手な図形は、研究発表の場面では必要ありません。使用するのは、四角や角丸四角、丸、三角などの単純な図形だけにし、顔や矢印は自分で描くようにするとよいです。

PowerPointで絵を描く

Illustratorなどの専用のソフトを使えば、綺麗な絵を簡単に描くことができますが、PowerPointやWordなどのオフィスソフトでも綺麗に絵を描くことができます。基本的には時間をかければ、複雑な絵を描くことができますが、ここでは、練習のために「n」という文字を描く場合を考えてみます。

よくありがちな間違いは、PowerPointで絵を描くとき、「フリーハンド」機能を使ってしまうことです。これでは線がガタガタになり、美しい絵を描くことができません。描いた後に修正する際も、フリーハンドの絵は不便です。例えば、フリーハンドで「n」という文字をなぞると下のような絵になります。

これでは、あまり美しくありません。PowerPointで絵を描くときは、「フリーフォーム」機能を使うのが得策です。「フリーフォーム」を使えば、Illustratorと同様のベジエ曲線を簡単に描くことができるためです。それではさっそく描き方を紹介します。

まず、トレース元となる画像をPowerPointに貼ります。写真でも、スケッチでも構いません。今回は「n」の画像です。


[図形]の[線とコネクタ]にある[フリーフォーム]で描きます。下図のように角や凹んだ部分や尖った部分に頂点を作りながら線を描きます。最後は、最初に作った頂点をクリックし、図形を閉じます。頂点を作り過ぎないのが大切です。


描いた線を右クリックし、[頂点の編集]を選びます。その後、編集したい頂点をクリックすると、ハンドル(図中の青い線)が表示されます。ハンドルの先端の丸い部分を回したり、長さを変えて、線のカーブを調整します。この時点では完全に合わせる必要はありません。


次の頂点は、尖っていません。45のような場合は、頂点をスムージングする必要があります。シフトを押しながらハンドルを回すか、頂点を右クリックして[頂点を中心にスムージングする]を選択してからハンドルを動かします。これで、▼で示した線を確定させます。


同様に次の頂点もシフトを押しながらハンドルを動かし、▼で示した線の形を確定させます。


直角の頂点は、修正の必要がなければ、飛ばします。次の曲線が始まる頂点をクリックし、シフトを押しながらハンドルを回し、おおまかに線を調整します。


次の頂点を選択し、シフトを押しながらハンドルを回し、▼で示した線を確定させます。


曲線のあとの頂点を選択し、シフトを押しながらハンドルを回します。これで▼の部分の線を確定させます。


これでベクター画像の完成です。これで色を自由に変えることもできます。




もどる すすむ






TOP

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

オフィス伝わる

Copyright © 2018 Office Tsutawaru, All rights reserved.