2015年7月4日（土）に開催された「AccSell Meetup 009『デザイニング Webアクセシビリティ』ディレクターズカット版」のセッションで用いたスライドです。 http://accsell.net/info/accsell-meetup009.html 書籍「デザイニングWebアクセシビリティ」2015年7月24日（金）に発売！ http://www.amazon.co.jp/dp/4862462650/

1. アクセシブルなナビゲーション
デザインの考え方
RIkiya Ihara / @magi1125

2. デザイニング
Webアクセシビリティ
2015年7月24日（金）発売！
http://www.amazon.co.jp/dp/4862462650/

3. http://www.jjg.
net/elements/translations/elements
_jp.pdf

4. 構成
● 前編：よくある問題と解決アプローチ
○ デザイニングWebアクセシビリティよりご紹介
● 後編：ナビゲーションデザインとアクセシビリティ
○ 「特定」と「さまざま」の関係性

5. よくある問題と解決アプローチ

6. ナビゲーションとは
ある地点から別の地点へ誘導するもの
あるいはその過程を表示するもの
グローバルナビゲーション、ローカルナビゲーション、パンくず、関連情報、検索、サ
ジェスト、サイトマップ、メガメニュー、ドロワー、スプリングメニュー、カテゴリトップメ
ニュー、ダッシュボード、ステップインジケーター、ページネーション、タグクラウド、
キーワードリンク、目次…

7. よいナビゲーションとは
使いやすい わかりやすい 気持ちのよい
独自性がある かっこいい 先進的
豊富 多彩 シンプル 透明

9. よいナビゲーションとは
いまの居場所がわかる
行き先の名前がわかる
いろんな手段が選べる
いろんな経路が選べる
実際に行ける
やり直せる

10. アクセシブルなナビゲーションとは
● なるべく多くの人が「使える」ナビゲーションのこと
● 知覚可能、操作可能、理解可能

11. アクセシブルなナビゲーションの原則
慣例 冗長 寛容 一貫

12. 慣例
NG

13. 慣例
OK

14. 慣例
NG

15. 慣例
OK

16. 慣例
NG

17. 慣例
OK

18. 冗長
NG

19. 冗長
OK

20. 冗長
NG

21. 冗長
OK

22. 冗長
NG

23. 冗長
OK

24. 寛容
NG

25. 寛容
OK

26. 寛容
NG

27. 寛容
OK

28. 寛容
NG

29. 寛容
OK

30. 一貫
NG

31. 一貫
OK

32. 一貫
OK

33. 一貫
NG

34. 一貫
NG

35. ※書籍「デザイニング Webアクセシビリティ」240ページを参照ください
一貫
OK

36. 一貫
NG

37. 一貫
OK

38. ナビゲーションデザインと
アクセシビリティ

39. 素朴な疑問
● アクセシビリティの話じゃない？
● ユーザビリティの話？
● 割と普通のこと？

40. http://intertwingled.org/jp/

41. http://www.bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html

42. テキスト・セマンティクス
インタラクション
表層
構造・機能・内容

43. WCAG 2.0
2 操作可能
2.4 ナビゲーション可能
2.4.5 複数の手段（AA）
2.4.8 現在位置（AAA）
3 理解可能
3.2 予測可能
3.2.3 一貫した
ナビゲーション（AA）
3.2.4 一貫した
識別性（AA）

44. 「アクセス」のスコープ
● 取り組みとしてのレイヤーやレベルは存在する
● 現実的には、情報が取得できても、
理解して利用できなければ、体験としては最悪

45. 「誰でも必ず使えるナビ」は存在しない
● 検討開始の軸はユーザビリティ
● 最初から全体を見るとビジネス要件に繋げられない
● 特定ユーザー想定でないと合意形成しづらい
● いわゆる情報設計のプロセスは普通にやる

46. ※書籍「デザイニングWebアクセシビリティ」
42ページからの「3章 要件定義」の「概要と流れ」および
66ページからの「4章 ナビゲーション設計」の「概要と流れ」を
参照ください

47. 「特定」と「さまざま」
ユーザビリティ：ISO 9241-11
特定の目的を達成するために、特定の利用者が、
特定の利用状況で、有効性、効率性、そして満足とともに
ある製品を利用することができる度合い。
アクセシビリティ：ISO 9241-20（JIS X 8341-1:2010）
様々な能力をもつ最も幅広い層の人々に対する製品，
サービス，環境又は施設（のインタラクティブシステム）の
ユーザビリティ
http://modelessdesign.com/modelessandmodal/2009/11/25/iso-9241-11/

48. http://blog.chachaki.net/archives/33311401.html

49. 特定ユーザーへの最適化で十分？
● 業務アプリ ：学習が前提、利用を強制
● ゲーム ：学習が前提、レベルシステムで強化
● GitHub ：教科書が出てる程、しくじると大変
● スペコン ：独自UI、わかる人がわかればいい

50. Webの特徴
● ユーザーの状況を特定しきれない
○ 急いでる？ 落ち着いてる？
○ 移動中？ 家？ 会社？ バカンス中？
○ どのデバイスで、どのUAでアクセスしてる？
○ さっきまで何を見てた？ 次に何を見る？
● もちろん狙いはつけるが、全部は無理

51. Webの特徴
● サイト個別の学習を前提としづらい
○ Google検索による直接ランディング
○ SNSやキュレーションメディアでの遭遇
● セレンディピティによる発見
○ アクセシビリティを調べていたのに、気づくと
なぜか「当たり前体操」「日本エレキテル連合」「スー
パー・ササダンゴ・マシン」を調べていた

52. アクセシブルなナビゲーションが必要
慣例 冗長 寛容 一貫

53. 後から付け足すのではなく、同時に考える
● ユーザビリティが検討の軸なのは確か
● だが、画面設計やプロトタイピングが進んでから
アクセシビリティ成分を足すのは悪手
○ 目指すところが違うので根本的に無理が生じる
○ 後付け感が強く、どこか不自然な感じになる

55. バランスを考えながら案出する
● 常に「きもち、一般化」を心がける
● 一般 ≒ パターン、把握を常に怠らない
○ サイトのトレンド
○ 各種デザインガイドライン
○ デザインパターン集
○ ビジネスドメインにおける一般的な表現

56. http://matome.naver.jp/odai/2131496429696477001
http://spotlight-media.jp/article/13496080201729340

57. やりすぎないように
nav
nav nav
nav navコンテンツ
nav
nav
nav

58. やりすぎないように

59. 高いレベルの「ふつう」を作る
それがアクセシブルなWebIA

60. デザイニング
Webアクセシビリティ
2015年7月24日（金）発売！
http://www.amazon.co.jp/dp/4862462650/

61. ありがとうございました