インフォグラフィックの作り方。NewsPicksモバイルインフォグラフィック(ウーバー編)

NewsPicks インフォグラフィック ウーバー 作り方 1

NewsPicksで昨日公開されたインフォグラフィックのおおまかな作り方です。
Visual Story:栄光と逆風、Uberの軌跡

前に紹介したマンチェスター・ユナイテッド編はデータ主体でしたが、それと比べてウーバー編は数字を見せるよりも、事実をストーリーで見せていくタイプのインフォグラフィック。
(参考)インフォグラフィックの作り方。NewsPicksモバイルインフォグラフィック(マンU)

1.ストーリーを考える

共同編集者に企画案をもらったら、それをもとにストーリーを考えます。
1つの企画に情報を盛り込みすぎていたのを、インフォグラフィック2本に企画をわけてストーリーを練り直しました(第2弾インフォグラフィックは近日公開予定)。

このプロセスは、テキストファイルで行いました。

NewsPicks インフォグラフィック ウーバー 作り方 2

2.ビジュアル・ストーリーを考える

テキストで作ったストーリーをもとにビジュアルでどう表現するか、文字にする部分などをスケッチを描いて決めていきます。

NewsPicks インフォグラフィック ウーバー 作り方 3

3.レイアウト設計する

同じレベルの情報について、文字のサイズや色などを揃えるために、レイアウト設計をIllustratorで考えます。

NewsPicks インフォグラフィック ウーバー 作り方 4

4.ビジュアルパーツを作る

イラストやピクトグラムなどをスケッチやレイアウト設計を見ながら用意していきます。

NewsPicks インフォグラフィック ウーバー 作り方 5

5.全体の作り込み

時々、俯瞰しながら作り込んで仕上げます。

NewsPicks インフォグラフィック ウーバー 作り方 6

6.調整

NewsPicksのアプリ上の見え方を端末で確認しながら納得いくまでひたすら調整。

完成形はこちら

Visual Story:栄光と逆風、Uberの軌跡

NewsPicks Uber インフォグラフィック

人材募集

NewsPicksを運営するユーザベースでは、インフォグラフィック・エディター(デザイナー)をはじめ、いろんな職種で人材募集しているのでよかったら。
問い合わせはこちらから

もっと読む

  • このエントリーをはてなブックマークに追加
Tags ,
NewsPicks モバイル インフォグラフィック

関連記事

Top