Articles

2014/2/22(土) DEVELOPMENTAL/オープントーク「おもてなしのデザイン」を開催します

20140222DVLPMNTL

プレゼンター: 宮田雅子(デザイナー/札幌大谷大学)

司会・進行: 杉本達應(札幌市立大学)

日時: 2014年2月22日(土) 16:00-18:00

会場: 札幌市立大学サテライトキャンパス
[札幌駅南西・北4西5・アスティ45ビル12階 電話 011-218-7500]

参加費無料。事前申込不要。どなたでもご参加いただけます。
Facebookご利用の方は、ぜひイベントページで参加登録してください。

デザイン思考、ソーシャル・デザイン、コミュニティ・デザイン、サービス・デザイン……近年、「デザイン」という言葉が、商業デザインを超えて多様な領域で使われるようになりました。

今回、札幌を拠点にユニークなデザイン実践を展開されている宮田雅子さんをお迎えし、 広がる「デザイン」の意味をラディカルに問いなおします。キーワードは、「おもてなし」。

宮田さんは、たんなる地域振興や観光開発ではないデザインとして「美唄式 あぜ道ピクニック–これが美唄のおもてなし」(北海道美唄市)等をプロデュースしています。こうした活動事例を通して、「おもてなしのデザイン」とは何か、「おもてなし」と「サービス」の違いなどについて話題を提供していただき、参加者のみなさんと話しあう機会にしたいとおもいます。

宮田雅子(みやた・まさこ)
札幌大谷大学芸術学部美術学科専任講師。
武蔵野美術大学造形学部基礎デザイン学科卒業。凸版印刷株式会社でセールスプロモーション企画に従事後、東京大学大学院学際情報学府修士課程修了。東京芸術大学美術学部先端芸術表現科助教を経て、現職。
専門はメディア・デザイン。デザインとメディア論の間を往復しつつ、プロジェクトやメディア実践などを手がける。共著に、『メディアリテラシー・ワークショップ:情報社会を学ぶ・遊ぶ・表現する』(東京大学出版会)など。

主催・お問い合わせ先:
札幌市立大学デザイン学部メディアデザインコース 杉本達應研究室
sugi (at) media.scu.ac.jp
*「DEVELOPMENTAL」は杉本達應研究室の研究プロジェクトです。

『メディア技術史―デジタル社会の系譜と行方』

2013年10月、飯田豊(編著)『メディア技術史―デジタル社会の系譜と行方』(北樹出版、2013年)が発行されました。

メディア技術史―デジタル社会の系譜と行方
飯田 豊 大久保 遼 木暮 祐一 柴野 京子 杉本 達應 谷口 文和 溝尻 真也 和田 敬
北樹出版
売り上げランキング: 16,931

本書は、書物や写真、映画などさまざまなメディア技術の成り立ちを学ぶためのテキストです。
杉本は、第8章(コンピュータ)、第9章(インターネット)、カバーデザインを担当しました。
目次の下に、立ち読み風連続ツイートを掲載しています。

『メディア技術史―デジタル社会の系譜と行方』
目次

第1章 技術としての書物―紙の本vs電子本への古くて新しい回答(柴野京子)
1.デジタルとアナログのかなしい対立
2.書物の技術を考える
3.活版印刷の発明と革命
4.グーテンベルクの銀河系—活字人間とデジタル人間のあいだで

第2章  写真はどこにあるのか―イメージを複製するテクノロジー(大久保遼)
1.カメラ・オブスキュラと〈写真〉の夢
2.ダゲレオタイプと鏡としての写真
3.カロタイプと複製技術としての写真
4.マジック・ランタンと語りのなかの写真
5.写真製版とマスメディアとしての写真
6.写真の現在へ—デジタル化と写真コミュニケーション

第3章  映画の歴史を巻き戻す―現代のスクリーンから映画の幼年時代へ(大久保遼)
1.遍在するスクリーン
2.マジック・ランタンとスクリーン・プラクティス
3.映像が動き始める
4.パフォーマンスのなかのシネマトグラフ
5.初期映画から現代のスクリーンへ

第4章  音楽にとっての音響技術―歌声の主はどこにいるのか(谷口文和)
1.ボーカロイドから考える音の技術とメディア
2.録音技術から録音メディアへ
3.レコード音楽のリアリティ
4.ボーカロイドの居場所

第5章  声を伝える/技術を楽しむ―電話・ラジオのメディア史(溝尻真也)
1.メディア技術の楽しみ方をめぐる歴史
2.メディアとしての電話の生成と変容
3.ラジオアマチュアたちの戦前/戦後史
4.新しいメディアの楽しみ方に向けて

第6章 テレビジョンの初期衝動 ―「遠く(tele)を視ること(vision)」の技術史(飯田豊)
1.「テレビジョン」の源流を訪ねて
2.二つの技術方式
3.「テレビジョン」の未来像
4.「テレビジョン」から「テレビ」へ
5.テレビの21世紀

第7章  ローカルメディアの技術変容―ミニFMという実践を補助線に(和田敬)
1.ローカルメディアとは何か
2.マスメディア型のローカルメディア
3.パーソナルネットワーキング型のローカルメディア
4.ハイブリッド型の「ミニFM」—関西のネットワークを事例に
5.他者関係を組み替えてゆくローカルメディアの可能性

