情報設計は誰のものか？

Slide 1

Slide 1 text

関口裕 2017.12.11 HCD-Net IA Seminar ｜ HCD コンピタンス知識編「情報構造の設計・概論」情報設計は誰のものか？ Media properties in IA 1

Slide 2

Slide 2 text

本スライドは公開します。 2

Slide 3

Slide 3 text

自己紹介 3

Slide 4

Slide 4 text

関口裕（せきぐち・ゆたか） D E S I G N E R 4

Slide 5

Slide 5 text

日本デザインセンター　オンスクリーン制作室　アートディレクター・デザイナー｜大学でプロダクトデザインを修めた後、エディトリアルデザイン・情報デザインを扱うデザイン会社 Concent, Inc. に就職。雑誌を中心に書籍や広報誌など紙媒体のデザインに多数携わる。大規模・中規模のコーポレートサイトやブランドサイトなどを軸としたデジタルメディアのデザインにも従事。設計の上流工程からグラフィックのフィニッシュワークまで、幅広く関わりデザインを手掛ける。2017 年 8 月より現職。雑誌や広報誌、書籍のデザイン … 5 年ウェブサイトを中心としたデザイン … 6 年目 5

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

h t t p : / / w w w . h a n a r e n o h e y a . c o m 8

Slide 9

Slide 9 text

さて 9

Slide 10

Slide 10 text

［テーマ］エディトリアルデザイン Editorial Design 10

Slide 11

Slide 11 text

［テーマ］情報設計は誰のものか？ Media properties in IA 11

Slide 12

Slide 12 text

IA の対象は限定されない［本日お持ち帰りいただくこと］ 12

Slide 13

Slide 13 text

［INTRODUC TION］IA ってなんだっけ出版メディアにおける IA （的なもの）エディトリアルデザインの現場におけるIA エディトリアルデザイン具体例まとめ Index 1. 2. 3. 4. 5. 13

Slide 14

Slide 14 text

IA ってなんだっけ 14

Slide 15

Slide 15 text

複雑なものを明快にする人情報の構造や経路をつくる人明快さ、理解、情報組織化の専門職 “ 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

Slide 16

Slide 16 text

R ichard S aul Wurman 16

Slide 17

Slide 17 text

建築家／グラフィック・デザイナー（編集者？） R ichard S aul Wurman 17

Slide 18

Slide 18 text

19 6 2 In forma t ion A rchi t e c ture 18

Slide 19

Slide 19 text

19 9 0 World Wide Web 19

Slide 20

Slide 20 text

19 6 2 In forma t ion A rchi t e c ture 19 9 0 World Wide Web 20

Slide 21

Slide 21 text

IA ≠ We b IA のほうがずっと先にあった概念 21

Slide 22

Slide 22 text

ウェブやソフトウェアのほうがアーキテクチャの与えるインパクトが大きい構造自体が柔軟だ（定義しなければならない）から、概念として浸透しやすかったのでは［ I A 私的見解］ 22

Slide 23

Slide 23 text

出版メディアにおける IA （的なもの） 23

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

［編集者］ 26

Slide 27

Slide 27 text

ネタ（情報）を加工し、編集方針（ユーザーへのコンテキスト）を立て、コンテンツにする制作前の、人との関係づくりコンテンツを適切に読者へ届けるもろもろをすべて取り扱う（調査／ハイレベル設計／ PM）［編集者の役割］ 27

Slide 28

Slide 28 text

編集行為には UXD 的視点がある［編集者の役割］ただし、プロセスが外部化・可視化されていない & 評価分析フェーズが閉じているので HCD プロセスとは言いにくい 28

Slide 29

Slide 29 text

［エディトリアルデザイナー］ 29

Slide 30

Slide 30 text

デザインと編集は同義内容まで踏み込んでデザイン・レイアウト対面ではなく横並びで制作する［エディトリアルデザイナーの役割］ 30

Slide 31

Slide 31 text

エディトリアルデザインもコンテンツそのもの［エディトリアルデザイナーの役割］ただ配置装飾するだけではなく、コンテンツ作りから関わる 31

Slide 32

Slide 32 text

編集デザイン ≒ IA ［出版メディアで行われていること］ものごとを整理し、伝わるようにして届ける。編集デザイン（Edi t or ial De sign ）と IA は、本質的には同じ方向性のもの 32

