インフォグラフィックのデザイン〈視線の流れ〉編

本記事では、インフォグラフィックができるまでの試行錯誤をお伝えします。

題材

題材にするのは、こちらの記事に掲載したタイムライン型のインフォグラフィックです。マーク・ザッカーバーグが2009年から発表している「新年の抱負」の変遷をまとめたものです。

マーク・ザッカーバーグ 新年の抱負 10年史 インフォグラフィック

デザインのきっかけ

インフォグラフィックは、情報をグラフィック化するものです。したがって、気になる情報を見つけることがデザイン制作のきっかけになります。

この事例では、テクノロジーメディア「Recode」でマーク・ザッカーバーグが今年も「新年の抱負」を宣言したと知ったのがきっかけです。

recode

この記事を見て、「そう言えば昨年はアメリカ全州訪問だったな。その前はなんだっけ?」といった具合に過去をさかのぼって調べていきました。

そうして調べた内容をノートに描いてみました。ただ描くのもつまらないので、イラストも交えながら。

インフォグラフィック ラフスケッチ マーク・ザッカーバーグ 新年の抱負 1

ノート左ページの下をご覧ください。ホワイトハウスを模した建物に、アメリカ国旗の代わりにFacebookの「f」を入れたのは、2018年の抱負の原文に「われわれのコミュニティを守る」という言葉が出てきて、まるで政府みたいだと感じたからです。

このようにして、情報をインプットする過程で思いついたことをビジュアルにしていきます。これがのちにデザインアイデアの素になっていきます。

デザインの下書き

今回のケースは、インプットをノートに描いた時点でだいたいのアイデアができているので、レイアウトだけ横長(ノート見開き)から縦長になるように変更しました。

インフォグラフィック ラフスケッチ マーク・ザッカーバーグ 新年の抱負 2

これをスキャンして、レイアウトをAdobeのIllustratorを使ってトレースしつつ、手直しします。

インフォグラフィック ワイヤーフレーム 事例

この段階では全体の構成をみるのが目的なので、イラストは反映しません。また、同じ理由で余計なところに意識を回さないために、モノクロでチェックします。

イラストを入れる

構成ができたらイラストを描き起こして加えます。ポイントは、色を使う箇所です。

インフォグラフィック 作り方

イラストはついつい楽しくて細部を描きすぎてしまったり、色を使いすぎてしまうのですが、意味のない装飾はノイズになるため、最小限にとどめます。

最終調整

これでほぼ完成です。ここからさらに視線の流れを意識して最終調整します。この例では4パターンつくって一番見ていて気持ちいいものに決めました。

インフォグラフィック 作り方 デザイン調整

当サイト発の書籍もどうぞ

図で考える。シンプルになる。
たのしいインフォグラフィック入門