「WEBのIA設計とYahoo!の効率化」

| 0 comments

  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

IA設計が組織で定着しました。
が、まだまだ改善が必要と感じています。
Takumaです。
 

【効率】
1 機械などの、仕事量と消費されたエネルギーとの比率。「―のよい機械」「熱―」
2 使った労力に対する、得られた成果の割合。「―のよい投資」(by Yahoo!辞書)

今の会社でもTakumaが関わったプロジェクトで、かなり定着してきた「IA設計」
文化としては認知されて、工数も確保され、自分以外のアウトプットも多くなってきた。

しかし、正直なところ組織としてクオリティにバラツキがどうしてもある。
新しいアシスタントさんがついた事もあるのですが・・・
今一度「IA設計」の役割をメモしなおして「どっか改善できないか?」についてまとめてみました。

「Yahoo!ではそんなやり方が・・・」って感じです。

■概論:WEBとIAと設計と■■■■■■■■■■■■■■■■■■■■■■■

そもそも、IA設計とはなんぞやというと
「Information Architecture:情報アーキテクチャ:情報設計」
という直訳になります。

ある意味、広告媒体は情報を発信するものであり、その形態の一つであるWEBも基本的に情報を発信しています。
しかし、IA設計というジャンルが求められやすいサイトのタイプは、現代においてもまだまだ少ないのではないでしょうか?
(※ランディングページですらTakumaの場合は設計をおこしますがw)

IA設計が重要視されるサイトのタイプには、以下の条件が主にあると思います。

(1)ユーザーが求める行動に対し適切なゴールを用意できている。
(2)情報が適切にユーザーに届けられる形態になっている。
(3)更新性や拡張性に優れ、汎用性に富んだ形態になっている。

情報を適切に伝える事に特化したサイト。いわゆるポータルサイト系等です。

■IAとワイヤーフレームとサイトマップ ■■■■■■■■■■■■■■■■

ワイヤーフレームとサイトマップは非常に密接な関係にあります。
この前段にて、サイト方針とコンバージョン(サイトの達成すべきミッション)が明確化されてることが前提ではありますが。

・サイトマップ
(全体像:サイトとして必用なコンテンツ要素とその導線設計)
・ワイヤー
(各ページ像:適切な情報ボリュームと機能利便性。コンバージョンへの適切な窓口設置)

この後に、「原稿/デザイン/コーディング」のタスクが本稼動する場合が多いと思います。

先ほどのIAが重要視されるサイトミッションとつき合わせてみます。

(1)ユーザーが求める行動に対し適切なゴールを用意できている。
⇒コンバージョンへの主用導線と補助導線が適切に用意できているか。
(例:ユーザーが目的のページに辿りつけないとき、気づくところにそのヒントが用意されているか)

(2)情報が適切にユーザーに届けられる形態になっている。
⇒ユーザー目線からみても、サイト側の要望とバランスが取れたサービス提供ができているか。
(例:広告はあるが、ユーザーからして目障りでもなく目に留まる場所に配置されているか)

(3)更新性や拡張性に優れ、汎用性に富んだ形態になっている。
⇒日常的に量産される多種多様な情報を含んだページにテンプレートが対応しているか。
(例:文章量や写真の数が違っていても、ユーザーがストレス無く一定のルールにそって閲覧できる。)

これなしに、デザインやコーディングやライティングをしても、
「使うか使わないか分からない&連携可能な形になるのに工数がかかる」
ので現実問題として、ポータル系の開発には向かないと思います。

【参考文献&関連記事】
▼Web情報アーキテクチャ(IA)とツール:技術評論社▼
http://gihyo.jp/design/serial/01/ia-tool/0001
⇒一言:
こちらの記事。各種専門セミナーで発表された資料も紹介されていて勉強になります。
スキルとしては、多くの人間がもつべきですが経験上、職種とした方がプロジェクト進行上、不可分散とクロスチェックができてよいと個人的には考えています。
当然、必用な書類作成や情報連携を活用し多くのアイデアが集積する事が前提ですが。

▼Takumart.net「WEBサイトを設計(ワイヤー)からみなおしてみる」▼
http://www.takumart.net/wordpress/archives/765

▼Takumart.net「JOBでやったことを整理してみた」▼
http://www.takumart.net/wordpress/archives/688

▼Takumart.net「サイトにみるユーザ特性と企画・設計・デザイン」▼
http://www.takumart.net/wordpress/archives/564

■IA設計と効率化 ■■■■■■■■■■■■■■■■■■■■■■■■■■

効率化については

