伝えるための 情報デザインレイアウト 基礎

記事公開日:2018.01.30

最終更新日:2018.03.22

911 PV

日常生活において、情報デザインはサイトやチラシだけじゃなく資料やプレゼンなどでも使えます。伝えたい情報を相手(ユーザー)によりわかってもらうために必要不可欠。今回は情報をレイアウトする際に考える基本的なレイアウトの方法を伝えます。

 

情報デザインとは?

情報デザインとは、日常生活の中に溢れるコンテンツ(商品やサービス)の情報をユーザーに分かりやすく提示する方法です。

 

人は多くの情報を視覚に頼るため、言葉だけでの説明よりも画像や図など視覚情報を見せたほうが分かりやすく、言語も視覚化すると受け手の情報理解度がより高くなります。

 

「情報デザイン」と言っても今回の内容はデザイナー向けではないので、センスも絵心も必要ありません。ちょっとした気配りで相手に伝わりやすいレイアウトが制作可能です。

 

それではレイアウトの基礎を説明していきましょう。

 

読みやすい文章

文字や文章を読みやすくするためには可読性、視認性、判読性という3つの要素が必要です。「可読性」は文章が読みやすいか、「視認性」は文字の認識しやすさ、「判読性」とは誤読をしない、という要素です。書体や文字のサイズ、行間や字間などを調節することで可能になります。ただし、場合によっては優先させる要素が変わりますので注意しましょう。

 

現在、デザイン性に優れたフォントが多くありますが、文章で使う場合は可読性が下がる恐れがあります。太い文字も長文の文章で使うと目が疲れてしまいますし、細すぎるフォントも文字のサイズによっては潰れてしまい読みにくくなってしまいます。

 

デザインフォントを使う場合は、見出しなどの短くパッと読める部分に、長文の文章は太すぎず、細すぎない明朝体かゴシック体がおすすめです。文字サイズが小さい場合は、特にゴシック体がおすすめです。

また、行間も大切です。文章で行間が狭いと、文章を読む際の視線の流れに誤りが生じたりします。一般的には、行間はフォントサイズの50%〜80%が好ましいとされています。しかし、チラシなどの紙やWebサイトページなど、媒体によって読みやすい行間が変わってくることもあるので、その都度適切な行間を見つけましょう。

 

見出しにも注意が必要です。見出しは文章が短く、文字サイズも文章より大きいので、文字間(特に鉤括弧や中黒など)にも気を配りましょう。

視線の流れ

一般的に、見やすい視線の流れ方は決まっており、縦書きは右上から左下に、横書きは左上から右下にと流れていきます。レイアウトはなるべく視線の流れに逆らわず、順序を立てて配置をしていくと読みやすくなります。

 

また、文章も同じで、長文の場合、横書きは左揃え、縦書きは上揃えがおすすめです。中揃えは短い文章で雰囲気を作るには適していますが、何行も続く場合は読みにくくなるので気をつけましょう。

 

視線の流れで配置する情報の順番も重要です。載せる情報の順番次第で説得力も変わっていき、心理効果にも大きく影響してきます。何を強く打ち出したいのか、優先順位をつけていくことを意識しましょう。

 

情報の強弱

情報をレイアウトする際、同じ文字サイズで全て作ると、何を一番に見せたいのか、どこが重要なのか分かりません。情報をレイアウトする際、一番何を見せていくのか考え、要素ごとに強弱をつけましょう。
例えば、文字なら大切なところは大きくしたり、色を変えたり、下線を引いたりします。画像を見てもらいたいなら配置する場所、大きさを工夫しましょう。

 

ただし、文章の中で情報を強くする際、強く見せたい部分の装飾(文字色変更や下線付、文字サイズ大きくなど)をやりすぎると見にくくなってしまう場合もあるので、なるべくシンプルにしましょう。特にWebサイトのページは、チラシなどの印刷物と違って解像度が低いので、ごちゃごちゃさせるのは控えましょう。

 

なお、情報の強弱は見出しにも当てはまります。
見出しにも順番がありますので、見出し1と見出し2では見出し1の方を強くし、見出し1>見出し2>見出し3…と順序をつけていくことで、視覚的に情報の順番が分かりやすくなります。

 

デザイン性で考えると上記の強弱のつけ方が当てはまらない場合もありますが、基本的には情報に強弱と順序をつけるという考え方を守った方がいいでしょう。

 

グループ化

関連性のある情報をただ配置していくだけでは、理解しにくくなる場合があります。そこで、レイアウトでグループ化を意識することで、情報を直感的に理解しやすくなります。
画像と文章で1つのグループと考え、各余白を統一にするよりグループ同士での余白を考えると、見やすく理解しやすいレイアウトになります。

 

グループ化の方法は余白以外にも、背景色やポイントカラーを統一したり、グループを枠で囲ったりといった方法もあります。

 

最後に

以上、情報デザインのレイアウトの基礎です。上記のような基本を理解した上でレイアウトをすると、相手に伝える媒体の作り方に根拠を持って作るようになります。載せたい情報をなんとなくで並べて作っていた頃よりも、受け手が商品やコンテンツを理解しやすくなり、情報の共有がスムーズになります。

このエントリーをはてなブックマークに追加