ユーザビリティとは何か？
ユーザーが使いやすい画面のデザインを考える

株式会社オープントーン
業務ソリューション事業部

山口貴也

はじめに

• 専門のデザイナーではないシステム開発者にとって、画面のデザインという作業は専門分野外と考えられることが多い• ユーザーが使いやすい画面という意識は置き去りにされてしまいがち

2目次
1. アクセシビリティとは
2. ユーザビリティの低い、使いにくい画面ができあがってしまった場合の問題点
3. ユーザビリティとは
4. ユーザビリティの悪いデザイン例
5. ユーザビリティ改善①「情報をわかりやすく整理する」
6. ユーザビリティ改善②「ユーザーが操作を間違えないように誘導する」
7. ユーザビリティ改善③「ユーザーの目的に一致した構成にする」

3

1

アクセシビリティとはアクセシビリティとユーザビリティの違い
アクセシビリティ• 情報への近づきやすさ• できるだけ多くの人が画面を利用できるようにすること

ユーザビリティ• 使いやすさ• 画面を利用する人が、ストレスを感じず、操作を間違えないようにする度合い
4

1

アクセシビリティとはアクセシビリティとは• “誰も“が必要とする情報を手に入れられるようにすること
1. さまざまの閲覧環境のユーザーに対応すること
PC端末・モバイル端末への対応、複数のブラウザソフトへの対応
2. 高齢者や障害者向けの対応
文字サイズの拡大や音声読み上げブラウザへの対応、等

5

1

アクセシビリティとはアクセシビリティの例①
PC端末●複数端末への対応

Webサイト

端末によって表示する
ページを分ける

モバイル端末6

アクセシビリティとは

1

アクセシビリティの例②●音声読み上げ対応•

ページのタイトル（タグ）はそのページの内容を要約したものにする• 画像には代替テキスト（ 属性）を設定する• 重要な意味を持つ単語には読み上げのできない記号を使用しない

7

目次
1. アクセシビリティとは
2. ユーザビリティの低い、使いにくい画面ができあがってしまった場合の問題点
3. ユーザビリティとは
4. ユーザビリティの悪いデザイン例
5. ユーザビリティ改善①「情報をわかりやすく整理する」
6. ユーザビリティ改善②「ユーザーが操作を間違えないように誘導する」
7. ユーザビリティ改善③「ユーザーの目的に一致した構成にする」

8

2

ユーザビリティの低い、使いにくい画面ができあがってしまった場合の問題点
システム開発者開発を依頼した顧客（業務システムの場合）

必要最低限の機能を満たすだけの画面を作る
入力フォームに統一感がなくて使いにくいな。
画面の遷移にも時間がかかる。
→作業が非効率になるので画面を作りなおしてもらおう

できあがった画面デザイン

作業の非効率化、作りなおしのリスク9

2

ユーザビリティの低い、使いにくい画面ができあがってしまった場合の問題点
システム開発者

多数の利用ユーザー（ショッピングサイトなどの場合）

必要最低限の機能を満たすだけの画面を作る商品の紹介が見づらいな。
購入手続きがわかりにくくて不安になる。
→他のサイトで買うことにしよう

できあがった画面デザイン

顧客損失のリスク10

2

デザイナーでなくとも使いやすい画面のデザインはできる• 必要なのはスタイリングのセンスではなく、デザインの手法• 「アクセシビリティ」と「ユーザビリティ」について知ること

11目次
1. アクセシビリティとは
2. ユーザビリティの低い、使いにくい画面ができあがってしまった場合の問題点
3. ユーザビリティとは
4. ユーザビリティの悪いデザイン例
5. ユーザビリティ改善①「情報をわかりやすく整理する」
6. ユーザビリティ改善②「ユーザーが操作を間違えないように誘導する」
7. ユーザビリティ改善③「ユーザーの目的に一致した構成にする」

12

3

ユーザビリティとはユーザビリティとは• 使いやすさ、実用性

情報が分かりやすく整理されているかユーザーが操作を間違えにくい構成となっているかユーザーの目的に一致した構成となっているか

13

目次
1. アクセシビリティとは
2. ユーザビリティの低い、使いにくい画面ができあがってしまった場合の問題点
3. ユーザビリティとは
4. ユーザビリティの悪いデザイン例
5. ユーザビリティ改善①「情報をわかりやすく整理する」
6. ユーザビリティ改善②「ユーザーが操作を間違えないように誘導する」
7. ユーザビリティ改善③「ユーザーの目的に一致した構成にする」

