ちょっと話題の記事

つたえるって、たのしい。 〜 第1回 インフォグラフィックを学ぶ★ に参加してきた

2013.07.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

IMG_0621

7月20日に開催されたつたえるって、たのしい。 〜 第1回 インフォグラフィックを学ぶ★というワークショップに参加して来ました。業務の合間を見つけては色々な勉強会に参加していますが、職業柄 Web プログラミング関連をテーマにしたモノが多く、ビジュアルデザイン関連のモノに参加したのは今回が初めてです。

みんながネットでいろいろ情報発信する時代。
つたえてるつもりでも なかなかうまくつたわらないことって ありますよね。

そこで、つたえることのプロのみなさんに、いろんなテクニックを教えていただくシリーズ、はじめます。

初回7月は「たのしいインフォグラフィック入門」*の著者、
櫻田潤さんによる記念講演&ワークショップ。

たくさんの情報をわかりやすく伝えるには、ビジュアルって大切!
でも、絵心がないとビジュアル化できない??

そんな疑問にこたえる講義とワークショップ。
ポイントを学んで、つたえること、たのしみませんか?

https://www.facebook.com/events/187336741428257/

主催はビジュアルシンキングという情報ブログの中の人である櫻田潤氏。様々なジャンルのデータビジュアライゼーションを作成・ご紹介されているサイトということで以前からウォッチしていたこともあり、色々と得られるものがあるのではと期待度高めで潜入して来ました。

情報を判りやすく、人に伝わるかたちに視覚化したもの

「データビジュアライゼーション」を日本語訳すると「情報を判りやすく、人に伝わるかたちに視覚化したもの」 になります。そのまんまです。重要なのはわかりやすくという点です。これにカッコよさが加われば言うことありませんが、あまりにカッコよさばかりを追求するとそれは アート という別のベクトルを向いたモノになります。

数十の言葉が持つ意味を一つのビジュアルに込めたものはアイコンと呼ばれ、インフォグラフィックというものに該当します。このことを櫻田氏は知識の圧縮と呼んでいました。様々な情報をビジュアルという一箇所に圧縮し、見る人がそれを解凍して情報を解釈するという例えです。

toilet_white

例えば「トイレ」を意味するアイコン。微妙な違いのバリエーションは数あれど、だいたいこんなところでしょう。ここに「トイレ」という文字列はありません。このアイコンが一つあれば文字など無くても全ての言語圏の人たちに必要な情報を伝えることが可能です。もし文字が添えてあったら、それぞれの言語圏ごとにローカライズするという手間が発生します。

ピクトグラム - 基本の考え方

ピクトグラム(Pictogram、ピクトグラフ(Pictograph)とも)は、一般に「絵文字」「絵単語」などと呼ばれ、何らかの情報や注意を示すために表示される視覚記号(サイン)の一つである。地と図に明度差のある2色を用いて、表したい概念を単純な図として表現する技法が用いられる。

Wikipedia: ピクトグラム

pictograms

街中で見かける様々な標識、リモコン等のボタンにあるアイコン、オリンピックなどで各競技をビジュアルで表現するときに用いられるイラストなどはピクトグラムと呼ばれます。実に様々な題材のものがありますが、全てに共通して言えるのは、といった幾何学図形の組み合わせによって形成されているということです。最終的にどういったデザインに仕上げるかというところではセンスがモノをいいますが、何を意味しているのかというのを形に起こす点では、絵心とは別のスキルによって成されます。

色々なインフォグラフィック

インフォグラフィックにはいくつかのデザインパターンがあり、それらはどれも Excel やお固いビジネス資料などで良く目にする既存のモノだったりします。それら見慣れたパターンにほんの一つ他のモチーフを加える事でガラリと印象を変えることができるのです。

テーブル型

09-03_coffee_drinks

いわゆるスプレッドシートと呼ばれるものや棒グラフなどのチャートがベースになっています。この例ではそういった無機質な要素に対してコーヒーカップというモチーフを組み合わせています。棒グラフの持つ意味をコーヒーの量で表現していますね。

ボリューム型

battle_of_sekigahara_l

比較対象のそれぞれの全体に占める割合を面積で表現したものです。画像は関ヶ原の戦いにおける石田軍と徳川軍の兵力を表現したものです。単純にそれぞれの兵力値だけでなく、実際には戦わなかったもの、他軍へ寝返ったものといったものが見事な配色で表現されています。

リレーション型

hierarchy_of_visual_understanding

比較対象の全体に対する関係性を表現したものです。画像は集めた資料が知恵と呼ばれるものに昇華されるまでの量の差をピラミッド型で表現したものです。はじめに膨大な数の資料があり、それが精査されて情報という形に纏められ、それらを理解することで知識になります。最終的に知識は頭のなかで成熟されて知恵と呼ばれるものになるのです。なんだか耳が痛いです。

マップ型

girls

ジオチャートとも言います。比較対象を世界地図をベースにして各地域ごとに表現するというものです。こちらはアメリカ合衆国にてどんな名前がよく選ばれているのかというのを州ごとに比較したものです。画像は女の子の名前ですが、男の子バージョンもあり、この2つを比較するとまた新たな結果が見えてきてとても興味深いです、

タイムライン型

webtimelinedantetktk

