読者です 読者をやめる 読者になる 読者になる

ひつじの雑記帳

身近な豆知識ネタからちょっとギークなプログラミングネタまで

全ての人が知っておくべき 見やすい資料をつくるための9つの黄金テクニック

スライドやポスターなどの資料作成において一番重要なものは「内容」です。しかし、それに並ぶくらい「デザイン・レイアウト」も重要となります。見づらいデザインのせいで、せっかく長時間かけて仕上げた資料が台無し...なんてことも十分にあり得ます。
あなたは読み手に優しい「見やすい資料」を作れているでしょうか?

今回は、全ての人が知っておくべき見やすい資料をつくるための9つの黄金テクニックを紹介します。これから紹介することは資料作成だけでなく、Webデザインにも応用できるはずです。ブログやサイトを運営している方もぜひ参考にしてみてください。

スポンサードリンク

 

 


1.

目線の動きを意識したZNの法則

f:id:codomisu:20170407225400p:plain

レイアウトを構成する上で一番最初に考慮すべきものは「見やすさ」です。レイアウトをより見やすいものにするには「ZNの法則」を使うのが効果的です。

f:id:codomisu:20170407192833p:plain

ZNの法則とは複数の要素やブロックを構成する上で、横書きのときは「Z」縦書きのときは「N」の順序に並べると見やすくなるというものです。これを使えば、どこをどの順序で読めばいいのかが自然な流れで分かるようになります。

矢印や番号を使うと尚良し

f:id:codomisu:20170408114607p:plain

矢印や番号を用いると見る順序がより明確になります。ただし、多少デザインに干渉してしまうので使う場面には注意が必要になります。

 


2.

強弱をつけて読みやすくする

f:id:codomisu:20170407225410p:plain

ポスターやスライドなどの資料をつくるときは、重要度に応じて文字や画像の大きさに強弱をつけるとよいでしょう。読み手にどこが大事なのかが直感的に伝わる上、デザインもスッキリして見やすくなります。 

f:id:codomisu:20170408122640p:plain

また、強弱のつけ方には文字や画像の大きさのほかに「太さ」「色」「背景」などの手段もあります。

 


3.

適度な余白・行間を持たせる

f:id:codomisu:20170407225417p:plain

スライド・ポスターなどのす資料からWebデザインまで、どんなものを作るにしても「余白(マージン)・行間」を十分に取りましょう。十分な余白や行間を取ることによって、読み手に優しいデザインに仕上がり、コンテンツをより引き立てることができます。
ただし、取りすぎても逆に見づらいデザインデザインになってしまうので注意が必要です。

 


4.

見えない線を常に意識する

f:id:codomisu:20170407232435p:plain

レイアウトを構成する際、上下左右の「見えない線」を作ってみましょう。見えない線をつくり端をそろえるだけで、全体的にまとまった印象の美しいデザインをつくることができます。

 


5.

彩度の高すぎる色彩は使わない

f:id:codomisu:20170407224728p:plain

原色や彩度の高すぎる色は主張の激しく、チープなデザインになってしまいがちで扱いが非常に難しいです。そのため、彩度は中~少し高いくらいの色を選ぶのが無難と言えます。色のチョイスに自信がないひとは、Color Huntを使うといいでしょう。センスのいいカラーパレットが毎日のようにアップされています。

 


6.

色が持つ意味を考えて使う

f:id:codomisu:20170407233732p:plain

色はそれぞれ意味や効果、イメージを持っています。デザインでは「色数を減らす」ことも重要ですが、必要な場面でのみその制限を無視して色の特性を効果的に使っていくと、ワンランク上のデザインを作り上げることができます。

色が持つイメージの例

  • 赤系の色...「情熱・高温・禁止・停止」
  • 黄系の色...「緊張・注意・苛立ち」
  • 緑系の色...「許可・安全・正常」


色がもつ意味やイメージについてもっと知りたい方は、色と意味の本 〜明日誰かに話したくなる色のはなしを読むのをおすすめします。デザイナーには必ず読んでもらいたい良本です。


7.

極端な大きさの文字を使ってみる

f:id:codomisu:20170408000247p:plain

極端に文字を大きくして読み手にインパクトを与えるテクニック。フォントを「創英角ゴシック」などのゴシック系フォントにするとよりインパクトを演出することができます。
中途半端な大きさの文字からインパクトは生まれません。75px以上の「これでもか」というくらいの大きさがベスト。強く伝えたいメッセージがある場面で思い切って使ってみましょう。

 


8.

場面によって書体を使い分ける

f:id:codomisu:20170407230618p:plain

資料をつくる上で「書体」はかなり重要な役割を果たしてきます。書体はそれぞれ「目的」があって作られています。

f:id:codomisu:20170408125625p:plain

例えば「見やすい資料」に着目した場合は、筆書体・ポップ体は避け、明朝体・ゴッシク体を使うべきです。

豆知識 「フォントと書体の違い」

  • 書体
    ある字形の特徴に基づいて分類されるもの
  • フォント
    ある書体を表現した個々の製品

 


9.

グループ化を意識したレイアウト

f:id:codomisu:20170408151210p:plain

「グループ化」を意識してレイアウトを構成すると、きれいにまとまった見やすい資料に仕上げることができます。グループ化の作業を通すだけで資料の見易さは見違えるほど向上します。

f:id:codomisu:20170408143229p:plain

上で紹介した「余白」と「強弱」を上手くつかえばより見いものに仕上がります。グループ化をする際はできるかぎり「枠」を使わずに、余白と強弱でまとまりを表現しましょう。


参考にした本