14ポイント10倍セール中！！！
■商品詳細■

おすすめ
コーヒーメーカー！
商品番号 XXX-XXX
メーカー希望小売価格20,000円
価格17,000円（税込 18,360円）送料込

今ならポイント10倍です
在庫：△（あと僅か）

個数

1

買い物カゴに入れる

商品について問い合わせする
お気に入りに登録

シェアするレビューを投稿する------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------メーカー希望小売価格はメーカーカ
タログに基づいて掲載しています
容量

750ml

消費電力750W

重量1.2kg（本体）サイズ

幅17.0×奥行21.0×高さ
26.5cm

こちらもセットでおすすめ！

Clickして詳細ページへ

4 ユーザビリティの悪いデザイン例（ショッピングサイトの場合）

ポイント10倍セール中！！！

4 ユーザビリティの悪いデザイン例（ショッピングサイトの場合）■商品詳細■

おすすめ
コーヒーメーカー！
商品番号 XXX-XXX
メーカー希望小売価格20,000円
価格17,000円（税込 18,360円）送料込

今ならポイント10倍です
在庫：△（あと僅か）

個数

1

買い物カゴに入れる

商品について問い合わせする
お気に入りに登録

シェアする
レビューを投稿する------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------メーカー希望小売価格はメーカーカ
タログに基づいて掲載しています

画像やテキストの配置が整理されておらず、ユーザーが必要とする情報
容量750ml
消費電力 750W（価格、品物のスペック、等）がど
重量
1.2kg（本体）
こにあるか、一目ではわかりづらいサイズ
幅17.0×奥行21.0×高さ26.5cm

こちらもセットでおすすめ！

Clickして詳細ページへ

1. 情報が分かりやす
く整理されているか×

4 ユーザビリティの悪いデザイン例（ショッピングサイトの場合）

ポイント10倍セール中！！！
■商品詳細■

おすすめ
コーヒーメーカー！
商品番号 XXX-XXX
メーカー希望小売価格20,000円
価格17,000円（税込 18,360円）送料込

今ならポイント10倍です
在庫：△（あと僅か）

個数

1

買い物カゴに入れる

商品について問い合わせする
お気に入りに登録

シェアする
レビューを投稿する------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------メーカー希望小売価格はメーカーカ
タログに基づいて掲載しています

商品の購入を決定するボタンがどこにあるのかわかりにくい

容量

750ml

消費電力

750W

重量

1.2kg（本体）サイズ

幅17.0×奥行21.0×高さ
26.5cm

こちらもセットでおすすめ！

Clickして詳細ページへ

2.ユーザーが操作を間違えにくい構成となっているか×

4 ユーザビリティの悪いデザイン例（ショッピングサイトの場合）

ポイント10倍セール中！！！
■商品詳細■

おすすめ
コーヒーメーカー！
商品番号 XXX-XXX
メーカー希望小売価格20,000円
価格17,000円（税込 18,360円）送料込

今ならポイント10倍です
在庫：△（あと僅か）

個数

1

買い物カゴに入れる

商品について問い合わせする
お気に入りに登録

シェアする
レビューを投稿する------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------メーカー希望小売価格はメーカーカタログに基づいて掲載しています

対象の商品以外の、関連性の薄い情報がページの多くを占めてしまっている

容量750ml

消費電力

750W

重量

1.2kg（本体）サイズ

幅17.0×奥行21.0×高さ
26.5cm

こちらもセットでおすすめ！

Clickして詳細ページへ

3.ユーザーの目的に一致した構成となっているか×目次
1. アクセシビリティとは
2. ユーザビリティの低い、使いにくい画面ができあがってしまった場合の問題点
3. ユーザビリティとは
4. ユーザビリティの悪いデザイン例
5. ユーザビリティ改善①「情報をわかりやすく整理する」
6. ユーザビリティ改善②「ユーザーが操作を間違えないように誘導する」
7. ユーザビリティ改善③「ユーザーの目的に一致した構成にする」

195ユーザビリティ改善①
情報をわかりやすく整理する
人間が把握しやすいと感じる情報の数には限界がある• 認知学によれば、人間が一度に認識できる情報量の限界は、7±2が目安という• Webページの場合は3～5、多くても7を目安とする

20

5

ユーザビリティ改善①
情報をわかりやすく整理する• 情報量がそれより多くなる場合は、カテゴリー分けをして情報の単位をまとめる

