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

20,027 views
20,991 views

Published on

Ustream:ワイヤーコミュニケーション 第2回
http://www.ustream.tv/recorded/7738057

Togetter:お気に入り
第2回「ワイヤーフレームコミュニケーション研究会」 - ハッシュタグ " #wireframecomwg " まとめ
http://togetter.com/li/30127

「ワイヤーフレームコミュニケーション研究会第2回」のお知らせ
http://blog.sinap.jp/2010/05/wireframecomwg02-cm.html

Published in: Design
0 Comments
44 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
20,027
On SlideShare
0
From Embeds
0
Number of Embeds
10,302
Actions
Shares
0
Downloads
97
Comments
0
Likes
44
Embeds 0
No embeds

No notes for slide

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

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

×