第8章  文化としてのコンピュータ―その「柔軟性」はどこからきたのか(杉本達應)
1.コンピュータの多様な用途
2.コンピュータの歴史をとらえる支店
3.「超人」マシンの夢から、パーソナルコンピュータへ
4.コンピュータユーザの身体性—インタフェースの変遷
5.コンピュータの「柔軟性」はどうなるのか

第9章  開かれたネットワーク―インターネットをつくったのは誰か(杉本達應)
1.コンピュータネットワークの変遷
2.インターネットの自由な文化〈フリーカルチャー〉
3.ユーザとインターネットの関係を再考する
4.インターネットの豊かさの行方

第10章  手のひらの情報革命―携帯からケータイへ(木暮祐一、飯田豊)
1.場所を問わず、より多くの通信をさばけるように
2.携帯電話からケータイへ—端末のマルチメディア化
3.ケータイを学ぶ/ケータイから学ぶ

第11章  誰のための技術史?―アマチュアリズムの行方(飯田豊)
1.メディアの黎明期=「アマチュア」の時代
2.「アマチュア」の困難—専門家と非専門家の「乖離」
3.技術思想としての「アマチュアリズム」
4.再び「アマチュア」の時代?—インターネット上の創作活動をめぐって

DEVELOPMENTAL/オープントーク「メディア表現の未来を考える」を開催しました

2013年10月5日(土)、札幌市立大学サテライトキャンパスにてトークイベントを開催しました。
ご来場いただいたみなさん、ありがとうございました。

DEVELOPMENTAL/オープントーク「メディア表現の未来を考える」
プレゼンター:緒方壽人(takram design engineering)

はじめに杉本達應(札幌市立大学)から研究プロジェクト「DEVELOPMENTAL」の趣旨説明をおこないました。「包みをあける」というDEVELOPMENTALの語源にちなんで、今回のイベントは一方向の講演会ではなく、参加者のみなさんの頭に浮かんだアイデアや疑問をその場で共有する場にさせていただきました。
前半は、プレゼンターの緒方壽人さんから活動紹介をしていただき、後半は、参加者のみなさんどうしで対話していただき、緒方さんに寄せられた質問に回答していただきました。

R0012256.JPG

takram design engineeringのデザインエンジニア・緒方壽人さんの活動領域は大変ひろく数多くの事例が紹介されました。リーディングエッジデザイン時代は、ケータイのプロトタイプデザインから日用品のデザインに携わっていました。現在は、次世代カーナビ、スマートフォン・アプリ、紙を使ったナビゲーションシステム「ON THE FLY」、とらやのお菓子、Eテレの番組「ミミクリーズ」、アート作品、人工衛星のプロジェクト「ARTSAT」、有機EL照明の展覧会など、多くのプロジェクトに関わっています。

また、AXIS、IDEO、takramの3社が共同で実施している社会問題を解決しようとする活動「Collective Dialogue」や、ものづくりに関わる人全体が参加するストーリーウィーヴィングワークショップで使われているメソッドを紹介していただきました。

R0012251.JPG

ご参加いただいたみなさんからの質問や感想などを共有させていただきます。

途中で書いていただいた感想・ご質問

マウスを置くと一時停止します。

アンケート回答より

各項目をクリックして選択できます。

アンケートのご意見より

イベントの良かった点

  • 緒方さんの取り組みが何よりも楽しそう。
  • 考えるヒントを与えられた気がします。
  • アイデアメソッド、大変参考。
  • 緒方さんのアイデアメソッドは大変参考になりました。
  • アイデアが沢山ありました。
  • 作品事例やビジネスのお話しなど、内容が多かったところ。
  • 幅広い分野の中で活動されている、緒方さんのお話をスライドであわせてきけたことが良かった。
  • デザインとワークショップの共通点
  • デザイン面の話しがきけて良かったです。
  • 映像を見ながらの説明などわかりやすかったです。
  • 様々な事例や表現の方法論がきけて良かったです。
  • 色々なジャンルの色々な考え方が見れてよかった。
  • コメント用紙で合評がよかった。
  • ワークショップの具体的なスキルについて。
  • メソッドに関する話が自分でも活かせそうで良かった。
  • 雰囲気が和んでいて、楽しく参加出来ました。
  • 最後に、講師とコミュニケーションが取れたとこ。
  • いろんな人がいたこと。目的意識が高い人が多い。オープンなムード、緒方さんのプレゼン、ファシリテートもすばらしかった。
  • テーマがすごく良かったです! 個人的にも興味深いお話でした!!! 会場が駅前なのも便利で嬉しいです。

改善したほうがよい点、気になった点

  • 初めて聞く話でしたので(自分の中で)落とし所を探すのに必死でした。(笑)
  • イスの配置。
  • 声が聞きとりにくい。特に音と声がかぶると聞こえなかった。
  • 例が多くて、実例が多かったので何をえにして考えたり聞いたりした方がいいかもしれない。
  • 資料が欲しい。
  • 知らない人とにわかにお話しするのはやっぱりちょっと緊張しますので、アイスブレイク的なものなどがあったら有難かったかもしれないです。

