2018-10-13「2018年度日本デザイン学会秋季企画大会」で発表しました

2018年10月12〜14日に九州大学大橋キャンパスで開催された「2018年度日本デザイン学会秋季企画大会」で、2件の発表をしました。

1つ目は、10月13日のライトニングトーク発表です。

杉本達應「『仮想書棚』の試み」

2つ目は、10月14日の第5支部研究発表会の口頭発表です。

杉本達應「データ可視化の制作プロセスの共有を支援するツールの検討:『データ駆動型デザイン』を学習する技術的環境」

2018-09-16 「DxD at Fukuoka データビジュアライゼーションを語る会」を開催しました

2018年9月16日、福岡県Ruby・コンテンツ産業振興センターで「DxD at Fukuoka データビジュアライゼーションを語る会」を開催しました。共催の「ももち浜TECHカフェ」さんに博多駅至近の会場をご提供いただきました。

開催概要
2018-09-16 「DxD at Fukuoka データビジュアライゼーションを語る会」を開催します – lab.sugimototatsuo.com

多様な領域からご参加いただき、ありがとうございました。昨年から主宰しているDxD研究会をはじめて公開しました。データビジュアライゼーション領域で活動されている山辺さん、矢崎さんをお招きして、それぞれの実践事例など話題提供いただきました。当日は時間が足りず、参加者をまじえた十分なディスカッションができなかったことを反省しています。またデータビジュアライゼーションをテーマのイベントが開催できればと思っています。

(写真:牛島清豪さん、矢崎裕一さん、杉本達應)

当日の発表資料を置いておきます。

データビジュアライゼーションの制作方法を学ぶ
杉本達應

アート+サイエンス、ビジュアライゼーションの現在―産学官連携と実践
山辺真幸さん

参加者限定で共有しました。

見えないものを見ようとして望遠鏡を覗き込んだ
矢崎裕一さん

こちらのリンクをご覧ください。

2018-09-16 「DxD at Fukuoka データビジュアライゼーションを語る会」を開催します

2018年9月16日、福岡県Ruby・コンテンツ産業振興センターでデータビジュアライゼーションに関するトークイベントを開催します。
杉本達應研究室と「ももち浜TECHカフェ」の共催です。

参加申し込みはこちらから。
https://tech-cafe.connpass.com/event/98246/

近年、多様なデータを起点にチャートなどの視覚的表現を生成する「データビジュアライゼーション」が注目されています。この領域をテーマにした「DxD研究会」が福岡で初のトークイベントを開催します。データビジュアライゼーションの教育、実践について話題提供し、この分野に興味をもつみなさんと意見交換します。

福岡県Ruby・コンテンツ産業振興センター 5階プレゼンルーム
福岡市博多区博多駅東1丁目17-1(福岡県福岡東総合庁舎5階)
※博多駅筑紫口から徒歩5分
参加無料
イベントページでお申込みください。受付の際に名刺を頂戴します。

プログラム

データビジュアライゼーションの制作方法を学ぶ
杉本達應(佐賀大学芸術地域デザイン学部 准教授)
大量のデータが行き交う現在、デザインで学ぶべきものが大きく変化しました。初学者に向けた「可視化のガイドライン」(作成中)を紹介します。

アート+サイエンス、ビジュアライゼーションの現在―産学官連携と実践
山辺真幸(多摩美術大学情報デザイン学科 非常勤講師/慶應塾大学大学院 政策・メディア研究科 後期博士課程)
アートとサイエンスにまたがる2つの「データビジュアライズ」の現在について、大学・企業での取り組みや実践を交えて紹介します。

見えないものを見ようとして望遠鏡を覗き込んだ
矢崎裕一(Data Visualization Japan ファウンダー/Code For Tokyo 共同代表/多摩美術大学情報デザイン学科 非常勤講師)
人類が何を可視化してきたのか、過去の一部を駆け足で振り返りながら、今後の発展可能性について話題提供します。

主催 佐賀大学 芸術地域デザイン学部 杉本達應研究室
lab.sugimototatsuo.com
共催 システム開発技術カレッジ
(公益財団法人 福岡県産業・科学技術振興財団)

本研究会はJSPS科研費JP16K00462の助成を受けたものです。

2017-10-14 Geoアクティビティコンテストでデザイン賞を受賞しました

IMG_2863

