$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. 関口 裕
    2017.12.11 HCD-Net IA Seminar | HCD コンピタンス知識編「情報構造の設計・概論」
    情報設計は誰のものか?
    Media properties in IA
    1

    View Slide

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

    View Slide

  3. 自己紹 介
    3

    View Slide

  4. 関口 裕
    ( せきぐち・ゆたか )
    D E S I G N E R
    4

    View Slide

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

    ウェブサイトを中心としたデザイン … 6 年目
    5

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  9. さて
    9

    View Slide

  10. [ テーマ ]
    エディトリアルデザイン
    Editorial Design
    10

    View Slide

  11. [ テーマ ]
    情報設計は誰のものか?
    Media properties in IA
    11

    View Slide

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

    View Slide

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

    View Slide

  14. IA ってなんだっけ
    14

    View Slide

  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

    View Slide

  16. R ichard S aul Wurman
    16

    View Slide

  17. 建築家/グラフィック・デザイナー
    (  編 集 者? )
    R ichard S aul Wurman
    17

    View Slide

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

    View Slide

  19. 19 9 0
    World Wide Web
    19

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23.    出版メディアにおける
       IA
    ( 的なもの )
    23

    View Slide

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

    View Slide

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

    View Slide

  26. [ 編  集 者 ]
    26

    View Slide

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

    View Slide

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

    View Slide

  29. [ エディトリアルデザイナー ]
    29

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  46. View Slide

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

    View Slide

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

    View Slide

  49. p h



















    材料
    1
    4
    2
    5
    3
    6
    ◯◯◯◯◯◯◯◯◯◯◯◯◯◯
    ◯◯◯◯◯◯◯◯
    カンタン!
    本格技
    7











    本文 16W ×32L
    ライター発注済み調整不可です














    料理家さん海外取材のため
    本日中に一回 PDF ください!
    12
    8
    cap 30
    〜 60W














    View Slide

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

    View Slide

  51. 51

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  56.  IA ≒ Editori al
    56

    View Slide

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

    View Slide

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

    View Slide

  59. ただし
    59

    View Slide

  60. [ メディア ≒ UI にも種 類 が ある ]
    60

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  66. [ Information Architecture ]
    66

    View Slide

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

    View Slide

  68.  IA !
    enjoy,
    68

    View Slide

  69. HCD !
    enjoy,
    69

    View Slide

  70. ありがとうございました。

    View Slide