その他コメント、今後のイベントについてのご要望

  • とても興味深かったです。また企画してください。
  • このようなイベントをどんどん開催してください。デベロップメンタルとして色々な人を招待したイベントをお願いします。
  • またこういったイベントを開いてほしいです。
  • デザインを学ぶ一人として今回のトークイベントはとても考えさせられ、勉強になりました。
  • No.2もして下さい。
  • ワークショップ形式にすると良いかも!
  • IDEOや他のメソッドについても詳細お聞きしたかったです。
  • 〔ご自身のお仕事である〕カフェには関係の無いテーマも実は関係していたりする事が多いと感じました。また参加したいです。
  • ぜひ、月1回くらいのペースでどんどんやってほしいです!! たいへん勉強になります!!
  • 過去に携わられたプロジェクトの紹介の際に、できればそのプロジェクト毎に悩まれた事や苦労された事、感動したエピソードなどもお話していただければと思いました。また、今回のトークイベントは、プロジェクトの紹介とアイデアメソッドに焦点があてられていたので、緒方さんご自身の哲学や今後のビジョンなど、エモーショナルな部分も是非お聞きしたかったです。また是非札幌におこしいただき、そのような部分についてもお話を聞かせていただければと思います。

今回のイベントは急遽開催が決定したため、十分な告知ができず、ご関心のあるすべての方にイベントのご案内が届かなかったかもしれなかったことをおわびします。それでも、多くのWebサイトにご掲載いただきました。ありがとうございました。

また、FacebookやTwitterでお知らせいただいたみなさんにも感謝します。

最後に、緒方壽人さんには、お忙しいなか札幌にお越しいただき、金曜日の特別講演、土曜日のDEVELOPMENTAL/オープントークと2日連続でご登壇いただき、ありがとうございました。

ストーリー・ウィーヴィング
渡邉 康太郎
ダイヤモンド社
売り上げランキング: 268,228

2013/10/4(金) 特別講演「デザインエンジニア」という仕事

R0012239.JPG

2013年10月4日(金)、札幌市立大学デザイン学部で特別講演を実施しました。
講師は、タクラム・デザインエンジニアリングの緒方壽人さんです。『「デザインエンジニア」という仕事』と題して、製品のプロトタイプデザインから、デザイン・メソッドをつかったワークショップまで、ご自身の活動内容を幅広く紹介していただきました。多くの受講生が活動内容の多様さに圧倒されていたとおもいますが、質疑応答が交わされて充実した講演になりました。緒方さん、どうもありがとうございました。

受講生のアンケートより感想を紹介します。

  • 仕事として見せていただいたようなプロジェクトをしている人、会社があることに驚きました。面白かったです。ありがとうございました。
  • プロジェクトの多さ、幅の広さにびっくりしました。最新の技術を美しく見せる取り組み(有機EL展示)がとても印象的です。今後のデザインに対して考え方が広がる講演でした。
  • 対象に対する歩み寄り方や考え方についていろいろ話があっておもしろかった! ものづくりの奥深さを感じた。
  • 「社会の問題をデザインで解決する」というスライドが印象にのこりました。ソーシャルデザインに興味があるので、その考えに沿っていると感じました。普段聞くことのできないプロフェッショナルな方のお話でとてもおもしろかったです。
  • 何かを発想する時の考え方のプロセスの重要さ。なんでもフィーリングでやってしまうクセがあるので、やはりしっかり考えることは大事なんだと思った。水筒が人工臓器につながるというのがとても印象的だった。
  • 「ものづくり」をする上でのプロセスがとても参考になりました。現在のことだけではなく、未来がどうなっているかや、自分の知らないような分野まで視野を広げていくことが大切なのかなと思いました。
  • 印象に残ったプロジェクトは傘と傘が重なり合ったときに虹色が浮かぶフィルムです。単純に「きれいだな」と思いました。ですが、傘同士が重なり合うような場面って、実際にはどんな時だろう…と少し考えてしまいました。私は現在、人と人をつなぐコミュニケーションについて少し興味をもっているので、そのように考えを自分の中で発展させたりしてみるのもおもしろかったです。きっと、傘同士が重なり合うような2人はとても親密なんだろうなと思います。本日はありがとうございました。
  • 卒制に向かうにあたって、意気込みなど考える参考になりました。製品コースの学生は聞くべきだと強く感じました。
  • ストーリーウィーヴィングのお話がとてもためになりました。
  • 「タンジェントスカルプチャー」が柔軟な発想ができそうで印象に残りました。
  • Storyweaving、Tangent Sculpture のお話が興味深かったです。特に語り方でとらえ方が変わるのはおもしろかったです。

R0012231.JPG

20131004special-lecture

2013/10/5(土) DEVELOPMENTAL/オープントーク「メディア表現の未来を考える」を開催します

プレゼンター:
緒方壽人(takram design engineering

日時:2013年10月5日(土)  14:00-16:00
会場:札幌市立大学サテライトキャンパス[札幌市中央区北4条西5丁目アスティ45ビル12階 電話 011-218-7500]

参加費無料・どなたでもご参加いただけます。

情報技術が発達し、便利なデバイスを身につけ、デジタルな表現に接することが日常的になりました。こうしたなか、アートやデザイン、製品開発などの領域で、新しい表現やものづくりの方法論に注目があつまっています。デザイナーやエンジニアといったクリエイティブに関わる人は未来に向かってどのような役割を果たすべきでしょうか。

今回、デザインエンジニアの緒方壽人さんをお招きして、これからの表現やものづくりの可能性について一緒に考えます。緒方さんが所属するtakram design enineering(タクラム)は、インタラクティブ・アートからソフトウェア、ハードウェアまで幅広い製品を手掛ける東京のクリエイティブチームです。従来独立していたデザインとエンジニアリングの領域を横断したプロジェクトは、どのようなプロセスで生み出されているのでしょうか。「Habataki」(コニカミノルタ有機EL照明)、「音めがね」デザインあ展)、「ミミクリーズ」(NHK Eテレ)、「ARTSAT」(芸術衛星プロジェクト)など実際の事例をもとに、新しい時代の「ものづくり」や「表現」の考え方や方法論について、参加者のみなさんとともに考えていきたいとおもいます。

