Tweet
Tweet

Slide 1

Slide 1 text

#wireframecomwg マークアップエンジニアと 情報アーキテクチャ われわれはどこから来てどこへ行くのか ビジネス・アーキテクツ 伊原 力也

Slide 2

Slide 2 text

#wireframecomwg Profile Ô 伊原 力也 ÔBusiness Architects Ô@magi1125 Ôhttp://mokuva.com

Slide 3

Slide 3 text

#wireframecomwg 今日の内容 ① 今までの自分の歴史を振り返る ② 実例紹介 ③ マークアップエンジニアの 情報アーキテクチャ

Slide 4

Slide 4 text

#wireframecomwg 情報アーキテクチャ ① 利用者が情報を探し、 活用できるようにする ② 情報提供者が自分の 意図通りに情報を提示できる ③ サイト内での情報の変化、 増減によるクオリティ低下を防ぐ

Slide 5

Slide 5 text

#wireframecomwg インフォメーションアーキテクト（ IA ） Ô データの持っているパターンを整理 し、複雑なものを明快にする人。 Ô 人が知識への経路を見つけるため の情報の構造や経路をつくる人。 Ô 時代の要請により２１世紀に新しく 生まれつつある、明快さ、理解、情 報の組織化を専門とした職業。

Slide 6

Slide 6 text

#wireframecomwg 今までの自分の歴史を振り返る マークアップエンジニアの 7 年間

Slide 7

Slide 7 text

#wireframecomwg フル CSS サイト作り

Slide 8

Slide 8 text

#wireframecomwg CSS でイケてるデザインサイト

Slide 9

Slide 9 text

#wireframecomwg kotarok と出会う kotarok 自分 yuu さんのサイト ※ ero-site.com: 日本初の Web 標準エロサイト

Slide 10

Slide 10 text

#wireframecomwg モバイルコンテンツのディレクター 占い書いたりとか …

Slide 11

Slide 11 text

#wireframecomwg bA 入社 Ô 「 IA やりたいです！＞＜」 Ô 「 IA の部署は特にないよ」 Ô 「えっ」 Ô 「マークアップやりなよ」 Ô 「えっ」

Slide 12

Slide 12 text

#wireframecomwg 仕事の変遷 ① いわゆる HTML コーダー ② ガワとコンポーネント実装 ③ コンポーネント設計 ④ CMS 導入・テンプレート設計

Slide 13

Slide 13 text

#wireframecomwg 仕事の変遷 ① 運用ガイドライン作成 ② PM 補佐 ③ モバイルサイト実装 ④ プロトタイプ作成

Slide 14

Slide 14 text

#wireframecomwg 実例紹介

Slide 15

Slide 15 text

#wireframecomwg 最初期 ページ デザイン ワイヤー フレーム ページ 実装 設計 デザイン 実装

Slide 16

Slide 16 text

#wireframecomwg コンテンツ仕様書 ページ デザイン ワイヤー フレーム ページ 実装 コンテンツ 仕様書 設計 デザイン 実装

Slide 17

Slide 17 text

#wireframecomwg コンポーネントリスト コンポーネント・デザイン コンテンツ 仕様書 コンポーネント デザイン コンポーネント 実装 ワイヤー フレーム ページ 実装 デザイン 実装 設計

Slide 18

Slide 18 text

コンテンツ仕様書 コンポーネント・システム コンポーネント 定義 ページ 展開 コンポーネント デザイン コンポーネント 実装 ワイヤー フレーム ページ 実装 コンポーネントリスト デザイン 実装 設計

Slide 19

Slide 19 text

コンテンツ仕様書 コンポーネント・システム コンポーネント 定義 ページ 展開 コンポーネント デザイン コンポーネント 実装 ワイヤー フレーム ページ 実装 コンポーネントリスト デザイン 実装 設計

Slide 20

Slide 20 text

#wireframecomwg HTML でコンテンツ仕様書

Slide 21

Slide 21 text