21

5

参考例

参考：日本HP 公式オンラ
インストア
http://h50146.www5.hp.com/directplus/personal/

22

5

参考例

参考：日本HP 公式オンラ
インストア
http://h50146.www5.hp.com/directplus/personal/

初めに顧客となるユーザーの入り口を「個人」と「法人」の2種類だけにして、紹介する商品の大カテゴリを分けている

23

5

参考例

参考：日本HP 公式オンラ
インストア
http://h50146.www5.hp.com/directplus/personal/

商品の分類をさらに5種類にカテゴライズし、ユーザーの目的に沿った商品の情報を探しやすくしている24

目次
1. アクセシビリティとは
2. ユーザビリティの低い、使いにくい画面ができあがってしまった場合の問題点
3. ユーザビリティとは
4. ユーザビリティの悪いデザイン例
5. ユーザビリティ改善①「情報をわかりやすく整理する」
6. ユーザビリティ改善②「ユーザーが操作を間違えないように誘導する」
7. ユーザビリティ改善③「ユーザーの目的に一致した構成にする」

25

6

ユーザビリティ改善②
ユーザーが操作を間違えないように誘導する
ユーザーに正しくページのデザインを理解してもらい、操作ミスがないように動いてもらう• ユーザーの行動はメンタルモデルにもとづいて行われる• メンタルモデルを意識し、リンクやボタンの名称はユーザーのメンタルモデルを裏切らないデザインにする

26

6

ユーザビリティ改善②
ユーザーが操作を間違えないように誘導する【メンタルモデル】
過去の経験から自然に形成される観念や仮定、理論
単純な例として、「野生動物は危険だ」というメンタルモデルがあるとする。このメンタルモデルを保持する人は、野生動物に遭遇したとき反射的に逃げようとするだろう。これは自身のメンタルモデルを適用した結果であり、野生動物に対するメンタルモデルが形成されていない人や違うメンタルモデルを保持している人はこのような反応はしないと考えられる。(Wikipedia抜粋)

ここではユーザーが持つWebデザインの一般認識を示す
27

6

メンタルモデルに沿ったデザインの例
参考：Amazon.co.jp
http://www.amazon.co.jp/28

6

メンタルモデルに沿ったデザインの例
参考：Amazon.co.jp
http://www.amazon.co.jp/

画面左上にサイトのロゴが表示されていた場合、多くのユーザーはこのロゴをクリックすれば、トップページへ戻れると考える29

6

メンタルモデルに沿ったデザインの例
参考：Amazon.co.jp
http://www.amazon.co.jp/「ショッピングカートに入れる」というボタンは、購入するための手続きとして理解できる30

目次
1. アクセシビリティとは
2. ユーザビリティの低い、使いにくい画面ができあがってしまった場合の問題点
3. ユーザビリティとは
4. ユーザビリティの悪いデザイン例
5. ユーザビリティ改善①「情報をわかりやすく整理する」
6. ユーザビリティ改善②「ユーザーが操作を間違えないように誘導する」
7. ユーザビリティ改善③「ユーザーの目的に一致した構成にする」

31

7

ユーザビリティ改善③
ユーザーの目的に一致した構成にする• ユーザビリティは特定のユーザーの利便性を良くすること• アクセシビリティが不特定多数の”誰も”が必要とする情報にたどり着けるようにすることであるならば、ユーザビリティとは特定の目的を持ったユーザーがその目的を達成することを容易にする
こと

32

ポイント10倍セール中！！！
■商品詳細■

おすすめ
コーヒーメーカー！
商品番号 XXX-XXX
メーカー希望小売価格20,000円
価格17,000円（税込 18,360円）送料込

今ならポイント10倍です
在庫：△（あと僅か）

個数

1

買い物カゴに入れる

商品について問い合わせする
お気に入りに登録

シェアする
レビューを投稿する

個人のオフィスやリビングにあっても邪魔に感じないコンパクトサイズ------------------------------------------------------------------------------------------------------------------------------------------------------------------------メーカー希望小売価格はメーカーカ
タログに基づいて掲載しています
容量750ml

消費電力750W

重量1.2kg（本体）サイズ

幅17.0×奥行21.0×高さ
26.5cm

こちらもセットでおすすめ！

Clickして詳細ページへ

7

ユーザビリティの改善例
（改善前）

7