2017年10月12日から14日まで、日本科学未来館で開催された「G空間EXPO 2017」Geoアクティビティコンテストに出展しました。

出展したのは、開発中のWebアプリ「DataMapp」(現在公開準備中)です。統計データを地図上にビジュアライズするシンプルなWebアプリです。13日のプレゼンテーション審査で評価いただき、「デザイン賞」を受賞しました。ありがたいことに、公開を期待する声など、多くの反響をいただきました。DataMappにご関心のある方は、杉本までご連絡ください。今後の動きをお知らせいたします。

これまでつながりのないイベントでしたが、人工衛星からドローン、GIS、AR、VRなど、地理空間情報にかんする産官学のさまざまな展示があり、勉強になりました。

展示では多くの地理空間情報業界のみなさんに声をかけていただきました。いただいたご意見やご感想は、つぎのように要約できるとおもいます。地図、とりわけ「主題図」と呼ばれる特定主題を詳細に表現した地図が、分析や意思決定に活用される場面が増えていて、データを効果的に表現するデザインの需要が高まっている。そのため、DataMappのようなデザイン主導の取り組みに期待しているということでした。

メインステージが展示場所にちかかったため、講演プログラムもたのしみました。

このコンテストに出展していたプロジェクトは、最優秀賞を受賞したドローンを利用した水田分析(なんと高校生!)など、いずれもとても面白かったです。わたしがとくに興味をひかれたのは、MIERUNE社の地図配信サービス「MIERUNE地図」です。これはOpenStreetMapをベースにした地図で、スタイルデザインが抜群に美しく、すばらしかったです。このような美しい地図が、Web上の地図の標準になってほしいなと感じました。

関連リンク
G空間EXPO2017|2017年10/12(木)・13(金)・14(土)開催!
【地図ウォッチ】 「Geoアクティビティコンテスト」最優秀賞は、愛媛・伊予農業高校の2年生 – INTERNET Watch

Linked Open Data チャレンジ Japan 2016 ビジュアライゼーション部門 最優秀賞 受賞

先日発表された「LODチャレンジ2016」(Linked Open Data チャレンジ Japan 2016)のビジュアライゼーション部門で最優秀賞を受賞しました。LODチャレンジは、新たなデータづくり、データ公開、データ共有の仕掛けやオープンデータ活用のアイディア、アプリケーションなどを募集しているイベントです。実行委員会は有志のみなさんの組織です。

2017年3月11日に東京大学で開催された授賞式シンポジウムには、残念ながら参加できませんでしたが、後日たいへん立派な賞状を送っていただきました。「可視化法学」でアイディア部門最優秀賞を受賞された芝尾幸一郎さんはIAMAS時代からの友人でお会いたかったです。

受賞した作品「bibliomaps ビブリオマップ神戸版」は、地名にまつわる文芸作品を地図にマッピングし、地名が登場する前後の文脈を原稿用紙風にビジュアライズした鑑賞型のWebアプリケーションです。文学館の展示のように、作家が生きていた時代や場所、執筆風景を想像できるように工夫しました。昨年開催された神戸市とバルセロナ市の国際連携ワークショップ「WORLD DATA VIZ CHALLENGE 2016」の参加をきっかけに制作したものです。まだ粗削りなので、ブラッシュアップしたいなとおもっています。

賞状に書かれていたコメントをご紹介します。

オープンで良質な日本語のテキストである青空文庫を対象にして、地名を軸に構築したデータを趣のある作品としてまとめている点が素晴らしいです。オープンデータの活用という観点と、強く印象に残るビジュアルという観点の両方において高く評価いたしました。
さらにDBpedia Japaneseなど他のオープンデータと繋いで別の文脈を可視化するなどの発展性も期待できます。


「データの見える化による地域課題解決ワークショップ」第2回で話題提供しました

2016年11月25日、佐賀大学で開催された「データの見える化による地域課題解決ワークショップ」第2回で、第1回にひきつづき話題提供しました。

Code for Saga(コードフォーサガ) × 佐賀大学
「データの見える化で地域課題を解決しよう」第2回
http://code4saga.org/archives/385

私からは、データビジュアライゼーションのデザイン指針の考え方とツールを紹介しました。

後半のアイデアソンでは、いくつもの「見える化」のアイデアが発表されました。

わたしのスライドはこちらです。
杉本達應,2016,「データビジュアライゼーションのツール」。

Code for Sagaの牛島清豪さんによる活動レポートです。

