1. schoo
IA/UX PERSPECTIVE
Let's take a look at this issue from a different perspective.
よりよいサイトやアプリを作るための情報設計
2014/02/07
坂本貴史
by kennymatic

2. OBJECT
UXを、2つの視点から理解できる
逆⼯工程で⾒見ることで、情報設計⼒力が⾝身につく

3. 20 min
視点の違いを知る
20 min
逆⼯工程から考える
20 min
⺫⽬目的を変えてつくる
30 min
質疑応答

4. IA
情報アーキテクチャ

6. この画⾯面を⾒見て、どう思われましたか?
1
つまらなさそう
2
なんか⾯面⽩白そう

7. 1
つまらなさそう
2
⾯面⽩白そう
スタティック視点
インタラクティブ視点

8. スタティック視点とは
スタティックとは、静的のことです。つま
り、静⽌止画として⾒見た場合を指します。そ
うすると、たしかに平坦で何の⾯面⽩白みもな
いものにも⾒見えてきます。

9. Realmac Software “Clear for iPhone”

10. インタラクティブ視点とは
インタラクティブとは、相互作⽤用のことです。
つまり、静⽌止画ではなくシステムとの対話とし
て⾒見た場合を指します。サウンドがあり軽快に
動くことがわかると、楽しそうに⾒見えてきます。

12. スタティック視点
インタラクティブ視点

13. 現在の「ユーザーインターフェース」という⾔言葉
の概念には、スタティックな状態を指すとともに、
インタラクティブ性を含むものを指す場合が多い
と⾔言えます。

15. この画⾯面を⾒見て、どう思われましたか?
1
これで⼗十分
2
これだとわかりにくい

16. 1
これで⼗十分
エコシステム視点
2
これだとわかりにくい プロダクト視点

17. エコシステム視点とは
エコシステムとは、さまざまなものどうし
の相互依存や協調関係のことです。この場
合、他サービスとの相互関係を⾒見た場合を
指します。

18. プロダクト視点とは
プロダクトとはこの場合Webページを指し
ます。したがってこの場合、そのWebペー
ジ単体だけを取り上げて⾒見た場合を指しま
す。

20. エコシステム視点
プロダクト視点

21. （マーケティング全体の）⺫⽬目的に対して機能して
いるのであれば、これで⼗十分と⾔言えますし、知り
たい情報が不⾜足していて、これだけ⾒見てもわかり
にくいとも⾔言えます。

22. エクスペリエンスストラテジー/戦略
プロダクトデザイン
サービスデザイン
・サイトやアプリ
・ステークホルダーマップ
・広告
・ジャーニーマップ
トレーニング/教育

23. あなたは、どういうお仕事をされていますか?
1
マーケティングなど企画づくり
2
サイトやアプリなど製品づくり

24. 1
企画づくり
サービスデザイン視点
2
製品づくり
プロダクトデザイン視点

25. 1
サービスデザイン視点
製品を提供するサービスのためのデザイン
2
プロダクトデザイン視点
製品そのものを指す、製品のためのデザイン

27. サービスデザイン視点
プロダクトデザイン視点

28. 「UX」という⾔言葉の「U」にはさまざまな⾔言葉が⼊入
ります。サービスエクスペリエンス「SX」やプロ
ダクトエクスペリエンス「PX」、顧客体験という
意味でカスタマーエクスペリエンス「CX」などが
あります。

29. あなたは何視点でしたか?

31. これはどんなツールだと思いますか?
1
画⾯面作成のツール
2
シナリオ作成のツール

33. なぜその画⾯面を作る必要があるのでしょうか?

34. 企業が、マーケティング活動を進める際には、顧
客との接点が必要です。そのためのインターフェー
スとして端末の画⾯面が必要になります。その画⾯面
の流れをシナリオと呼びます。

35. 1
画⾯面作成のツール
画⾯面視点
2
シナリオ作成のツール シナリオ視点

38. シナリオ視点
画⾯面視点

