$30 off During Our Annual Pro Sale. View Details »

情報設計は誰のものか?

sekig
December 11, 2017

 情報設計は誰のものか?

HCD-Net IA Seminar | HCD コンピタンス知識編「情報構造の設計・概論」にてお話ししたスライドです。HCDを学ぶ場において、Information Architecture を多面的に捉えるための事例パートとしての発表です。
https://peatix.com/event/323153/

http://www.hanarenoheya.com

sekig

December 11, 2017
Tweet

More Decks by sekig

Other Decks in Design

Transcript

  1. E di t or i al de s ign(maga z

    ine )/ Web de s ign / A pp de s ign / Graphic de s ign / B o ok de s ign / UX de s ign / O ther sk ill ... E dit orial Web App Gr aphic B o ok UX O ther 6
  2. E di t or i al de s ign(maga z

    ine )/ Web de s ign / A pp de s ign / Graphic de s ign / B o ok de s ign / UX de s ign / O ther sk ill ... E di t o r i al We b App Graphic Bo ok UX O t h e r 7
  3. h t t p : / / w w w

    . h a n a r e n o h e y a . c o m 8
  4. 複 雑なものを明快にする人 情 報の構 造や経 路をつくる人 明快さ、 理 解 、

    情 報 組 織 化の専門職 “ I n f o r m at i o n A r c h i t e c t s” - R i c h a r d S au l W u r m a n Information Architect 15
  5. 19 6 2 In forma t ion A rchi t

    e c ture 19 9 0 World Wide Web 20
  6. ウェブ やソフトウェアのほうが アーキテクチャの与えるインパクトが 大きい 構 造自体 が 柔 軟だ( 定義しなければ

    ならない )から、 概 念として浸 透しやすかったのでは [ I A 私 的 見 解 ] 22
  7. ( 著 者 ) 編 集 者 エディトリアル デ ザ イナー

    ライター フォトグラファー イラストレーター スタイリスト モデ ル e t c... 24
  8. 編 集 者 エディトリアル デ ザ イナー ( 著 者 )

    ライター フォトグラファー イラストレーター スタイリスト モデ ル e t c... 25
  9. ネタ ( 情報 ) を加工し、 編集方針 (ユーザーへのコンテキスト) を立て、 コンテンツにする 制作前の、

    人との関係づくり コンテンツを適切に読 者へ届けるもろもろを すべて取り扱う ( 調 査 / ハイレベル 設計 / PM) [ 編 集 者 の 役 割 ] 27
  10. 編 集 行 為には UXD 的視 点 が ある [

    編 集 者 の 役 割 ] ただし、プロセスが 外 部 化・可 視 化されていない & 評 価 分 析フェーズ が 閉じているので HCD プロセスとは言いにくい 28
  11. デ ザ インと編 集 は 同 義 内 容 まで

    踏 み 込 ん で デ ザ イン・ レ イアウト 対 面 で は なく横 並 び で 制 作 す る [ エディトリア ルデ ザ イナーの 役 割 ] 30
  12. エディトリアルデ ザインも コンテンツそのもの [ エディトリア ルデ ザ イナーの 役 割

    ] ただ 配置 装 飾するだけではなく、コンテンツ作りから関わる 31
  13. 編 集デ ザイン ≒ IA [ 出版 メディアで 行 われていること

    ] ものごとを整 理し、伝わるようにして届ける。 編 集デ ザイン(Edi t or ial De sign )と IA は 、本 質的には同じ方向性のもの 32
  14. [ 理 解 の 概 念 図 ] [データ]を編集することによって[ 情報

    ]としての価値を持たせ、 ユーザーが 体験することで[ 知識 ]となり、さらには[ 知恵 ]にまで 昇華される N at h an S he d r of f - T he U nd e r s t and i n g S p e c t r u m データ 情 報 知識 知恵 制 作 者 ユーザー 体 験 コンテキスト 33
  15. データ 情 報 知識 知恵 制 作 者 ユーザー 体

    験 コンテキスト データ 情 報 知識 知恵 制 作 者 ユーザー 体 験 コンテキスト E di t o r i al データを集め情 報 化し、受け取りやすくする行 為 34
  16. ガチの Small IA [ 出版 メディアで 行 われていること ] とても具

    体的で 、緻 密で 、フィジカル な   I A 36
  17. 原稿整理 [ 現 場に配 属されてはじめに与えられ た 仕 事 ] 要素が

    足りているか、ファイル名のリネームや画像形式の最適化、 テキストの整形( 媒体に合わせた表記ルールに整える) 、サーバー上の原稿ファイルの管理 etc. 別のスタッフが 見てもわかるような、印刷事故を起こさない運用の実施。 データを俯瞰して取り扱いやすい状 態に加工する D a t a cle an s ing E p i s o d e # 1 38
  18. 原稿の流し込み [ はじめてデ ザ インデータを 触らせてもらった時 の 仕 事 ]

    量や内容による各種調整。行数やテキスト内容によるレイアウト調整と最適化、 それに伴う原稿の内容や量についての交渉など。 変数の把握。ページレイアウトにおいての変数がどこにあり、 それをどう処理するべきかの方法を教わる。 要素の性質やコンテキストを理 解し、 それぞ れの情報にとって適切な状 態を維持する D a t a � In forma t ion E p i s o d e # 2 39
  19. 重 要 情報の構造化 [ はじめてページデ ザ インを 任され た時に、A D がしてくれ

    たこと ] 原稿(テキスト・図版 )を紙に出力し、赤ペンでマークしながら、 見出しの階層、本文なのか入れ子なのか、あるべき見出しや必要ない見出しがないか、 見せ方の構成がコンテンツの構造として正しいか、などを横で 整理する様を見せてくれた。 原稿の「読み解き」と「意味付け= Markup」をすることで 、 コンテンツの把握・整 理・構 造 化( 編集 )を行う In forma t ion � Know le dge E p i s o d e # 3 -1 40
  20. 構造とスタイルの分離 [ はじめてページデ ザ インを 任され た時に、A D がしてくれ たこと

    ] 内容を理解した上で 、 色を使わず 、スミ文字とグレーの矩形、媒体ルールの書式のみで まずレイアウトをつくるよう指示された。 デザインとしての「 構成 」が 悪ければ 、意匠をどれだけ頑張ってもよくならない。 コンテンツファースト。DOM と s t yle の分離 In forma t ion � Know le dge E p i s o d e # 3 - 2 41
  21. 運用に配慮した設計 [ はじめてページデ ザ インを 任され た時に、A D がしてくれ たこと

    ] コンテンツが可変する可能性がどこまでデザイン上考慮されているか、一問一答。 この文章は確定なのか、ステイクホルダーが 外部にいるか、  図版はノートリミング 指定なのか、差し替えはあり得るか、潜 在的な掲載点数はどうか… 後工程や運用を考慮し、ベストの前にベターをどれだけ底上げできるかの検討を徹底的に叩き込まれる。 運 用・継続 性を鑑みた IA。カイゼンサイクル的な視 点も含まれる In forma t ion � Know le dge E p i s o d e # 3 -3 42
  22. 適 切な読 書 体 験は 「 知識 」の「 知恵 化

    」を促 進する Know le dge ��� Wi s dom 43
  23. [ 実 例  1. 書 籍 の 本 文フォーマット設 計

    ] コンテンツが可変であり、それをどう入れ込むか、コンポーネントを設計。 仮テキストをもらい、実際に近いもので 組版システムをつくる。 コンテンツの増減などをきちんと考慮した、CSS 的な設計 45
  24. [ 実 例  2. 雑 誌 の 特 集 記

    事 のレイアウト ] 編集者からの「大ラフ ( 実寸のレイアウト構成図) 」を受け取り、よく読み込む。 そして交渉。情報の整理と代替案の提示、場合によっては台割(ストラクチャ)変更も。 構 造からコミットする。ストラクチャ・WF レベル からのデザイン 48
  25. p h ◯ ◯ ◯ ◯ ◯ ◯ 煮 る

    ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ 材料 1 4 2 5 3 6 ◯◯◯◯◯◯◯◯◯◯◯◯◯◯ ◯◯◯◯◯◯◯◯ カンタン! 本格技 7 す み ま せ ん ! 一 点 追 加 で 本文 16W ×32L ライター発注済み調整不可です テ キ ス ト は メ ー ル に て 送 付 済 み 料理家さん海外取材のため 本日中に一回 PDF ください! 12 8 cap 30 〜 60W 料 理 レ ベ ル 2 下 準 備 フ ラ イ パ ン
  26. [ 実 例  3. 番 外 編  | ウェブにおいてのエディトリアルデ ザ イン

    思 考 ] ウェブメディアに転向してから、基本的なお作法や背景技術への理解は必要だったが 、 コンポーネントの考え方やテキスト書式を用意する必要性、要素の増減対応などに苦がなかった。 対象メディアが 変わっても、本 質的な設計・制作はかわらない 50
  27. 51

  28. IA は 本 質的な 概 念 。 必 要とされる思 考・それに伴う作

    業は 、 媒 体 特 性に限 定されるものではない 55
  29. IA のフレームワーク・技 術は 体 系 化されているため、再 利用性・再 現 性 が

    高い [ I A の重 要 性 ] ビジ ネス、特に デジタルメディアにおいて非常に有 効 58
  30. IA � UI [ UI にも種 類 が ある ] Character-based UI

    Graphical UI Natural UI (Touch) Natural UI ( Voice) Organic UI narrative & ve rb al narrative & lite ral ? grap hic al & lite ral grap hic al & p hysic al ※ UI =デジタルとは限らない 61
  31. E d i t o r i a l D

    e s i g n e r i s S m a l l I A & U I D e s i g n e r ? 63
  32. e x . 絆 創 膏 の マ ー ク

    ア ッ プ ( You S akai @ glat you ) h e a d e r とは r o l e = 'b a n n e r ' つまり旗 、前 提 情 報 。   f o o t e r は r o l e = ' c o n t e n t i n f o ' 補 足 情 報 。 [  例 えば 傷 絆 創 膏 の 商 品 パッケージ  ]   ・オモテ 側は … < h e a d e r > つまり前 提 情 報 、   ・中 身 は … < c o n t e n t > 、   ・ウラ面 は … < f o o t e r > つまり補 足 情 報 。   …と考 えることも可 能 。 H T ML で は 表 現 できない メデ ィア で も 、認 知 の 問 題としてみ れ ば 実 は 潜 在 的には( 概 念 的には )h e a d e r / f o o t e r は 常に 存 在 するの で は he a de r c onte nt foote r 65