こんにちは。位置情報共有サービスロケタッチのディレクターをしております幕田博之です。
おかげさまで、2011年7月15日をもちましてロケタッチはサービス開始から一周年を迎えることができました！ 多くの社内外の関係者、ユーザーの皆様からのご指導、ご支援があってのことだと思い、スタッフ一同大変感謝しております。
さて、先日のロケタッチ開発ブログでは一周年記念ということでインフォグラフィックスを公開いたしました。
そこで、今回のディレクターブログではロケタッチのインフォグラフィックスができるまでの流れをご紹介したいと思います！
Wikipediaでは下記のように説明されています。
このインフォグラフィックス、実は私たちの日常生活の中の至るところにあるんです。例えば歩行者用信号機は、青、赤という二色と二種類のグラフィックだけで「渡れ」「止まれ」という情報を伝えてくれていますよね。公衆トイレのマークや非常口のマーク、アクセスマップなんかもそうです。
このように、インフォグラフィックスの目的は「伝えたい情報を図式化して簡単に伝えること」なんです。今回のロケタッチインフォグラフィックスは、一周年のタイミングに合わせて「この一年の軌跡を公開したい」という目的で作ることになりました。
この一年でのタッチ数の推移、ユーザー数の推移、ユーザーはいつどこにタッチしているのか、男女比はどうなのか、どんなシールが何枚くらい発行されたのか……など。目的に沿った「伝えたい情報」をピックアップしましょう。
ちなみにこれ、ぼかしが入っていますが実際に私が洗い出した必要な情報の一部です。他にも大量のデータがあり、このままでは決してわかりやすいとは言えません。まずは1つ1つの項目を検討し、どの項目を公開するかを決定します。
例えば、男女比データと年齢比データを合わせると、年代別の男女構成比率がわかります。また、カテゴリ別スポット数とカテゴリ別タッチ数のデータを合わせると、スポット数が多くてタッチ数が少ないカテゴリやスポット数が少なくてタッチ数が多いカテゴリをデータとして表現することができます。
この組み合わせ作業、実は試行錯誤の連続でうまくいかないことの方が多いです。例えば、キャリア (デバイス) 別のアクセスとソーシャルメディア連携数を組み合わせたデータの公開を検討しましたが、マルチデバイスの利用やソーシャルメディアへの重複ポストなどを考慮すると逆に複雑になる可能性が高かったのでこれは見送ることにしました。
最終的に公開されたときに見やすくわかりやすい形を想像しながらとにかくいろいろと工夫してデータを組み合わせていくのがコツです。難しいですね。
インフォグラフィックスは伝えたい情報を視覚化することに意義があるので、この「視覚化」部分が非常に重要になります。ここはデザイナーの腕の見せ所。
まとまったデータを持ってデザイナーと打ち合わせをします。どの情報をどう見せたいか、どう見せればわかりやすいか、という観点からデザイナーと話を進め、より良い見せ方を決めていきます。
見せ方が決まったら実際に色やレイアウト等の微調整をしながらデザイン作業に入ってもらいます。すると、準備したデータが組み合わさっていき、徐々に1つのグラフィックになっていきます。まさにインフォグラフィックス！
例えば「カテゴリ数別タッチ数＆スポット数」「時間帯別タッチ数＆カテゴリ分布」「男女別年齢分布」など、パッと見わかりにくい言葉でも図にすると簡単にわかりますよね。
余談ですが、レアシールの「げいのうじん」、本当に発行枚数が一枚しかない超レアシールなんです。取得条件は秘密ですが、頑張ってゲットしてみてくださいね。
インフォグラフィックスは他社も様々なものを公開しています。カッコイイものや興味深いものなど、一度は見ておくべきインフォグラフィックスをちょっとだけご紹介します。
上左はアメリカのデザイン＆マーケティング企業、Digital Surgeons社のインフォグラフィックスで、東日本大地震についての様々な統計情報がまとめられています。その規模や被害の大きさが一目でわかるようになっており大変参考になります。
上右は世界のEコマース市場の現状を表したインフォグラフィックスです。多くのクーポンコードの発行を行っているMyCouponCodes社が作成したものです。本とか洋服をオンラインで購入する人って世界的にもたくさんいるんですね。
上記のインフォグラフィックスはすべてアイオイクス株式会社が作成したものです。左から順に、
ライブドアでは、インフォグラフィックスでレジュメを作って応募してくるようなクリエイティビティ溢れるディレクターを募集しております。
おかげさまで、2011年7月15日をもちましてロケタッチはサービス開始から一周年を迎えることができました！ 多くの社内外の関係者、ユーザーの皆様からのご指導、ご支援があってのことだと思い、スタッフ一同大変感謝しております。
さて、先日のロケタッチ開発ブログでは一周年記念ということでインフォグラフィックスを公開いたしました。
そこで、今回のディレクターブログではロケタッチのインフォグラフィックスができるまでの流れをご紹介したいと思います！
そもそも、インフォグラフィックスってなに？？
Wikipediaでは下記のように説明されています。
インフォグラフィックス(英：Infographics)は、情報、データ、知識を視覚的に表現したものである。インフォグラフィックスは情報を素早く簡単に表現したい場面で用いられ、標識、地図、報道、技術文書、教育などの形で使われている。「information」と「graphics」を掛けあわせた造語だけあって、言葉だけでは伝えることが難しいデータや数値情報といったものを図にしてわかりやすく伝えることができるのがインフォグラフィックスの大きな特徴です。
このインフォグラフィックス、実は私たちの日常生活の中の至るところにあるんです。例えば歩行者用信号機は、青、赤という二色と二種類のグラフィックだけで「渡れ」「止まれ」という情報を伝えてくれていますよね。公衆トイレのマークや非常口のマーク、アクセスマップなんかもそうです。
このように、インフォグラフィックスの目的は「伝えたい情報を図式化して簡単に伝えること」なんです。今回のロケタッチインフォグラフィックスは、一周年のタイミングに合わせて「この一年の軌跡を公開したい」という目的で作ることになりました。
インフォグラフィックスができるまでの5ステップ
Step.1 伝えたい情報を洗い出す！
まずは、伝えたい内容と必要なデータ・情報を考えなくてはいけません。今回の目的にあったインフォグラフィックスを作るには、一年の成長記録がわかるデータが必要です。この一年でのタッチ数の推移、ユーザー数の推移、ユーザーはいつどこにタッチしているのか、男女比はどうなのか、どんなシールが何枚くらい発行されたのか……など。目的に沿った「伝えたい情報」をピックアップしましょう。
ちなみにこれ、ぼかしが入っていますが実際に私が洗い出した必要な情報の一部です。他にも大量のデータがあり、このままでは決してわかりやすいとは言えません。まずは1つ1つの項目を検討し、どの項目を公開するかを決定します。
Step.2 数値データの抽出
公開したい項目を決めたら、対象期間を定めて実際の各数値データを抽出します。大量の数値データを抽出するのですが、個人的にはなぜかこのステップ2が一番ワクワクします。Step.3 データの組み合わせ
数値データが揃ったら今度はそれをわかりやすい形に直します。ここでのポイントは「組み合わせ」です。データとデータを組み合わせて新しいデータとしてわかりやすく面白い表現ができるか検討します。例えば、男女比データと年齢比データを合わせると、年代別の男女構成比率がわかります。また、カテゴリ別スポット数とカテゴリ別タッチ数のデータを合わせると、スポット数が多くてタッチ数が少ないカテゴリやスポット数が少なくてタッチ数が多いカテゴリをデータとして表現することができます。
この組み合わせ作業、実は試行錯誤の連続でうまくいかないことの方が多いです。例えば、キャリア (デバイス) 別のアクセスとソーシャルメディア連携数を組み合わせたデータの公開を検討しましたが、マルチデバイスの利用やソーシャルメディアへの重複ポストなどを考慮すると逆に複雑になる可能性が高かったのでこれは見送ることにしました。
最終的に公開されたときに見やすくわかりやすい形を想像しながらとにかくいろいろと工夫してデータを組み合わせていくのがコツです。難しいですね。
Step.4 デザイン
インフォグラフィックスは「information」と「graphics」。Step.3までで「information」部分はできているので、あとは「graphics」ができれば完成です。インフォグラフィックスは伝えたい情報を視覚化することに意義があるので、この「視覚化」部分が非常に重要になります。ここはデザイナーの腕の見せ所。
まとまったデータを持ってデザイナーと打ち合わせをします。どの情報をどう見せたいか、どう見せればわかりやすいか、という観点からデザイナーと話を進め、より良い見せ方を決めていきます。
見せ方が決まったら実際に色やレイアウト等の微調整をしながらデザイン作業に入ってもらいます。すると、準備したデータが組み合わさっていき、徐々に1つのグラフィックになっていきます。まさにインフォグラフィックス！
Step.5 完成！
はい、完成です。今回できたインフォグラフィックスがこちら。
例えば「カテゴリ数別タッチ数＆スポット数」「時間帯別タッチ数＆カテゴリ分布」「男女別年齢分布」など、パッと見わかりにくい言葉でも図にすると簡単にわかりますよね。
余談ですが、レアシールの「げいのうじん」、本当に発行枚数が一枚しかない超レアシールなんです。取得条件は秘密ですが、頑張ってゲットしてみてくださいね。
様々なインフォグラフィックス
インフォグラフィックスは他社も様々なものを公開しています。カッコイイものや興味深いものなど、一度は見ておくべきインフォグラフィックスをちょっとだけご紹介します。
上左はアメリカのデザイン＆マーケティング企業、Digital Surgeons社のインフォグラフィックスで、東日本大地震についての様々な統計情報がまとめられています。その規模や被害の大きさが一目でわかるようになっており大変参考になります。
上右は世界のEコマース市場の現状を表したインフォグラフィックスです。多くのクーポンコードの発行を行っているMyCouponCodes社が作成したものです。本とか洋服をオンラインで購入する人って世界的にもたくさんいるんですね。
上記のインフォグラフィックスはすべてアイオイクス株式会社が作成したものです。左から順に、
- 地球上の様々な言語を一枚の絵で比較してみたインフォグラフィックス
- もしもこの世にAppleがなかったら？を想像してみたくなるインフォグラフィックス
- インターネット広告技術の仕組みを一枚の絵にまとめたインフォグラフィックス
インフォグラフィックスについてもっと知りたい方へ
◆Cool infographics
海外のインフォグラフィックス作品が数多く紹介されています。斬新なデザインや切り口で紹介しているものが多く、見ていて飽きませんね。◆アイオイクス株式会社
上でも紹介しましたが、自社製のインフォグラフィックスを見ることができます。様々なテーマに関する情報をわかりやすくまとめているので勉強になること間違いなし。◆Visual.ly
世界最大規模のインフォグラフィックスポータルです。有名なのでご存知の方も多いかと思いますが、自分のtwitterアカウントに関するインフォグラフィックスが簡単に作れちゃったりします。アップされているインフォグラフィックスだけでも2000以上ありますので一見の価値ありです。ライブドアでは、インフォグラフィックスでレジュメを作って応募してくるようなクリエイティビティ溢れるディレクターを募集しております。
コメント