39. シナリオと画⾯面の関係性
本⽇日の朝刊
⽇日付選択
過去の朝刊
過去の⼣夕刊
朝刊にいるときに、過去の⼣夕刊はダイレクトに⾒見れない

40. シナリオと画⾯面の関係性
本⽇日の朝刊
⽇日付選択
過去の朝刊
本⽇日（朝刊）
過去の⼣夕刊
過去（朝刊）
⽇日付
本⽇日（⼣夕刊）
過去（⼣夕刊）
⼣夕刊・朝刊の選択と⽇日付の選択が必須となる

42. さて、これは何と表現しますか?
1
画⾯面設計図
2
ワイヤーフレーム資料

43. 1
画⾯面設計図
ダイアグラム視点
2
ワイヤーフレーム資料
デリバラブル視点

44. ダイアグラム
デリバラブル

45. ダイアグラム視点とは
ダイアグラムとは、線画のことを指します。
この場合、これだけでは後⼯工程には伝わり
にくいことが考えられるため、注釈や補⾜足
などの説明が必要になります。

46. デリバラブル視点とは
デリバラブルとは、成果物のことを指しま
す。成果物とはダイアグラムを含む説明ド
キュメントを指し、コミュニケーションツー
ルとして使⽤用することを想定します。

47. ダイアグラム視点
デリバラブル視点

48. 視点を変えて⾒見る

49. エコシステム視点
サービスデザイン視点
シナリオ視点
デリバラブル視点
プロダクト視点
プロダクトデザイン視点
画⾯面視点
ダイアグラム視点

50. 20 min
視点の違いを知る
20 min
逆⼯工程で考える
20 min
⺫⽬目的を変えてつくる
30 min
質疑応答

51. 表層
⾻骨格
ビジュアルデザイン
インターフェース
デザイン
ナビゲーション
デザイン
情報デザイン
構造
インタラクション
デザイン
要件
機能仕様
戦略
情報アーキテクチャ
コンテンツ要求
ユーザーニーズ
サイトの⺫⽬目的
⼯工程

52. 表層
⾻骨格
ビジュアルデザイン
インターフェース
デザイン
ナビゲーション
デザイン
情報デザイン
構造
インタラクション
デザイン
要件
機能仕様
戦略
情報アーキテクチャ
コンテンツ要求
ユーザーニーズ
サイトの⺫⽬目的
逆⼯工程

54. 1
2
3
4
7
5
6
8
9
10

55. 1
メニュー
2
バナー広告
3
タイトル
4
放送時間
5
あらすじ
6
放送スケジュール
7
キャラクタのイラスト
8
関連番組
9
問い合わせ
10
著作権

56. 何の情報が必要だと思いましたか?
1
テーマ曲
2
キャラクタの声優

57. 1
メニュー
11
テーマ曲
2
バナー広告
12
キャラクタの声優
3
タイトル
13
…
4
放送時間
14
…
5
あらすじ
15
…
6
放送スケジュール
16
…
7
キャラクタのイラスト
17
…
8
関連番組
18
…
9
問い合わせ
19
…
10
著作権
20
…

58. 表層
⾻骨格
ビジュアルデザイン
インターフェース
デザイン
ナビゲーション
デザイン
情報デザイン
構造
インタラクション
デザイン
要件
機能仕様
戦略
情報アーキテクチャ
コンテンツ要求
ユーザーニーズ
サイトの⺫⽬目的
逆⼯工程

59. どういう⺫⽬目的で来訪すると思いますか?
1
放送時間を知りたい
2
…

61. 1
メニュー
2
バナー広告
3
タイトル
4
放送時間
5
あらすじ
6
放送スケジュール
7
キャラクタのイラスト
8
関連番組
9
問い合わせ
10
著作権

62. 表層
⾻骨格
ビジュアルデザイン
インターフェース
デザイン
ナビゲーション
デザイン
情報デザイン
構造
インタラクション
デザイン
要件
機能仕様
戦略
情報アーキテクチャ
コンテンツ要求
ユーザーニーズ
サイトの⺫⽬目的
逆⼯工程

