LogoMark.png

情報デザイン概論/2021/1004 のバックアップソース(No.4)

#author("2021-09-28T17:03:13+09:00;2021-09-22T11:16:39+09:00","default:inoue.ko","inoue.ko")
*第4回 情報デザイン
[[情報デザイン概論/2021]]|''2021.10.04''
~

***AGENDA
-以下名簿が表示されます。出欠確認・座席記録をお願いします。
&fontawesome(far fa-hand-point-right); [[出欠確認・座席記録>https://docs.google.com/spreadsheets/d/1Z7smfuHLN3vB9kwbsPcmnTDNNytMoYbuJAo7BxKHdYc/edit?usp=sharing]] ←''原則当日中に!''
-Live配信動画を視聴して下さい。
-質問等は、YouTubeのチャット機能をご利用ください。
-ミニッツペーパーの投稿をお願いします。

~


#hr
'''''以下、LIVE動画をご覧下さい。記事に沿って解説します。'''''
記録動画の公開は 10月8日(金)までとします。早めの確認をお願いします。
#hr
~

#youtube(ABC)
埋め込み無効状態です。授業開始直前にページをリロードして下さい。
~

-配信開始:2021.10.04 17:40 -
-動画は授業直前に有効になります(準備段階では黒い画面)。授業開始時にページを再読み込みしていただくと、視聴が有効になります。
~


***CONTENTS
#contents2_1

~
**情報デザインとは
//情報デザインとは何か。この問いには「デザインとは何か」と同様に様々な回答があります。もちろん、どれが正しいか否かではなく、自分がどう答えるかを常に考え続けるということが大切なのですが、とりあえず、Wikipediaの記述で、最大公約数的な定義を知ることからはじめましょう。
//~

***情報デザインの定義?
-Wikipedia
--[[情報デザイン>Wikipedia:情報デザイン]]
 情報デザイン(じょうほうデザイン、英: information design)は、
 人間とモノや環境との関係性にかたちを与える方法論、
 生活の中にあふれる無数の情報をわかりやすく提示する手法、
 あるいは、それらの考え方。 
--[[Information Design>https://en.wikipedia.org/wiki/Information_design]]
--[[Information Architecture>https://en.wikipedia.org/wiki/Information_architecture]]

-ロバート・ホーン「情報デザイン原論」
 情報デザインとは、情報を、人が効率的かつ効果的に使えるような形で
 準備する技と知識である。

-渡辺保史「情報デザイン入門」
 情報デザインとは、ものと人、人と人との新しい関係を作ることだ。
 本棚の整理から手帳、地図、時計、そして地域社会の活性化、… 
 あらゆるものが、「情報デザイン」の対象である。 

-情報デザインフォーラム編 「情報デザインの教室」
 うれしい体験をつくることを「情報デザイン」と呼びます。・・・
 情報デザインは・・様々なプロセス・手法により
 社会のニーズを探り出し、「人・モノ・環境の関係性」を
 人間中心的にデザインする行為なのである。

-ブレンダ・ダービン「情報デザイン原論」
 「情報」は、無秩序でもあり、秩序でもある現実を明快に理解するために
 人間が考案(デザイン)した道具である。 
&small(「情報」はそれ自体、人間がデザインした(ている)もの・・と考えることができます。);
~

***情報デザインのフィールド
-視覚情報のデザイン
&size(12){[[Graphic Design>GoogleImage: poster design]] [[Infographics >GoogleImage: infographics]] [[Movie>GoogleImage: movie editing]] [[Web Design>GoogleImage: Web Design  Templates]] [[Web Application>GoogleImage: Web Application]]};
-聴覚情報のデザイン
&size(12){[[Sound Design>GoogleImage:Sound Media]] [[InfoSound >GoogleImage: information about sound]] [[Alert>GoogleImage: alert sound]] [[Wind Bell>GoogleImage: wind bell]]};
-モノにおける情報のデザイン
&size(12){[[User Interface Design>GoogleImage:Interface design]] [[Device Interface>GoogleImage:Device Design]]};
-空間に関わる情報のデザイン
&size(12){[[Sign Design>GoogleImage: Sign Design]] [[PublicDesign>GoogleImage:public design]] [[Map>GoogleImage: map design]]};
//
//-人と人とのコミュニケーション(日常会話、会議、講義、・・・・)
//-環境(案内表示、道路標識、・・・・)
//-プロダクト(ボタン、液晶表示、形状・・・・)
//-紙媒体(雑誌、広告、地図、手帳・・・・・・)
//-電子媒体(Web、映像、ゲーム、・・・・)
~

***情報×デザインの「てにをは」
-情報''で''デザインする > ハードからソフトへ
-情報''に''デザインする >  混沌(非情報)から秩序(情報)へ
いまだ情報として捉えられていない存在を発見し、それを情報化する
時計、温度計、BigDataが見出す隠れた意味・・
-情報''を''デザインする > 一般に言う「情報デザイン」
-情報''と''デザインする >  情報(ソフト)とともにモノ(ハード)をデザイン
//-情報''は''デザインする > 
//情報デザインが素敵な理由

~
//***情報デザインの ''5W2H'' |企画
//-What:何を(伝えたい?)
//-Why:何のために / なぜ?
//-When:いつ / いつまでに?
//-Where:どこで(制作する?) / どこで(公開・販売する?)
//-Who:誰に(伝えたい?) / 誰が(担当する?)
//-How:どのような方法で?
//-How much:費用(予算)は?
//~

***情報デザインの ''5W2H'' 
-What : これは何? 例)イベント「〇〇」の開催案内等
-Why : なぜ? 例)イベント開催の目的・主旨等
-When : いつ? 例)開催期間等
-Where : どこで? 例)会場、会場までの交通案内等
-Who : 誰が? 例)出演者、出品者、主催者等
-How : どのように? 例)申込方法等
-How much : いくら? 例)入場料 参加費など
~
~

