トピックス

正しいサイト構築手法

ウェブサイトの正しい構築手法を示す有名なダイヤグラム「The Elements of User Experience」(Jesse James Garrett 30 arch 2000) を和訳してみました。
オリジナルのpdfファイルはこちら

chart

基本的な二面性:ウェブとは元来ハイパーテキストを提供する情報スペースとして考え出されたものです。しかしそれがますます洗練されてきた結果、フロント&バックエンドのテクノロジーはウェブに対して、リモートアプリケーションのインターフェイスとしての役目も与えてきました。しかし、ユーザー・エキスペリエンスの専門家達が彼らの専門用語を、本来適用されるべき範囲を超えて当てはめようとしてきた結果、ウェブのこの二つの側面(ハイパーテキストとしての側面、アプリケーションとしての側面)は、時として大きな混乱を招いています。このダイヤグラムの目標はそれらの術語をふさわしい文脈の中で使えるように定義するとともに、サイトを構成する様々の要素の基本的な関係性を明らかにすることです。


task-oriented (タスク指向としての側面)

PHASE 1 [戦略]

ユーザーニーズ
ユーザー性行、ユーザーの技術レベル、ユーザーの心理レベルの調査から導き出されたサイトの目標を明確にする。
サイトの目的

サイトに求められるビジネス上の目的、創造上の目的を明確にする。

PHASE 2 [要件]

機能の仕様の決定
ユーザーのニーズを満たすためにサイトに実装する機能を詳細な言葉 [feature set] で表現する。

PHASE 3 [構造]

インタラクション・デザイン
どうやってユーザーが機能的にサイトとやりとりするのを定義しながら、ユーザーが自らのタスクを処理することを助けていくための詳細なアプリケーションを開発する。

PHASE 4 [骨格]

インターフェイス・デザイン
・・・・・
インフォメーション・デザイン

・・・・・

PHASE 5 [表層]

ヴィジュアル・デザイン
インターフェイス要素でのグラフィックの取り扱いを定める。("ルック&フィール"の中の"ルック"の部分)


information-oriented (情報指向としての側面)

PHASE1 [戦略]

・ユーザーニーズ
ユーザー性行、ユーザーの技術レベル、ユーザーの心理レベルの調査から導き出されたサイトの目標を明確にする。

・サイトの目的
サイトに求められるビジネス上の目的、創造上の目的を明確にする。

PHASE 2 [要件]

・コンテンツの要件
ユーザーのニーズを満たすためにサイトに要求されるコンテンツ要素を定義する。

PHASE 3 [構造]

・インフォメーション・アーキテクチャ
ユーザーがコンテンツへ直感的にアクセスできるような情報空間を構造的にデザインする。

PHASE 4 [骨格]

・ナビゲーション・デザイン
情報設計を通じてユーザーの情報への動きを助けることのできるインターフェイス要素をデザインする。
・インフォメーション・デザイン

ユーザーの理解を助けることのできる情報の表現方法をデザインすること。

PHASE 5 [表層]

・ヴィジュアル・デザイン
文章、ページに配置されるグラフィックな要素、そしてナビゲーションのための部品の視覚的取り扱いを決める。



ウェブ戦略としての『ユーザーエキスペリエンス』5つの段階で考えるユーザー中心のデザイン

関連書籍
ウェブ戦略としての『ユーザーエキスペリエンス』- 5つの段階で考えるユーザー中心のデザイン
かなり抽象的で難解です。