サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
デスク環境を整える
www.visualthinking.jp
前回は〈視線の流れ〉のデザインについて書きました。インフォグラフィックをデザインする際は、〈視線の流れ〉だけではなく、見る人の〈思考の流れ〉も意識します。 今回は、前回と同じ題材をつかって、〈思考の流れ〉に関するポイントをお伝えします。 題材 題材にするのは、こちらの記事に掲載したタイムライン型のインフォグラフィックです。マーク・ザッカーバーグが2009年から発表している「新年の抱負」の変遷をまとめたものです。 あえて迂回させるのはなぜか このデザインで一番悩んだところが、タイムライン線の流れでした。 情報効率だけで考えれば単純で、年表スタイルでまっすぐ縦に並べるのが答えです。読み手の情報摂取効率は高まります。 その一方で、一息で情報を得るため、考えるきっかけが途中で生まれにくくなっています。 それよりも、時々立ち止まれるようにしたいと思いました。文章がいいのは、情報を受け取りながら、それ
本記事では、インフォグラフィックができるまでの試行錯誤をお伝えします。 題材 題材にするのは、こちらの記事に掲載したタイムライン型のインフォグラフィックです。マーク・ザッカーバーグが2009年から発表している「新年の抱負」の変遷をまとめたものです。 デザインのきっかけ インフォグラフィックは、情報をグラフィック化するものです。したがって、気になる情報を見つけることがデザイン制作のきっかけになります。 この事例では、テクノロジーメディア「Recode」でマーク・ザッカーバーグが今年も「新年の抱負」を宣言したと知ったのがきっかけです。 この記事を見て、「そう言えば昨年はアメリカ全州訪問だったな。その前はなんだっけ?」といった具合に過去をさかのぼって調べていきました。 そうして調べた内容をノートに描いてみました。ただ描くのもつまらないので、イラストも交えながら。 ノート左ページの下をご覧ください
プロジェクトのはじまり 米ボストン市は、Boston.govをデジタルにおける「市の玄関」と考え、2016年にサイトを大きくリニューアルしました。 新サイト 旧サイト プロジェクトの立ち上げは2015年で、ボストン市は「Boston.gov Redesign Project」と銘打って、取り組みました。そのデザイン・プロセスには、パートナーとしてプロジェクトに参加したIDEOの影響がうかがえます。 オープンな進め方 プロジェクトの過程は、特設サイト「next.boston.gov」を通じて、一般に報告されました。 その一番古い記事(2015年5月)からは、プロジェクトにあたり市が用意した「Boston.gov」のRFP(提案依頼書)が閲覧できます。 RFPの表紙 RFPには、プロジェクトの概要、ゴールやベンダー選定のスケジュールが記載されています。 結果、ベンダーに選ばれた2社は、デザイン
プログラマー、システムエンジニア、ウェブデザイナーを経て、2010年よりビジュアルシンキングを運営。あわせて、インフォグラフィックのデザインも始める。2014年、NewsPicksにインフォグラフィック・エディターとして参画。ビジュアルを用いた記事を多数、執筆デザイン。著書に『たのしい インフォグラフィック入門』『図で考える。シンプルになる。』ほか。......もっと見る
先日、ワシントン・ポストのグラフィック・エディター Katie Parkさんの仕事を取り上げました。 参考記事:スクロールを活かした見せ方。カリフォルニア干ばつを伝えるワシントン・ポスト記事 彼女のプロフィールを見ると、ワシントン・ポストで働き始めたのは2012年6月から。デザインやプログラミングスキルがあり、ワシントン・ポスト以前は、データリサーチや編集の仕事をいくつかのメディアで経験しています(主にインターン)。 僕自身がメディア(NewsPicks)で「インフォグラフィック・エディター」として働いていることもあり、「グラフィック・エディター」職にどんな人がいるのかは非常に気になります。 ワシントン・ポストの「グラフィック・エディター」を探すと、Katie Parkさんの他に、以下の方たちが見つかりました。 Samuel Granadosさん 1981年スペイン生まれ。スペインの大学で
junsakurada.com
ビジュアルの力で世界を丸くする。 地球の形状が「丸い」のは、そこで暮らす僕たちにひとつの「ビジョン」を指し示しています。地球の形と同じように、世界で起こっていることのすべてが丸く収まっていれば良いのですが、現実は違います。 大小いろいろな規模の摩擦がいたるところに発生し、繰り返されます。その解決に必要なのは、お互いの「考え」や「価値観」「立場」、「状況」「状態」を示し、認め合うことです。そのために、「ビジュアル」の力を活用していきます。
起業家やスタートアップに関するインフォグラフィックで知名度をあげた「Funders and Founders」。 メンバーの一人 Anna Vitalさんが視覚化のパターンを一覧化したインフォグラフィックを紹介します。 ・Anna Vital – How To Think Visually Using Visual Analogies Most… image by Anna Vital ベーシックなチャート類に加え、インフォグラフィックでよく用いられる比喩表現がまとめられています。
ルイス・キャロル著『不思議の国のアリス』を絵文字に翻訳した作品を紹介します。 27,500語だったテキストを、25,000以上の絵文字を使って表現している。 Wonderland image by JOE HALE たとえば、「down the rabbit hole」はつぎの3つの絵文字で。 image by The Creators Project この作品を作ったのは、アーティスト/著述家のJoe Haleさん。 ピーターパン(ネバーランド)の絵文字翻訳も行っている。 Neverland image by JOE HALE こちらは、47,000語を44,000以上の絵文字に翻訳(すごい!)。 絵文字をテーマにした映画がソニーピクチャーズで製作されるらしいけど、すこしイメージ湧いてきた。 もっと一つ一つの絵文字をキャラクター化するのだとは思うが。 ・ソニー、「絵文字」の映画を巨額予算
ハーバード・ビジネス・レビューに掲載されたディズニーの各事業の相乗効果をまとめた戦略マップを紹介します。 ・The Disney Recipe – HBR 細かいところは見えませんが、映画事業を中心に、ほかの事業「ディズニーランド」「テレビ」「音楽」「出版」「ライセンス」との複合的な相乗効果を狙っている様子が窺えます。 ディズニーの戦略マップ(1957年版) 1957年だとウォルト・ディズニーは存命(1901〜1966)。 ディズニーランドが開園したのは1955年。 image by Harvard Business Review ディズニーキャラクターが彩っており、戦略に愛着を感じさせます。 いまでも事業の関係の土台はこのままだと思うので、このマップにボックスや矢印を付け足したら、現状にアップデートできそう。
新興メディア「Quartz」は、チャート(グラフ)活用に積極的です。 独自のチャート生成ツール「Chartbuilder」を開発、昨年は3,800のチャートを記事に使いました。 それに留まらず、「チャート・オブ・ザ・イヤー」を企画し、The Economistのチャートを選びました。 ・2014年にQuartzとFiveThirtyEightはチャートをいくつ作ったか ・Quartz初の「チャート・オブ・ザ・イヤー」が決定 そんなQuartzが、6月に実験的なサイト「Atlas」をローンチしています。 Atlasでは、彼らが作成したチャート(グラフ)を画像一覧でブラウズできます。 Atlasの機能はつぎの通り。 チャートの検索 たとえば、「Greece」で検索すると、ギリシャに関係するチャート(データ)が表示されます。 チャート画像のダウンロード 見つけたチャート画像のダウンロードができま
2005年から使用していたロゴのリニューアルを発表したFacebookが、友達アイコン、グループアイコンをリデザインします。 Facebookロゴのリニューアル モバイルにあうデザインに変更。 via BRAND NEW ロゴのリニューアルが「モバイルファースト」なのに対し、友達アイコン、グループアイコンの変更は「Woman First」。 リデザインで女性が前に 左が従来の友達アイコンで、男性が前面にいます。右はリデザイン後で、女性が前面に。 image by Facebook Design グループアイコンも同様に女性を前面に。 image by Facebook Design リデザインの経緯を、FacebookデザイナーのCaitlin WinnerさんがMediumに書いています。 How We Changed the Facebook Friends Icon 女性アイコンデー
先日の記事に引き続き、HP(ヒューレット・パッカード)のプレゼンテーション・テンプレートを見ていきます。 前回記事:表紙とスライドで使う写真について 今回、注目するのは、「グリッドシステム」です。 テンプレートを制作したデュアルテのサイトに載っているHPのグリッドシステムは、次の通りです。 Make Your Brand Feel Brand New | Duarte image by Duarte 大きくヘッドラインとコンテンツを分け、コンテンツは10×6のグリッドに従うように設計されています。 このグリッドを、SlideShareにアップされているHPのスライドに重ねてみます。 グリッドは、スライドを整然として見やすくするだけではなく、プレゼンテーション全体に統一感を生みます。 デュアルテのブログに「グリッドシステム」に関する記事を見つけました。 Presentation Grid L
アル・ゴアの『不都合な真実』のプレゼンテーションを制作したデュアルテ。その創業者による『スライドロジ―』は何度も読み返すような文献です。 アル・ゴア『不都合な真実』 An Irresistible Keynote | Duarte デュアルテ Persuasive Presentation Experts | Duarte 『スライドロジ―』の中に、デュアルテが制作したHP(ヒューレット・パッカード)のプレゼンテーションのテンプレート事例が載っています。 HPのためにデュアルテは、スライドレイアウト集、カラーパレット、写真やアイコンなどの素材ライブラリー、グリッドシステムなどガイドラインを用意したそうで、その一部がデュアルテのサイトで閲覧できます。 Make Your Brand Feel Brand New | Duarte 表紙(タイトルスライド)テンプレート 構成要素は、つぎの通り。
4月27日のアップデートでハッシュタグの絵文字対応を行ったInstagramは、5月2日にエンジニアリング・ブログでユーザーの絵文字利用に関するデータや考え方を公開しています。 ・Emojineering Part 1: Machine Learning for Emoji Trends コメントやキャプションへの絵文字利用が増えたことがハッシュタグ導入の背景にあるようです。Instagramがブログで公開したデータはつぎの通り。 絵文字利用の推移 コメントとキャプションのテキストに絵文字が含まれる率は、40%近くに。 image by Instagram Engineering 国別絵文字利用率 フィンランドが63%、日本は39%、アメリカ38%。ヨーロッパは比較的利用が多い。 image by Instagram Engineering 絵文字を自然言語処理 Instagramについた
インフォグラフィックとは、「インフォメーション」と「グラフィック」を組み合わせた言葉で、情報をわかりやすく伝えるためのビジュアル表現のことです。 たとえば、電車の路線図や組み立て式家具の説明書などが身近な例です。 雑誌や新聞でも出来事や仕組みの解説のために用いられてきましたが、2010年頃からウェブ上で活用されることが増えてきました。 この頃、FacebookやTwitterが勢力を伸ばしており、企業やメディアがSNS拡散を狙うのに、インフォグラフィックが適していたこともあり、手法として注目を集めました。 そのため、紙媒体を代表にオフラインで用いられるインフォグラフィックが物事の詳細を解説するずっしりした内容が多いのに対し、オンライン向けインフォグラフィックは即効性のあるインパクトを狙った軽い内容のものが目立つようになりました。 しかしインフォグラフィックが優れているのは、もちろんインパク
GOV.UKは、英国政府関連情報を1つにまとめたサイトです。 そのGOV.UKが、2月3日に開催したイベント「Sprint15」向けのビジュアルを紹介します。 image by flickr(Ben Terrett) 構成要素は、ピクトグラム、数字、数行のテキストだけですが、色合いもそこに加わって存在感があるデザインになっています。
次のページ
このページを最初にブックマークしてみませんか?
『櫻田潤 | インフォグラフィック・エディター』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く