InformationDesign

情報デザイン

情報デザインとは一般に、情報を正しく、わかりやすく、また美しく伝えるために行う様々な手立てのことを言います。様々な情報デバイスとネットワークの普及で、一個人による情報の公開・送信が可能になった現在、情報デザインは一部の専門家のためのものではなく、万人が必要とするスキルといえます。

情報デザインの対象は、グラフィックスやWeb、映像といった情報媒体だけではありません。私たちの日常には、様々なモノがあって、人とモノとの関係における違和感、勘違い、操作の失敗・・・といった問題も多くあります。ユーザがモノと関わる場面で生じる問題を発見し、それを「情報」のレベルで解決する・・これも情報デザイナーの仕事です。

さらに、「何か」を「情報化する」というプロセスも広義の情報デザインの重要な一面です。とらえどころのない何かを情報化するとき、そこには人間の恣意的な「編集行為」が関与しています。例えば「時計」は、人間の五感が捉えることのできない「時」を「時刻という数的情報」に「情報化」した道具です。これも、革新的な「情報デザイン」の一例といえるでしょう。
鏡、カメラオブスクラ、方位磁石、温度計・・そうした道具も同様です。

情報デザイナーが考えるべきこと

• 1) 必要な情報を「時」と「場所」を超えて提供する（共有させる）こと
  災害時、危機的な状況において、最も必要とされるのが「情報」です。
  どんな形であれとにかく必要な情報を出すということが最も重要です。
• 2) それが「わかりやすい」こと
  わかりにくい情報は、「混乱」や「混雑」の元凶となります。
  情報をわかりやすくデザインすると、それは自然に美しくまとまります。
• 3) それが「面白い」こと・「美しい」こと
  それは人と社会を活気づけるとともに、情報環境を快適にします。
  
  

良い情報デザインとは？ それを一言で言うと・・（私見）

情報を遠隔・非同期的に複製されやすい状態にすること

「情報体の気持ち」になって考えればわかることですが、生命の情報（DNA・RNA）からWeb上の情報まで、あらゆる情報体は複製（シェア・拡散）されることを望んでいます。20世紀という時代は「複製するな！複製するなら金払え」という考え方が横行した時代でしたが、今、世の中の情報基盤にあるのは「コピーレフト」を前提としたオープンソースソース・ソフトウエアであり、その根底にあるのはデータとプログラム（プロパティとメソッド）をパックにした移植性の高い小さな「オブジェクト」です。また、それらは「文字」の性質を生かした「遠隔・非同期」的なコミュニケーションによって生み出されています。

• 情報をオープンにすること
• 情報を遠隔・非同期でアクセスできるようにすること
• 情報を小さな情報要素の集合体として考えること
• それらの大前提として、電子化されていること
  
  
  
  

CONTENTS

• はじめに
  • 情報デザインについての様々な説明
  • 情報デザインのフィールド
  • 情報×デザインの「てにをは」
  • 情報デザインの 5W2H ｜企画
  • 情報デザインの 5W2H ｜記事作成
  • 付記：「情報が無い」ことの明記も重要な情報
• 情報アーキテクチャー
  • 情報構造のパターン
  • ナビゲーション
  • 5つの帽子掛け
• 情報の管理
  • 書棚とデータベース
  • カテゴリーとタグ
  • フォルダとインデックス
  • ストックとフロー
  • 伽藍とバザール
  • ツリーとセミラティス
  • WikiとBlog
  • 付記：カテゴリーツリーの作り方は多様
• 情報洪水対策
  • 情報マーケット
  • 情報ポータル
  • Push と Pull
  • 「実体渡し」から「アドレス渡し」へ
  • 補足１：紙の文化から卒業する
  • 補足２：機種依存文字は使わない / 漢字は第２水準まで
• 情報の見える化
  • 有用度・活用度の見える化
  • 鮮度の見える化
  • コストの見える化
• APPENDIX
  • 視覚情報
  • 聴覚情報
  • モノにおける情報のデザイン
  • 空間における情報のデザイン
  • その他
  • 付記１：カテゴリーとタグについての補足
  • 付記２：ポートフォリオサイトのページ構成について