64. このWebページの⺫⽬目的は何だと思いますか?
1
…
2
…

65. 1
メニュー
2
バナー広告
3
タイトル
4
放送時間
5
あらすじ
6
放送スケジュール
7
キャラクタのイラスト
8
関連番組
9
問い合わせ
10
著作権

66. 表層
⾻骨格
ビジュアルデザイン
インターフェース
デザイン
ナビゲーション
デザイン
情報デザイン
構造
インタラクション
デザイン
要件
機能仕様
戦略
情報アーキテクチャ
コンテンツ要求
ユーザーニーズ
サイトの⺫⽬目的
逆⼯工程

67. このWebページの⺫⽬目的は何だと思いますか?
1
番組内容を掲載するため
2
バナー広告を販売するため

68. 20 min
視点の違いを知る
20 min
逆⼯工程から考える
20 min
⺫⽬目的を変えてつくる
30 min
質疑応答

70. このWebページの⺫⽬目的を仮説⽴立てる
1
テレビ録画率を上げる
2
グッズ販売に貢献する

71. ユーザーニーズを整理する
録画前
録画時
録画後
録画予約する
録画をする
録画番組を視聴する
録画を忘れず予約したい
…
忘れず⾒見たい
…
…
次回が早く⾒見たい

72. ユーザーニーズを整理する
録画前
録画時
録画後
録画予約する
録画をする
録画番組を視聴する
予約のお知らせ
…
視聴リマインド
…
…
次回予告を掲載
録画を忘れず予約したい
…
忘れず⾒見たい
…
…
次回を早く知りたい

73. 1
メニュー
2
バナー広告
3
タイトル
4
放送時間
5
あらすじ
6
放送スケジュール
7
キャラクタのイラスト
8
関連番組
9
問い合わせ
10
著作権

74. 1
メニュー
11
予約のお知らせ
2
バナー広告
12
グッズ情報
3
タイトル
13
…
4
放送時間
14
…
5
あらすじ
15
…
6
放送スケジュール
16
…
7
キャラクタのイラスト
17
…
8
関連番組
18
…
9
問い合わせ
19
…
10
著作権
20
…

75. 1
2
3
4
7
5
6
8
9
10

76. メニュー
タイトル
3
キャラクタのイラスト
7
毎週⽕火曜⽇日 18:30〜～19:00
6
1
4
放送スケジュール
2014/02/04 第246話
次回のあらすじ
予約
11

77. 1
メニュー
2014/02/25 第249話
予約
3
タイトル
2014/02/18 第248話
予約
7
キャラクタのイラスト
あらすじ
5
関連番組
バナー広告
4
6
8
2
毎週⽕火曜⽇日 18:30〜～19:00
放送スケジュール
予約
次回のあらすじ
2014/02/11 第247話
予約
11
お問い合わせ
9
著作権
2014/02/04 第246話
10

79. 表層
⾻骨格
ビジュアルデザイン
インターフェース
デザイン
逆⼯工程
ナビゲーション
デザイン
情報デザイン
構造
インタラクション
デザイン
要件
機能仕様
戦略
情報アーキテクチャ
コンテンツ要求
ユーザーニーズ
サイトの⺫⽬目的
⼯工程

80. エコシステム視点
サービスデザイン視点
シナリオ視点
デリバラブル視点
プロダクト視点
プロダクトデザイン視点
画⾯面視点
ダイアグラム視点

81. 視点を変えて⾒見る

82. 20 min
視点の違いを知る
20 min
逆⼯工程で考える
20 min
⺫⽬目的を変えてつくる
30 min
質疑応答

83. 以下の⺫⽬目的に合うモバイルデザインを考える
1
テレビ録画率を上げる
2
グッズ販売に貢献する

84. COMING SOON!

85. schoo
THANK YOU
ありがとうございました
@bookslope
坂本貴史
by kennymatic