教育ICTリサーチ ブログ

学校/教育をFuture Readyにするお手伝いをするために、授業(授業者+学習者)を価値の中心に置いた情報発信をしていきます。

学校で使えるクリエイティブデザインアイデア #04: レイアウトにルールを設定、スッキリと見やすく読みやすく!(第1回 フォント編)

 フューチャーインスティテュートの前田です。美大卒の教育コンサルタントです。この連載では、学校の先生が普段使えるクリエイティブデザイン観点でのアイデアやポイントを紹介していきます。

 今回は、印刷物をすっきり見やすく読みやすくするために、レイアウトに設定するといい4つのルールを紹介していきます。4つのルールを設定することで、情報が見やすく、読みやすくなることをご紹介します。このルールを決めずに、その場の思い付きで作っていくと、まとまりがなくなり、散漫な印象になってしまいます。

 ルール設定については、以下4回に分けてご紹介しようと思います。

  1. フォント・フォントカラー・文字サイズについて
  2. 配色について
  3. グリッドについて
  4. 表現方法について

 今回は、「1. フォント・フォントカラー・文字サイズについて」のルール設定を紹介します。

フォント・フォントカラー・文字サイズ

 文字の要素によって、フォント・フォントカラー・文字サイズのルールを設定しましょう。多くても以下の5種類には収まるかと思います*1
f:id:ict_in_education:20151214171053p:plain
ドキュメントを作成する前に、予めどのくらいの大きさ・どのフォントを使用するかなどは決めておきましょう。そして、作りながら、実物を見てみて、「大見出しが思ったより目立たないからもう少し大きくしよう」「大見出しと中見出しの違いがわかりにくいから、中見出しの色をもう少し目立たない色にしよう」などのように、調整していきます。ただし、途中で変更した場合は、すべての同じ要素を同じように変更しましょう。たとえば、変更したのが中見出しだった場合には、すべての中見出しを同じように変更することを忘れないようにしましょう。

▼上記をもとに設定した各要素の文字
f:id:ict_in_education:20151214171252p:plain

 表にある「ジャンプ率」とは、本文の文字サイズに対して、見出しなどの文字サイズの比率のことです。媒体の対象読者や媒体自体の雰囲気によっても、ジャンプ率は異なるようですが、ジャンプ率を小さくしてデザインするのは、他の要素でメリハリをつける必要があり難しいので、先生方にはオススメしません。上記で記しているくらいのジャンプ率は設定しておいた方が無難だと思います。

以下は、新聞や雑誌などのジャンプ率を調査して紹介したサイトです。ご参考までに。

マミオン有限会社: 新聞・雑誌は3~5倍!『ジャンプ率』を意識して、見やすいWebサイトをデザインしよう


▼読みづらい例
f:id:ict_in_education:20151214171431p:plain
 フォントを6種類も使い、サイズも7サイズくらい変えており、ジャンプ率も小さいので、どこをいちばん見てほしいのかがわかりにくく、目がチラチラしてしまいます。


▼上記を、使用するフォントの種類を絞り、文字の要素に合わせてジャンプ率を適用した例1
f:id:ict_in_education:20151214171452p:plain

  • 大見出し ⇒「○△小だより」
  • 中見出し ⇒「ご入学・ご進級~」
  • 小見出し ⇒ 下部の4項目

 定期的に出していく冊子ということを重要視するのであれば、「○△小だより」を目立たせるようにした方が良いでしょう。


▼上記を、使用するフォントの種類を絞り、文字の要素に合わせてジャンプ率を適用した例2
f:id:ict_in_education:20151214171603p:plain

  • 大見出し ⇒「ご入学・ご進級~」
  • 小見出し ⇒ 下部の4項目

 中見出しはなしにして、「○△小だより」はタイトル扱いにした。内容に注目してもらいたいということを重要視するのであれば、「○△小だより」よりも中身の見出しを目立たせるようにした方が良いでしょう。

(前田)

*1:タイトルは、ロゴを配置したり、画像と組み合わせて文字を配置したりと表現がさまざまななので、含めていません