#wireframecomwg コンテンツ仕様書 「 Web サイト」の確認 コンポーネント 定義 ページ 展開 コンポーネント デザイン コンポーネント 実装 ワイヤー フレーム ページ 実装 コンポーネントリスト デザイン 実装 設計

Slide 22

Slide 22 text

#wireframecomwg コンテンツ仕様書 「 Web サイト」の確認 コンポーネント 定義 ページ 展開 コンポーネント デザイン コンポーネント 実装 ワイヤー フレーム ページ 実装 コンポーネントリスト デザイン 実装 設計

Slide 23

Slide 23 text

HTML 版コンテンツ仕様書 HTML 版コンテンツ仕様書 コンポーネント 定義 ページ 展開 コンポーネント デザイン コンポーネント 実装 ワイヤー フレーム ページ 実装 コンポーネントリスト デザイン 実装 設計

Slide 24

Slide 24 text

コンポーネント定義 ÔDW テンプレート Ô テンプレートオプションでレイアウト可変 ÔDW ライブラリ Ô 標準コンポーネントのセット ÔDW テンプレート＋ DW ライブラリ ＝コンポーネント定義リスト

Slide 25

Slide 25 text

#wireframecomwg

Slide 26

Slide 26 text

#wireframecomwg

Slide 27

Slide 27 text

#wireframecomwg

Slide 28

Slide 28 text

#wireframecomwg

Slide 29

Slide 29 text

#wireframecomwg

Slide 30

Slide 30 text

#wireframecomwg

Slide 31

Slide 31 text

#wireframecomwg

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

コンテンツ仕様書のページ展開 ÔDW テンプレートを CMS でパブリッシュ Ô ナビを自動生成した空ページが全ページ分 ÔContribute でページ展開 Ô 空ページに DW ライブラリ（共有アセット）を挿入 Ô 内容を記述して公開

Slide 34

Slide 34 text

Word テンプレート Ô スタイルをロックした Word テンプレート作成 Ô コンポーネントと対応したスタイルに限定 Ô クライアントが Word で コンテンツを記述 Ô 届いた Word を Cotribute にドロップ Ô コンポーネントが適用された状態で 挿入

Slide 35

Slide 35 text

HTML 版コンテンツ仕様書 HTML 版コンテンツ仕様書 コンポーネント 定義 ページ 展開 コンポーネント デザイン コンポーネント 実装 ワイヤー フレーム ページ 実装 コンポーネントリスト デザイン 実装 設計

Slide 36

Slide 36 text

クライアントとの確認 Ô オンラインで確認 ÔID 付きページ一覧を作成 Ônoteit でコメントをやりとり Ôhttp://itworks.no.land.to/

Slide 37

Slide 37 text

クライアントとの確認 Ô オフラインで確認 ÔAcrobat の Web Capture で PDF 化 Ô 一括キャプチャ後、 Acrobat で単一 PDF 化 ÔPDF 上の注釈でやりとり Ô 印刷して赤入れも可能

Slide 38

Slide 38 text

HTML 仕様書の応用 Ô モバイル端末で仮説・検証

Slide 39

Slide 39 text

#wireframecomwg そういうのが IA なの？

Slide 40

Slide 40 text

#wireframecomwg 情報アーキテクチャ ① 利用者が情報を探し、 活用できるようにする ② 情報提供者が自分の 意図通りに情報を提示できる ③ サイト内での情報の変化、 増減によるクオリティ低下を防ぐ

Slide 41

Slide 41 text

#wireframecomwg インフォメーションアーキテクト（ IA ） Ô データの持っているパターンを整理 し、複雑なものを明快にする人。 Ô 人が知識への経路を見つけるため の情報の構造や経路をつくる人。 Ô 時代の要請により２１世紀に新しく 生まれつつある、明快さ、理解、情 報の組織化を専門とした職業。

Slide 42

Slide 42 text

#wireframecomwg これが IA ？ Ô サイトマップ・ワイヤーを作る人＝ IA ？ Ô 上流の情報アーキテクチャ担当＝ IA ？ 戦略 要件 構造 骨格 表層 実装 分析 統合 実施

Slide 43

