見やすくわかりやすい資料になる。デザイン6つのルール

見やすくわかりやすい資料になるデザイン6つのルール Web/IT
資料作りやWebデザインにも使えるデザインルール6選です。
Web/IT仕事術

見やすくわかりやすい資料とは?

オフィスワークでは、プレゼン資料やお客様への提案資料など、誰かに何かを伝えるための資料作りが必要になることがあります。

書かれている内容を理解する前に、拒否反応を示してしまう資料ってたまに見かけませんか?

今回は、見やすくわかりやすい資料をテーマに、デザインの基本要素から厳選した6つのルールをお伝えしたいと思います。

kameko
kameko

この6つのデザインルールは、プレゼン資料や、webサイト制作、チラシ制作など、いろんな場面で使えますよ。身に着けると、めっちゃ便利です♪

では、参ります。

この記事はこんな人に読んでもらいたい!
  • 伝わりやすいプレゼン資料、提案資料を作りたい人。
  • webデザインに興味があるけど何から勉強すればいいかわからないな、という人。
  • 名刺やチラシを自作したいけど、デザインに自信がないな、という人。
kameko
kameko

センスゼロでも、この6つルールさえ守れば、ぐーんと見やすい資料になるよ。

レイアウト(配置)の基本

ルール1.とにかく揃えよう

タイトルの通り、とにかく揃えます。

縦のライン、横のライン、画像も文字ブロックも、端っこを徹底的に揃えましょう。

慣れてくると、変形図形の端っこは少しはみ出した方がバランスがいいな・・・などの感覚が芽生えてくると思います。

でも、まずは徹底的に揃える。です!

【 レイアウトの超基本ポイント 】
  • 縦ラインを揃える・・・❶
  • 横ラインを揃える・・・❷
  • 各ブロック、エリア内でも同様に縦、横ラインを揃える・・・❸
kameko
kameko

ガイドラインを引いて、揃ってるかどうかを確認するというのも効果的です♪

ルール2.仲間の法則を意識しよう

どの範囲までが、同じ内容を示している要素なのか? を「ぱっと見て」判断できるようにすることで、ぐっと見やすい資料になります。

kameko
kameko

【仲間】ってどういうこと?

kameko
kameko

さっきのチラシの例でいくと、

「いちごの名称」と、その「写真」と、「説明文」は、1つの同じ「紅ほっぺ」グループに所属している仲間だと考えられる。ってことは、「あまおう」グループの名称・写真・説明文は、違う仲間ってこと。

kameko
kameko

つまり、要素を全部同列に考えないで、仲間ごとにグルーピングしようってことやね。

kameko
kameko

仲間と仲間でないものは、ちゃんと区別してあげること。それが「仲間の法則」♪

【仲間と仲間以外を区別する3つの方法】
  • 方法論1:要素同士の距離で仲間か仲間でないかを区別させる。
  • 方法論2:仲間の範囲を枠で囲んだり境界線を引いたりして別させる。
  • 方法論3:仲間の範囲の背景に色をつけて区別させる。
▲方法論1の例(要素同士の距離で仲間か仲間以外かを区別)
▲方法論2の例(境界線で区別)

ルール3.余白でキメる!

kameko
kameko

余白はしっかり取ると、それだけで全体的にスッキリするよ♪

▲余白に偏りがある例
▲余白をしっかり取った例
【 余白取りのポイント 】
  • 上下左右に均一に余白をとりましょう。
  • 各グループ内も同様です。

文字の基本

ルール4.フォント(書体)の種類はシーンに合わせて!

フォントは、さまざまな種類が存在します。それぞれに受ける印象も違うし、見やすさも違いますね。

今回は、「見やすい、わかりやすい」がテーマなので、見やすさに着目してみます。

【 フォント選びのポイント 】
  • 明朝体   ・・・ 線の強弱があるので、あまり小さな文字に使うと読みづらくなることがあります。文字の大きさによって使い分けましょう。
  • ゴシック体 ・・・ どんな文字サイズにも適しています。
  • POP体   ・・・ 説明文などに使用すると、少し読みづらさを感じます。タイトルやキャッチフレーズだけに限定して使用するなど、うまく使い分けましょう。

ルール5.文字の大きさはギャップが大事

これは、無意識に誰でも実践していることだと思います。

タイトル文字は大きく。説明文の文字は小さく。です。

kameko
kameko

ここで、もうひと工夫!!

大きい文字と、小さい文字の大小の差を大きくすると、大きな文字がひときわ目立ちますよ。

(例が、少しわかりにくくてすみません・・・)

▲文字サイズの大小の差が小さい例
▲文字サイズの大小の差が大きい例
【 文字サイズのポイント 】
  • 大きい文字と小さい文字の大小の差を大きくすると、大切な部分がひときわ目立って全体がひきしまります。

カラーの基本

ルール6.色の種類は3色まで!

今回は難しいことは考えずに、とりあえず「3色までしか使わない」というルールだけを守って資料作りをしてみましょう。もう、まずはそれだけでOK!

ただそれだけでも、統一感が出て見やすいものになりますよ。

【 カラーのポイント 】
  • とりあえず、3色までしか使わない!と決めてやってみよう。

まとめ

それでは、まとめます。

【 まとめ 】
  • 見やすくわかりやすい資料にするためには、基本ルール6つを守ろう
  • ルール1 – とにかく揃える。
  • ルール2 – 仲間の法則を意識する。
  • ルール3 – 余白を取る。
  • ルール4 – フォント選びはシーンに合わせて。
  • ルール5 – 文字のサイズはギャップを大切に。
  • ルール6 – カラーは3色まで。

いかがでしたでしょうか?

少しでも、悩める方々のお力になれれば幸いです。

kameko
kameko

最後まで、お読みくださいましてありがとうございました。

この記事を書いた人
kameko

40代女。夢に向かって再スタートを切りました。今からだって遅くない。あせらずマイペースで進んでいきます。

詳しいプロフィールはこちら

\ Follow me /
kameko-style