**情報デザインの可能性

***情報デザインにできることは何か?
モノ(ハードウエア)のデザイン vs 情報(ソフトウエア)のデザイン
-情報のデザイン(制作)には、資源・エネルギーはほとんど必要ない
-情報はどこへでも自由に、また瞬時に移動できる
-情報は劣化なしに、いくらでも複製できる
-情報は時間とともに洗練され、安定する
-情報は廃棄物を出さない
~

***情報デザイナーの役割
世の中の様々な問題に気づき、その解決策を提案するのがデザイナーです。
問題解決の様々なステップに情報デザインの力が必要とされています。
-現状をわかりやすく知らせる
-問題に気づかせる
-問題解決のための知識を共有する
-問題の解決方法を提案する

~

***付記:「情報が無い」ことの明記も重要な情報
気象庁の台風情報のページでは、台風が発生していない場合に、''現在台風は発生していません'' というメッセージが表示されます。「情報が無い」ことを明示することは、情報を探す手間を省く、情報を求めておこる様々な混乱を防ぐ・・などのメリットがあります。
-例)無音の映像(実験映像等)をTVで放送する場合
無音のままだと、放送事故あるいはTVの故障か?・・と思われます。「この作品は無音です」と提示することで、視聴者の不安や混乱を払拭できます。
-例)デジタル地図上に描かれる危険箇所(土砂災害の可能性:赤色)
エリア内に該当する場所が無い場合は、「ご覧のエリアには土砂災害の可能性のある場所は存在しません」と明示することが、利用者の不安を払拭します。
-例)列車が急停車した
原因がわかるまで沈黙するのではなく、「現時点では原因がわかりません。ただいま調査中です」ということをアナウンスする
~
~

**情報共有のための意識改革

***クラウドファースト
 サーバーにあるものがマスター、手元のファイルはクローン
データはローカルデバイス(自分の手元)ではなく、サーバーに一元管理して、みんなで共有するのが理想です。

#image(Git/Fig03.png , right , 30%)
クラウドファーストで考えると、バックアップが自動的にできる(差分記録が残る)など、データを失うリスクが軽減されるとともに利便性も増します。「もし自分のパソコンが壊れたら・・」という不安からも解放されます。
~