はじめに

情報デザインについての様々な説明

• Wikipedia
  • 情報デザイン

    情報デザイン（じょうほうデザイン、英: information design）は、
    人間とモノや環境との関係性にかたちを与える方法論、
    生活の中にあふれる無数の情報をわかりやすく提示する手法、
    あるいは、それらの考え方。 2016.05.11時点

  • Information Design
  • Information Architecture
• ロバート・ホーン「情報デザイン原論」

  情報デザインとは、情報を、人が効率的かつ効果的に使えるような形で
  準備する技と知識である。　 

• 渡辺保史「情報デザイン入門」

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

• 情報デザインフォーラム編　「情報デザインの教室」

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

  
  

情報デザインのフィールド

• 視覚情報のデザイン
  Graphic Design　Infographics 　Movie　Web Design　Web Application
• 聴覚情報のデザイン
  Sound Design　InfoSound 　Alert　Wind Bell
• モノにおける情報のデザイン
  User Interface Design　Device Interface
• 空間に関わる情報のデザイン
  Sign Design　PublicDesign　Map
  
  

情報×デザインの「てにをは」

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

情報デザインの 5W2H ｜企画

• What：何を(伝えたい？)
• Why：何のために / なぜ？
• When：いつ / いつまでに？
• Where：どこで(制作する？) / どこで(公開・販売する？)
• Who：誰に(伝えたい？) / 誰が(担当する？)
• How：どのような方法で？
• How much：費用（予算）は？
  
  

情報デザインの 5W2H ｜記事作成

• What ： これは何？　例）イベント「〇〇」の開催案内等
• Why ： なぜ？　例）イベント開催の目的・主旨等
• When ： いつ？　例）開催期間等
• Where ： どこで？　例）会場、会場までの交通案内等
• Who ： 誰が？　例）出演者、出品者、主催者等
• How ： どのように？　例）申込方法等
• How much ： いくら？　例）入場料　参加費など
  
  

付記：「情報が無い」ことの明記も重要な情報

気象庁の台風情報のページでは、台風が発生していない場合に、現在台風は発生していません というメッセージが表示されます。「情報が無い」ことを明示することは、情報を探す手間を省く、情報を求めておこる様々な混乱を防ぐ・・などのメリットがあります。

• 例）無音の映像（実験映像等）をTVで放送する場合
  無音のままだと、放送事故あるいはTVの故障か？・・と思われます。「この作品は無音です」と提示することで、視聴者の不安や混乱を払拭できます。
• 例）デジタル地図上に描かれる危険箇所（土砂災害の可能性：赤色）
  エリア内に該当する場所が無い場合は、「ご覧のエリアには土砂災害の可能性のある場所は存在しません」と明示することが、利用者の不安を払拭します。
• 例）列車が急停車した
  原因がわかるまで沈黙するのではなく、「現時点では原因がわかりません。ただいま調査中です」ということをアナウンスする
  
  
  
  

情報アーキテクチャー

情報アーキテクチャーとは、情報の「構造」のことで、設計者としての「情報アーキテクト」は、知識やデータをユーザにとって「わかりやすい」、「探しやすい」ものとなるように構造化します。　

情報構造のパターン

• 階層型分類構造
  ごく一般的な木構造。個々の情報は、いずれかのカテゴリーに属する
  カテゴリーの入り口を間違うと目的の情報にはたどりつけない。
• ファセット分類型構造
  階層の枝葉が多対多で連結されたもの
  個々の情報に対して入り口が複数となり、ユーザにとっては情報が探しやすい
  一般的なWebサイトはこれ
• セミラティス構造
  紙には描けない、電子媒体ならではの情報構造
  ＞　別ページで解説しています Semi-lattice
• WWW型構造
  くもの巣のように相互にリンクする構造
• ハブ＆スポーク型構造
  中核（ハブ）となる情報から周辺情報へリンクする構造
  マイページを中心に動作するSNSサイトがこれ
