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
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
複 雑なものを明快にする人 情 報の構 造や経 路をつくる人 明快さ、 理 解 、 情 報 組 織 化の専門職 “ 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
［ 理 解 の 概 念 図 ］ ［データ］を編集することによって［ 情報 ］としての価値を持たせ、 ユーザーが 体験することで［ 知識 ］となり、さらには［ 知恵 ］にまで 昇華される 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
原稿整理 ［ 現 場に配 属されてはじめに与えられ た 仕 事 ］ 要素が 足りているか、ファイル名のリネームや画像形式の最適化、 テキストの整形（ 媒体に合わせた表記ルールに整える） 、サーバー上の原稿ファイルの管理 etc. 別のスタッフが 見てもわかるような、印刷事故を起こさない運用の実施。 データを俯瞰して取り扱いやすい状 態に加工する D a t a cle an s ing E p i s o d e # 1 38
原稿の流し込み ［ はじめてデ ザ インデータを 触らせてもらった時 の 仕 事 ］ 量や内容による各種調整。行数やテキスト内容によるレイアウト調整と最適化、 それに伴う原稿の内容や量についての交渉など。 変数の把握。ページレイアウトにおいての変数がどこにあり、 それをどう処理するべきかの方法を教わる。 要素の性質やコンテキストを理 解し、 それぞ れの情報にとって適切な状 態を維持する D a t a � In forma t ion E p i s o d e # 2 39
重 要 情報の構造化 ［ はじめてページデ ザ インを 任され た時に、A D がしてくれ たこと ］ 原稿（テキスト・図版 ）を紙に出力し、赤ペンでマークしながら、 見出しの階層、本文なのか入れ子なのか、あるべき見出しや必要ない見出しがないか、 見せ方の構成がコンテンツの構造として正しいか、などを横で 整理する様を見せてくれた。 原稿の「読み解き」と「意味付け＝ Markup」をすることで 、 コンテンツの把握・整 理・構 造 化（ 編集 ）を行う In forma t ion � Know le dge E p i s o d e # 3 -1 40
構造とスタイルの分離 ［ はじめてページデ ザ インを 任され た時に、A D がしてくれ たこと ］ 内容を理解した上で 、 色を使わず 、スミ文字とグレーの矩形、媒体ルールの書式のみで まずレイアウトをつくるよう指示された。 デザインとしての「 構成 」が 悪ければ 、意匠をどれだけ頑張ってもよくならない。 コンテンツファースト。DOM と s t yle の分離 In forma t ion � Know le dge E p i s o d e # 3 - 2 41
運用に配慮した設計 ［ はじめてページデ ザ インを 任され た時に、A D がしてくれ たこと ］ コンテンツが可変する可能性がどこまでデザイン上考慮されているか、一問一答。 この文章は確定なのか、ステイクホルダーが 外部にいるか、 図版はノートリミング 指定なのか、差し替えはあり得るか、潜 在的な掲載点数はどうか… 後工程や運用を考慮し、ベストの前にベターをどれだけ底上げできるかの検討を徹底的に叩き込まれる。 運 用・継続 性を鑑みた IA。カイゼンサイクル的な視 点も含まれる In forma t ion � Know le dge E p i s o d e # 3 -3 42
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
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
sekiguchiy
bebe
mixil
hiro93n
atamaplus
0sanai
morganepeng
ozontech
yampuu
ryotanakaya
jlugia
gr2m
jrom
hursman
brad_frost
philhawksworth
speakerdeck
zenorocha
jnunemaker
bkeepers
robhawkes
searls