情報設計は誰のものか？

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

http://www.hanarenoheya.com

Transcript

1. 関口 裕 2017.12.11 HCD-Net IA Seminar ｜ HCD コンピタンス知識編「情報構造の設計・概論」 情報設計は誰のものか？ Media properties in IA 1
2. 本スライドは 公開します。 2
3. 自己紹 介 3
4. 関口 裕 （ せきぐち・ゆたか ） D E S I G N E R 4
5. 日本デザインセンター　オンスクリーン制作室　アートディレクター・デザイナー ｜ 大学でプロダクトデザインを 修めた後、エディトリアルデザイン・情報デザインを扱うデザイン会社 Concent, Inc. に就職。雑誌を中心に書 籍や広報誌など紙媒体のデザインに多数携わる。大規模・中規模のコーポレートサイトやブランドサイトなどを軸 としたデジタルメディアのデザインにも従事。設計の上流工程からグラフィックのフィニッシュワークまで、幅広 く関わりデザインを手掛ける。2017 年 8 月より現職。 雑 誌 や広報 誌 、 書 籍のデザイン … 5 年   ウェブサイトを中心としたデザイン … 6 年目 5
6. 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
7. 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
8. h t t p : / / w w w . h a n a r e n o h e y a . c o m 8
9. さて 9
10. ［ テーマ ］ エディトリアルデザイン Editorial Design 10
11. ［ テーマ ］ 情報設計は誰のものか？ Media properties in IA 11
12.  IA の対象は 限定されない ［ 本日お 持ち帰りいただくこと ］ 12
13. ［INTRODUC TION］IA ってなんだっけ 出版メディアにおける IA （的なもの） エディトリアルデザインの現場におけるIA エディトリアルデザイン具体 例 まとめ Index 1. 2. 3. 4. 5. 13
14. IA ってなんだっけ 14
15. 複 雑なものを明快にする人 情 報の構 造や経 路をつくる人 明快さ、 理 解 、 情 報 組 織 化の専門職 “ 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
16. R ichard S aul Wurman 16
17. 建築家／グラフィック・デザイナー （  編 集 者？ ） R ichard S aul Wurman 17
18. 19 6 2 In forma t ion A rchi t e c ture 18
19. 19 9 0 World Wide Web 19
20. 19 6 2 In forma t ion A rchi t e c ture 19 9 0 World Wide Web 20
21.  IA ≠ We b IA のほうが ずっと先にあった概 念 21
22. ウェブ やソフトウェアのほうが アーキテクチャの与えるインパクトが 大きい 構 造自体 が 柔 軟だ（ 定義しなければ ならない ）から、 概 念として浸 透しやすかったのでは ［ I A 私 的 見 解 ］ 22
23.    出版メディアにおける    IA （ 的なもの ） 23
24. （ 著 者 ） 編 集 者 エディトリアル デ ザ イナー ライター フォトグラファー イラストレーター スタイリスト モデ ル e t c... 24
25. 編 集 者 エディトリアル デ ザ イナー （ 著 者 ） ライター フォトグラファー イラストレーター スタイリスト モデ ル e t c... 25
26. ［ 編  集 者 ］ 26
27. ネタ （ 情報 ） を加工し、 編集方針 （ユーザーへのコンテキスト） を立て、 コンテンツにする 制作前の、 人との関係づくり コンテンツを適切に読 者へ届けるもろもろを すべて取り扱う （ 調 査 ／ ハイレベル 設計 ／ PM） ［ 編 集 者 の 役 割 ］ 27
28. 編 集 行 為には UXD 的視 点 が ある ［ 編 集 者 の 役 割 ］ ただし、プロセスが 外 部 化・可 視 化されていない & 評 価 分 析フェーズ が 閉じているので HCD プロセスとは言いにくい 28
29. ［ エディトリアルデザイナー ］ 29
30. デ ザ インと編 集 は 同 義 内 容 まで 踏 み 込 ん で デ ザ イン・ レ イアウト 対 面 で は なく横 並 び で 制 作 す る ［ エディトリア ルデ ザ イナーの 役 割 ］ 30
31. エディトリアルデ ザインも コンテンツそのもの ［ エディトリア ルデ ザ イナーの 役 割 ］ ただ 配置 装 飾するだけではなく、コンテンツ作りから関わる 31
32. 編 集デ ザイン ≒ IA ［ 出版 メディアで 行 われていること ］ ものごとを整 理し、伝わるようにして届ける。 編 集デ ザイン（Edi t or ial De sign ）と IA は 、本 質的には同じ方向性のもの 32
33. ［ 理 解 の 概 念 図 ］ ［データ］を編集することによって［ 情報 ］としての価値を持たせ、 ユーザーが 体験することで［ 知識 ］となり、さらには［ 知恵 ］にまで 昇華される 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
34. データ 情 報 知識 知恵 制 作 者 ユーザー 体 験 コンテキスト データ 情 報 知識 知恵 制 作 者 ユーザー 体 験 コンテキスト E di t o r i al データを集め情 報 化し、受け取りやすくする行 為 34
35. データを集め情 報 化し、受け取りやすくする D a t a � In forma t ion � Know le dge 35
36. ガチの Small IA ［ 出版 メディアで 行 われていること ］ とても具 体的で 、緻 密で 、フィジカル な 　 I A 36
37. エディトリアルデ ザインの 現 場における IA 新人エディトリアルデザイナー時代の経験から、具体例として IA 要素を取り上げる （ 月刊 誌 の 制 作 現 場で す ） 37
38. 原稿整理 ［ 現 場に配 属されてはじめに与えられ た 仕 事 ］ 要素が 足りているか、ファイル名のリネームや画像形式の最適化、 テキストの整形（ 媒体に合わせた表記ルールに整える） 、サーバー上の原稿ファイルの管理 etc. 別のスタッフが 見てもわかるような、印刷事故を起こさない運用の実施。 データを俯瞰して取り扱いやすい状 態に加工する D a t a cle an s ing E p i s o d e # 1 38
39. 原稿の流し込み ［ はじめてデ ザ インデータを 触らせてもらった時 の 仕 事 ］ 量や内容による各種調整。行数やテキスト内容によるレイアウト調整と最適化、 それに伴う原稿の内容や量についての交渉など。 変数の把握。ページレイアウトにおいての変数がどこにあり、 それをどう処理するべきかの方法を教わる。 要素の性質やコンテキストを理 解し、 それぞ れの情報にとって適切な状 態を維持する D a t a � In forma t ion E p i s o d e # 2 39
40. 重 要 情報の構造化 ［ はじめてページデ ザ インを 任され た時に、A D がしてくれ たこと ］ 原稿（テキスト・図版 ）を紙に出力し、赤ペンでマークしながら、 見出しの階層、本文なのか入れ子なのか、あるべき見出しや必要ない見出しがないか、 見せ方の構成がコンテンツの構造として正しいか、などを横で 整理する様を見せてくれた。 原稿の「読み解き」と「意味付け＝ Markup」をすることで 、 コンテンツの把握・整 理・構 造 化（ 編集 ）を行う In forma t ion � Know le dge E p i s o d e # 3 -1 40
41. 構造とスタイルの分離 ［ はじめてページデ ザ インを 任され た時に、A D がしてくれ たこと ］ 内容を理解した上で 、 色を使わず 、スミ文字とグレーの矩形、媒体ルールの書式のみで まずレイアウトをつくるよう指示された。 デザインとしての「 構成 」が 悪ければ 、意匠をどれだけ頑張ってもよくならない。 コンテンツファースト。DOM と s t yle の分離 In forma t ion � Know le dge E p i s o d e # 3 - 2 41
42. 運用に配慮した設計 ［ はじめてページデ ザ インを 任され た時に、A D がしてくれ たこと ］ コンテンツが可変する可能性がどこまでデザイン上考慮されているか、一問一答。 この文章は確定なのか、ステイクホルダーが 外部にいるか、  図版はノートリミング 指定なのか、差し替えはあり得るか、潜 在的な掲載点数はどうか… 後工程や運用を考慮し、ベストの前にベターをどれだけ底上げできるかの検討を徹底的に叩き込まれる。 運 用・継続 性を鑑みた IA。カイゼンサイクル的な視 点も含まれる In forma t ion � Know le dge E p i s o d e # 3 -3 42
43. 適 切な読 書 体 験は 「 知識 」の「 知恵 化 」を促 進する Know le dge ��� Wi s dom 43
44. エディトリアルデザイン 具 体 例 IA 観点から、読み物における編集デザイン事例を読み解いてみる 44
45. ［ 実 例  1. 書 籍 の 本 文フォーマット設 計 ］ コンテンツが可変であり、それをどう入れ込むか、コンポーネントを設計。 仮テキストをもらい、実際に近いもので 組版システムをつくる。 コンテンツの増減などをきちんと考慮した、CSS 的な設計 45
47. 要素の配置や間隔、色、文字装飾、 見出しの処理、本文のグリッド、分 量に応じたルール…すべてのデザ イン処理について指定がされてお り、データ化された状態で DTP オ ペレーターに渡すフロー。書式の命 名を HTML タグで表現する人も。 文字の書式や要素のスタイルを GUI で管理し、適用／一括修正で きる。構造とスタイルの分離。 属性 値 47
48. ［ 実 例  2. 雑 誌 の 特 集 記 事 のレイアウト ］ 編集者からの「大ラフ （ 実寸のレイアウト構成図） 」を受け取り、よく読み込む。 そして交渉。情報の整理と代替案の提示、場合によっては台割（ストラクチャ）変更も。 構 造からコミットする。ストラクチャ・WF レベル からのデザイン 48
49. p h ◯ ◯ ◯ ◯ ◯ ◯ 煮 る ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ 材料 1 4 2 5 3 6 ◯◯◯◯◯◯◯◯◯◯◯◯◯◯ ◯◯◯◯◯◯◯◯ カンタン！ 本格技 7 す み ま せ ん ！ 一 点 追 加 で 本文 16W ×32L ライター発注済み調整不可です テ キ ス ト は メ ー ル に て 送 付 済 み 料理家さん海外取材のため 本日中に一回 PDF ください！ 12 8 cap 30 〜 60W 料 理 レ ベ ル ２ 下 準 備 フ ラ イ パ ン
50. ［ 実 例  3. 番 外 編  ｜ ウェブにおいてのエディトリアルデ ザ イン 思 考 ］ ウェブメディアに転向してから、基本的なお作法や背景技術への理解は必要だったが 、 コンポーネントの考え方やテキスト書式を用意する必要性、要素の増減対応などに苦がなかった。 対象メディアが 変わっても、本 質的な設計・制作はかわらない 50
52. 紙やってたデザイナーさんと聞いていたので すごく構えていたら、 きちんと CSS で 組めるギリギリのところを抑えた パーツ集が 送られてきたのでびっくりした。 （ はじめてのウェブ 制作案 件にて ） 某エンジニア氏 52
53. みんなで手分けして調査をまとめよう、 できるよね？ 関口くん。 （チームが 各々のパートをまとめて集合。時間は終電前 ） うーん。時間もないし、ここはセンスが 必要な局面だから、 ボクが 朝までにまとめておくよ。 （ はじめてのウェブのプレゼン案 件にて ） 某著名 IA の H 氏 53
54. 何をやっても エディトリアル的なアタマの 使い方・専門性は あまり変 わらなかった 54
55. IA は 本 質的な 概 念 。 必 要とされる思 考・それに伴う作 業は 、 媒 体 特 性に限 定されるものではない 55
56.  IA ≒ Editori al 56
57. まとめ Me dia   prop er tie s  in  IA 57
58. IA のフレームワーク・技 術は 体 系 化されているため、再 利用性・再 現 性 が 高い ［ I A の重 要 性 ］ ビジ ネス、特に デジタルメディアにおいて非常に有 効 58
59. ただし 59
60. ［ メディア ≒ UI にも種 類 が ある ］ 60
61. 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
62. UI（ ≒ メディア ）の数だけ、 IA の対 象も広がっている 62
63. 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
64. IA の視 野を広げると、 より深い「 情 報 へのまなざし」が 得られるのではないか。 64
65. 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
66. [ Information Architecture ] 66
67. 「 情 報をわかりやすく伝え」 「 受け手が 情 報を探しやすくする」 ための表 現 技 術 Information Architecture 67
68.  IA ! enjoy, 68
69. HCD ! enjoy, 69
70. ありがとうございました。