データの見える化による…ワークショップ第2回目 | Code for Saga

World Data Viz Challenge 2016で発表しました

2016年10月15日・16日に、神戸市国際会議場で開催された「World Data Viz Challenge 2016」2nd Stageで発表しました。

World Data Viz Challenge 2016
神戸市、バルセロナ市連携まちづくり×ICTをテーマとする、データビジュアライズの国際ワークショップ & ツアー

バルセロナで開催された1st Stageには参加できませんでしたが、神戸で参加者のみなさんのプロジェクトを見れてよかったです。国際イベントと銘打たれていますが、スペインからの参加者がいなかったのは残念でした。

キーノートスピーチで、山道佳子さん(慶應義塾大学)によるバルセロナの都市計画の歴史にかんするお話があり興味深かったです。

バルセロナ市は、古くから計画的に都市が設計されていたことがわかりました。自動車が生まれる以前から、とても幅の広い道路をそなえていて、いまでは車道や広場に活用されているのには感服です。現在バルセロナ市は「City OS」というコンセプトを掲げスマートシティで先進的な取組をしています。その行政主導で総合的な「都市づくり」は、日本でいう「まちづくり」とはずいぶん様相がちがいます。ただ貪欲に新しい技術を都市づくりに活かしていくスピード感には学ぶところがありそうです。

神戸市がスマートシティに?連携するバルセロナ市の現在(矢崎裕一) – 個人 – Yahoo!ニュース

わたしが発表したのは、「街のイメージ」を感じることができる観賞型のWebアプリ「bibliomaps」です。青空文庫に収録されているテキストから、神戸にかんする地名が載っている作品をつぎつぎにブラウジングできます。地図上に、原稿用紙で表現しました。未公開ですが好評でしたので、そのうち公開できればとおもっています。

杉本達應,2016,「bibliomaps ビブリオマップ神戸版」(未公開)

2016年前半のビジュアライゼーション10選

この記事は、10 significant visualisation developments: January to June 2016 の日本語訳です。
原著者の許諾を得ています。転載はご遠慮ください。

2016年前半のビジュアライゼーション10選

By Andy Kirk | July 27, 2016
Translation: Tatsuo Sugimoto

1年の中間と最後の節目に、データビジュアライゼーション分野の過去半年間を振り返り、優れたプロジェクト集を編むことにしています。ここにあるのは、主要なプロジェクトやイベント、新規サイト、トレンド、パーソナリティー、概説で、この分野の発展に寄与するものだと感じたものです。

今年はじめに2015年後半のコレクションを発表しましたが、これから2016年前半を振り返りたいとおもいます。みなさんから、もっとも重要だと思われるプロジェクトの提案が寄せられるのを楽しみにしています。

それでは、いつものように順不同でいきます。

1. 気象スパイラル(Climate spirals)

レディング大学の気象科学者、エド・ホーキング(Ed Hawkins)博士による、1850年から現在にいたる世界規模の気温をアニメにした渦巻き状のプロットは、ソーシャルメディアで拡散しました。地球の気候が劇的に変化したことをもっとも納得させてくれる図解であるという人もいました。

2. PolicyVizポッドキャスト

ジョン・シュワビッシュ(Jon Schwabish)のPolicyVizポッドキャストは1年以上つづいています。とくにこの半年間は、この分野全般で頭角をあらわすのにふさわしい存在になったと感じます。ジョンは自然なカリスマ的ホストで、インタビューします。エピソードの中とその合間の両方に、すばらしいリズムを作りあげました。エピソード中は、スタイル、アングル、会話のペースを通じたリズムがあり、その合間には、この分野の多様性をあらゆる角度からカバーしようと連絡帳をたくみに手繰っているリズムがあるのです。例をあげるだけでも、エドワード・タフティ(Edward Tufte)やウィリアム・クリーブランド(William Cleveland)が登場するなど、彼はなかなか声を聞けない著名人にもたどりついています。約20〜25分間という長さは、60分近くの長さになりがちな根強い人気のData Storiesのエピソードへの、つかみやすいガイドになります。

3. リサ・ロスト(Lisa Rost)