ビッグデータの移り変わりを年表形式で表現したものです。画像は Web ブラウザーの登場から進化の過程をタイムラインで表現したものです。この例ではタイムラインが横軸になっていますが、Web ページというフォーマットを考えると縦軸のほうが自然だったりします。現在の Facebook の UI がまさにそうです。

紙の世界ではタイムライン型の表現は昔から採用されていてごく当たり前のものですが、Web の世界ではまだまだ発展途上というか何処かおろそかに扱われているような印象があると櫻田氏が仰っていたのが印象的でした。

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

デザインはアートとは違い、ロジックの占める割合が非常に多いものです(※もちろん全てではないでしょう)。ということはその作り方にも明確なメソッドがあるということです。

1) 利用目的の選定

情報を伝えるためのものという大前提がある以上、必ずそれが利用目的になります。どこまで具現化するかは別として、いつどこで誰に伝えるか。これがあるからこそインフォグラフィックに意義が生まれるのだと思います。

2) 題材の選定

ではどんなお題の情報を伝えるのか、この時点で明確にします。例えばクライアントが存在するようなケースだと、広報目的ということで「必ずこの情報を全面に押し出してくれ」といわれるシチュエーションがあったりします。ビジネスライクにそっくりそのまま受け入れて事を済ませてしまうのは簡単ですが、情報過多にならないように項目に優先度を付け、掲載するものと思い切って切り捨てるものとをキッチリ見極める。これを恐れてはいけないと仰っていました。

3) リサーチ

資料集めです。とにかく精度の高い情報に仕上げるには膨大な資料が必要になります。当然時間もかかります。一番時間がかかるタスクかもしれません。これは次の「内容・コンセプト決め」においても同じ事が言えるとのことです。そしていかに自身の先入観を捨てて客観的にデータを収集できるかも大切なことだそうです。なぜなら先入観を持って資料集めをすると、自然と集める資料にも偏りが発生してしまうからです。

4) 内容・コンセプト決め

この段階で最終的なゴールが見えてくるでしょう。全体のタスクの流れの中で、リサーチとこのコンセプト決めが最も時間を費やすことになるそうです。櫻田氏曰く全体の約50パーセントはここに費やすとのことであり、その間はひたすら Execl との格闘になると仰っていました。

5) デザイン

コンセプトが固まってきたら、いよいよ形に起こす段階に入ります。よりカッコよく、美しく、そして何よりもわかりやすいデザインに仕上げることがデザイナーの使命なわけですが、重要なのははじめのうちはモノクロの状態で作るということだそうです。色の助けが一切無い状態でも充分に情報が伝えれているような形にすることがとても大切だと仰っていました。色が持つ印象は非常に強力ですが、はじめにそれありきでデザインするのは賢明ではないということです。

6) 調整

アウトプットは一度やったら終了というわけにはいきません。何度も何度もブラッシュアップを繰り返して人前に見せられるクオリティに仕上げていきます。

このインフォグラフィックを作るという案件において、やってはいけないことがあります。それは題材の選定以降の過程を全てデザイナー丸投げするという行為です。リサーチ、内容・コンセプト決めの段階までは関係者全員でのディスカッションを繰り返して認識合わせをするべきとのことでした。

ワークショップ - ピクトグラムを作ってみる

前半の濃密な講義が終わったということで、後半は参加者全員が実際にピクトグラムを作るというワークショップが行われました。一応デザイン系の専門学校を卒業している僕ですが、ドップリと打ち込んだ経験というのは無く、その点では素人同然と言えます。今回はワークショップの会場にもなったシェアリビングというキーワードで各自がピクトグラム作成に挑戦しました。

あまり深く考えずにロジック半分 × 感性半分で作ってみました。普段使わない脳を活性化させたせいか頭がぼーっとしましたが、なかなか楽しかったです。

IMG_0625 IMG_0623

このうちのどれかが僕のです。

懇親会 - (゚A゚;)ゴクリ…

講義、ワークショップが終わって懇親会という運びになりました。僕が普段よく参加する勉強会でも懇親会はほぼ必ず実施され、簡単な食事を通じて色々な方々とコミュニケーションをとるのですが。今回は会場の雰囲気からして大分勝手が違いました。

まず会場に入って着席する際に最初に目に入ったのが、謎の人参・・・。

IMG_0620

終始そこら中を歩き回っているトイプードル・・・。

IMG_0630

ワークショップも終わりに近づき、キッチンでは何やら慌ただしく準備が。ここはクッキングスタジオか・・・?

IMG_0622

そして次々とテーブルに並べられる料理の数々・・・。

IMG_0626

IMG_0628

IMG_0627

女子力高いってレベルじゃねーぞ

予想外です。まさか手作りで、しかもここまでハイクオリティの品々が登場するとは・・・。

なんでも会場を提供していただいたしょこらぼの方々が、この日のために前日から作ってくれたものなんだそうです。いやぁ、マジでビックリしました。しかも飲み物はスパークリングワインときた。しょこらぼさんは東北復興支援の活動を今も積極的にされており、今回振舞って頂いた料理の食材も全て東北のモノを使っているとのことでした。

正直、今回のイベントに申し込んだ時には、

参加費3000円かぁ〜。やれやれ、貧乏プログラマーにとってはデカイ出費だけど、しゃーねーな。

生意気言ってすみませんでした。ホントに美味しかったです。そして講師していただいた櫻田潤さん、非常に勉強になりました。