Your SlideShare is downloading. ×
0
マークアップエンジニアと
 情報アーキテクチャ
われわれはどこから来てどこへ行くのか

 ビジネス・アーキテクツ 伊原 力也




                #wireframecomwg
Profile

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


                       #wireframecomwg
今日の内容

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



                 #wireframecomwg
情報アーキテクチャ

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


                  #wir...
インフォメーションアーキテクト(IA)
Ô   データの持っているパターンを整理
    し、複雑なものを明快にする人。
Ô   人が知識への経路を見つけるため
    の情報の構造や経路をつくる人。
Ô   時代の要請により21世紀に新しく
...
今までの自分の歴史を振り返る
 マークアップエンジニアの7年間




             #wireframecomwg
フルCSSサイト作り




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




           #wireframecomwg
kotarokと出会う
 自分
                    yuuさんのサイト


       kotarok




※ero-site.com:日本初のWeb標準エロサイト

                    #wire...
モバイルコンテンツのディレクター




    占い書いたりとか…
            #wireframecomwg
bA入社

Ô「IAやりたいです!><」
Ô「IAの部署は特にないよ」
Ô「えっ」
Ô「マークアップやりなよ」
Ô「えっ」
                 #wireframecomwg
仕事の変遷

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


                 #wireframecomwg
仕事の変遷

① 運用ガイドライン作成
② PM補佐
③ モバイルサイト実装
④ プロトタイプ作成


                 #wireframecomwg
実例紹介




       #wireframecomwg
最初期
設計     ワイヤー
       フレーム




デザイン          ページ
              デザイン




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




デザイン             ページ
                 デザイン




実装               ...
コンポーネント・デザイン
設計     ワイヤー     コンテンツ
       フレーム      仕様書




デザイン           コンポーネント
                デザイン




実装            ...
コンポーネント・システム
                           コンテンツ仕様書

設計     ワイヤー    コンポーネント       ページ
       フレーム      定義          展開




デザイ...
コンポーネント・システム
                           コンテンツ仕様書

設計     ワイヤー    コンポーネント       ページ
       フレーム      定義          展開




デザイ...
HTMLでコンテンツ仕様書




          #wireframecomwg
「Webサイト」の確認
                           コンテンツ仕様書

設計     ワイヤー    コンポーネント        ページ
       フレーム      定義           展開




デザ...
「Webサイト」の確認
                           コンテンツ仕様書

設計     ワイヤー    コンポーネント        ページ
       フレーム      定義           展開




デザ...
HTML版コンテンツ仕様書
                         HTML版コンテンツ仕様書

設計     ワイヤー    コンポーネント          ページ
       フレーム      定義             ...
コンポーネント定義

ÔDWテンプレート
 Ôテンプレートオプションでレイアウト可変

ÔDWライブラリ
 Ô標準コンポーネントのセット

ÔDWテンプレート+DWライブラリ
 =コンポーネント定義リスト
#wireframecomwg
#wireframecomwg
#wireframecomwg
#wireframecomwg
#wireframecomwg
#wireframecomwg
#wireframecomwg
コンテンツ仕様書のページ展開

ÔDWテンプレートをCMSでパブリッシュ
 Ôナビを自動生成した空ページが全ページ分

ÔContributeでページ展開
 Ô空ページにDWライブラリ(共有アセット)を挿入
 Ô内容を記述して公開
Wordテンプレート
Ôスタイルをロックした
 Wordテンプレート作成
 Ô コンポーネントと対応したスタイルに限定

ÔクライアントがWordで
 コンテンツを記述
Ô届いたWordをCotributeにドロップ
Ôコンポーネントが適用され...
HTML版コンテンツ仕様書
                         HTML版コンテンツ仕様書

設計     ワイヤー    コンポーネント          ページ
       フレーム      定義             ...
クライアントとの確認

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

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

Ôモバイル端末で仮説・検証
そういうのがIAなの?




         #wireframecomwg
情報アーキテクチャ

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


                  #wir...
インフォメーションアーキテクト(IA)
Ô   データの持っているパターンを整理
    し、複雑なものを明快にする人。
Ô   人が知識への経路を見つけるため
    の情報の構造や経路をつくる人。
Ô   時代の要請により21世紀に新しく
...
これがIA?

Ôサイトマップ・ワイヤーを作る人=IA?
Ô上流の情報アーキテクチャ担当=IA?


戦略        要件   構造        骨格    表層        実装




     分析             統合 ...
ここにも情報アーキテクチャ!

Ô情報アーキテクチャ:伝達・提示・維持
Ô前工程を実現するための「実施」


戦略        要件   構造        骨格




     分析             統合

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




            #wireframecomwg
コンポーネント・テンプレート設計

Ôコンポーネントの設計
 Ô表現パターンの割り出し
 Ôパターンのカバー範囲の想定

Ô変化に耐えうる構造の設計
 Ô使いどころの定義
 Ô組み合わせの定義
 Ô増加・減少したときの定義


        ...
UI設計

ÔUIのイメージ
 Ô要求を最大限実現するためのUI
 Ô要件に沿う中で現時点で実装可能なUI

Ô動きのある画面の仕様化
 Ôサイト内のUIルールの策定
 Ô個別のUIの設計

Ôプロトタイプ作成とテスト
            ...
CMS選定・テンプレート設計

ÔCMSを選定
 Ô情報提供者のリテラシー、
  更新頻度、環境…

Ô管理画面の設計
 Ô情報のインプットを的確に行える
 Ô情報・ワークフローごとに最適化

Ô出力テンプレートの設計
 Ôコンポーネント・テン...
ガイドライン

Ô対象者の定義
 Ô情報提供者のリテラシー、
  更新頻度、環境…

Ôガイドラインの情報設計
 Ô「運用者」に最適な情報設計
 Ô変化に耐えうる構造の設計




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



            #wireframecomwg
「ならでは」とは

ÔWebの情報設計には、
 Web、そしてHTMLの理解が必要




               #wireframecomwg
アクセシビリティ
 真の意味での接近容易性
       ユーザー




                    外部サイト
デバイス




                  #wireframecomwg
URLの設計

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




                 #wireframecomwg
外部サイトを前提にした設計

Ô外部サイトを「使う」設計
 Ô OpenID, OAuth, Youtube, GoogleMaps...


Ô外部サイトに「使ってもらう」設計
 ÔSEO
 ÔHTML5
 Ômicroformats, Mi...
各種デバイス・状況への対応

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


                #wireframecomwg
ユーザー




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



             #wireframecomwg
ユーザー




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



               #wireframecomwg
そんな役割の呼び方は?


戦略    要件    構造    骨格    表層      実装




Ô マークアップエンジニア
Ô マークアップエンジニア/インフォメーションアーキテクト
Ô フロントエンドエンジニア
Ô フロントエンドア...
プロジェクトで
何ができるかが大事




       #wireframecomwg
#wireframecomwg
#wireframecomwg
明日はどっちだ!




       #wireframecomwg
そして後編へ




         #wireframecomwg
マークアップエンジニアと情報アーキテクチャ
Upcoming SlideShare
Loading in...5
×

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

15,562

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: Technology
0 Comments
43 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
15,562
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
95
Comments
0
Likes
43
Embeds 0
No embeds

No notes for slide

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

  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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×