Infographics をテンプレートにして作成

開始行:
*Infographics [[GoogleImage:infographics]] ~ インフォグラフィックスとは、データや知識を視覚的に表現し... ~ ***CONTENTS #contents2_1 ~ **インフォグラフィックスの５つの要素 -見る人を惹きつける　Attractive -目の流れに沿う　Flow -情報を明確にする　Clear -最小限の情報にする　Simple -文字がなくても伝わる　Wordless ~ ~ **__[[データインク比>GoogleImage:Data-ink ratio]]__について エドワード・タフテによる「良いグラフィック」の指標で、「... Data-ink ratio　=　Data-ink　/　total ink used to print ... &scale(75){Edward Tufte, 1992, The Visual Display of Quan... ~ ~ **Pictgram ピクトグラムとは、主として公共空間で各種の案内・情報伝達... //（標準があるのに勝手にリメイクするのはユーザ視点で考え... ~ -[[ピクトグラム（Wikipedia）>http://ja.wikipedia.org/wiki... -[[標準案内用図記号｜交通エコロジー・モビリティ財団>http:... PDF,EPS形式のデータがダウンロードできます。 -[[コミュニケーション支援用絵記号｜共用品推進機構>http://... AI,JPEG形式のデータがダウンロードできます。 -[[human pictogram 2.0>http://pictogram2.com/]] -[[日本ピクトさん学会>http://www.pictosan.com/]] -Isotype --[[Wikipedia:アイソタイプ]] --[[オットー・ノイラート>Wikipedia:オットー・ノイラート]] --[[ゲルト・アルンツ >https://en.wikipedia.org/wiki/Gerd_... -ピクトグラムデザインの参考 --[[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:マインドマップ]] -[[Tube Map LONDON>GoogleImage:Tube Map London Beck]] &small(ハリー・ベックによって1931年にデザインされた路線図... -__[[行基図>GoogleImage:行基図]]__ &small(奈良時代の僧侶であった行基が作ったとされる「日本」... &small(「国家」のような社会集団の概念の共有には空間的領域... -''geojson.io''：https://geojson.io/ 様々な GeoJSON データが公開されていて、 --地図上のマウス操作で GeoJSON データを出力することができ... --GeoJSON データ から地図を表示することができます。 --参考：[[GeoJSON>JSON#GeoJSON]] -関連リンク --__[[GIS：Geographic information system>Wikipedia:地理情... --[[国土地理院 地図>https://maps.gsi.go.jp/]] --[[世界地図リンク集>http://www.hir-net.com/link/map/worl... --[[白地図・世界地図・日本地図が無料>http://www.freemap.j... ~ ~ **Chart 複雑な情報を、視覚的にわかりやすく整理したものをチャート... -[[GoogleImage: チャート デザイン]] -[[GoogleImage: 組織図 デザイン]] -[[GoogleImage: 系統図 デザイン]] -[[GoogleImage: 相関図 デザイン]] -[[GoogleImage: 年表 デザイン]] -[[GoogleImage: フローチャートデザイン]] ~ ~ **Table ここで言う「TABLE(表)」とは、例えば、名簿、料金一覧、スペ... -[[GoogleImage: 表 デザイン]] -スプレッドシート（表計算ソフト）について テーブルは一般に２次元（列Xと行Y）で表されます。 --列　＝　column(カラム)　＝　フィールド（見出し行の各項... --行　＝　row(ロー)　＝　レコード -Illustratorで表を扱う場合 表のデータは、Illustrator上で直接作るのではなく、表計算ソ... -付記：表につけるキャプションについて 表のキャプションは左上に付けるのが原則です（図のキャプシ... ~ ~ **Graph データの視覚的な「比較」を目的とした図を一般にグラフとい... ~ -[[GoogleImage: 棒グラフ]]（項目間の比較） &small(数値で見ると大した差のないデータでも、グラフの描き... -[[GoogleImage: 帯グラフ]]（構成比） -[[GoogleImage: 折れ線グラフ]]（時系列の推移） -[[GoogleImage: 円グラフ]]（構成比） -[[GoogleImage: レーダーチャート]]（複数項目の比較） -[[GoogleImage: ヒートマップ]]（2次元データを色や濃淡で表... ~ -Illustator でグラフを作成する場合 --ツールボックス＞グラフ作成ツール＞アートボードに領域を... --データ入力用のダイアログが同時に表示されます --スプレッドシートから（行・列見出しを含めて）表をコピー... --ファイルから読み込む場合は、.tsv 形式であることが必要 &small(日本語が文字化けする場合はテキストエディタ等で文字... -SpreadSheet でグラフを作成する場合 --グラフ化したい部分を（行・列見出しを含めて）選択 --メニュー＞XXXX＞グラフを作成　・・ --その後、グラフの設定パネルで詳細を調整 -Googleフォーム --アンケートの結果はそのままグラフ化されます（開示設定が... --事例：https://forms.gle/VLNXG2xjiCDJPGUY7 -Google検索 --検索ボックスに数式を入力するとグラフ化されます。 -- 事例：[[Google:z = x^3+y^2]] -[[その他のグラフ作成ソフト>Wikipedia:グラフ作成ソフト]] ~ ~ **Diagram ダイアグラムとは情報や物事を2次元的・抽象的に視覚化したも... -[[GoogleImage: 分解図]] -[[GoogleImage: 組み立て図]] -[[GoogleImage: 模式図]] -[[GoogleImage: 断面図]] -[[GoogleImage: 平面図]] -[[GoogleImage: 立面図]] -[[GoogleImage: 案内図]] -[[GoogleImage: 列車ダイヤ]] -[[GoogleImage: 路線図]] ~ ~ **APPENDIX ***グラフィックスの制作に関わるソフトウエア -[[Adobe Illustrator>GoogleImage:Adobe Illustrator]] -[[InkScape>Google:InkScape]]（OpenSourceの定番） -Figma：https://www.figma.com/ 参考記事：https://ferret-plus.com/13195 -draw io：https://www.draw.io/ 概説：https://about.draw.io/ -[[SpreadSheet>GoogleImage:SpreadSheet]] -[[Python]]（プログラミング言語）　＞ [[DataVisualization]] ~ ***図表につけるキャプションについて 論文・レポートでは、図表にユニークな（他とかぶらない唯一... -表のキャプションは表の左上（表は左上から見る（読む）ため） -図のキャプションは図の下（図は全体を見るため） ~ ~ ~