***「実体渡し」から「アドレス渡し」へ
情報伝達は、データの「実体渡し」ではなく、「アドレス渡し」を推奨します。例えば以下のように、データのある場所へと誘導するということです。アドレスは単なる文字列なので、通信負荷なく送受可能です。
 ・授業の資料一覧です。以下をご覧下さい。
  https://www.example.com/data01.html
 ・ 荷物は北浜305倉庫、B列45番BOX。開錠の暗証番号は2112です。

-実体渡し:データそのものを相手に渡す(メール添付)
--過去に送信された「実体」は確実に古くなる
--文書のアップデート時に、送り直すこと(ファイルの差替え)が必要

-アドレス渡し:データの所在(URL)を相手に伝える
--リンク先の文書は常に最新にアップデートされている
--書きかけの状態でも、事前にその所在を渡しておくことが可能
~

***Push型からPull型へ
Pushとは、送信者が情報を強制的に送る(受信者は情報を受動的に受け取る)もので、電話・FAX・メールなどがこれにあたります。一方 Pull は、受信者が必要なときに情報を能動的に受け取りにいくもので、Webサイト、共有フォルダ、掲示板を見に行くなどの行為がこれにあたります。送信者都合による Push配信は情報氾濫を招きます。可能な限り Push から Pull への移行が賢明です。

#image(images/情報共有.jpg)
//状況は刻々と変化するので、紙に印刷された書類や PDF はやがてゴミになります。メールの添付ファイルは「その内容が古くなる」「変更の都度差し替えが必要になる」といった点で、情報共有の効率を悪くします。

//個人の手元で作ったファイルを相手に送信する・・という従来型の発想をやめて、サーバー上にあるファイルを「マスターファイル」と位置付けて、共同編集で更新しつつ、必要に応じてそれを手元に落とす・・という発想に切り替えることが、情報の氾濫・錯綜を防止するために必要であると感じます。
~

***対面・同期から遠隔・非同期へ
リアルタイム・双方向が最良・・というわけではありません。自律分散を前提とするインターネットでは、''遠隔・非同期''が前提です。

-遠隔:空間的拘束からの解放
-非同期:時間的拘束からの解放

インターネットはアナログ回線と違ってパケット送信が前提です。利用者の通信速度にも依存するので、リアルタイム(同期式)双方向のセッションは本質的に得意ではありません。オンデマンド(非同期式)でも視聴できる動画配信とチャットの組み合わせがベストです。

//-TCPは信頼性が高い1対1の通信なので、送受信の時差は大きくなります。
//-UDPは信頼性は低いですが、マルチキャスト型通信も利用可能なので、放送型の通信に向いています
~

***アナログからデジタルへ
アナログとデジタルの最大の違いは、 デジタル情報が「居場所」を選ばないということです((アナログの時代には、文字は紙、音はテープ、 光はフィルムなどのように、情報が媒体(工業製品)に拘束されていました。))。しかし例えば、WORD文書やPDFは「A4タテ」などという情報が含まれている点で紙媒体に拘束されたままだと言えます((ページに収めるためのレイアウト調整や、罫線との格闘、これがこの国の生産効率を著しく下げている元凶です。))。「モノに拘束されないデータにする」ということを常に意識することが必要です。
&small(ちなみに公的報告書は今だに「紙」が基本で、これがデジタル化の妨げとなっています。);
~


***ローカルデバイス(パソコン)からブラウザへ
画像処理、図形描画、音楽制作、そして AI関連のソフトウエア開発など、ほぼすべてのことがブラウザ(Chrome, Firefox等)の中だけで完結できるようになりました。ブラウザは、機種・OSに依存しない世界共通のプラットフォームです。

ローカルデバイス(パソコン)にデータを保存するのをやめて、クラウド一元管理を前提とすれば、必要なのはそのアカウント情報だけ・・ということになります。パソコンを管理する煩わしさからも解放されます。