ホーム > 家電 > コーヒーメーカー > XXXXコーヒーメーカー [ブラウン]

XXXXコーヒーメーカー（商品の購入が目的）[ブラウン]

商品番号 XXX-XXX

価格（税込）：18,360円※送料込(メーカー希望小売価格20,000円)
この商品をカートに入れる

在庫：△（あと僅か）

この商品をお気に入りに入れる
商品詳細●容量：750ml●重量：1.2kg（本体）●消費電力：750WＷ●サイズ：幅17.0×奥行21.0×高さ26.5cm

個人のオフィスやリビングにあっても邪魔に感じないコンパクトサイズ

ポイント10倍セール中！！
詳細はこちらを-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

この商品について問い合わせする★関連商品を見る★レビューを見る/書く

ユーザビリティの改善例

YYYY社のコーヒーメーカーも見る
ZZZZ社のコーヒーメーカーも見る7

ホーム > 家電 > コーヒーメーカー > XXXXコーヒーメーカー [ブラウン]

XXXXコーヒーメーカー

ユーザビリティの改善例（商品の購入が目的）[ブラウン]

商品番号 XXX-XXX

価格（税込）：18,360円※送料込(メーカー希望小売価格20,000円)
この商品をカートに入れる

在庫：△（あと僅か）

この商品をお気に入りに入れる
商品詳細●容量：750ml●重量：1.2kg（本体）●消費電力：750WＷ●サイズ：幅17.0×奥行21.0×高さ26.5cm

個人のオフィスやリビングにあっても邪魔に感じないコンパクトサイズ-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

この商品について問い合わせする★関連商品を見る★レビューを見る/書く①見出しを明確にする
ユーザーが求めているのは商品情報がメインなので、商品名を見出しにし、最初に目につく左上に配置する

ポイント10倍セール中！！
詳細はこちらを

YYYY社のコーヒーメーカーも見る
ZZZZ社のコーヒーメーカーも見る7

ホーム > 家電 > コーヒーメーカー > XXXXコーヒーメーカー [ブラウン]

XXXXコーヒーメーカー

ユーザビリティの改善例（商品の購入が目的）[ブラウン]

商品番号 XXX-XXX

価格（税込）：18,360円※送料込(メーカー希望小売価格20,000円)
この商品をカートに入れる

在庫：△（あと僅か）

この商品をお気に入りに入れる
商品詳細●容量：750ml●重量：1.2kg（本体）●消費電力：750WＷ●サイズ：幅17.0×奥行21.0×高さ26.5cm

個人のオフィスやリビングにあっても邪魔に感じないコンパクトサイズ-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

この商品について問い合わせする★関連商品を見る★レビューを見る/書く

ポイント10倍セール中！！
詳細はこちらを②重要な情報の周辺に余白を作ることで目につきやすくさせる
商品スペックなどの付加的な情報については
YYYY社のコーヒーメーカーも見る
下段に配置するなどする
ZZZZ社のコーヒーメーカーも見る7

ホーム > 家電 > コーヒーメーカー > XXXXコーヒーメーカー [ブラウン]

XXXXコーヒーメーカー

ユーザビリティの改善例（商品の購入が目的）[ブラウン]

商品番号 XXX-XXX

価格（税込）：18,360円※送料込(メーカー希望小売価格20,000円)
この商品をカートに入れる

在庫：△（あと僅か）

この商品をお気に入りに入れる
商品詳細●容量：750ml●重量：1.2kg（本体）●消費電力：750WＷ●サイズ：幅17.0×奥行21.0×高さ26.5cm

ポイント10倍セール中！！
③商品の購入を決定する重要なボタンは他のボタンと差別化し、強調する
商品問い合わせやお気に入り登録などの重要度が低いと思われる機能については、目立たないボタン、YYYY社のコーヒーメーカーも見る
またはテキストリンクのみにする
ZZZZ社のコーヒーメーカーも見る

個人のオフィスやリビングにあっても邪魔に感じないコンパクトサイズ-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

この商品について問い合わせする★関連商品を見る★レビューを見る/書く

詳細はこちらを7

ホーム > 家電 > コーヒーメーカー > XXXXコーヒーメーカー [ブラウン]

XXXXコーヒーメーカー

ユーザビリティの改善例（商品の購入が目的）[ブラウン]

商品番号 XXX-XXX

価格（税込）：18,360円※送料込(メーカー希望小売価格20,000円)④他にユーザーに伝えたい情報がある場合も、ユーザーが目的とする情報収集の邪魔にならないような配置にする