Slide 33

Slide 33 text

［理解の概念図］［データ］を編集することによって［情報］としての価値を持たせ、ユーザーが体験することで［知識］となり、さらには［知恵］にまで昇華される 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

Slide 34

Slide 34 text

データ情報知識知恵制作者ユーザー体験コンテキストデータ情報知識知恵制作者ユーザー体験コンテキスト E di t o r i al データを集め情報化し、受け取りやすくする行為 34

Slide 35

Slide 35 text

データを集め情報化し、受け取りやすくする D a t a � In forma t ion � Know le dge 35

Slide 36

Slide 36 text

ガチの Small IA ［出版メディアで行われていること］とても具体的で、緻密で、フィジカルな　 I A 36

Slide 37

Slide 37 text

エディトリアルデザインの現場における IA 新人エディトリアルデザイナー時代の経験から、具体例として IA 要素を取り上げる（月刊誌の制作現場です） 37

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

適切な読書体験は「知識」の「知恵化」を促進する Know le dge �� Wi s dom 43

Slide 44

Slide 44 text

エディトリアルデザイン具体例 IA 観点から、読み物における編集デザイン事例を読み解いてみる 44

Slide 45

Slide 45 text

［実例 1. 書籍の本文フォーマット設計］コンテンツが可変であり、それをどう入れ込むか、コンポーネントを設計。仮テキストをもらい、実際に近いもので組版システムをつくる。コンテンツの増減などをきちんと考慮した、CSS 的な設計 45

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

要素の配置や間隔、色、文字装飾、見出しの処理、本文のグリッド、分量に応じたルール…すべてのデザイン処理について指定がされており、データ化された状態で DTP オペレーターに渡すフロー。書式の命名を HTML タグで表現する人も。文字の書式や要素のスタイルを GUI で管理し、適用／一括修正できる。構造とスタイルの分離。属性値 47

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

p h ◯ ◯ ◯ ◯ ◯ ◯ 煮る ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ 材料 1 4 2 5 3 6 ◯◯◯◯◯◯◯◯◯◯◯◯◯◯ ◯◯◯◯◯◯◯◯ カンタン！本格技 7 すみません！一点追加で本文 16W ×32L ライター発注済み調整不可ですテキストはメールにて送付済み料理家さん海外取材のため本日中に一回 PDF ください！ 12 8 cap 30 〜 60W 料理レベル２下準備フライパン

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Slide 52

Slide 52 text

紙やってたデザイナーさんと聞いていたのですごく構えていたら、きちんと CSS で組めるギリギリのところを抑えたパーツ集が送られてきたのでびっくりした。（はじめてのウェブ制作案件にて）某エンジニア氏 52

Slide 53

Slide 53 text

みんなで手分けして調査をまとめよう、できるよね？関口くん。（チームが各々のパートをまとめて集合。時間は終電前）うーん。時間もないし、ここはセンスが必要な局面だから、ボクが朝までにまとめておくよ。（はじめてのウェブのプレゼン案件にて）某著名 IA の H 氏 53

Slide 54

Slide 54 text

何をやってもエディトリアル的なアタマの使い方・専門性はあまり変わらなかった 54

Slide 55

Slide 55 text

IA は本質的な概念。必要とされる思考・それに伴う作業は、媒体特性に限定されるものではない 55

Slide 56

Slide 56 text

IA ≒ Editori al 56

Slide 57

Slide 57 text

まとめ Me dia prop er tie s in IA 57

Slide 58

Slide 58 text

IA のフレームワーク・技術は体系化されているため、再利用性・再現性が高い［ I A の重要性］ビジネス、特にデジタルメディアにおいて非常に有効 58

Slide 59

Slide 59 text

ただし 59

Slide 60

Slide 60 text

［メディア ≒ UI にも種類がある］ 60

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

UI（ ≒ メディア）の数だけ、 IA の対象も広がっている 62

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

IA の視野を広げると、より深い「情報へのまなざし」が得られるのではないか。 64

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

[ Information Architecture ] 66

Slide 67

Slide 67 text

「情報をわかりやすく伝え」「受け手が情報を探しやすくする」ための表現技術 Information Architecture 67