リサは、ナイト=モジラ・オープンニュース(Knight-Mozilla OpenNews)のNPRビジュアルチーム内のフェローで、ワシントンDCを拠点にしています。ずっと前からリサと彼女の作品を知っていましたが、この半年間、ビジュアライゼーションの話題に対する貢献において、彼女はますます多作でよく見るようになりました。2つの対照的な成果があります。(1)12種類のツール12種類のライブラリを使いまったく同じチャートを制作する作業を比べた大変すばらしい作品と、(2)NPRにいる期間中、作品に関するブログを毎日書いていることです。わたしは、地球の大陸上にある有名な都市の緯度を並べたこの作品もとても気に入っています。

4. Polygraph

Polygraphは私にとって新しいものではありませんが、2016年のマット・ダニエルズ(Matt Daniels)たちのチームによる作品のクオリティと「興味深さ」(文字通りの意味)は本当にすばらしいとおもいます。Polygraphの目的は、「複雑な話題についてのカジュアルな議論をつくりだす作品」を提供することです。他の多くのサイトと異なるのは、わたしの見るところ、人気音楽の進化ハリウッドの男女格差と映画への影響時代を超えた不朽の名曲などの話題を探究する、ポピュラー文化関連の話題に分け入り、魅力的な一連のデータドリブンの調査へと駆り立てるコアな好奇心が明快にあることです。すばらしいData Storiesエピソード74では、マットの作品関する情報があり議論をしています。

5. レナ・グロージャー(Lena Groeger)の「ビジュアル・エビデンス」記事

わたしのサイトをくまなく読んでいる読者の方は、わたしがレナ・グロージャーのデータビズに関する考えの大ファンだと聞いても驚かないでしょう。以前の投稿(20142015)で彼女の作品を賞賛しましたし、今回ふたたび彼女のすぐれた新シリーズ、鋭い長文の「ビジュアル・エビデンス」記事(Flipboardコレクションはこちら)は、「日常生活のなかのデータとビジュアルデザイン」という関心のとてもニッチな断片の深みに達しています。やかんを火にかけ、紅茶をいれ、読む時間をとりましょう。

6. 上空のスパイ(Spies in the Skies)

これは、すでに受賞歴をもつデータジャーナリズムのプロジェクトで、Buzzfeedニュースのピーター・オールドハウス(Peter Aldhous)とチャールズ・セイフ(Charles Seife)によるものです。FBIと国土安全保障省(DHS)のエージェントが操縦する米国政府の航空機が、アメリカの都市の上空を定期的に航行しているパターンを分析しています。プロジェクトの記事が説明するように、「これまでほとんど世間の目にさらされることのなかった政府の空中監視活動の規模と広がりの実態を、BuzzFeedニュースがはじめて解明」しています。このプロジェクトは、データ処理の高度さ、調査の切り口の見事さ、ビジュアルのすばらしさなど、いくつも核心を突いていて、さまざまな評者から多くの称賛を受けています。

7. 月曜日のリニューアル(Makeover Monday)

これは、アンディ・クリーベル(Andy Kriebel)とアンディ・コトグレーブ(Andy Cotgreave)によるすばらしいコンセプトで、毎週のチャレンジをベースとしています。既存のプロジェクトからデータを取得し、ことなる潜在的な創造の道を探るリデザインを提案することをTableauコミュニティに呼びかけています。年間を通じて、作品のリデザインを制作するたいへん熱心な人々へと広がりました。重要なこととして、ここには無根拠な批判ではなく、全体にしっかりとした建設的な批評精神がありました。

8. 円グラフの研究

ロバート・コサラ(Robert Kosara)とドリュー・スカウ(Drew Skau)は円グラフに関する重要なあたらな研究を共同発表しました。「円グラフだって? 円グラフが悪で本当にダメな理由くらい全部分かってるよ」という人も中にはいるかもしれません。それでもこの研究はたいへん重要です。なぜなら、「円グラフをどうやって読みとるか知っていますか? 一般に言われているように、角度で読みとりますか、それとも円弧の長さで、もしかして面積でしょうか?」という質問に答えるにあたって、ロバートとドリューは、それが角度だという主張を裏付ける研究がなかったことを発見したからです。また、「円グラフを読みとる方法についての常識はほぼ確実に間違っていて、わたしたちが考えている以上に複雑」だったのです。2つの論文が、(1)「円弧、角度、面積:円グラフ、ドーナツグラフの個々のデータのエンコーディング」、 (2)「円グラフのバリエーションにおける判定エラー」を考察しています。

9. 変化を遂げるニューヨークタイムズのインタラクティブ

