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