-PC機器への依存を推奨しない理由
--電源喪失、故障、経年劣化・・で終了。持続可能性がありません。
--機器メーカー・機種に依存するデータは、人によっては開けません。
--機種依存するアプリケーションのデータも、人によっては開けません。

-ブラウザを作業基盤とすることを推奨する理由
--ほぼすべての人がブラウザ環境を持っています。ということは、__利用者を差別することなく__、誰もがそこでコミュニケーションすることができます。
--日常的に使うオフィスツール(ワードプロセッサ、スプレッドシート、スライド等)が Webアプリケーションとしてブラウザ上で動くので、自分のPCにそれらをインストールする必要がなくなります。
--クラウドベースなので、自分のパソコンが壊れても被害がありません。
--ウイルス対策はクラウド側にあってデータは守られるので、自分のPCのウイルス対策は事実上不要になります。
--[[プロプライエタリ>Google:プロプライエタリ]]なソフトウエアをインストールせずに済む・・ということはライセンス管理のような面倒な作業からも解放されます。
~

***利用者(消費者)から開発者(生産者)へ
この国では「技術」というものについて、開発者(生産者) と利用者(消費者)という産業革命以後の構図が根強くあって、システム開発を ICTベンダーに丸投げする組織・企業が多く存在します。しかし、業務の ICT 化の名の下に導入される「ガラパゴスシステム」は、その活用に無駄な学習コストがかかるだけでなく、開発がクローズドであるがゆえに、臨機応変な改変もできません。
&scale(70){参考:[[TheCathedralAndTheBazaar]]};

デジタル技術の特徴は、物質的原材料いらず、オープンなソースコード、豊富な技術情報・・結果、すべての人に DIY の機会が与えられています。消費者意識でベンダーまかせにするのではなく、システムを自らの手で DIY すべく、組織のメンバー全員の意識改革を促すことが大切です。
~