ニューヨーク・タイムズのだれかが話すと、みなさんは耳を傾け学びますが、アーチー・チェ(Archie Tse)がMalofiej 24〔インフォグラフィックス世界サミット〕で「なぜインタラクティブ要素を減らしたか」というタイトルでトークするときこそ、本当に耳を傾け学ぶときです。わたしはその場にいなかったので、最前線だと確証させてくれたこのトークを見ていません。しかしその内容から重要であることは明らかです。トークの主要な論点を繰り返すつもりはありません。自分でこれを吟味するだけで(とても短いです)、「ビジュアル・ストーリーテリングの3つのルール」が分かります。そしてNYTグラフィックスチームが、ユーザが明らかに要求し、応答するようなタイプの経験を作りあげるよう取り組みを変化させた主な方法も理解できるでしょう。

10. データジャーナリズムの「不都合な真実」

新聞をベースにしたビジュアルジャーナリズムの話題で、ワシントンポストのWonk Blogのクリストファー・イングラハム(Christopher Ingraham)によるこの記事は、まさに私の心に訴えかけてきました。それは、「うわべだけの権威と客観性」について語っています。数字やグラフィカルな表現は、読者によく伝わります。しかし、作り手であるわれわれは、何を見せ、何を入れ、どう見せるかについて多くの主観的な判断を挟んでいるのです。

そのほか

そのほかの2016年前半のハイライトです。

ケネディ・エリオット(Kennedy Elliott)のOpenVisトーク

ワシントンポストについて話していたら、あと2つの彼らの作品や同僚がありました。第1に、このとても興味深いトークと記事で、ケネディは、「人間の知覚に関する39の研究」の調査を振り返り議論しています。

NFLドラフトヒストリー

第2に(第3といったほうがいいかも)、このNFLドラフトヒストリーの分析は、信じられないほど詳細でカスタマイズ可能で変化に富んでいます。

FTのアプローチの変化

すでに昨年の半年間レビューでFT〔フィナンシャル・タイムズ〕が発表するビジュアライゼーション作品の変化と品質については指摘していましたが、これは本当に素敵な報告です。特にアラン・スミス(Alan Smith)がこのチームに入ってから数ヶ月で、この変化が起きました。

Chriming

枝、木、森のメタファーで鳥の鳴き声をビジュアライズしたソウルのスー・コ(Sook Ko)の美しい作品。

ナディー・ブレマー(Nadieh Bremer)

上で紹介したリサと同じく、ナディーは、(自己紹介によれば)「天文学者からデータサイエンティストそして独学のデータビジュアライゼーションデザイナー」です。魅力的なビジュアルプロジェクトやチュートリアル、トーク、リソースレビューを幅広く手がけていて、今年とてもアクティブでよく目にします。

WSJのハミルトン

ミュージカル『ハミルトン』についての本当にイノベーティブな作品で、「音楽史上もっとも密で複雑な韻を踏んでいる歌詞が実際どのようになっているか」を調べています。

ニコラス・ルージュ(Nicholas Rougeux)

ニコラスもデザイナーで、この数ヶ月わたしのアンテナにいつもひっかかっています。彼は面白く独創的で、非常にエレガントなビジュアライゼーションを探究しています。

Flag Stories

理論的にはとてもシンプルなテーマですが、たいへん素敵で密度の濃い、世界中の国旗の属性を調査したビジュアル分析が並んでいます。デンマークのスタジオferdios制作。

タマラ・マンツナー(Tamara Munzner)のあらたなブログ

タマラがブログを始めたおかげで、世の中よくなりました。

著者紹介

アンディ・カーク(Andy Kirk)は、イギリス在住のフリーランスのデータビジュアライゼーションの専門家でトレーナーです。
www.visualisingdata.com

Data Visualisation: A Handbook for Data Driven Design
Andy Kirk
SAGE Publications Ltd
売り上げランキング: 7,628

日本デザイン学会でポスター発表しました

2016年7月2日(土)、長野大学で開催された「日本デザイン学会第63回春季研究発表大会」のポスターセッションで発表しました。

日本デザイン学会第63回春季研究発表大会
2016年7月2日
於:長野大学

発表タイトルとポスターは、以下の通りです。

杉本達應「手軽に扱えるデータ駆動型地図表現ツールの提案:『DataMapper』のプロトタイプ開発」

発表の梗概はこちらで公開されています。
http://doi.org/10.11247/jssd.63.0_208

