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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. #wireframecomwg
   フル
   CSS
   サイト作り
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. #wireframecomwg
    実例紹介
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. #wireframecomwg
    

    View Slide

26. #wireframecomwg
    

    View Slide

27. #wireframecomwg
    

    View Slide

28. #wireframecomwg
    

    View Slide

29. #wireframecomwg
    

    View Slide

30. #wireframecomwg
    

    View Slide

31. #wireframecomwg
    

    View Slide

32. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

59. #wireframecomwg
    

    View Slide

60. #wireframecomwg
    

    View Slide

61. #wireframecomwg
    明日はどっちだ！
    

    View Slide

62. #wireframecomwg
    そして後編へ
    

    View Slide