緒方壽人(おがた ひさと)
takram design engineeringディレクター/デザインエンジニア。東京大学工学部卒業。岐阜県立国際情報科学芸術アカデミー(IAMAS)卒業。リーディング・エッジ・デザイン、オン・ザ・フライ設立等を経て2012年よりtakram参加。ソフトウェアからハードウェア、アートからデザインまで幅広い領域で活動し、「NTT DoCoMo OnQ」でiFデザイン賞、グッドデザイン賞金賞など受賞多数。多摩美術大学非常勤講師。

参考記事
大人が子どもに戻るアート 緒方壽人×五十嵐健夫対談 (CINRA.NET)

プログラム
進行:杉本達應(札幌市立大学)
14:00 開会のあいさつ・趣旨説明
14:20 トーク+ディスカッション「メディア表現の未来を考える」
15:50 まとめ・閉会のあいさつ

主催・お問い合わせ先:
札幌市立大学デザイン学部メディアデザインコース 杉本達應研究室
sugi (at) media.scu.ac.jp
*「DEVELOPMENTAL」は杉本達應研究室の研究プロジェクトです。

Information is Beautiful Awards受賞作にみるデータビジュアライゼーションの秀作

ロンドンのライターでありデザイナーでもあるDavid McCandlessは、さまざまなデータビジュアライゼーションの作品集Information is Beautiful(リンク先はサイト)を出しています。

Information is Beautiful
Information is Beautiful

posted with amazlet at 13.09.02
Collins (2013-02-14)
The Visual Miscellaneum: A Colorful Guide to the World's Most Consequential Trivia
David McCandless
Harper Design
売り上げランキング: 14,129
タイトルが違うのでまぎらわしいのですが、『Visual Miscellaneum』『Information is Beautiful』(イギリス)の米国版です。内容はまったく同じなのでご注意! 日本語版は出ていません。

彼は、市場調査会社カンター(Kantar)とともに、データビジュアライゼーションのコンテストInformation is Beautiful Awardsを主催しています。

このコンテストの2012年度の受賞作にデータビジュアライゼーションの秀作がそろっていますので紹介します。

CNN Home & Away

最優秀賞(Most Beautiful)・データジャーナリズム部門金賞
制作:Stamen

cnn home and away

Home & Awayは、アフガニスタンとイラクで戦死した米国人の死亡場所と出生地をマッピングしたCNNのスペシャルコンテンツです。アフガニスタンでの死者約3600人、イラクでの死者約4800人がマッピングされています。ふたつの戦争にアメリカが払った大きな代償が見えてきます。モノクロームの地図の上に戦死者の顔写真がカラーで浮かび上がります。一人ひとりの名前をクリックすると、出生地や死亡場所、死亡の状況が記載されていて、追悼メッセージを書き込めるようになっています。

Notabilia

インタラクティブビジュアライゼーション部門金賞
制作:Moritz Stefaner, Dario Taraborelli, Giovanni Luca Ciampaglia

Notabiliaは、Wikipediaで削除依頼されたページごとの議論の過程を樹状に可視化したインタラクティブなビジュアライゼーションです。対象のページは、削除するか存続するかの議論が長く続いた100ページ分の議論の流れです。1本の枝が1ページをあらわしていて、枝の長さが議論の長さです。削除か存続かの意見表明によって、枝の色とカーブの向きが変わります。枝のかたちは、賛否が拮抗していると直線状、連続した賛否が交互にあらわれるとS字状、全員一致の場合はらせん状になります。

the deleted
こちらは、削除が決まった100ページ。

the kept
こちらは、削除されずに存続・統合・リダイレクトが決まった100ページ。

制作ツールは、FlashFlareFDT。サイトに掲載されている静的グラフは、Tableauで制作されています。 ビジュアライゼーションの入力元のデータセットは、Google Docsで公開されていて自由に使用することができます。

Information graphics in context

データビジュアライゼーション部門金賞
制作:Peter Ørntoft

Information graphics in context:難民と移民は、宗教的シンボルを身につけていることの是非に焦点をあてたグラフィックです。データはデンマーク人を対象とした調査結果です。テーマとなっている宗教的シンボルの写真と色分けしたデータを組み合わせて見せています。


イスラムのスカーフ


十字架


ヤムルカ(キッパ・ユダヤ帽)

Cover mania

インフォグラフィック/インフォデザイン部門金賞
制作:Michele Mauri

Cover maniaは、年別にカバーされた楽曲のオリジナル・バンドを示した時系列のビジュアルです。リボンの色がオリジナル・バンドをあらわし、幅がその年に発表されたカバー曲の数です。各年のリボンは曲数の多い順に上から並んでいます。全体を通じてもっともカバーされていた緑色のリボンはビートルズ。2位以下は、ボブ・ディラン、クイーン、スティーヴィー・ワンダー、ローリング・ストーンズと続いています。データソースは、サンプリング・カバー曲のデーターベースサイトのWhoSampled

Afghanistan – What is the true cost of war?

モーション・インフォグラフィック部門金賞
制作:Peter Jeffs, Tom Stevenson