• 直線型構造
  ユーザー登録や決済など、順に推移する形態
  手続きを進める際のWebページの連結構造がこれ
  
  

ナビゲーション

• 階層型ナビゲーション
  メインナビ、ローカルナビの階層によって実現
  一般的なWebサイトのメニューがこれ
• ダイレクトナビゲーション
  いわゆる個別ページへの直リンクを並べたもの
• ステップナビゲーション
  「全体の流れ」と「現在のステップ」を明示したナビ。
  登録手続き中などに出てくるもの
• パンくずリスト
  「階層上のステップ」と「現在の位置」が明示されたもの
  一つ上（元）に戻る、二つ上（元）に戻る、といった操作が楽
• 動的ナビゲーション
  検索など、動的に生成されるナビゲーション
• 機能ナビゲーション
  情報構造とは無関係に、表示する文字のサイズや
  レイアウトスタイルを変更したりするためのもの

5つの帽子掛け

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

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

情報の管理

以下の対義語は、ほぼ同一の対立概念として理解することができます。

書棚とデータベース

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

• 書棚とデータベース
  
  

カテゴリーとタグ

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

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

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

フォルダとインデックス

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

ストックとフロー

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

伽藍とバザール

ページを独立させました ＞ TheCathedralAndTheBazaar

ツリーとセミラティス

ページを独立させました ＞ Semi-lattice

WikiとBlog

CMSの２大スタイルである Wiki と Blog は「ストック（カテゴリー）」に重点を置くか「フロー（タグ）」に重点を置くかの違いで説明することができます。

• Wiki：ページ単位として編集・更新。百科事典、まとめサイト・・
• Blog：記事を単位として投稿。最新の投稿が優先・・
  
  

付記：カテゴリーツリーの作り方は多様

例えば、A大学の学生をいくつかのグループに分けるには・・

• 学部＞学科＞学年
• 学年＞学部＞学科
• 学部＞出身都道府県

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

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

情報洪水対策

現代社会には情報が氾濫していて、送信者の意図どおりに受信者に情報が届かない、あるいは、非常に効率が悪いということが多々あります。ここでは、そうした情報洪水にどう対応するか、いくつかのキーワードを紹介します。

情報マーケット

一般に情報というものは送信者の都合で配信されることが多いのですが、情報マネジメントの観点からは受信者の立場で考えるということが重要です。受信者には、その所属、関係する会議、プロジェクトなど、複数のプロフィールがあります。送信者は、受信者のプロフィールに合わせた最適な「情報マーケット」に接続する必要があります。

情報ポータル

受信者は複数の「情報マーケット」を訪れます。そこで有効になるのが「情報の玄関」である「ポータルサイト」です。まず「市場」を整理し、その窓口となる「ポータルサイト」を再編することで、受信者にとって最適な情報環境が実現できます。

Push と Pull

プッシュとは、送信者が情報が強制的に送る（受信者は情報を受動的に受け取る）形態で、メール・FAX送信などがこれにあたります。一方、プルとは、受信者が必要なときに情報を能動的に受け取りにいく形態で、Webサイト、共有フォルダ、掲示板を見に行くなどの行為がこれにあたります。

一般に、受信者にとっては、プッシュされた方がいい情報と、プルで対応する方がいい情報は異なっているはずですが、送信者都合で何でもプッシュされることが多いのが実態で、業務効率を下げる原因となっています。プッシュとプルの整理が必要です。

「実体渡し」から「アドレス渡し」へ

「実体渡し」とは、書類のポスティングやメール添付ファイルのように、データそのものを相手に渡すことを意味します。一方「アドレス渡し」とは、「データの所在」を相手に伝えることを意味します。例えば、以下のような方法が「アドレス渡し」です。

• Web上に掲載して、そのURLをメールで知らせる。
• ファイルサーバーに置いて、その場所をメールで知らせる。
• 荷物を直接相手に届けるのではなく「北浜305倉庫、B列45番、暗唱番号は2112」などと伝える。

