paiza運営元のギノ株式会社内勉強会資料です。自社サービス運営元のITエンジニアのためのUX設計と情報設計の初歩的な内容です。 一回の勉強会で実践的な成果を出すのは無理なので、何かのときに思い出してもらったり、こういうやり方があるという事を知ってもらうという事をゴールにしました。

1. UX
2014. 09. 10
1
Photo by Davidlohr Bueso

2. 片山良平
ギノ代表取締役
・デザイナー
・PHPエンジニア
・プロジェクトマネージャー
・チームリーダー/プロデューサー
・新規事業開発
・代表取締役
Ryohei Katayama
@rk611
2

3. 今回の目的、ゴール
目的
UX向上のための方法論を知り、より価値の高いエンジニアになる。
本日のゴール
UX設計、情報設計のためのフレームワークを体験してみる。
頭の片隅に「こんなやり方あったなと」インデックスされればOK。
3

4. 目次
１．情報設計とはなんぞや？
２．UX設計とはなんぞや？
３．情報設計の成果物を知る
４．やってみよう(ストラクチャ、エリア定義)
4

5. １. 情報設計とはなんぞや？
またの名をインフォメーションアーキテクチャともいう
5

6. 6
情報設計
Information Architecture
知識やデータの組織化を意味し、「情報を
わかりやすく伝え」「受け手が情報を探し
やすくする」ための表現技術。

7. 情報設計はなぜ必要？
何時役立つのか？
１．導線設計
２．ナビゲーション設計
３．画面設計
４．コンテンツ設計
他にもあるけど大体この辺りを押さえておけばOK
7
エンジニアは主に
機能面から画面設計をする。
他が抜けがち。

8. ２. UX設計とはなんぞや？
ユーザーエクスペリエンスデザインとも言う
8

9. UXとは？
9
ユーザエクスペリエンスとは、製品、システムまたはサー
ビスを使用した時、または使用を予測した時に生じる個人
の知覚や反応。
ISO 9241-210
人間中心設計（ユーザ中心設計）の国際規格
プロダクト利用時の体験全般
情報設計をきちんとやると、より良いUXをもたらす
ともいえる。つまり情報設計は手段。UXは結果。

10. UX向上における7つの評価視点。こういった観点で設計を
評価してみる事で、抜けもれを発見しやすい。
10
Useful
役に立つ
UXハニカム
Desirable
好ましい
/魅力的
Accessible
アクセス
しやすい
Valuable
価値がある
Credible
信頼できる
Usable
使いやすい
Findable
探しやすい
※accessibleは誤解しやす
いが、高齢者・障害者を含
む誰もが支障なく利用でき
るかどうか、という観点。

11. UX設計とは？
概念的にはこんな感じ。より上位にビジネス設計がある。
11
UX設計
プロダクト利用時の
体験全般の設計
情報設計
情報の解りやすさ、
探しやすさの設計
サービス・コンテンツ
設計、企画
システム設計
UX(ユーザーの体験)

12. UXとビジネス
12
・最高のUXでもマネタイズできなければ
ビジネスとしては成り立たない。
・つまりビジネスモデルとセットで考えなければ
あまり意味がない。
・UXも費用対効果で考えるべき。

13. ３. 情報設計の成果物を知る
具体的にはなにをやるのか？
13

14. 代表的なモノ
１．ペルソナ
２．UXジャーニーマップ
３．競合分析
４．ストラクチャ(サイトマップ)
５．ワイヤーフレーム
14
情報設計の成果物
⇒今日の対象範囲外
⇒基本的には情報共有ツールなので
ドキュメントを沢山作る必要な無い

15. 15
一応ペルソナ例
http://web-tan.forum.impressrd.jp/e/2010/01/25/7212/page/2 より
関係者が多いときに、関係者が描くユーザー像をはっきりさせ
統一するために作るドキュメント。ユーザと接する事が出来て
いるならば作る必要はあまりないです。

16. 16
一応UXジャーニーマップ例
ユーザーがサービスを使う前から使用中、使用後の行動、接点、
心理的状況等のフローを洗いだして、サービスの体験設計や、
タッチポイントごとの施策の整理を行う。
これも関係者多くなければ作る必要ない気がします。

17. 頭を整理するための物だけで良い。
１．コンテキストメモ
２．競合調査
３．ストラクチャ(サイトマップ)
４．ワイヤーフレーム（エリア定義）
17
エンジニアに必要なものは？

18. ただのメモ。どのような文脈でその機能が必要かをまとめ
たメモ。何が必要なのか、何のために必要か整理する。
１．WHY
なぜその機能が必要か？
２．WHO,WHEN,WHERE
誰がいつどこで必要か？
３．WHAT
その機能で何ができる必要があるか？
４．HOW
具体的にどのような機能になるのか？
18
１．コンテキストメモ
話してるだけだと
結構曖昧な事が多い。
書いてみると
あいまいな点が見えてくる。

19. 競合でなくても良い。作ろうとしている機能に似た事を
やっているサイト、サービスを調査。ベストプラクティス
を見つけ設計の参考にする。
同業種でなくてもOK。似た機能を持っているものを
キャプチャしてパワポに張り付けるだけの簡単なお仕事。
19
２．競合調査
張り付け終わったら眺めて、それぞれの長所短所を比較検討。