Afghanistan – What is the true cost of war?は、イギリスがアフガニスタン戦争に費やしている多額の予算を見せた動画です。モノクロームの色調を背景に、アフガニスタン国旗の赤・黒・緑の3色で構成しています。元政治家で反戦団体Stop the War代表のトニー・ベンの力強いナレーションの後ろに流れている緊張感あふれる音楽は、ブライアン・イーノ。

The Antimap

ツールおよびWebサイト部門金賞
制作:Trent Brooks

Antimapは、データビジュアライゼーションのためのオープンソースのツールです。データを記録するスマートフォンアプリAntimap Logと、データ分析とビジュアライゼーションをおこなう2種のアプリ:WebアプリAntiMap SimpleとデスクトップアプリAntiMap Videoで構成されています。スノーボード、スキー、自転車、ドライブ、ジョギングなどの活動中に位置や方角、スピードなどのログをスマートフォンアプリで記録し、保存されたCSVデータを分析できます。

Antimap SimpleはHTML5/ProcessingJS、AntiMap VideoはopenFrameworksで開発されています。

参考情報

ここで紹介したのは、最優秀賞と各部門の金賞です。すべての受賞作はこちらをご覧ください。なお現在、2013年度のコンテストが作品募集中です。締切は2013年9月13日。なお応募には、エントリーフィーがかかります。

ちなみに、2012年は市場調査会社ニールセン(Nielsen)も、同社提供のデータを素材としたビジュアライゼーションのコンテストを開催していました。

データビジュアライゼーション・ツール20選

この記事はThe top 20 data visualisation toolsの原著者許諾済みの日本語訳です。
By Brian Suda on September 17, 2012
Translated by Tatsuo Sugimoto

2014年4月28日更新:オリジナル記事が以前のサイトから移転したため発生していた画像の非表示に対応しました。

わたしがもっともよくきかれる質問のひとつが、データビジュアライゼーションを始める方法についてです。このブログの先へ進むには、練習し、さらに実践し、利用できるツールを理解する必要があります。この記事では、シンプルなチャートから複雑なグラフ、地図、インフォグラフィックスまで、ビジュアライゼーションを作成するための20種類のツールを紹介しようとおもいます。ほとんどのツールは無料で利用でき、そのうちいくつかはすでにインストール済みかもしれません。

もくじ

エントリーレベルのツール

エントリーレベルでは、使いなれたツールを転用してみましょう。たとえば、Excelはビジュアライゼーションソフトだとはおもわれていませんが、驚くほど複雑な結果を得られます。もし始めたばかりなら、これらのツールを理解すべきです。もし毎日ビジュアライゼーションを扱うのなら、すぐにこの先へと進めていけますが、ほかの皆がそうできるわけではありませんので、いつもあまり扱いたくない出所[訳注:つまりエントリーレベルのツール]からのデータを扱うことになります。

1. Excel

 for example, by creating 'heat maps' like this one
Excelは、グラフィカルな柔軟さはありませんが、たとえばこのような「ヒートマップ」を作成するためのデータ探索に向いています。

セルの「ヒートマップ」から散布図まで、Excelではかなり複雑なことができます。エントリーレベルのツールとして、ちょっとしたデータ探索や組織内使用のためのビジュアライゼーション作成には向いていますが、デフォルトの色、線、スタイルのセットが限られているので、本格的な出版物やWebサイトで利用できるグラフィックを作成することは困難です。それでもExcelは、すばやくアイデアを伝えるための手段として、用意しておくべきツールです。

Excelは、商用のMicrosoft Officeの一部として提供されていますので、購入していない場合は、Googleドライブの一部であるGoogleスプレッドシートでほぼ同じことができます。Googleは自社サービスを再利用しているので、スプレッドシートはGoogle Chart APIと同じチャートを生成できます。つまり今後ツールを卒業し自分のプロジェクトでAPIを直接使用するときにそなえて、あらかじめできることを把握しておくことができます。

2. CSV/JSON

CSV(コンマ区切り値)とJSON(JavaScript Object Notation)は、ビジュアライゼーションツールではありませんが、一般的なデータフォーマットです。これらの構造と入出力の方法を理解しておきましょう。このあと紹介するすべてのツールは、入力源としていずれかまたは両方のフォーマットに対応しています。

オンラインのビジュアライゼーション

3. Google Chart API

静的画像のためのツールセットの一部が廃止されたため、現在Google Chart Toolsサイトは動的なチャートのためのツールだけを提供しています。これらは堅牢で、SVG、Canvas、VMLをサポートするすべてのブラウザ上で動作しますが、クライアントサイドで生成するという唯一の大問題があり、JavaScriptのないデバイスやオフライン利用、さまざまなフォーマットに保存するときに問題が生じます。静的画像にはこうした問題はなかったので、なくなってしまったのが残念です。

とはいえこのAPIは、棒グラフ、折れ線グラフから地図やQRコードにいたるまで、ありとあらゆることができます。Googleっぽい外観でかまわなければ、極端なカスタマイズを必要とせずに、よいビジュアライゼーションになるでしょう。出発点として、Google Chart APIは使い方を知るのに最適なツールです。

The portion for static images has been deprecated, but the Google Chart API is a good way to create dynamic visualisations
静的画像の部分が廃止されましたが、Google Chart APIは動的なビジュアライゼーションを作成するためのよい方法です。

4. Flot