書類等の情報は常にバージョンアップするので、過去に渡された「実体」は確実に古くなります。一方アドレス渡しの場合、リンク先の情報は常に最新を保つことができます。

サーバーにあるものがマスター、手元のファイルはクローン（予備）

データを自分の手元で管理するのをやめて、サーバーに置いて共有する・・というふうに、根本的な発想の転換が情報の共有をスムーズにします。

補足１：紙の文化から卒業する

印刷することを前提としてワープロで文書を作る発想は、作業効率を悪くします。１ページに収めようと文章を調整する作業などは、「タテ成り行き」で構わない Webページでは不要な作業であり、時間の無駄です。

例えば、PDFは電子媒体と言われますが、「A4タテ」などという、印刷を前提とした仕様になっている点で紙媒体と変わらず、作業効率の悪さから言えば、従来の紙ベースの仕事と変わりません。早めに卒業しましょう。

補足２：機種依存文字は使わない / 漢字は第２水準まで

正しく共有できない情報は、生産効率を著しく下げるだけでなく、場合によっては大きな事故につながります。

• 電子行政における外字問題の解決に向けて
  http://www.fujitsu.com/jp/group/fri/report/research/2013/report-400.html
• 代表的な機種依存文字
  https://mect-japan.com/2017/login/guide/izon.html
  
  
  
  

情報の見える化

見える化はトヨタ生産方式で有名になった概念で、要は情報の可視化と共有のことですが、それは現場の自律的な問題解決を促し、継続的な品質向上に寄与します。情報マネジメントにおける「見える化」には、以下３つがあるといわれます。

有用度・活用度の見える化

閲覧数などを基礎データとして情報の有用度・活用度を明示することで、受信者にとって有益な情報は何なのかがわかります。表示文字の大きさが話題性の高さを示すタグクラウドなどは、これにあたります。

鮮度の見える化

情報が氾濫する大きな要因のひとつが、賞味期限切れ情報の存在です。賞味期限を見える化し、例えば１年以上利用されていない情報は自動的に非表示にするなどの対策を講じると、情報マーケットを新鮮に保つことができます。

コストの見える化

情報の流通には送信者・受信者ともに膨大なコストがかかっています。例えば、メールに資料を添付して関係者100人に一斉送信した場合、100人がこれを読んで確認するために３分間を使うと、延べ5時間、時間当たり2000円としても１万円の人件費がかかったことになります。人的資源がどれだけ費やされているかを見える化することも必要なのです。

APPENDIX

関連ページ

視覚情報

• Animation
• Chart
• ComputerGraphics
• CorporateIdentity
• Diagram
• Graph
• GraphicDesign
• Icon
• Illustration
• ImageGeneration
• ImageRecording
• Infographics
• JapaneseGraphics
• Layout
• Map
• Movie　Movie/Links　MovieEditing
• Photography　Photography/Links
• Pictogram
• RasterGraphics
• Table
• Typography
• Storyboard
• VectorGraphics
• VisualPsychology　VisualPsychology/Links
• WebDesign
  
  

聴覚情報

• AuditoryPsychology
• DAW
• PrimitiveMusic
• Music　Music/Instruments
• Sound　Sound/Waveform
• SoundGeneration
• SoundRecording
  
  

モノにおける情報のデザイン

• InteractionDesign
• ProductDesign　ProductDesign/Links
  
  

空間における情報のデザイン

• PublicDesign
• Sign
• SpaceDesign
  
  

その他

• AudioAndVisual　History of Audio & Visual
• ContextEffect
• CreativeCommons
• EmergencyManagement
• Feeling
• Idea
• InformationTheory
• Language
• Neurotransmitter
• Story
• SustainableDesign　SustainableDesign/Links
• WiseWords

• DesignThinking

• InformationDesign/Links
  
  

付記１：カテゴリーとタグについての補足

ブログなどでよく見かける情報の分類法あるいは、手がかりについて・・・

Category
カテゴリーとは、特定の観点で要素を分類した場合の分類名称です。一般にこれは階層構造を持ち、お互いにカブることはありません。