Slide 43 text

#wireframecomwg ここにも情報アーキテクチャ！ 戦略 要件 構造 骨格 Ô 情報アーキテクチャ：伝達・提示・維持 Ô 前工程を実現するための「実施」 分析 統合

Slide 44

Slide 44 text

#wireframecomwg マークアップエンジニアの 情報アーキテクチャ こういうこと、やってるのでは？編

Slide 45

Slide 45 text

#wireframecomwg コンポーネント・テンプレート設計 Ô コンポーネントの設計 Ô 表現パターンの割り出し Ô パターンのカバー範囲の想定 Ô 変化に耐えうる構造の設計 Ô 使いどころの定義 Ô 組み合わせの定義 Ô 増加・減少したときの定義

Slide 46

Slide 46 text

#wireframecomwg UI 設計 ÔUI のイメージ Ô 要求を最大限実現するための UI Ô 要件に沿う中で現時点で実装可能な UI Ô 動きのある画面の仕様化 Ô サイト内の UI ルールの策定 Ô 個別の UI の設計 Ô プロトタイプ作成とテスト

Slide 47

Slide 47 text

#wireframecomwg CMS 選定・テンプレート設計 ÔCMS を選定 Ô 情報提供者のリテラシー、 更新頻度、環境 … Ô 管理画面の設計 Ô 情報のインプットを的確に行える Ô 情報・ワークフローごとに最適化 Ô 出力テンプレートの設計 Ô コンポーネント・テンプレート設計に沿ったもの

Slide 48

Slide 48 text

#wireframecomwg ガイドライン Ô 対象者の定義 Ô 情報提供者のリテラシー、 更新頻度、環境 … Ô ガイドラインの情報設計 Ô 「運用者」に最適な情報設計 Ô 変化に耐えうる構造の設計

Slide 49

Slide 49 text

#wireframecomwg マークアップエンジニアの 情報アーキテクチャ マークアップエンジニア 「ならでは」の設計編

Slide 50

Slide 50 text

#wireframecomwg 「ならでは」とは ÔWeb の情報設計には、 Web 、そして HTML の理解が必要

Slide 51

Slide 51 text

#wireframecomwg 外部サイト 真の意味での接近容易性 アクセシビリティ ユーザー デバイス

Slide 52

Slide 52 text

#wireframecomwg URL の設計 Ô シンプルな使いやすい URL Ô 変わらない URL Ô 動きのある「状態」に対しての URL

Slide 53

Slide 53 text

#wireframecomwg 外部サイトを前提にした設計 Ô 外部サイトを「使う」設計 Ô OpenID, OAuth, Youtube, GoogleMaps... Ô 外部サイトに「使ってもらう」設計 ÔSEO ÔHTML5 Ômicroformats, MicroData, RDFa, Atom... ÔWeb サイトを Web API 化

Slide 54

Slide 54 text

#wireframecomwg 各種デバイス・状況への対応 Ô デバイスに依存しない設計 Ô デバイスに最適化した設計 Ô プログレッシブ・エンハンスメント Ô いわゆるアクセシビリティ・代替表示

Slide 55

Slide 55 text

#wireframecomwg 外部サイト ユーザー 全部、重要かつ 後から言われても困る系

Slide 56

Slide 56 text

#wireframecomwg 外部サイト ユーザー 上流にコミットして これらを前提に設計する人が必要

Slide 57

Slide 57 text

#wireframecomwg そんな役割の呼び方は？ 戦略 要件 構造 骨格 表層 実装 Ô マークアップエンジニア Ô マークアップエンジニア／インフォメーションアーキテクト Ô フロントエンドエンジニア Ô フロントエンドアーキテクト

Slide 58

Slide 58 text

#wireframecomwg プロジェクトで 何ができるかが大事

Slide 59

Slide 59 text

#wireframecomwg

Slide 60

Slide 60 text

#wireframecomwg

Slide 61

Slide 61 text

#wireframecomwg 明日はどっちだ！

Slide 62

Slide 62 text

#wireframecomwg そして後編へ