終了行:
*Infographics [[GoogleImage:infographics]] ~ インフォグラフィックスとは、データや知識を視覚的に表現し... ~ ***CONTENTS #contents2_1 ~ **インフォグラフィックスの５つの要素 -見る人を惹きつける　Attractive -目の流れに沿う　Flow -情報を明確にする　Clear -最小限の情報にする　Simple -文字がなくても伝わる　Wordless ~ ~ **__[[データインク比>GoogleImage:Data-ink ratio]]__について エドワード・タフテによる「良いグラフィック」の指標で、「... Data-ink ratio　=　Data-ink　/　total ink used to print ... &scale(75){Edward Tufte, 1992, The Visual Display of Quan... ~ ~ **Pictgram ピクトグラムとは、主として公共空間で各種の案内・情報伝達... //（標準があるのに勝手にリメイクするのはユーザ視点で考え... ~ -[[ピクトグラム（Wikipedia）>http://ja.wikipedia.org/wiki... -[[標準案内用図記号｜交通エコロジー・モビリティ財団>http:... PDF,EPS形式のデータがダウンロードできます。 -[[コミュニケーション支援用絵記号｜共用品推進機構>http://... AI,JPEG形式のデータがダウンロードできます。 -[[human pictogram 2.0>http://pictogram2.com/]] -[[日本ピクトさん学会>http://www.pictosan.com/]] -Isotype --[[Wikipedia:アイソタイプ]] --[[オットー・ノイラート>Wikipedia:オットー・ノイラート]] --[[ゲルト・アルンツ >https://en.wikipedia.org/wiki/Gerd_... -ピクトグラムデザインの参考 --[[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:マインドマップ]] -[[Tube Map LONDON>GoogleImage:Tube Map London Beck]] &small(ハリー・ベックによって1931年にデザインされた路線図... -__[[行基図>GoogleImage:行基図]]__ &small(奈良時代の僧侶であった行基が作ったとされる「日本」... &small(「国家」のような社会集団の概念の共有には空間的領域... -''geojson.io''：https://geojson.io/ 様々な GeoJSON データが公開されていて、 --地図上のマウス操作で GeoJSON データを出力することができ... --GeoJSON データ から地図を表示することができます。 --参考：[[GeoJSON>JSON#GeoJSON]] -関連リンク --__[[GIS：Geographic information system>Wikipedia:地理情... --[[国土地理院 地図>https://maps.gsi.go.jp/]] --[[世界地図リンク集>http://www.hir-net.com/link/map/worl... --[[白地図・世界地図・日本地図が無料>http://www.freemap.j... ~ ~ **Chart 複雑な情報を、視覚的にわかりやすく整理したものをチャート... -[[GoogleImage: チャート デザイン]] -[[GoogleImage: 組織図 デザイン]] -[[GoogleImage: 系統図 デザイン]] -[[GoogleImage: 相関図 デザイン]] -[[GoogleImage: 年表 デザイン]] -[[GoogleImage: フローチャートデザイン]] ~ ~ **Table ここで言う「TABLE(表)」とは、例えば、名簿、料金一覧、スペ... -[[GoogleImage: 表 デザイン]] -スプレッドシート（表計算ソフト）について テーブルは一般に２次元（列Xと行Y）で表されます。 --列　＝　column(カラム)　＝　フィールド（見出し行の各項... --行　＝　row(ロー)　＝　レコード -Illustratorで表を扱う場合 表のデータは、Illustrator上で直接作るのではなく、表計算ソ... -付記：表につけるキャプションについて 表のキャプションは左上に付けるのが原則です（図のキャプシ... ~ ~ **Graph データの視覚的な「比較」を目的とした図を一般にグラフとい... ~ -[[GoogleImage: 棒グラフ]]（項目間の比較） &small(数値で見ると大した差のないデータでも、グラフの描き... -[[GoogleImage: 帯グラフ]]（構成比） -[[GoogleImage: 折れ線グラフ]]（時系列の推移） -[[GoogleImage: 円グラフ]]（構成比） -[[GoogleImage: レーダーチャート]]（複数項目の比較） -[[GoogleImage: ヒートマップ]]（2次元データを色や濃淡で表... ~ -Illustator でグラフを作成する場合 --ツールボックス＞グラフ作成ツール＞アートボードに領域を... --データ入力用のダイアログが同時に表示されます --スプレッドシートから（行・列見出しを含めて）表をコピー... --ファイルから読み込む場合は、.tsv 形式であることが必要 &small(日本語が文字化けする場合はテキストエディタ等で文字... -SpreadSheet でグラフを作成する場合 --グラフ化したい部分を（行・列見出しを含めて）選択 --メニュー＞XXXX＞グラフを作成　・・ --その後、グラフの設定パネルで詳細を調整 -Googleフォーム --アンケートの結果はそのままグラフ化されます（開示設定が... --事例：https://forms.gle/VLNXG2xjiCDJPGUY7 -Google検索 --検索ボックスに数式を入力するとグラフ化されます。 -- 事例：[[Google:z = x^3+y^2]] -[[その他のグラフ作成ソフト>Wikipedia:グラフ作成ソフト]] ~ ~ **Diagram ダイアグラムとは情報や物事を2次元的・抽象的に視覚化したも... -[[GoogleImage: 分解図]] -[[GoogleImage: 組み立て図]] -[[GoogleImage: 模式図]] -[[GoogleImage: 断面図]] -[[GoogleImage: 平面図]] -[[GoogleImage: 立面図]] -[[GoogleImage: 案内図]] -[[GoogleImage: 列車ダイヤ]] -[[GoogleImage: 路線図]] ~ ~ **APPENDIX ***グラフィックスの制作に関わるソフトウエア -[[Adobe Illustrator>GoogleImage:Adobe Illustrator]] -[[InkScape>Google:InkScape]]（OpenSourceの定番） -Figma：https://www.figma.com/ 参考記事：https://ferret-plus.com/13195 -draw io：https://www.draw.io/ 概説：https://about.draw.io/ -[[SpreadSheet>GoogleImage:SpreadSheet]] -[[Python]]（プログラミング言語）　＞ [[DataVisualization]] ~ ***図表につけるキャプションについて 論文・レポートでは、図表にユニークな（他とかぶらない唯一... -表のキャプションは表の左上（表は左上から見る（読む）ため） -図のキャプションは図の下（図は全体を見るため） ~ ~ ~

ページ名: