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

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

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

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

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

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

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

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

#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） Ô データの持っているパターンを整理し、複雑なものを明快にする人。 Ô 人が知識への経路を見つけるための情報の構造や経路をつくる人。 Ô 時代の要請により２１世紀に新しく生まれつつある、明快さ、理解、情報の組織化を専門とした職業。 #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

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

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

by Rikiya Ihara on Jun 18, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 1,157

Statistics

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