20. サイトの論理構造を図示したもの。これを作ると導線設計、
ナビゲーション設計がしやすくなる。
何処からもリンクが張られてなかったとか、なかなかたど
り着けないとかそういうのがなくなる。
20
３．サイトストラクチャ

21. １．一度に覚えられるは4つだけ
以前はマジックナンバー7と言われていたが
最近の研究では4つまでと言われている。
２．チャンク(グループ)に分ければより多く覚えられる
14928763876 ⇒ 149 - 2876 – 3876
３．入力が多いとワーキングメモリ効率が落ちる
人間のワーキングメモリ(1分間程度の記憶領域)は、感覚系からの
入力量が増えると効率が落ちる。邪魔が入るとすぐ忘れる。
21
何を考えるべきか？

22. ４．ワイヤーフレーム(エリア定義)
レイアウトする前に、エリアごとにどのような機能を持た
せるか定義する。
機能を少しずつ足していくと、
ごちゃごちゃしてわかり難いレ
イアウトになりがち。
似たような機能はまとめたほう
が迷わなくなりユーザビリティ
が向上する。
22

23. 例
プロモーションエリア
ナビゲーションエリア
機能が違うのに分
離出来ていない。
ナビゲーションを
見落とす。
23
検索エリア(ナビゲーション)
エリアとしてまとまりがなくバラバラ
になっている。検索ボタンが何に対応
しているのかわかり難い。

24. 改善するとしたら…
24
プロモーションエリア
ナビゲーションエリア
関連
エリア
コンテンツエリア
プロモーションと
ナビゲーションは
分離。
ナビゲーションを
まとめる。

25. １．人は近くにあるものをグループだと思う
２．人はパターンで認識する
25
何を考えるべきか？
米ネット通販関連企業、買収へ＝
海外事業拡大の足掛かり―楽天
楽天が、インターネット通販のポータル（玄関）サイト
を運営する米イーベイツ（カリフォルニア州）の買収に向
けて大詰めの交渉を進めていることが6日、分かった。イー
ベイツを通じて、米国を中心に海外でのネット通販事業拡
大の足掛かりにするのが狙い。買収額は10億ドル（約
1050億円）を上回るもようで、週明けにも合意し、発表す
る見通し。 (時事通信)
中国アリババ、2．5兆円調達も＝
史上最大規模のIPOに
【ニューヨーク時事】中国の電子商取引最
大手、阿里巴巴（アリババ）集団は5日、
米証券取引委員会（SEC）に書類を提出し、
近く・・・・

26. ３．階層構造で機能の影響範囲は認識される
全体へのいいねボ
タンと認識される。
26
何を考えるべきか？
H1 UX勉強会
H2 ユーザーエクスペリエンスとは？
機能を少しずつ足していくと、ごちゃごちゃしてわかり難いレイアウトになりがち…
⇒詳しく読む
H2 情報設計とは？
機能を少しずつ足していくと、ごちゃごちゃしてわかり難いレイアウトになりがち…
⇒詳しく読む
H1 UX勉強会
H2 ユーザーエクスペリエンスとは？
機能を少しずつ足していくと、ごちゃごちゃしてわかり難いレイアウトになりがち…
⇒詳しく読む
H2 情報設計とは？
機能を少しずつ足していくと、ごちゃごちゃしてわかり難いレイアウトになりがち…
⇒詳しく読む
それぞれの記事へ
のいいねボタンと
認識される。

27. ４. やってみよう！
Let’s do it!
27

28. 28
既存サイトを理解する
paizaサイト(ログイン前)のストラクチャーと
トップページのエリア定義をつくってみる。

29. 29
ストラクチャ作成時のポイント
論理構造でどのような階層構造になっているかとらえる
生活雑貨
カテゴリトップ
（インデックス）
記事１
記事２
記事３
グロナビで「生活雑貨」をクリックすると、
直接記事１に飛ぶような場合。カテゴリ配下
のコンテンツが少ない場合はこうなりやすい。
生活雑貨
カテゴリトップなし
記事１
記事２
記事３
ベーシックな構造例。グロナビの「生活
雑貨」をクリックすると、生活雑貨のイ
ンデックスページに飛ぶ構造。
←物理的にはこのページは無い

30. 30
ストラクチャ作成時のポイント
論理構造でどのような階層構造になっているかとらえる
二つのカテゴリからリンクが張られているような場合（記事１）は、メインのカテゴリの方
に属させる。特別な導線等を考えたい場合は曲線矢印にするなど区別すると良い。
※インテリアから記事１へのリンクは関連リンク等にした方が迷わなくて良い
生活雑貨
記事１
記事２
記事３
インテリア
記事4
記事5
記事6

31. ストラクチャを起こしてみよう
ツールは何でもいいです
自分はパワポで書くことが多いです。
31

32. 32
エリア定義作成時のポイント
最初は３～４つのエリアでざっくり区切ってみる。
ナビゲーションエリア、プロモーションエリア、関連エリア、本文エリア、など。
プロモーションエリア
ナビゲーションエリア
関連
エリア
コンテンツエリア

33. 33
エリア定義を起こしてみよう
ツールは何でもいいです
自分はパワポで書くことが多いです。

34. おしまい
34