Flotは、折れ線グラフと棒グラフ用のすばらしいライブラリです。FlotはCanvasをサポートするすべてのブラウザで動作します。つまりほとんどの一般的なブラウザ、および古いブラウザではCanvasをVMLとして扱う外部ライブラリを使えば動作します。FlotはjQueryライブラリなので、すでにjQueryになれていれば、グラフィックのスタイルや振る舞いをコールバックで簡単に扱えます。

Flotの素晴らしい点は、多くのコールバック関数にアクセスできるので、ユーザーのホバー、クリック、マウスアウトなどの一般的なイベント発生時に、独自のコードとスタイルを実行できることです。Flotは、ほかのグラフ作成パッケージよりもはるかに柔軟性がありますが、やや習得しづらいです。Flotは、折れ線グラフと棒グラフに限定されています。Flotはほかのライブラリほど多機能ではありませんが、一般的な仕事をしっかりこなします。

It's specialised on line and bar charts, but if you know jQuery, Flot is a powerful option
Flotは折れ線グラフと棒グラフに特化したものですが、jQueryを知っていれば強力な選択肢です。

5. Raphaël

Raphaëlもグラフ作成のすばらしいJavaScriptライブラリです。ほかのライブラリとの大きな違いは、RaphaëlがSVGとVMLの出力にしぼっていることです。これには一長一短があります。SVGはベクターフォーマットなので、どんな解像度でも美しく見えます。ただし各要素のDOMノードが作成されるため、Canvasにラスタライズされたイメージよりも遅くなります。一方で、HTMLのように各DOM要素とインタラクトできるという利点があります。

Webサイトには、Raphaëlが一般的なグラフを簡単につくれることを見せるたくさんのデモがありますが、任意のSVGにもレンダリングできるため、IllustratorInkspaceなどのベクターツールに頼らなければできないほど、とても複雑なビジュアライゼーションを作成できます。

 slower than raster-based tools, but it's capable of complex results
Raphaëlはベクターベースのグラフを作るよい手段です。ラスターベースのツールよりも遅いものの複雑な結果を得られます。

6. D3

D3 (Data-Driven Documents)は、SVGレンダリングをサポートするJavaScriptライブラリです。この例はシンプルな棒グラフと折れ線グラフを超えた、かなり複雑なボロノイ図、ツリーマップ、円形クラスター、ワードクラウドです。道具箱に用意すべきすばらしいツールですが、図書館に行くようにいつでもD3をおすすめしようとはおもいません。D3は、とても複雑なインタラクションを作るにはすばらしいです。しかし、ただできるからといって、やったほうがよいというわけではありません。シンプルでいることを心得ていることが、最適なビジュアライゼーションツールを選択する大切なポイントです。

D3 is capable of creating very complex output – but it's best saved for special cases, not everyday use
D3はとても複雑なアウトプットを作成できますが、普段使いではなく特別な機会にとっておくのに最適です。

7. Visual.ly

データビジュアライゼーションよりもインフォグラフィックを必要としている場合、それを支援する新しいツール群が登場しています。Visual.lyはそのなかでおそらく最も人気があります。そもそもインフォグラフィックデザイナーのためのオンライン市場でしたが、テンプレートを選びFacebookやTwitterアカウントに接続すると、すてきなイラストが返ってくる作成機能があります。結果は現在のところ限られていますが、良くも悪くも、有用なインスピレーションの源泉です。このサイトは、今後より多くのフォーマットに対応し、さらにおもしろいグラフィックを作成できるように発展しそうです。

Visual.ly acts both as an online marketplace and simple creation tool for infographics
Visual.lyはオンライン市場とインフォグラフィックのシンプルな作成ツールをもちあわせています。

インタラクティブなGUIコントロール

データビジュアライゼーションがインタラクティブになったら、それ自体がGUIコントロールになるでしょうか? オンラインのビジュアライゼーションが進化したように、ボタン、ドロップダウン、スライダーは、入力パラメータとデータを同時に変化する範囲制御の小さなハンドルのような、より複雑なインタフェース要素へと変化しています。コントロールとコンテンツは融合していくのです。これから紹介するツールは、この提案への可能性を探るのに役立つでしょう。

8. Crossfilter

クライアントがデータの中をかき分けていけるようにより複雑なツールを構築するとき、わたしたちはインタラクティブなGUIウィジェットの役割も兼ねたグラフやチャートを作りはじめています。JavaScriptライブラリのCrossfilterはこれら両方ができます。データを表示すると同時に、データの範囲を制限してリンクされたグラフの反応を見ることができます。

 by restricting the input range on any one chart, data is affected everywhere. This is a great tool for dashboards or other interactive tools with large volumes of data behind them
実行中のCrossfilter:任意のグラフの入力範囲を制限することで、全てのデータに影響が及びます。Crossfilterは、背後に大量のデータをかかえているダッシュボードやインタラクティブなツールに最適なツールです。

9. Tangle

Tangleでは、コンテンツとコントロールの境界がさらにあいまいになります。複雑なインタラクションや方程式を説明しようとするとき、ユーザ自身に操作感覚とデータ探索の強力な方法の両方を提供するために、入力値を微調整させ出力を見せます。JavaScriptライブラリのTangleは、まさにこれをおこなうツールセットです。変数上でドラッグすると、その数値を増減させ、関連するグラフが自動的に更新されるのを見ることができます。この結果はほとんど神秘の一歩手前です。