セッションでは、たくさんのご意見をいただきありがとうございました。統計データを可視化するこのデータビジュアライゼーション・ツールは目下開発中ですが、今後公開を目指します。試用されたい方、ユーザーテストにご協力いただける方は、ぜひご連絡ください。

データビジュアライゼーションの色を学ぼう

この記事は、Your Friendly Guide to Colors in Data Visualisation の日本語訳です。
原著者の許諾を得ています。転載はご遠慮ください。

データビジュアライゼーションの色を学ぼう

Original text: Lisa Charlotte Rost
Published: 22 Apr 2016
Translation: Tatsuo Sugimoto

先日、急を要していたわたしは「色をうまく扱う方法をだれか教えてくれない? わたしの色のセンスはひどいんです」と、Twitterフォロワーのみなさんに助けを求めました。スコット・マレイ(Scott Murray)がリツイートしてくれたおかげで、Webサイトやツールのリンクつきのリプライをたくさんもらいました。どの情報もすばらしかったので、わたしの意見をつけながら、みなさんと共有したいとおもいます。それでは始めましょう。

なぜ色なのか

最初に、このビデオを見てください。色を選びとることの大切さと混色の方法を説明しています。まず、色を使う主な理由をまとめておきましょう。色が重要なのは、(1)色がムードを作りあげ、(2)鑑賞者の視線を誘導し、何がしかに注目させ、さらにあるストーリーを伝えるからです。

どちらの側面もデータビジュアライゼーションにとっては重要です。たとえば、Pitch Interactiveの“Out of Sight, Out of Mind”〔『見えざる狂気』パキスタンでのドローン攻撃のビジュアライズ〕では、特有のムードが非常にうまく作りあげられています。赤い滴りは、血液が広がっているのを見ているようです。データビズでは、鑑賞者の視線を誘導する重要なツールとして、強調させるのに色をよく使います。わたしは、アンディ・カーク(Andy Kirk)のすばらしい記事を示しながら、「グレーはデータビズにおける最高の相棒だ」とよく学生に伝えています。

さて自分のプロジェクトで、どのように色を決めるとよいでしょうか。わたしは、データビズの色に関しては、2つの課題があるとおもいます。連続的/分岐的データと質的データです。連続的/分岐的データとは低い値から高い値へ進むデータのことで、グラデーションを必要とします。質的データとはカテゴリー群で、「わたしは一人きりよ。他の色とは何の関係もないんだからね!」と叫ぶ色を必要とします。

実際に利用するとき、この2つの課題はそれぞれ異なります。グラデーションを使っている場合、ステップごとの違いが充分なのかが気になります。明るいグリーンともっと明るいグリーンの違いを、鑑賞者にきちんと区別してほしいからです。次のセクションで、この問題を解決するためのツールを紹介します。

質的データを扱っている場合、バランスがとれていて鑑賞者の目もひくカラーセットを探す必要があります。この問題はグラフィックデザイン分野では定番なので、そのためのツールがよく使われています。第2部「配色」で、そうしたツールを紹介していきます。

1. データビズ・グラデーション

まずはColorBrewer 2.0を紹介しないといけません。この「カラーツールのカラーツール」は、意欲的なデータビズ・デザイナーのためのものです。ColorBrewerは単なるツールではありません。色を決めている間に、データビズにおけるベストな色使いを学習することができます。まだ試したことのない方は、ヘルプをクリックし素晴らしい解説を読んでください。

便利なうえに色をしっかり理解できるようになるツールが、トリステン・ブラウン(Tristen Brown)の“Colorpicker for data”です。グラデーションを選択するのに加え、自分で独自のグラデーションをいくつも作りだすことができます。トップの“Visualized”ボタンに注目してください。自分が作ったグラデーションを使ったコロプレス(塗り分け)地図を表示します。この地図がカラーピッカーと同じページにないのが残念ですが、何もないよりはいいですよね。

グレゴール・アイシュ(Gregor Aisch)のChroma.js Color Scale Helperはグラデーションを表示するだけでなく、実際のステップを表示し、最も大きな差があるステップを見つけやすくしてくれます。この小さなツールは、わたしが一番よく使っているツールです。このツールの背景に興味がある人は、グレゴールによる詳しい解説をどうぞ。