***自らの情報発信基盤を持つ
自らのWebサイトを持つと、その「アドレス渡し」を1回行うだけで、以後の関係構築が完了します。ICTの活用に原材料(お金)は不要です。ITベンダー(専門の生産者)に依存するのではなく、自らその技術(サービス)を利用して Pull アクセスの基盤となる Webサイトを構築することを推奨します。無料のアカウントを持つだけでも、それは実現します。
-[[Googleサイト>https://sites.google.com]]:Googleアカウントがあればすぐに公開可能
https://sites.google.com/view/opensquarejp
-[[WordPress>https://wordpress.com/ja/]]:世界中のWebサイトの 40%近くを占める Blog システム
アカウントの作成手順 > [[WordPress/Account]]
~
~

**情報の整理に関わるキーワード
現代社会には情報が氾濫しています。それらを上手く整理して伝達・共有するためのキーワードを紹介します。
~

***5つの帽子掛け

情報の整理には一般に以下の5つの視点があります。
&size(12){by リチャード・ソール・ワーマン};

-1. カテゴリー Category ・・・共通の特徴をまとめた概念枠組で分類
&small(*学部>学科>専攻・・などツリー状の階層構造になる);
&small(*全体を部分に区分けする方法は視点により様々);
-2. 時間 Time ・・・歴史年表、スケジュール、テレビ番組表など
-3. 位置(空間)Location ・・・地図、サイトマップ
-4. アルファベット順 Alphabet ・・・五十音順、番号順など機械的順序
&small(*紙媒体で検索がしやすく。辞書や事典の多くはこの方法を採用);
-5. 連続量・階層 Hierarchy ・・・人気順、価格順など何らかの価値の順
&small(*各種のグラフはこの基準によって視覚化されている);
//Location、Alphabet、Time、Category、Hierarchyの順に頭文字をとって
//''LATCH'' という言い方もあります。
~

***書棚とデータベース
#image(InformationDesign/書棚とDB.jpg,right,30%)
従来のように「書類をバインダーに綴じて棚に整理する」という発想ではなく、「書類に関連するカテゴリー名やタグを付けて保管しておけば、あとはシステムが自動的に引き出してくれる」、つまり「ツリー状の枠組みで物事を片付ける必要はく、情報にマーキングだけしておいて、あとは機械に探させればいい」という発想の転換をすることで、情報の管理は非常に楽になります。

-[[書棚とデータベース>https://www.figma.com/file/NcaY1OSvTvgIYXzvI3Obiv/The-Cathedral-and-the-Bazaar?node-id=0%3A1]]
~

***カテゴリーとタグ
カテゴリーは、一般にツリー型の分類構造を持ちます。例えば、Webサイトのサイトマップ(ナビゲーションメニューに反映)は、一般にカテゴリーツリーの形で構成されます。

一方タグは、各情報に関連するワード「タグ」付けする・・というもので、ツリー状の分類とは無縁の存在です。例えば「犬の写真」には、「犬」と「写真」の2つのタグを付けておけば、閲覧者は「犬」からでも「写真」からでも目的のデータにたどり着くことができます。

''付記:カテゴリーツリーの作り方は多様''
例えば、A大学の学生をいくつかのグループに分けるには・・
-学部>学科>学年
-学年>学部>学科
-学部>出身都道府県

など、分け方や階層の上下関係は様々に考えることができます。

ツリー状に整理格納する場合、階層が深くなるとデータの探索には時間がかかります。また、実際には一つのカテゴリーに振り分けられない情報というものも存在します。であれば、情報をカテゴリーツリー上のどこかに割り付けるのではなく、個々の情報の方にカテゴリー名を付与する(一般的には、いずれかひとつのカテゴリー名をつけるべきですが、場合によっては複数のカテゴリー名を付与することもできる)という、逆転の発想で情報を整理する方が、柔軟な情報管理が可能になります。
//~

//''参考:taxonomy''
//タクソノミー(taxonomy)とは、分類、分類学、分類法などの意味を持つ言葉ですが、IT分野では様々な情報やデータなどの分類方法を定義したものを意味します。[[CMS]]などでは、ページや投稿をツリー状にカテゴリー分けしていく機能をタクソノミーといいます。
~

***フォルダとインデックス
フォルダは上記の「カテゴリー」に相当するツリー状の階層構造を持つもので、インデックスは上記の「タグ」に相当します。[[CMS]]等の管理上の用語としては、同義と考えて差し支えありません。
~

***ストックとフロー
ストックとは、長期にわたって何度も閲覧される情報のことで、マニュアル、参考資料、文書フォームなどがこれに該当します。一方、フローとは、短期間で価値がなくなる情報で、お知らせ、募集告知などがこれにあたります。
~


***伽藍とバザール
ページを独立させました > [[TheCathedralAndTheBazaar]]
~

***ツリーとセミラティス
ページを独立させました > [[Semi-lattice]]
~


***Wiki と Blog
[[CMS]]の2大スタイルである Wiki と Blog は「ストック(カテゴリー)」に重点を置くか「フロー(タグ)」に重点を置くかの違いで説明することができます。
-[[Wiki>https://design.kyusan-u.ac.jp/OpenSquareJP_MW_2021/index.php/%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E8%AB%96]]:ページ単位として編集・更新。百科事典、まとめサイト・・
-[[Blog>https://opensquarejp.wordpress.com/]]:記事を単位として投稿。最新の投稿が優先・・
~
~

**ミニッツペーパー

-テーマ
 遠隔授業と情報デザイン
遠隔授業の手法やコミュニケーションツールについて、みなさんが感じている問題点、あるいは取り入れて欲しい技術等について、100字 〜 200字程度で語って下さい。コロナ禍の1年数ヶ月の体験から自由に語って下さい。

-提出期限:''2021.10.8(金)''

-投稿フォーム:以下をご利用下さい
#iframe(https://docs.google.com/forms/d/e/1FAIpQLSdWBlzUCsuphBtdTONt_kwXvH0rwvvaPSSmcKurqD9s3hl1uQ/viewform?embedded=true,100%,75%)
~

***受講生の方のコメント
(準備中)
~
~


**APPENDIX

***関連LINK
-[[リチャード・ソール・ワーマン>https://ja.wikipedia.org/wiki/%E3%83%AA%E3%83%81%E3%83%A3%E3%83%BC%E3%83%89%E3%83%BB%E3%82%BD%E3%83%BC%E3%83%AB%E3%83%BB%E3%83%AF%E3%83%BC%E3%83%9E%E3%83%B3]] 情報アーキテクト
http://www.wurman.com/
-[[ヤコブ・ニールセン>http://ja.wikipedia.org/wiki/%E3%83%A4%E3%82%B3%E3%83%96%E3%83%BB%E3%83%8B%E3%83%BC%E3%83%AB%E3%82%BB%E3%83%B3]] ユーザビリティー
https://www.nngroup.com/articles/author/jakob-nielsen/
-[[ドナルド・A・ノーマン>http://ja.wikipedia.org/wiki/%E3%83%89%E3%83%8A%E3%83%AB%E3%83%89%E3%83%BB%E3%83%8E%E3%83%BC%E3%83%9E%E3%83%B3]] 認知科学
[[Don Norman's jnd website>http://www.jnd.org/]]
https://www.nngroup.com/articles/author/don-norman/
[[TED|Don Norman on 3 ways good design makes you happy>http://www.ted.com/talks/don_norman_on_design_and_emotion.html]]
-[[マーシャル・マクルーハン>http://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB%E3%83%BB%E3%83%9E%E3%82%AF%E3%83%AB%E3%83%BC%E3%83%8F%E3%83%B3]] メディア論
-[[松岡正剛>Google:松岡正剛]] 編集工学
--[[編集工学研究所>http://www.eel.co.jp/]]
--[[千夜千冊>http://1000ya.isis.ne.jp/top/]]
~

***書籍紹介
-情報デザインアソシエイツ編「情報デザイン」グラフィック社
-情報デザインフォーラム編「情報デザインの教室」丸善出版
-渡辺保史「情報デザイン入門」平凡社
-リチャード・ソール・ワーマン「理解の秘密」 NTT出版
-ヤコブ・ニールセン「マルチメディア&ハイパーテキスト原論」電機大出版局
-ロバート・ヤコブソン「情報デザイン原論」 篠原稔和 監訳 電機大出版局
-松岡正剛「知の編集工学」朝日文庫
~
~

**付記

***情報の空間性・時間性
松岡正剛(「知の編集工学」)に、有名な言葉があります。
 情報は、ひとりでいられない
-我々が「情報」をどのように扱っているか、また遺伝「情報」はどのようにふるまっているかをみれば明らかですが、情報は''複製・伝達・蓄積・共有''されることで、はじめて意味をもつ存在です。 ・・情報の時間性
-例えば、「赤」は単体では意味をもちませんが、「青」と組み合わされて「交差点」という文脈に位置付けられると「止まれ」という意味を担う情報になります。他との「関係」が重要なのです。・・情報の空間性
~

***差異 / 言語 / 情報
最も基本的な「情報化」は、それに「名を与える」ということです。
言語化されてはじめてそれは情報になります。 > [[言葉とは何か>Language]]
物事を「差異化」して「関係づけ」すること・・
~

***情報を生み出す思考
日々の暮らしの中にも、意識的に言語化することで「情報(記事)」にできることがたくさんあります。同一の視点で投稿された記事をコレクションすれば、それは立派な「Webサイト」あるいは「書籍」になります。
-本日の一品:食卓の一品を写真で紹介
-本日の一枚:写真にコメントをつけて投稿
--定点観測:毎日同じ時刻に、同じ場所を同じ撮影パラメータで撮影
--テーマ写真:毎日、同一のテーマで見つけた被写体を撮影
-私のお気に入り:日常的に使っている生活用品を紹介
-私の好きな絵画:美術館で出会った「名画」を紹介
-私の好きな言葉:読書で出会った「名言」を紹介

毎日の自分の行動を振り返ってみて下さい。無理なく続けられる「関心の対象」が何か見つかるはずです。
//例えば私の場合、それは「[[正方形]]」でした。
~
~
~