WebにおけるUI設計

1. WebにおけるUI設計
基礎編

2. UIの設計で
意識すること

3. UIの構造への理解
と
UIの文脈への理解

4. UIの構造への理解
と
UIの文脈への理解

5. WebにおけるUI

6. ユーザと情報をつなぐI/O
≒
実装された画面

7. 実装された画面
アセット
UI
ワイヤーフレーム

8. The Elements of User Experience

9. http://www.jjg.net/elements/pdf/elements.pdf

10. 実装された画面：参考
Visual Design
Interaction Design
Information
Architecture
Interface Design Navigation Design
Information Design
Functional
Specification
Content
Requirements
Site Objectives
User Needs
Concrete
Abstract
Completion
Conception
Time

11. 実装された画面：参考
Visual Design
Interaction Design
Information
Architecture
Interface Design Navigation Design
Information Design
Functional
Specification
Content
Requirements
Site Objectives
User Needs
Concrete
Abstract
Completion
Conception
Time
表面
骨格
構造
要件
戦略
視覚的デザイン
インフォメーション・デザイン
ナビゲーション・デザイン
インターフェース・デザイン
インフォメーション・アーキテクチャ
インタラクション・デザイン
コンテンツ要求
機能要件
ユーザーニーズ
サイトの目的

12. 実装された画面：参考
Visual Design
Interaction Design
Information
Architecture
Interface Design Navigation Design
Information Design
Functional
Specification
Content
Requirements
Site Objectives
User Needs
Concrete
Abstract
Completion
Conception
Time
表面
骨格
構造
要件
戦略
視覚的デザイン
インフォメーション・デザイン
ナビゲーション・デザイン
インターフェース・デザイン
インフォメーション・アーキテクチャ
インタラクション・デザイン
コンテンツ要求
機能要件
ユーザーニーズ
サイトの目的

13. 制作チームにおけるUIの代表的な立ち位置
企画
機能ツリー
遷移図
ワイヤーフレーム
モック
実機確認
リリース
アセット
コーデッドプロトタイプ
ロジック
DB設計
フロントエンドバックエンド
ユーザニーズ、ゲームの目的、コンテンツ要求
機能要求
インフォメーション・アーキテクチャ、ナビゲーション・デザイン
インフォメーション・デザイン、インタフェース・デザイン
視覚的デザイン、インタラクション・デザイン
異論はあると思います

14. アセット
UI
ワイヤーフレーム
実装された画面

15. 実装された画面（ユーザー視点）
世界観
情報
UI

16. UIの構造への理解
と
UIの文脈への理解

17. UIの構造への理解
と
UIの文脈への理解

18. アセット
UI
ワイヤーフレーム
実装された画面

19. 実装された画面を俯瞰
UI

20. 実装された画面のつながり
UI
UI
UI
UI
UI UIUI
クエスト一覧 クエストマイページ クエスト結果
カード一覧 カード詳細
デッキ一覧
UI
デッキ編成

21. 実装された画面にいたるコンテキスト

22. 実装された画面にいたるコンテキスト
when / where
モバイル
how
前後の行動
気分や思考
パソコン

23. Three Circles of Information Architecture

24. content
context
users
Louis Rosenfeld and Peter Morville defined the 'three circles of information architecture' as content, users and context of use.

25. content
context
users
O'Reilly Japan - 情報アーキテクチャ 第4版 Louis Rosenfeld、Peter Morville、Jorge Arango
優れた情報アーキテクチャデザインはこの3つの分野すべてから情報を得て、3つの分野全てを標的とし
ます。ユーザーの考え方、デモグラフィック、心理、タスクと情報ニーズ、情報探索行動などにはかな
りのばらつきがあります。コンテンツも質、流通、権限、人気、戦略価値、コストなどによってさまざ
まです。また組織的コンテキストも使命、ビジョン、目標、組織的政策、組織的文化、集中化や自主性
の程度によって異なります。特に変化するものをミックスした場合、情報環境によって異なるだけでな
く、同じ環境内にあっても時間の変化とともに変わっていきます。

26. content
context
users
context
Louis Rosenfeld and Peter Morville defined the 'three circles of information architecture' as content, users and context of use.

27. content
context
users
context
どんなデジタルデザインプロジェクトも、特定のビジネス的あるいは組織的コンテキストの中に存在しています。はっき
り表面に出していようといまいと、どの組織にも使命、目標、戦略、スタッフ、プロセス、手順、物理的な基盤と技術的
な基盤、予算、文化があります。その組織ごとに独自の可能性や野望、リソースなどが入り混じっています。
情報アーキテクチャは独自のコンテキストに適合したものでなければなりません。Webサイトとアプリの語彙や構造は、
ビジネスが顧客や社員と対話を展開する際、その中心となる要素なのです。それはまた、顧客や社員があなたの製品やサ
ービスに対してどう感じるかにも影響します。将来にな何が期待できるかを伝え、顧客と社員との相互作用を促進するこ
とも制限することもあります。情報アーキテクチャは組織の使命、ビジョン、価値、戦略、文化の断片を、最も具体的な
形で示すといえるかもしれません。そうした断片を、競合他社のものと同じものにしてはいけません。
成功の鍵は理解と団結です。まず、あなたはビジネスコンテキストを理解する必要があります。何が独自性を生んでいる
のか？現在のビジネスはどこにあり、今後どこへ進んで行きたいのか？ほとんどの場合、口には出されない暗黙の知識を
取り扱っていくことになるでしょう。暗黙の知識はどこにも書かれていません。人々の頭の中にあって、決して言葉に置
き換えられることがなかったものです。コンテキストについての理解を抽出し、整理することに関し、様々な方法をろん
じていきます。それから、情報アーキテクチャとビジネスの目標、戦略、文化とを緊密に協力させる方法を見つけ出さな
くてはなりません。この文化の構成を実現するアプローチとツールについても論じていきます。
1章でも述べたように、ユーザーが組織と相互作業する際に利用するチャンネルによるコンテキストの違いも理解する必要
があります。ユーザーはサービスを主に携帯電話のアプリで利用しているのか、それともデスクトップパソコンのブラウ
ザからWebサイトで使っているのか。どちらのプラットフォームにも、できることとできないことがあります。例えば小
さなスクリーンでは表示面積も狭いので、ラベルやナビビゲーションメニューは短くなります。スクリーンの小さなデバ
イスと大きなデバイスとでは、利用される時間や場所も異なります。サービスが複数のチャネルで利用されるなら、それ
ぞれのチャネルがどのように重なり合い、相互作用するかを考えなければなりません。こうしたすべての要因がコンテキ
ストを形成し、情報アーキテクチャを形づくっていくのです。
O'Reilly Japan - 情報アーキテクチャ 第4版 Louis Rosenfeld、Peter Morville、Jorge Arango

28. UIの設計で
意識すること

29. UIの構造への理解
と
UIの文脈への理解

30. アセット
UI
ワイヤーフレーム

31. UI
UI
UI
UI
UI UIUI
クエスト一覧 クエストマイページ クエスト結果
カード一覧 カード詳細
デッキ一覧
UI
デッキ編成