マークアップエンジニアと情報アーキテクチャ

Transcript

1. #wireframecomwg マークアップエンジニアと 情報アーキテクチャ われわれはどこから来てどこへ行くのか ビジネス・アーキテクツ 伊原 力也
2. #wireframecomwg Profile Ô 伊原 力也 ÔBusiness Architects Ô@magi1125 Ôhttp://mokuva.com
3. #wireframecomwg 今日の内容 ① 今までの自分の歴史を振り返る ② 実例紹介 ③ マークアップエンジニアの 情報アーキテクチャ
4. #wireframecomwg 情報アーキテクチャ ① 利用者が情報を探し、 活用できるようにする ② 情報提供者が自分の 意図通りに情報を提示できる ③ サイト内での情報の変化、 増減によるクオリティ低下を防ぐ
5. #wireframecomwg インフォメーションアーキテクト（ IA ） Ô データの持っているパターンを整理 し、複雑なものを明快にする人。 Ô 人が知識への経路を見つけるため の情報の構造や経路をつくる人。 Ô 時代の要請により２１世紀に新しく 生まれつつある、明快さ、理解、情 報の組織化を専門とした職業。
6. #wireframecomwg 今までの自分の歴史を振り返る マークアップエンジニアの 7 年間
7. #wireframecomwg フル CSS サイト作り
8. #wireframecomwg CSS でイケてるデザインサイト
9. #wireframecomwg kotarok と出会う kotarok 自分 yuu さんのサイト ※ ero-site.com: 日本初の Web 標準エロサイト
10. #wireframecomwg モバイルコンテンツのディレクター 占い書いたりとか …
11. #wireframecomwg bA 入社 Ô 「 IA やりたいです！＞＜」 Ô 「 IA の部署は特にないよ」 Ô 「えっ」 Ô 「マークアップやりなよ」 Ô 「えっ」
12. #wireframecomwg 仕事の変遷 ① いわゆる HTML コーダー ② ガワとコンポーネント実装 ③ コンポーネント設計 ④ CMS 導入・テンプレート設計
13. #wireframecomwg 仕事の変遷 ① 運用ガイドライン作成 ② PM 補佐 ③ モバイルサイト実装 ④ プロトタイプ作成
14. #wireframecomwg 実例紹介
15. #wireframecomwg 最初期 ページ デザイン ワイヤー フレーム ページ 実装 設計 デザイン 実装
16. #wireframecomwg コンテンツ仕様書 ページ デザイン ワイヤー フレーム ページ 実装 コンテンツ 仕様書 設計 デザイン 実装
17. #wireframecomwg コンポーネントリスト コンポーネント・デザイン コンテンツ 仕様書 コンポーネント デザイン コンポーネント 実装 ワイヤー フレーム ページ 実装 デザイン 実装 設計
18. コンテンツ仕様書 コンポーネント・システム コンポーネント 定義 ページ 展開 コンポーネント デザイン コンポーネント 実装 ワイヤー フレーム ページ 実装 コンポーネントリスト デザイン 実装 設計
19. コンテンツ仕様書 コンポーネント・システム コンポーネント 定義 ページ 展開 コンポーネント デザイン コンポーネント 実装 ワイヤー フレーム ページ 実装 コンポーネントリスト デザイン 実装 設計
20. #wireframecomwg HTML でコンテンツ仕様書
21. #wireframecomwg コンテンツ仕様書 「 Web サイト」の確認 コンポーネント 定義 ページ 展開 コンポーネント デザイン コンポーネント 実装 ワイヤー フレーム ページ 実装 コンポーネントリスト デザイン 実装 設計
22. #wireframecomwg コンテンツ仕様書 「 Web サイト」の確認 コンポーネント 定義 ページ 展開 コンポーネント デザイン コンポーネント 実装 ワイヤー フレーム ページ 実装 コンポーネントリスト デザイン 実装 設計
23. HTML 版コンテンツ仕様書 HTML 版コンテンツ仕様書 コンポーネント 定義 ページ 展開 コンポーネント デザイン コンポーネント 実装 ワイヤー フレーム ページ 実装 コンポーネントリスト デザイン 実装 設計
24. コンポーネント定義 ÔDW テンプレート Ô テンプレートオプションでレイアウト可変 ÔDW ライブラリ Ô 標準コンポーネントのセット ÔDW テンプレート＋ DW ライブラリ ＝コンポーネント定義リスト
25. #wireframecomwg
26. #wireframecomwg
27. #wireframecomwg
28. #wireframecomwg
29. #wireframecomwg
30. #wireframecomwg
31. #wireframecomwg
33. コンテンツ仕様書のページ展開 ÔDW テンプレートを CMS でパブリッシュ Ô ナビを自動生成した空ページが全ページ分 ÔContribute でページ展開 Ô 空ページに DW ライブラリ（共有アセット）を挿入 Ô 内容を記述して公開
34. Word テンプレート Ô スタイルをロックした Word テンプレート作成 Ô コンポーネントと対応したスタイルに限定 Ô クライアントが Word で コンテンツを記述 Ô 届いた Word を Cotribute にドロップ Ô コンポーネントが適用された状態で 挿入
35. HTML 版コンテンツ仕様書 HTML 版コンテンツ仕様書 コンポーネント 定義 ページ 展開 コンポーネント デザイン コンポーネント 実装 ワイヤー フレーム ページ 実装 コンポーネントリスト デザイン 実装 設計
36. クライアントとの確認 Ô オンラインで確認 ÔID 付きページ一覧を作成 Ônoteit でコメントをやりとり Ôhttp://itworks.no.land.to/
37. クライアントとの確認 Ô オフラインで確認 ÔAcrobat の Web Capture で PDF 化 Ô 一括キャプチャ後、 Acrobat で単一 PDF 化 ÔPDF 上の注釈でやりとり Ô 印刷して赤入れも可能
38. HTML 仕様書の応用 Ô モバイル端末で仮説・検証
39. #wireframecomwg そういうのが IA なの？
40. #wireframecomwg 情報アーキテクチャ ① 利用者が情報を探し、 活用できるようにする ② 情報提供者が自分の 意図通りに情報を提示できる ③ サイト内での情報の変化、 増減によるクオリティ低下を防ぐ
41. #wireframecomwg インフォメーションアーキテクト（ IA ） Ô データの持っているパターンを整理 し、複雑なものを明快にする人。 Ô 人が知識への経路を見つけるため の情報の構造や経路をつくる人。 Ô 時代の要請により２１世紀に新しく 生まれつつある、明快さ、理解、情 報の組織化を専門とした職業。
42. #wireframecomwg これが IA ？ Ô サイトマップ・ワイヤーを作る人＝ IA ？ Ô 上流の情報アーキテクチャ担当＝ IA ？ 戦略 要件 構造 骨格 表層 実装 分析 統合 実施
43. #wireframecomwg ここにも情報アーキテクチャ！ 戦略 要件 構造 骨格 Ô 情報アーキテクチャ：伝達・提示・維持 Ô 前工程を実現するための「実施」 分析 統合
44. #wireframecomwg マークアップエンジニアの 情報アーキテクチャ こういうこと、やってるのでは？編
45. #wireframecomwg コンポーネント・テンプレート設計 Ô コンポーネントの設計 Ô 表現パターンの割り出し Ô パターンのカバー範囲の想定 Ô 変化に耐えうる構造の設計 Ô 使いどころの定義 Ô 組み合わせの定義 Ô 増加・減少したときの定義
46. #wireframecomwg UI 設計 ÔUI のイメージ Ô 要求を最大限実現するための UI Ô 要件に沿う中で現時点で実装可能な UI Ô 動きのある画面の仕様化 Ô サイト内の UI ルールの策定 Ô 個別の UI の設計 Ô プロトタイプ作成とテスト
47. #wireframecomwg CMS 選定・テンプレート設計 ÔCMS を選定 Ô 情報提供者のリテラシー、 更新頻度、環境 … Ô 管理画面の設計 Ô 情報のインプットを的確に行える Ô 情報・ワークフローごとに最適化 Ô 出力テンプレートの設計 Ô コンポーネント・テンプレート設計に沿ったもの
48. #wireframecomwg ガイドライン Ô 対象者の定義 Ô 情報提供者のリテラシー、 更新頻度、環境 … Ô ガイドラインの情報設計 Ô 「運用者」に最適な情報設計 Ô 変化に耐えうる構造の設計
49. #wireframecomwg マークアップエンジニアの 情報アーキテクチャ マークアップエンジニア 「ならでは」の設計編
50. #wireframecomwg 「ならでは」とは ÔWeb の情報設計には、 Web 、そして HTML の理解が必要
51. #wireframecomwg 外部サイト 真の意味での接近容易性 アクセシビリティ ユーザー デバイス
52. #wireframecomwg URL の設計 Ô シンプルな使いやすい URL Ô 変わらない URL Ô 動きのある「状態」に対しての URL
53. #wireframecomwg 外部サイトを前提にした設計 Ô 外部サイトを「使う」設計 Ô OpenID, OAuth, Youtube, GoogleMaps... Ô 外部サイトに「使ってもらう」設計 ÔSEO ÔHTML5 Ômicroformats, MicroData, RDFa, Atom... ÔWeb サイトを Web API 化
54. #wireframecomwg 各種デバイス・状況への対応 Ô デバイスに依存しない設計 Ô デバイスに最適化した設計 Ô プログレッシブ・エンハンスメント Ô いわゆるアクセシビリティ・代替表示
55. #wireframecomwg 外部サイト ユーザー 全部、重要かつ 後から言われても困る系
56. #wireframecomwg 外部サイト ユーザー 上流にコミットして これらを前提に設計する人が必要
57. #wireframecomwg そんな役割の呼び方は？ 戦略 要件 構造 骨格 表層 実装 Ô マークアップエンジニア Ô マークアップエンジニア／インフォメーションアーキテクト Ô フロントエンドエンジニア Ô フロントエンドアーキテクト
58. #wireframecomwg プロジェクトで 何ができるかが大事
59. #wireframecomwg
60. #wireframecomwg
61. #wireframecomwg 明日はどっちだ！
62. #wireframecomwg そして後編へ