これらのツールをすべてマスターし、さらに追求したい方には、I want hueがよいでしょう。これは、「データサイエンティストのための色」をうたっていて、実際かなり複雑なのでチュートリアルが用意されています。初心者が理解しやすいツールとはいえないことは確かで、わたしが求めているよりも盛りだくさんすぎる気がします(間違っていたら教えてください)。色の差の度合いを示す絵文字はいい感じですけどね。

2a. 配色──巨匠から学ぶ

グラデーションを終えたら、カラーパレットに進みましょう。わたしがTwitterで質問したときに、3名の人が画家をすすめてくれたので、画家のことを知りたいというニーズがあるようです。実をいうと、わたしは昔の巨匠たちにとても感謝しています。バウハウス大学の卒業生として、アルバースイッテンらから特別な何かを得られることを知っています(元ワイマール市民として、ゲーテの色彩論からも楽しみを得られることも知っています)。ところがご存知のとおり、彼らの時代の色は今とは違います。当時は、明るいネオングリーンについて考えることになろうとは思いも寄りませんでした。とはいえ色彩構成に関する彼らの著作からは、いまなお学ぶことがあることは確かです。

ジョセフ・アルバース(Josef Albers)の著作“Interaction of Color”から始めましょう。彼は、「視覚的認知において、ある色が現実のままに──物理的に──見えることはほとんどない」など、色の本質について語りました。それにアルバースの色彩構成は、ほんとうに美しいです。

もう一人のバウハウスのスター(バウハウスでアルバースの師でもある)が、一風変わったヨハネス・イッテン(Johannes Itten)であり、彼の著作“The Art of Color”です。このように色相をあらわした色立体でよく知られています。

もちろん「色彩の巨匠」として米国の画家、マーク・ロスコ(Mark Rothko)に触れないわけにはいきません。色彩を描いた巨大な絵画で有名です。おもしろいことに、ロスコは広く知られたつぎのような言葉を残しています。「色の関係だけに心を動かされていたとしたら核心をつかんでいません。わたしの興味は大きな感情を表現することにあるのです。」色が関係することで、こうした大きな感情を表現できていることは間違いないので、わたしはこの言葉を理解できたのか自信がありません。

(感情と言えば、小林重順『カラーリスト』 という面白い本があります。彼は「色彩心理学」の研究者で「色彩美学の脱神秘化」に取り組みました。)

徐々に現代に戻りましょう。ColorLisaというWebサイトは、アーティストのカラーパレットを見せてくれます。アイデアはいいのですが、やっていることが単純で、すぐにページを離れたくなってしまいます。

2b. 配色──映画から学ぶ

アートからポピュラーカルチャー関連の現象である映画に移りましょう。ストーリーテリングの達人は、目立たせたり、視線を導いたり、ムードを作りあげたり、楽しく感じてもらったりするために、映画がどのように色を扱っているのかを知っています。

映画のコマの色からなるカラーパレットは、Film Palettes や、よりくわしくはMovies in Colorで見ることができます。The Colors of Motionは、アーティスティックなアプローチで映画の全てのフレームの色を見せています。実用性はともかく、とても興味深いです。

ウェス・アンダーソン(Wes Anderson)は、色彩を上手に操る人物です。Wes Anderson Palletesは、ある意味伝説的です。このブログに触発されて作られた、Wes Anderson Color Palettes用のRライブラリまで存在するほどです。

自分のムービーや手持ちの画像の色を調べたいときは、DeGraeveのようなツールが便利です。写真をアップロードすると、カラーパレットが自動的に作成されます。ご覧の通り、パレットは「見た」色よりもかなり地味な色合いになってしまいます。

そのためこのツールは、写真やムービーのフレームで「見た」ままのカラーパレットを作成するのに多少は役立つかもしれません。自動的なアプローチやカラーピッカーでできるカラーパレットは、見ていた色よりも色あせてしまうため、うまくいくとは限らないのです。ビル・ハート=デービッドソン(Bill Hart-Davidson)は、カラーパレットの元として熱帯魚の写真を使うことをすすめてくれ、それでこのツールがうまく働くこともあることを確認できました。そういうわけでアートやグラフィックデザイン作品には、DeGraeveのようなツールが確かに有効です。

2c. 配色──その他のものから学ぶ

