#author("2021-05-28T18:02:53+09:00;2021-05-27T19:38:32+09:00","default:inoue.ko","inoue.ko")
*Infographics
[[GoogleImage:infographics]]
~
インフォグラフィックスとは、データや知識を視覚的に表現したもので、ピクトグラム、地図、グラフ、図表、取説や教科書の図版など、概念的情報を万人に分かりやすく表現するためのグラフィックスの総称です。
~
***CONTENTS
#contents2_1
~
**インフォグラフィックスの５つの要素
-見る人を惹きつける Attractive
-目の流れに沿う Flow
-情報を明確にする Clear
-最小限の情報にする Simple
-文字がなくても伝わる Wordless
~
~
**Pictgram
ピクトグラムとは、主として公共空間で各種の案内・情報伝達に用いられる「絵文字（サイン）」です。トイレ、非常口、案内所や情報コーナーなど、公共案内の大半は国際標準が定められています。案内図を作成する場合などは標準ピクトグラムを用いましょう。
//（標準があるのに勝手にリメイクするのはユーザ視点で考えて好ましくありません）
~
-[[ピクトグラム（Wikipedia）>http://ja.wikipedia.org/wiki/%E3%83%94%E3%82%AF%E3%83%88%E3%82%B0%E3%83%A9%E3%83%A0]]
-[[標準案内用図記号｜交通エコロジー・モビリティ財団>http://www.ecomo.or.jp/barrierfree/pictogram/picto_top2020.html]]
PDF,EPS形式のデータがダウンロードできます。
-[[コミュニケーション支援用絵記号｜共用品推進機構>http://www.kyoyohin.org/06_accessible/060100_jis.php]]
AI,JPEG形式のデータがダウンロードできます。
-[[human pictogram 2.0>http://pictogram2.com/]]
-[[日本ピクトさん学会>http://www.pictosan.com/]]
-[[Isotype>http://www.google.co.jp/images?hl=ja&rlz=1G1GGLQ_JAJP288&q=Isotype&um=1&ie=UTF-8&source=univ&ei=1dAuTdzhD4HmvQOBv-WSCQ&sa=X&oi=image_result_group&ct=title&resnum=1&ved=0CCcQsAQwAA&biw=1257&bih=852]]
--[[オットー・ノイラート>http://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%83%E3%83%88%E3%83%BC%E3%83%BB%E3%83%8E%E3%82%A4%E3%83%A9%E3%83%BC%E3%83%88]]
--[[ゲルト・アルンツ Web archive>http://www.gerdarntz.org/isotype]]
-ピクトグラムデザインの参考
--[[Google Icon Grid>Google:Google Icon Grid]]
--https://material.io/design/iconography/system-icons.html#
~
~
**Sign
サインとは、特定の意味を伝達する「印」のことで、記号、信号、合図、手まね、身ぶり、標識、標示、掲示、看板などが含まれます。
-サインとは（日本サインデザイン学会）
http://www.sign.or.jp/about_sign
//-[[概説（Wikipedia）>Wikipedia:サイン]]
-[[GoogleImage:案内 サイン デザイン]]
~
~
**Icon
図像。物事を簡単な絵柄で記号化して表現したもの。
-パースによる記号の三分類
--アイコン：性質から対象を指示する記号
--インデックス：現実の結合から対象を指示する記号
--シンボル：そこから解釈される事実によって対象を指示する記号
-語源はキリスト教ギリシア正教会の聖像＝イコン
//-[[概説（Wikipedia）>Wikipedia:アイコン]]
-[[GoogleImage:イコン]]
-[[GoogleImage:アイコン]]
-Font Awesome
https://fontawesome.com/icons?d=gallery&m=free
-Material design icons
https://www.materialpalette.com/icons
-[[Google Icon Grid>Google:Google Icon Grid]]
https://material.io/design/iconography/system-icons.html#
~
~
**Map
マップとは、空間的な位置情報を視覚的にわかりやすく整理して図にしたものです。地球の地表を縮小した「地図」がその代表です。
~
-[[GoogleImage:地図 デザイン]]
-[[GoogleImage:路線図 デザイン]]
-[[GoogleImage:ルートマップ デザイン]]
-[[GoogleImage:館内マップ デザイン]]
-[[GoogleImage:マインドマップ]]
-関連リンク
--[[国土地理院 地図>https://maps.gsi.go.jp/]]
--[[世界地図リンク集>http://www.hir-net.com/link/map/world.html]]
--[[白地図・世界地図・日本地図が無料>http://www.freemap.jp/]]
--[[Tube Map / LONDON>http://en.wikipedia.org/wiki/Tube_map]]
~
~
**Chart
複雑な情報を、視覚的にわかりやすく整理したものをチャートと言います。文字、図形、記号、導線などを総合的に用いるもので、フローチャートがその代表的なものです。
-[[GoogleImage: チャート デザイン]]
-[[GoogleImage: 組織図 デザイン]]
-[[GoogleImage: 系統図 デザイン]]
-[[GoogleImage: 相関図 デザイン]]
-[[GoogleImage: 年表 デザイン]]
-[[GoogleImage: フローチャートデザイン]]
~
~
**Table
ここで言う「TABLE(表)」とは、例えば、名簿、料金一覧、スペック（効能書き）など、情報を視覚的にわかりやすく伝える手段として、データを縦横に並べたもののことです。近年では、その大半がコンピュータ上で整理されるもので、一般にテーブル（table）と言われます。
-[[GoogleImage: 表 デザイン]]
-スプレッドシート（表計算ソフト）について
テーブルは一般に２次元（列Xと行Y）で表されます。
--列 ＝ column(カラム) ＝ フィールド（見出し行の各項目）
--行 ＝ row(ロー) ＝ レコード
-Illustratorで表を扱う場合
表のデータは、Illustrator上で直接作るのではなく、表計算ソフトなどで入力後、コピペして調整すると能率的です。項目間はTAB区切りになりますので、「TABルーラー」を文字ブロックに吸着させると各カラム位置の調整が楽にできます。
-付記：表につけるキャプションについて
表のキャプションは左上に付けるのが原則です（図のキャプションは図の下）。
~
~
**Graph
複数の情報を視覚的に「比較」することを目的とした図、すなわちグラフについて関連する情報を掲載しています。
~
-[[GoogleImage: 棒グラフ]]（項目間の比較）
&small(数値で見ると大した差のないデータでも、グラフの描き方次第で差を強調することができます（ただし誇大広告にならないよう注意が必要）);。
-[[GoogleImage: 帯グラフ]]（構成比）
-[[GoogleImage: 折れ線グラフ]]（時系列の推移）
-[[GoogleImage: 円グラフ]]（構成比）
-[[GoogleImage: レーダーチャート]]（複数項目の比較）
-[[GoogleImage: ヒートマップ]]（2次元データを色や濃淡で表現）
~
-[[グラフ作成ソフト(Wikipedia)>http://ja.wikipedia.org/wiki/%E3%82%B0%E3%83%A9%E3%83%95%E4%BD%9C%E6%88%90%E3%82%BD%E3%83%95%E3%83%88]]
-[[DataVisualization]]
~
-付記：グラフにつけるキャプションについて
グラフは基本的に「図」なので、キャプションは下に付けるのが原則です。
~
~
**Diagram
ダイアグラムとは情報や物事を2次元的・抽象的に視覚化したものです。量的なデータというより、質的な関係を表現するものであり、 図形と線・矢印・その他の視覚的リンクによってつながった図版として表現されます。
-[[GoogleImage: 分解図]]
-[[GoogleImage: 組み立て図]]
-[[GoogleImage: 模式図]]
-[[GoogleImage: 断面図]]
-[[GoogleImage: 平面図]]
-[[GoogleImage: 立面図]]
-[[GoogleImage: 案内図]]
-[[GoogleImage: 列車ダイヤ]]
-[[GoogleImage: 路線図]]
~
~
~