Tangle creates complex interactive graphics. Pulling on any one of the knobs affects data throughout all of the linked charts. This creates a real-time feedback loop, enabling you to understand complex equations in a more intuitive way
Tangleは、複雑なインタラクティブなグラフィックを作成します。任意のでっぱりを引っぱると、すべてのリンクしたグラフを通じてデータに影響をおよぼします。Tangleは、リアルタイムのフィードバックループを作りだし、より直感的な方法で複雑な方程式を理解できます。

マッピング

マッピングは、以前はウェブ上のとてもやっかいな作業でした。そこにGoogleマップが、オンライン地図の動作方法についての先入観をすっかり吹き飛ばして登場しました。その後間もなくGoogleは、開発者が自分のサイト内にマップを埋め込めるGoogle Maps APIをリリースしました。

それ以来、この市場は大いに成熟しました。自分のデータビジュアライゼーションのプロジェクトでカスタムマッピングソリューションを埋め込みたい場合、現在ではいくつかの選択肢があり、他と比べてどれを選択するべきかを知っていることが、ビジネス上の重要な判断になったのです。おそらくこれらのマップのいずれかに必要なものをすべて押し込むことはできますが、ハンマーを持ってあらゆる問題を「くぎ」として見ることのないようにおすすめします。

10. Modest Maps

Modest Mapsは小さなマッピング・ライブラリです。わずか10kBしかなく、ここであげているなかで最軽量の選択肢です。Modest Mapsは基本的な形式のみしか作れませんが、だまされていはいけません。Waxなどいくつかの拡張でこのライブラリに命を吹き込むことができます。Modest Mapsは、StamenBloomMapBoxによる制作物ですから、興味深い経歴をもっていることがわかります。

Teamed with additional libraries, such as MapBox's Wax (pictured), the tiny Modest Maps becomes a powerful tool
MapBoxのWax(図)のような追加ライブラリと合わせることで、小さなModest Mapsは強力なツールになります。

11. Leaflet

CloudMadeチームが提供するLeafletも、小さくモバイルページを作成するのに十分軽量になるように設計された小型のマッピングフレームワークです。LeafletもModest Mapsも、自分のサイトで使用するのに理想的なオープンソースのプロジェクトです。強力なコミュニティがバックアップしているので、すぐに消えてしまうことはありません。

Leaflet is a small, lightweight JavaScript library ideal for mobile-friendly projects
Leafletは、モバイルプロジェクトに理想的な小さく軽量なJavaScriptライブラリです。

12. Polymaps

Polymapsもマッピングライブラリですが、真正面からデータビジュアライゼーションのユーザをねらっています。CSSセレクタに似た、作成したマップをスタイリングするユニークなアプローチを提供しているので、知っておくとすばらしいリソースです。

Aimed more at specialist data visualisers, the Polymaps library creates image and vector-tiled maps using SVG
データビジュアライザーの専門家向けのPolymapsライブラリは、SVGを使って画像とベクターでタイル張りされたマップを作成します。

13. OpenLayers

OpenLayersは、これらのマッピングライブラリの中でおそらく最も堅牢です。ドキュメントはあまりよくなく、習得はむずかしいですが、ほかではできないことに使えます。他のライブラリが提供していない特定のツールを必要としているとき、OpenLayerがたよりになります。

It isn't easy to master, but OpenLayers is arguably the most complete, robust mapping solution discussed here
OpenLayersをマスターするのは簡単ではありませんが、ここでとりあげているなかで間違いなく最も完全で堅牢なマッピングソリューションです。

14. Kartograph

Kartographのキャッチフレーズは「マッピングの再考」で、この開発者がやっていることそのものです。私たちはいつもメルカトル図法を使っていますが、Kartographははるかに多くの選択肢をもたらします。もし世界規模のデータの作業ではなく、明確なボックスのなかにマップを配置できるなら、Kartographは他よりひときわ目立つために必要な選択肢を持っています。

Kartograph's projections breathe new life into our standard slippy maps
Kartographの投影図は、標準のとらえにくいマップに新たな命を吹きこみます。

15. CartoDB

最後に、CartoDBは知っておくべきサイトです。表形式のデータをマップと組み合わせられる容易さは群を抜いています。たとえば住所の文字列のCSVファイルを入力できて、それらは緯度経度に変換され、地図上にプロットされますが、他にも多くのユーザーがいます。5つの表までは無料で利用できます。その後は月額料金プランがあります。

CartoDB provides an unparalleled way to combine maps and tabular data to create visualisations
CartoDBは、ビジュアライゼーションを作成するためにマップと表形式のデータを結合する素晴らしい方法を提供します。

グラフ用のフォント

最近のWeb開発のトレンドのひとつに、美しいベクターアイコンを作成するため、埋め込みフォントにシンボルフォントを合成することがあります。これらのアイコンは、拡大や印刷に完全に対応していて、あたらしいRetinaデバイスにもぴったりです。FF ChartwellChartjunk等のいくつかのフォントは、グラフを表示するために特別に作られています。こうしたフォントは、すべてのブラウザでは完全にサポートされていないOpenTypeの日常的問題をかかえていますが、近い将来は検討に値するでしょう。

本格的に取り組む

データビジュアライゼーションに本格的に取り組むなら、シンプルなWebベースのウィジェットから、さらに強力なものに移行する必要があります。つまりデスクトップアプリケーションやプログラミング環境のことです。

16. Processing