(1)開発時の作業&連携効率化
⇒サイトの開発目的やミッションをクリアできる物になっているかを皆で検証できる。

(2)開発後の運用時の効率化
⇒開発時のクオリティを維持若しくは発展し安定供給できる基盤と効率化を推進できる。

が主にあると思いますが、(1)は上記の通り。
(2)について気になる記事があったのでそれも交えて紹介します。

通常、デザインやコーディングレギュレーションを作成して運用する場合が多いです。
そのレギュレーションの基本としてIA設計で「どこがどこと同じパーツ」とか「ここはサイト全体で固定配置」とかも検討していくわけですが、Yahoo!ではもう一歩進んだ方法を導入しているそうです。

【参考文献】
▼Yahoo!検索の「ユーザーインターフェース設計」▼
http://techblog.yahoo.co.jp/cat207/how_to/post_13/
Yahoo!のテクノロジーに特化した技術系ブログ「TechBlog」さんの記事。

要約すると・・・

(a)ページ上の要素はすべて「モジュール」としてデザイン。
⇒要素の細分化とルール作りを最初から明確化している。

(b)作業分担が上流工程から行える。
⇒モジュールの命名規則や運用ルールも活用し早い段階から大人数が稼動できる。

(c)設計時に命名したモジュール名や要素名を、ビジュアルの設計やHTMLにも適用
⇒早期から開発時の不明点の突合せに加え、制作物まで統一したルールで開発できる。

Takumaの場合、これに近い概念を設計書上で記載して、各タイプ別のテンプレートを定義しますが、このモジュールという概念を取り入れるほど正直、システマチックになっていません。
(多くは設計書上にて定義して、デザインテンプレ作成後量産⇒メインコーディング後レギュレーション策定⇒量産)
これを実装することで組織での開発効率があがるかは、やってみないとわかりませんが(開発規模や用件によっても、かわってくるでしょう。)是非、実験してみたいやり方だと思います。

■まとめ:IA設計の可能性■■■■■■■■■■■■■■■■■■■■■■

一つとして、基本的な概念が抑えられれば他のハード等でも知識を転用できる事から非常に有意義なスキルだと個人的に思っています。
(ハードの特徴や事情、その利用環境やユーザー等の情報は勉強して付加しないといけませんがw)
又、開発プロジェクトを円滑に運ぶ上で重要な情報連携とシュミレーションの方法論ともいえると思います。

IA設計の作業に加えて、もっと開発現場のイニシアチブを強化する事。
実のところ、これにも非常に大きな効力を発揮します。(←体験済み)

サイトの開発目的(上流工程)とサイトの開発効率化(下流工程)において
その間を繋ぎ、より多くの情報を共同作業者や後任者に適切に連携する。意味において「情報ポータル系」以外でも基本概念として「IA設計」は必用なスキルであると考えます。

ツールの開発だけでなくもっと概念的な所からも自分自身のワークフローの再検証が必用かもと思った今日この頃です。

■各種ツールリンクまとめ■■■■■■■■■■■■■■■■■■■■■■

概念から考えなおしたいとか言っといてなんですがw

▼ツール;ワイヤーフレーム用(by IA One Sheeters)▼
http://www.iaonesheeters.com/onesheeters/wireframes_one_sheeter.pdf

▼ツール;ヒューリスティック評価用(by IA One Sheeters)▼
http://www.iaonesheeters.com/onesheeters/heuristic_one_sheeter.pdf

▼ツール;ユーザビリティ用(by IA One Sheeters)▼
http://www.iaonesheeters.com/onesheeters/usability_testing_one_sheeter.pdf

▼ツール;Wireframe Templates(by IAI)▼
http://iainstitute.org/tools/

▼ツール;User Interface(by Graffletopia)▼
http://graffletopia.com/categories/user-interface

■P.S:今日の気になったサイト■■■■■■■■■■■■■■■■■■■■■

▼Sixinch▼
http://www.sixinch.jp/

●んで、一言

Sixinch(シックスインチ)というオリジナルの家具コレクションのサイト。
ウレタンをコーティングする特殊な材料と技術をつかっているそうです。

モダンなパンフレットをイメージさせるようなデザインスタイル。
商品写真の質感が見て取れるような写真ベースのコンテンツになっています。

子供の声がBGMに入っていて、商品を体で感じて楽しんでいるイメージが膨らむ。
こんな家具が家にあったら楽しいですよね。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

コメントを残す

Required fields are marked *.


▲このページトップへ

takumaの「デザインはあれでアートはそれで」