例えば、学生Aさんは、○○学部△△学科というカテゴリに所属しています。学生ごとに所属はひとつですから、学生（要素）は皆、学部・学科という階層的な分類によってきれいに仕分けられることになります。

さてここで問題です。一般にひとつの要素が、複数のカテゴリーに属することはない・・・と言われますが、学生Aさんは、□□サークルにも所属しています。学部・学科という観点ではなく、サークルという観点で学生を眺めると、学生（要素）は、「帰宅部」も含めたサークル枠できれにに仕分けることができる・・・つまり、学生Aさんは、○○学部△△学科のカテゴリーにも属するし、□□サークルにも所属する・・・ということになってしまいます。

で、結論、これは構いません。例えばWebページのように、複数のメニューセットを同時に持つことができるような情報形態の場合は、観点の異なる複数のカテゴリー区分が共存しても問題はありません。

この場合、重要なことは、学部・学科分類メニューとサークル分類メニューとをごちゃまぜにしないことです。芸術学部と野球部がメニューの上で横に並んではいけません。学部メニューの中に経済・経営・商・工・・・・が並び、またサークルメニューの中には、野球・サッカー・ラグビー・・・などが並ぶ。というぐあいに観点（メニューセット）別に整理されるべきでしょう。

WordPressというCMSでは、投稿記事（情報要素）が複数のカテゴリーに所属できるようになっています。あるカテゴリーセットが学部・学科で区分され、別のカテゴリーセットがサークルで区分されている・・・そのような２つの観点が共存しても構わないわけで、Aさんの記事は、○○学部△△学科の記事として、また□□サークルの記事としても、アプローチできるものになります。

TAG
タグとは、個々の情報要素にまつわるキーワード、あるいは目印のようなものと考えるといいでしょう。タグは「点」として存在するので、いくら集めても整理されることはないし、また階層構造もできません。

例えば、学生Aさんに付けるタグとしては、「（好きな食べ物）カレー」や「（趣味）バイク」、あるいは「（資格）色彩検定２級」は有効かもしれません。そもそも「好きな食べ物」や「趣味」などは、一人の人間に複数存在するもので、それで学生全体をきれいに仕分ける・・・ということはできません。このように、分類上の数が多すぎるもの、整理に適さないあいまいなもの・・などが、「タグ」にふさわしい・・ということになります。

「（好きな食べ物）カレー」や「（趣味）バイク」をキーとして、全学生の中から該当者を抽出する操作は、それなりに意味のあることです。グループができるきっかけになるかもしれません。つまり、「分類」は無理でも、当該キーワードに関わる要素を集めるということに意味が見いだせる場合には、そのキーワードをタグとして扱うとよいでしょう。

WordPressというCMSでは、投稿記事（情報要素）に複数のタグを付けることができるようになっていて、特定のタグをもつ記事を一挙に抽出できるようになっています。

以上、まとめると、以下のようになります。

• Category：
  • 一定の観点から一挙に仕分けられるもので、階層構造を持つ
  • 要素の集合を分類する観点（視点）は無限にある*1
  • 観点（視点）を定めて要素を分類する際においては、
    ひとつの要素が２つ以上のカテゴリーに重複して存在することはない

• TAG：
  • 要素に関連する「目印」で、系統的に整理されるものではない
  • タグは、分類上の「観点」とは無関係に存在する
  • ひとつの要素には複数のタグをつけることができる

• 参考図
  　
  
  

付記２：ポートフォリオサイトのページ構成について

授業課題、プロジェクト、公募、自主制作・・様々ある作品を掲載する際、例えばイラスト / グラフィック / CG などのページ区分を考えてはみるものの、そもそも境界がはっきりしない・・。また、アナログとデジタルという分け方もあるし、制作年ごとに整理するという方法もある。・・と、カテゴリー分けについて悩むことが多いと思います。そんなときは、「分類しない」つまり「１作品１ページ」で作ってしまう・・という方法も検討する価値があると思います。