Processingはインタラクティブ・ビジュアライゼーションのシンボル的存在になりました。Processingでは、Javaにコンパイルされる、より簡単なコードを書くことができます。Javaアプレットなしでより簡単にProcessingを使うWebサイトを作れたり、Objective-CへのポーティングでiOS上で使えるProcessing.jsプロジェクトもあります。Processingはデスクトップアプリケーションですが、すべてのプラットフォームで動作し、現在数年の歳を重ねていて、コミュニティによる十分なサンプルとコードがそろっています。

Processing provides a cross-platform environment for creating images, animations, and interactions
Processingは、画像、アニメーション、インタラクションを作成するためのクロスプラットフォーム環境を提供しています。

17. NodeBox

NodeBoxは、2Dグラフィックとビジュアライゼーションを作成するためのOS Xアプリケーションです。Pythonコードを知っていて理解する必要がありますが、その先にあるNodeBoxは、変数を微調整し、瞬時に結果を確認するための迅速かつ簡単な方法です。NodeBoxはProcessingに似ていますが、インタラクティビティはありません。

NodeBox is a quick, easy way for Python-savvy developers to create 2D visualisations
NodeBoxは、Python使いの開発者にとって、2Dビジュアライゼーションを作成する素早く簡単な方法です。

プロ・ツール

Excelからはじまるスペクトルの対極に位置するのが専門的なデータ分析ツールです。データ・ビジュアライゼーションに本格的に取り組んでいるなら、このうちのいくつかに熟達していないとしても意識はしておく必要があります。SPSSSASといった業界標準のツールは高額な利用料が必要なので、大規模な組織や学術機関だけが利用できます。しかしいくつかの無料の代替ソフトウェアが、強力なコミュニティとともにあります。オープンソースソフトウェアも商用ソフトに劣らぬ品質で、プラグインやサポートもすぐれています。

18. R

そのソフト専用の検索エンジンをそなえたソフトウェアが他にあるでしょうか? 統計パッケージは大規模なデータセットを解析するために使用されます。Rは非常に複雑なツールで、理解するのに時間がかかりますが、強力なコミュニティと、つぎつぎに制作されているパッケージライブラリをもっています。学習曲線は、ここでとりあげるツールのどれよりも険しい[訳注:むずかしい]もののひとつですが、このレベルに到達したいなら、使い慣れておかなくてはなりません。

A powerful free software environment for statistical computing and graphics, R is the most complex of the tools listed here
Rは統計処理とグラフィックのための強力なフリーソフトウェア環境で、ここにあげたツールのなかで最も複雑です。

19. Weka

データサイエンティストの世界に深く入るには、自らの能力をビジュアライゼーションの作成だけからデータマイニングに拡張する必要があります。Wekaは、さまざまな属性に基づき(データ探索の強力な方法である)データの分類とクラスタリングをおこなうのに適したツールです。また、簡単なプロットを生成することもできます。

A collection of machine-learning algorithms for data-mining tasks, Weka is a powerful way to explore data
Wekaはデータマイニング作業のための機械学習アルゴリズムを集積した、データ探索の強力な方法です。

20. Gephi

人びとが関連性、ソーシャルグラフ、相関関係について話しているとき、実際には、ネットワーク内の他のノードに対して、2つのノードが相対的にどう互いに関連しているかについて語っています。問題となるノードは、会社の人々や文書内の単語、サッカーの試合のパスにもなりえますが、数学も同じことです。グラフベースのビジュアライザーでありデータ管理ソフトであるGephiは、大量のデータセットを処理し美しいビジュアライゼーションを作成できるだけでなく、データをクリーンにしソートすることもできます。使用事例が限られている複雑なソフトウェアですが、この珠玉のソフトを知らない人よりも一歩前に進むことができます。

Gephi in action. Coloured regions represent clusters of data that the system is guessing are similar
実行中のGephi。着色された領域は、システムが類似していると推測したデータのクラスタを表しています。

参考サイト

  • ビジュアライゼーションのサンプルとインスピレーションのすばらしいTumblrブログ。 vizualize.tumblr.com
  • Nicholas Feltonのアニュアルリポートは現在たいへん有名ですが、彼は自分が見つけた素晴らしい作品群のTumblrブログももっています。
  • Processingを世に送りだした人物から。benfry.com/writing
  • Stamen Designはいつも興味深いプロジェクトを生み出しています。stamen.com
  • Eyeo Festivalは、データビジュアライゼーションの偉大な人物たちを集めていて、オンラインでビデオを見ることができます。

日本語ブックガイド

ビューティフルビジュアライゼーション (THEORY/IN/PRACTICE)
Julie Steele Noah Iliinsky
オライリージャパン
売り上げランキング: 74,506
ビジュアル・コンプレキシティ ―情報パターンのマッピング
マニュエル・リマ Manuel Lima
ビー・エヌ・エヌ新社
売り上げランキング: 51,393
Processingをはじめよう (Make: PROJECTS)
Casey Reas Ben Fry
オライリージャパン
売り上げランキング: 37,686
ビジュアライジング・データ ―Processingによる情報視覚化手法
Ben Fry
オライリージャパン
売り上げランキング: 81,829
Rクックブック
Rクックブック

posted with amazlet at 13.08.30
Paul Teetor
オライリージャパン
売り上げランキング: 159,468
RとRubyによるデータ解析入門
Sau Sheong Chang
オライリージャパン
売り上げランキング: 11,105