第９回 インフォグラフィックス
情報デザイン概論/2022｜2022.11.28
対面授業 特設演習
- GoogleSites（使い方解説）
- Web制作のワークフロー
- サイトに掲載する情報の洗い出し ＞ Jamboard で整理
- 共同編集シートへのリンク集
CONTENTS
インフォグラフィックス
インフォグラフィックス（Infographics）とは、データや知識を視覚的に表現したもので、ピクトグラム、アイコン、グラフ、表、地図、取説や教科書の図版など、概念的情報を万人に分かりやすく表現するためのものです。
インフォグラフィックスの５つの要素
- 見る人の目を惹きつける Attractive
- 視線の流れに沿うように Flow
- 情報を明確にする Clear
- 最小限の情報にする Simple
- 文字がなくても伝わる Wordless
データインク比について
エドワード・タフテによる「良いグラフィック」の指標で、「グラフィック全体の印刷にかかったインク量のうち、データを伝えるために用いられたインク量の比率が 1.0 に近いほど良い・・と考えられます。
Data-ink ratio = Data-ink / total ink used to print the graphic
Edward Tufte, 1992, The Visual Display of Quantitative Information
Pictgram
ピクトグラムとは、主として公共空間で各種の案内・情報伝達に用いられる「絵文字（サイン）」です。トイレ、非常口、案内所や情報コーナーなど、公共案内の大半は国際標準が定められています。案内図を作成する場合などは標準ピクトグラムを用いましょう（標準があるのに勝手にリメイクするのはユーザ視点で考えて好ましくありません）。
- Emoji（Wikipedia）
- Emoji 文字コード一覧（Unicode）
文字コード表における「U+」は「Unicode の文字コード値」を意味する記号で、それに続く文字列がコードポイントです。HTML等に記載する場合は、[&#x] と [;] でコードを挟んで以下のように書くと表示されます。✋✋
- 以下の一覧のコード表はそのまま使えます。
http://guppy.eng.kagawa-u.ac.jp/~kagawa/OpenCampus/unicode.html
- Emoji 文字コード一覧（Unicode）
- 標準案内用図記号｜交通エコロジー・モビリティ財団
PDF,EPS形式のデータがダウンロードできます。
- コミュニケーション支援用絵記号｜共用品推進機構
AI,JPEG形式のデータがダウンロードできます。
Sign
サインとは、特定の意味を伝達する「印」のことで、記号、信号、合図、手まね、身ぶり、標識、標示、掲示、看板などが含まれます。
- サインとは（日本サインデザイン学会）
http://www.sign.or.jp/about_sign - GoogleImage:案内 サイン デザイン
Icon
図像。物事を簡単な絵柄で記号化して表現したもの。
- パースによる記号の三分類
- アイコン：性質から対象を指示する記号
- インデックス：現実の結合から対象を指示する記号
- シンボル：そこから解釈される事実によって対象を指示する記号
- 語源はキリスト教ギリシア正教会の聖像＝イコン
- Font Awesome
- Material design icons
https://www.materialpalette.com/icons
Map
マップとは、空間的な位置情報を視覚的にわかりやすく整理して図にしたものです。地球の地表を縮小した「地図」がその代表です。
- GoogleImage:地図 デザイン
- GoogleImage:路線図 デザイン
- GoogleImage:ルートマップ デザイン
- GoogleImage:館内マップ デザイン
- GoogleImage:マインドマップ
- 関連リンク
- Tube Map LONDON
ハリー・ベックによって1931年にデザインされた路線図は、路線のトポロジー（接続関係）のみを垂直・水平・斜め45度の線で構成。現代の路線図のモデルとなっています。
- 行基図
奈良時代の僧侶であった行基が作ったとされる「日本」の地図。江戸時代の中期ごろまでは、これが人々にとっての「日本」のイメージ。平安京のある山城国を中心に諸国を結ぶ道路を表し、日本列島の大まかな輪郭を形成。
「国家」のような社会集団の概念の共有には空間的領域を視覚化した地図が必要です。
Chart
複雑な情報を、視覚的にわかりやすく整理したものをチャートと言います。文字、図形、記号、導線などを総合的に用いるもので、フローチャートがその代表的なものです。
- GoogleImage: チャート デザイン
- GoogleImage: 組織図 デザイン
- GoogleImage: 系統図 デザイン
- GoogleImage: 相関図 デザイン
- GoogleImage: 年表 デザイン
- GoogleImage: フローチャートデザイン
Diagram
ダイアグラムとは情報や物事を2次元的・抽象的に視覚化したものです。量的なデータというより、質的な関係を表現するものであり、 図形と線・矢印・その他の視覚的リンクによってつながった図版として表現されます。
- GoogleImage: 分解図
- GoogleImage: 組み立て図
- GoogleImage: 模式図
- GoogleImage: 断面図
- GoogleImage: 平面図
- GoogleImage: 立面図
- GoogleImage: 案内図
- GoogleImage: 列車ダイヤ
- GoogleImage: 路線図
Graph
データの視覚的な「比較」を目的とした図を一般にグラフといいます。
- GoogleImage: 棒グラフ（項目間の比較）
数値で見ると大した差のないデータでも、グラフの描き方次第で差を強調することができます（ただし、この手法は誤解を招きやすいので注意が必要です）。 - GoogleImage: 帯グラフ（構成比）
- GoogleImage: 折れ線グラフ（時系列の推移）
- GoogleImage: 円グラフ（構成比）
- GoogleImage: レーダーチャート（複数項目の比較）
- GoogleImage: ヒートマップ（2次元データを色や濃淡で表現）
- 参考：ナイチンゲールの鶏頭図（1858）
クリミア戦争における月別の死因を可視化したもの。赤色が負傷、青が病気、黒がその他を意味していて、グラフからは負傷による死亡よりも病気による死亡が圧倒的に多いことがわかります。
出典：
Table
ここで言う「TABLE(表)」とは、例えば、名簿、料金一覧、スペック（効能書き）など、情報を視覚的にわかりやすく伝える手段として、データを縦横に並べたもののことです。近年では、その大半がコンピュータ上で整理されるもので、一般にテーブル（table）と言われます。
- スプレッドシート（表計算ソフト）について
テーブルは一般に２次元（列Xと行Y）で表されます。- 列 ＝ column(カラム) ＝ フィールド（見出し行の各項目）
- 行 ＝ row(ロー) ＝ レコード
参考：図表につけるキャプションについて
論文・レポートでは、図表にユニークな（他とかぶらない唯一の）番号とともにキャプションをつけるのが一般的です。
- 表のキャプションは表の左上（表は左上から見る（読む）ため）
- 図のキャプションは図の下（図は全体を見るため）
参考：CorporateIdentity
コーポレートアイデンティティ(CI)とは、企業の特徴や理念を一貫したイメージで伝えるためのもので、社名、ロゴマーク、カラー、標語（コピー）などの仕様を整理した「CIマニュアル」をもって、広報活動に一貫性を持たせます。
- ロゴのデータ
グラフ等の制作に関わるソフトウエア
Adobe Illustrator
- Illustator でグラフを作成する場合
- ツールボックス＞グラフ作成ツール＞アートボードに領域をドラッグ
- データ入力用のダイアログが同時に表示されます
- スプレッドシートから（行・列見出しを含めて）表をコピー＆ペースト
- ファイルから読み込む場合は、.tsv 形式であることが必要
日本語が文字化けする場合はテキストエディタ等で文字コードの変換をお試し下さい。
- Illustratorで表を扱う場合
表のデータは、Illustrator上で直接作るのではなく、表計算ソフトなどで入力後、コピペして調整すると能率的です。項目間はTAB区切りになりますので、「TABルーラー」を文字ブロックに吸着させると各カラム位置の調整が楽にできます。
InkScape
Figma
draw io
SpreadSheet
SpreadSheet でグラフを作成する場合
- グラフ化したい部分を（行・列見出しを含めて）選択
- メニュー＞XXXX＞グラフを作成 ・・
- その後、グラフの設定パネルで詳細を調整
Python（プログラミング言語）
Googleフォーム
- アンケートの結果はそのままグラフ化されます（開示設定が必要）。
- 事例：https://forms.gle/VLNXG2xjiCDJPGUY7
Google検索
- 検索ボックスに数式を入力するとグラフ化されます。
- 事例：Google:z = x^2 + y^2
その他のグラフ作成ソフト
インフォサウンド
インフォサウンド（Infosound）は一般的な言葉ではありません。ここでは視覚情報と聴覚情報を併記する観点から、このような見出しでまとめています。
案内
- 補足：JRの駅メロについて
発車メロディー（Wikipedia）
音で知らせる
- 時報 電話で時報 117
- ハト時計
- チャイム(ビッグ・ベン)
- アラーム（目覚ましアラーム、クッキングタイマー）
- McDonald’s フライヤーアラート
- 着信音を鳴らして失くした携帯を探す
- 警告（アラート）
- PCにおける操作エラー時の警告音
- 各種警報
- YouTube:J-ALERT
- YouTube:緊急地震速報
緊急地震速報の要件（伊福部達：福祉工学）- 1. 注意を喚起させる音であること
- 2. すぐに行動したくなるような音であること
- 3. 既存のいかなる警報音やチャイム音とも異なること
- 4. 極度に不快でも快適でもなく、あまり明るくも暗くもないこと
- 5. できるだけ多くの聴覚障害者に聴こえること
音によるブランドイメージ
- サウンドロゴ
企業名などをアピールするために、定形的に再生される短い音源
- ジングル・ブリッジ
テレビやラジオにおいて、番組の節目や、コーナーの移動時に挿入される短い音楽を（アイキャッチ）ジングル、ブリッジといいます。
http://www.mediaplanet.jp/soundtextures/jan_vol_list/jan_logo_list.html- 有名な「火曜サスペンス」のアイキャッチジングル
https://www.youtube.com/watch?v=3H9xQ6kGY4U
dimコードをつなぐ手法で「緊張感・不安定感」を演出
- 有名な「火曜サスペンス」のアイキャッチジングル
オーディオライズ（Audiolize / Sonification )
オーディオライズは、ビジュアライズ（Visualize：視覚化）という言葉に対して、聴覚化（音声化）を意味する言葉で、一般にはあまり使われない言葉ですが、見えないものを音にする、聞こえないものを音にする・・といった意味を持ちます。近年 Sonification（可聴化）という言葉も使われるようになりました。 参考：見えないもの invisible 、聞こえないもの inaudible
- 心電図モニタに代表される各種医療用モニタの音
- データ可聴化と音デザイン 寺澤洋子
- コンピュータによる音声合成
- 宇宙望遠鏡の「天の川銀河の中心部」のデータからメロディーを作成
- 風鈴：目に見えない風を音にするしくみ。本来は「魔除け」
暮らしの中の音
サウンド編集に関わるソフトウエア
- Audacity
- Digital Audio Workstation ＞ DAW
- 読み上げソフト：文字(視覚情報)や点字(触覚情報)を音声化します
参考：https://cloud.google.com/text-to-speech/
音素材サイト
APPENDIX