世の中には数多くのカラーパレットのコレクションが存在します。 ColorHuntColourLoversCoolorsLOLcolors、それにもちろんAdobe Color CCは、世界中のカラー愛好者がやみつきになって作成した数多くのコレクションの一例にすぎません。とくにデジタルでかっこいいカラーパレットがお望みなら、Googleのマテリアルデザインのカラーパレットがぴったりでしょう。

こうしたパレットを実際どのように使えばよいのでしょうか。 DesignspirationDribbleのカラー検索オプションは、この疑問に答えてくれます。わたしはこの2つのサイトで、手持ちのパレットにマッチする色の着想を得るのに使っています。個人的にはDesignspirationがお気に入りです。とにかくこのサイトのファンなんです。ここでは1色だけでなく複数の色を検索することができます。

もっと大きな感覚でインスピレーションを得るには、こんなこともおすすめです。ミュージアムやギャラリーに足を運ぶ。アートを見る。ほかのデータビジュアライゼーションを見る。The Coloristのような、カラー愛好者のブログを読む。

2d. 配色──自分で作る

Smashing Magazineは、自分でカラーパレットをすばやく作るためのよい入門を掲載しています。わたしは、メインの色に混じり気のないグレーを重ねる「調和的グレーの作成」というアイデアをとくに気に入っています。これまで考えたことがなかったアイデアでしたが、自分のカラーパレットを調和的に感じさせるようにできます。

Smashing Magazineは、Adobe Color CCの高度版であるPalettonの利用も紹介しています。やっていることが分かっていれば、このツールが大いに役立ちます。

3. 色覚異常

すばらしい配色が見つかりましたか。よかった! それでは、その色が目的にかなっているか、色覚異常の人たちにも区別できるかを確認しましょう。一般的に赤と青の違いを色覚異常の人たちに説明するのは難しいとされていますが、実際にはイメージ上の赤や青の色合いによって変わります。Spectrumのようなブラウザの拡張機能は、異なる色覚をもつ人たちが見る色をシミュレートでき、とても参考になります。

4. 色で楽しもう!

それでは最後に、すてきなOK GOメンバーによるセサミストリートのビデオを見ましょう。

見ましたか? 次はゲームで遊びましょう。Colorという名前のゲームです。(いい名前です)(同じ単語を何度も聞いていると言葉の意味が消えていきますね…)思ったよりも中毒性があります。色を合わせてくださいね。それではどうぞ。

わたしのツイートにリプライし、いろんな楽しみを見つけさせくれた皆さんに感謝します! 今ではずいぶん色と仲良しになれた気がします。もしこの記事に欠かせないツールやWebサイトをご存知でしたら、ぜひお知らせください。Twitterでわたしを見つけるか、メールをお送りください。[email protected]

日本語関連書籍

この記事に関連する情報源として、日本語の本をいくつか紹介します。

色彩論
色彩論

posted with amazlet at 16.05.19
ヨハネス・イッテン
美術出版社
売り上げランキング: 49,371

ヨハネス・イッテンによる色彩調和の理論『アート・オブ・カラー』のダイジェスト版の日本語訳。イッテンは、20世紀初頭のドイツの伝説的なデザイン学校バウハウスで一時期教鞭をとっています。(Amazonの商品説明がなぜかゲーテの『色彩論』の説明になっているので注意)

MARK ROTHKO
MARK ROTHKO

posted with amazlet at 16.05.19
川村記念美術館
淡交社
売り上げランキング: 385,443

巨大な色面の作品で知られているマーク・ロスコの作品集。千葉県佐倉市にある川村記念美術館にはマーク・ロスコの作品が常設されていておすすめです。

配色の設計 ―色の知覚と相互作用 Interaction of Color
ジョセフ・アルバース(Josef Albers)
ビー・エヌ・エヌ新社
売り上げランキング: 27,941

1963年に刊行されたジョセフ・アルバースによる色彩実験・教育に関する書籍『インタラクション・オブ・カラー』の50周年記念版の日本語版がまもなく刊行されます。(しばらく邦訳『色彩構成』は品切れでした)

色彩論 (ちくま学芸文庫)
J.W.V. ゲーテ
筑摩書房
売り上げランキング: 23,056

自然科学者としても数々の研究を残した文豪ゲーテによる、1810年に発表された色彩研究。ニュートンのスペクトル分析とは別のアプローチで色の性質を探究していて興味深いです。

カラーリスト -色彩心理ハンドブック-
小林 重順
講談社
売り上げランキング: 160,078

記事中に紹介されていた本。英語版もあるそうです。