• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
マークアップエンジニアと情報アーキテクチャ
 

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

on

  • 10,772 views

Ustream:ワイヤーコミュニケーション 第2回 ...

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

Statistics

Views

Total Views
10,772
Views on SlideShare
8,771
Embed Views
2,001

Actions

Likes
38
Downloads
85
Comments
0

11 Embeds 2,001

http://wireframecomwg.greative.jp 1957
http://s.deeeki.com 18
https://twitter.com 8
http://translate.googleusercontent.com 5
http://paper.li 4
http://wireframecomwg.1234-56-7890.com 2
http://a0.twimg.com 2
https://si0.twimg.com 2
http://static.slideshare.net 1
http://localhost 1
http://www.slideshare.net 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • マークアップエンジニアと 情報アーキテクチャ われわれはどこから来てどこへ行くのか ビジネス・アーキテクツ 伊原 力也 #wireframecomwg
    • Profile Ô伊原 力也 ÔBusiness Architects Ô@magi1125 Ôhttp://mokuva.com #wireframecomwg
    • 今日の内容 ① 今までの自分の歴史を振り返る ② 実例紹介 ③ マークアップエンジニアの 情報アーキテクチャ #wireframecomwg
    • 情報アーキテクチャ ① 利用者が情報を探し、 活用できるようにする ② 情報提供者が自分の 意図通りに情報を提示できる ③ サイト内での情報の変化、 増減によるクオリティ低下を防ぐ #wireframecomwg
    • インフォメーションアーキテクト(IA) Ô データの持っているパターンを整理 し、複雑なものを明快にする人。 Ô 人が知識への経路を見つけるため の情報の構造や経路をつくる人。 Ô 時代の要請により21世紀に新しく 生まれつつある、明快さ、理解、情 報の組織化を専門とした職業。 #wireframecomwg
    • 今までの自分の歴史を振り返る マークアップエンジニアの7年間 #wireframecomwg
    • フルCSSサイト作り #wireframecomwg
    • CSSでイケてるデザインサイト #wireframecomwg
    • kotarokと出会う 自分 yuuさんのサイト kotarok ※ero-site.com:日本初のWeb標準エロサイト #wireframecomwg
    • モバイルコンテンツのディレクター 占い書いたりとか… #wireframecomwg
    • bA入社 Ô「IAやりたいです!><」 Ô「IAの部署は特にないよ」 Ô「えっ」 Ô「マークアップやりなよ」 Ô「えっ」 #wireframecomwg
    • 仕事の変遷 ① いわゆるHTMLコーダー ② ガワとコンポーネント実装 ③ コンポーネント設計 ④ CMS導入・テンプレート設計 #wireframecomwg
    • 仕事の変遷 ① 運用ガイドライン作成 ② PM補佐 ③ モバイルサイト実装 ④ プロトタイプ作成 #wireframecomwg
    • 実例紹介 #wireframecomwg
    • 最初期 設計 ワイヤー フレーム デザイン ページ デザイン 実装 ページ 実装 #wireframecomwg
    • コンテンツ仕様書 設計 ワイヤー コンテンツ フレーム 仕様書 デザイン ページ デザイン 実装 ページ 実装 #wireframecomwg
    • コンポーネント・デザイン 設計 ワイヤー コンテンツ フレーム 仕様書 デザイン コンポーネント デザイン 実装 コンポーネント ページ 実装 実装 コンポーネントリスト #wireframecomwg
    • コンポーネント・システム コンテンツ仕様書 設計 ワイヤー コンポーネント ページ フレーム 定義 展開 デザイン コンポーネント デザイン 実装 コンポーネント ページ 実装 実装 コンポーネントリスト
    • コンポーネント・システム コンテンツ仕様書 設計 ワイヤー コンポーネント ページ フレーム 定義 展開 デザイン コンポーネント デザイン 実装 コンポーネント ページ 実装 実装 コンポーネントリスト
    • HTMLでコンテンツ仕様書 #wireframecomwg
    • 「Webサイト」の確認 コンテンツ仕様書 設計 ワイヤー コンポーネント ページ フレーム 定義 展開 デザイン コンポーネント デザイン 実装 コンポーネント ページ 実装 実装 コンポーネントリスト #wireframecomwg
    • 「Webサイト」の確認 コンテンツ仕様書 設計 ワイヤー コンポーネント ページ フレーム 定義 展開 デザイン コンポーネント デザイン 実装 コンポーネント ページ 実装 実装 コンポーネントリスト #wireframecomwg
    • 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
    • 情報アーキテクチャ ① 利用者が情報を探し、 活用できるようにする ② 情報提供者が自分の 意図通りに情報を提示できる ③ サイト内での情報の変化、 増減によるクオリティ低下を防ぐ #wireframecomwg
    • インフォメーションアーキテクト(IA) Ô データの持っているパターンを整理 し、複雑なものを明快にする人。 Ô 人が知識への経路を見つけるため の情報の構造や経路をつくる人。 Ô 時代の要請により21世紀に新しく 生まれつつある、明快さ、理解、情 報の組織化を専門とした職業。 #wireframecomwg
    • これがIA? Ôサイトマップ・ワイヤーを作る人=IA? Ô上流の情報アーキテクチャ担当=IA? 戦略 要件 構造 骨格 表層 実装 分析 統合 実施 #wireframecomwg
    • ここにも情報アーキテクチャ! Ô情報アーキテクチャ:伝達・提示・維持 Ô前工程を実現するための「実施」 戦略 要件 構造 骨格 分析 統合 #wireframecomwg
    • マークアップエンジニアの 情報アーキテクチャ こういうこと、やってるのでは?編 #wireframecomwg
    • コンポーネント・テンプレート設計 Ôコンポーネントの設計 Ô表現パターンの割り出し Ôパターンのカバー範囲の想定 Ô変化に耐えうる構造の設計 Ô使いどころの定義 Ô組み合わせの定義 Ô増加・減少したときの定義 #wireframecomwg
    • UI設計 ÔUIのイメージ Ô要求を最大限実現するためのUI Ô要件に沿う中で現時点で実装可能なUI Ô動きのある画面の仕様化 Ôサイト内のUIルールの策定 Ô個別のUIの設計 Ôプロトタイプ作成とテスト #wireframecomwg
    • CMS選定・テンプレート設計 ÔCMSを選定 Ô情報提供者のリテラシー、 更新頻度、環境… Ô管理画面の設計 Ô情報のインプットを的確に行える Ô情報・ワークフローごとに最適化 Ô出力テンプレートの設計 Ôコンポーネント・テンプレート設計に沿ったもの #wireframecomwg
    • ガイドライン Ô対象者の定義 Ô情報提供者のリテラシー、 更新頻度、環境… Ôガイドラインの情報設計 Ô「運用者」に最適な情報設計 Ô変化に耐えうる構造の設計 #wireframecomwg
    • マークアップエンジニアの 情報アーキテクチャ マークアップエンジニア 「ならでは」の設計編 #wireframecomwg
    • 「ならでは」とは ÔWebの情報設計には、 Web、そしてHTMLの理解が必要 #wireframecomwg
    • アクセシビリティ 真の意味での接近容易性 ユーザー 外部サイト デバイス #wireframecomwg
    • URLの設計 Ôシンプルな使いやすいURL Ô変わらないURL Ô動きのある「状態」に対してのURL #wireframecomwg
    • 外部サイトを前提にした設計 Ô外部サイトを「使う」設計 Ô OpenID, OAuth, Youtube, GoogleMaps... Ô外部サイトに「使ってもらう」設計 ÔSEO ÔHTML5 Ômicroformats, MicroData, RDFa, Atom... ÔWebサイトをWeb API化 #wireframecomwg
    • 各種デバイス・状況への対応 Ôデバイスに依存しない設計 Ôデバイスに最適化した設計 Ôプログレッシブ・エンハンスメント Ôいわゆるアクセシビリティ・代替表示 #wireframecomwg
    • ユーザー 全部、重要かつ 外部サイト 後から言われても困る系 #wireframecomwg
    • ユーザー 上流にコミットして 外部サイト これらを前提に設計する人が必要 #wireframecomwg
    • そんな役割の呼び方は? 戦略 要件 構造 骨格 表層 実装 Ô マークアップエンジニア Ô マークアップエンジニア/インフォメーションアーキテクト Ô フロントエンドエンジニア Ô フロントエンドアーキテクト #wireframecomwg
    • プロジェクトで 何ができるかが大事 #wireframecomwg
    • #wireframecomwg
    • #wireframecomwg
    • 明日はどっちだ! #wireframecomwg
    • そして後編へ #wireframecomwg