この商品をカートに入れる

在庫：△（あと僅か）

この商品をお気に入りに入れる
商品詳細●容量：750ml●重量：1.2kg（本体）●消費電力：750WＷ●サイズ：幅17.0×奥行21.0×高さ26.5cm

個人のオフィスやリビングにあっても邪魔に感じないコンパクトサイズ

ポイント10倍セール中！！
詳細はこちらを-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

この商品について問い合わせする★関連商品を見る★レビューを見る/書く

YYYY社のコーヒーメーカーも見る
ZZZZ社のコーヒーメーカーも見る

製品情報 > コーヒーメーカー > XXXXコーヒーメーカー

XXXXコーヒーメーカー
個人のオフィスやリビングにあっても邪魔に感じないコンパクトサイズ-------------------------------------------------------------------------------------------------------------------------

販売価格： 20,000円▶ご購入はこちらから

商品スペック●容量：750ml●重量：1.2kg（本体）●消費電力：750WＷ●サイズ：幅17.0×奥行21.0×高さ26.5cm

商品の特徴----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------▶ 他の製品と仕様を比較する▶ 製品についての問い合わせはこちら

7

ユーザビリティの改善例（商品の性能を知ることが目的）

製品情報 > コーヒーメーカー > XXXXコーヒーメーカー

XXXXコーヒーメーカー

7

ユーザビリティの改善例（商品の性能を知ることが目的）

個人のオフィスやリビングにあっても邪魔に感じないコンパクトサイズ-------------------------------------------------------------------------------------------------------------------------販売価格： 20,000円▶ご購入はこちらから

商品スペック●容量：750ml●重量：1.2kg（本体）●消費電力：750WＷ●サイズ：幅17.0×奥行21.0×高さ26.5cm

商品の特徴①商品の簡潔な紹介を最初に配置する
その商品のアピールポイントなどを、2～3行程度の簡潔な文章で説明したものを配置し、商品の概要を理解してもらう▶ 他の製品と仕様を比較する----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------▶ 製品についての問い合わせはこちら

製品情報 > コーヒーメーカー > XXXXコーヒーメーカー

XXXXコーヒーメーカー

7

ユーザビリティの改善例（商品の性能を知ることが目的）

個人のオフィスやリビングにあっても邪魔に感じないコンパクトサイズ-------------------------------------------------------------------------------------------------------------------------

販売価格： 20,000円▶ご購入はこちらから

商品スペック●容量：750ml●重量：1.2kg（本体）●消費電力：750WＷ●サイズ：幅17.0×奥行21.0×高さ26.5cm

商品の特徴②デザイン面も重視される商品である場合は、その商品画像を大きく取って、ユーザーの目にデザインを印象づける▶ 他の製品と仕様を比較する----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------▶ 製品についての問い合わせはこちら

製品情報 > コーヒーメーカー > XXXXコーヒーメーカー

XXXXコーヒーメーカー

7

ユーザビリティの改善例（商品の性能を知ることが目的）

個人のオフィスやリビングにあっても邪魔に感じないコンパクトサイズ-------------------------------------------------------------------------------------------------------------------------

販売価格： 20,000円▶ご購入はこちらから商品スペック●容量：750ml●重量：1.2kg（本体）●消費電力：750WＷ●サイズ：幅17.0×奥行21.0×高さ26.5cm

商品の特徴③購入の決定に関しては別ページへ遷移させ、そこで在庫やオプションなどの情報も提供する▶ 他の製品と仕様を比較する----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------▶ 製品についての問い合わせはこちら

まとめ
ユーザビリティとは情報が分かりやすく整理されているか→情報のカテゴリ化
ユーザーが操作を間違えにくい構成となっているか→メンタルモデルに沿うこと
ユーザーの目的に一致した構成となっているか→特定の目的をもったユーザーに向けて、その目的を達成しやすいページ構成にすること
43

参考資料
• 「使える」サイトを作る 実践Webユーザビリティ 阿部 研二 (著, 編集), リンクアップ (著, 編集), 石田 優子 (監修)• Web ビジネスのためのユニバーサルデザイン成功の法則65• ウェブデザインのつくり方、インターフェイスデザインの考え方。

濱川 智 (著)矢野りん (著)• クリップアート素材：SOZAI KOUJOU（http://sozaikoujou.com/index.html）

44