1. 2016/01/29 OBS 勉強会 #1
Webアクセシビリティが
無視されすぎで
気にくわない。

2. 2016/01/29 OBS 勉強会 #1
上野 裕樹
産業技術大学院大学 人間中心デザイン2012年度卒業生
大規模サイトの設計・運用マネジメント
マークアップ・フロントエンドの設計・実装
中小企業のコンサルタントや、チームマネジメントなど
株式会社大塚ビジネスサービス Web制作チーム所属
インフォメーションアーキテクト / フロントエンドアーキテクト

3. 2016/01/29 OBS 勉強会 #1
１．はじめに
２．少し、世界のデータを見てみる
３．日本の話も少し
４．昨今のUXについても少し
５．W3C的な話
６．Webアクセシビリティとは・・・
７．Webアクセシビリティのメリット
８．最後に

4. 2016/01/29 OBS 勉強会 #1
１．はじめに
２．少し、世界のデータを見てみる
３．日本の話も少し
４．昨今のUXについても少し
５．W3C的な話
６．Webアクセシビリティとは・・・
７．Webアクセシビリティのメリット
８．最後に

5. 2016/01/29 OBS 勉強会 #1
１．はじめに
Webアクセシビリティって、
高齢者とか障害者向けでしょ？
Webアクセシビリティって、
ガイドライン作ることでしょ？
Webアクセシビリティって、
お金がかかるでしょ？

6. 2016/01/29 OBS 勉強会 #1
１．はじめに
違うよ！！！

7. 2016/01/29 OBS 勉強会 #1
１．はじめに
アクセシビリティは、access と ability。
"Webの力はその普遍性にあります。障害の有無に関わらず誰もがアクセスできる
というのがWebの本質的な側面なのです。"
（出典：ティム・バーナーズ＝リー）
そもそも、Webそのものは、概念と存在そのものがアクセシブルなものなので、
“Webアクセシビリティ”などといった言葉があること時点で違和感を覚えるが、
まぁ、そういうものなんでしょう。

8. 2016/01/29 OBS 勉強会 #1
１．はじめに
・・・にもかかわらず・・・！

9. 2016/01/29 OBS 勉強会 #1
１．はじめに
自分にしかわからない言葉を使ったり
作り手によって、わざわざ非アクセシブルにしている！
わざわざ手間をかけて、質の低いものを！
テキストを画像にしたり
作り手の勝手な構造をもったり
田中は、おれおれ
スーパーハイパーってかんじ？
独自グリッドでのレイアウトで作ったり

10. 2016/01/29 OBS 勉強会 #1
１．はじめに
作り手の勝手な都合で、WWWの思想を捻じ曲げ、信念を無視し、使う人を踏みに
じることが、アイディンティティと言えるのだろうか？
仕事だから、売上のために、流行りだから、
そう自己正当化し、挙句には、
と勘違いしている人間の、なんと多いことか。
自分が気に入るものが世界が求めてい
るものだ。

11. 2016/01/29 OBS 勉強会 #1
１．はじめに
２．少し、世界のデータを見てみる
３．日本の話も少し
４．昨今のUXについても少し
５．W3C的な話
６．Webアクセシビリティとは・・・
７．Webアクセシビリティのメリット
８．最後に

12. 2016/01/29 OBS 勉強会 #1
２．少し、世界のデータを見てみる
言語の壁
世界には8000の言語があると言われている。
普段話されている言語の人口順位（上位10言語）
※人口は2009年現在の概算。 ただし、中国語は12、ア
ラビア語は16の下位分類の合計である。統計および分類
は、エスノローグ第十六版による。
（出典：Wikipedia）

13. 2016/01/29 OBS 勉強会 #1
言語の壁
Google Translate API は、50種類以上の言語の翻訳できる。しかし、難しい表現、長す
ぎる文書、言語独特の言い回しなどは、正確な翻訳が出来ないため、
簡単で短く、主語述語がある読みやすい文章で書かれてあるとよい。
これは、ネイティブ言語だけであっても、全く同様のことが言える、最も基本的なことである。
例えば、こんなことで解決できるのでは？
２．少し、世界のデータを見てみる

14. 2016/01/29 OBS 勉強会 #1
言語の壁
日本語なら、Yahoo!のテキスト解析が非常に優秀。
日本語形態素解析、かな漢字変換、校正支援など。
また、Wordに【読みやすさの評価】ができる機能があるので、それを使うのもよい。
例えば、こんなことで解決できるのでは？
２．少し、世界のデータを見てみる

15. 2016/01/29 OBS 勉強会 #1
環境の壁
インターネットの普及率をみてみると、世界全体での普及
率は23.44%とされている。また、2014年の第4四半期
のネットワーク接続速度の全世界平均データでは、
4.5Mbpsが世界平均で、各地の最高速度を平均すると
26.9Mbps。※人口は2009年現在の概算。
（出典：Akamai / GigaZiNE）
これは、はるかに多くの人が、これから初めて、決して早いと
は言えない環境で、インターネットやWebサイトに触れる
ということを、念頭に置く必要があることを示唆している。
２．少し、世界のデータを見てみる

16. 2016/01/29 OBS 勉強会 #1
環境の壁
複雑なUIや構造、無駄な情報は、多くの人にとって"不利益"であり、世界的に損失で
ある。
WWW全体をインフラとして捉え、文脈理解の中で、
どれだけシンプルに作れるかがポイントである。
例えば、こんなことで解決できるのでは？
２．少し、世界のデータを見てみる

17. 2016/01/29 OBS 勉強会 #1
国・文化の多さ
206ヶ国ある。
それぞれの文化（人間が社会の成員として獲得する振る
舞いの複合された総体）が存在し、共有されている価値
観は異なり、国や文化の違いによる情報認知のされ方は
様々。
（出典：Wikipedia）
“グローバル企業”という言葉を考えることなく、世界とのつな
がりは受け止められる状況になってきた昨今ではあるが、
WWW自体はそもそもグローバルな存在であり概念であ
る。
２．少し、世界のデータを見てみる

18. 2016/01/29 OBS 勉強会 #1
国・文化の多さ
総じて、最も好きな色として青、緑、白が多く挙がっていま
す。この3色は、これら7か国の調査で「平和と穏やかさ」を
連想する色として認識されています。
（出典：多言語サイト情報メディア キテミル
Madden, Thomas, Hewett, Kelly, and Roth, Martin S. 2000. “Managing
images in different cultures: a cross-national study of color meanings
and preferences,” Journal of International Marketing 8: 90-107.）
例えば、こんなことで解決できるのでは？
このように、文化を含めた多様な人間の特性をまとめているサイトや文献も多々ある。
そういった情報を元に、デザインすることはどうだろうか。
２．少し、世界のデータを見てみる

19. 2016/01/29 OBS 勉強会 #1
色彩、コントラスト、ライティング、
UI、など、WWW上でのあるべき
姿の主軸が見えてきた。
２．少し、世界のデータを見てみる

20. 2016/01/29 OBS 勉強会 #1
１．はじめに
２．少し、世界のデータを見てみる
３．日本の話も少し
４．昨今のUXについても少し
５．W3C的な話
６．Webアクセシビリティとは・・・
７．Webアクセシビリティのメリット
８．最後に

21. 2016/01/29 OBS 勉強会 #1
３．日本の話も少し
環境 ・ブラウザ（デスクトップ）
（出典：statcounter.com）

22. 2016/01/29 OBS 勉強会 #1
環境 ・ブラウザ（モバイル）
（出典：statcounter.com）
３．日本の話も少し

23. 2016/01/29 OBS 勉強会 #1
環境 ・プラットフォーム
（出典：statcounter.com）
３．日本の話も少し

24. 2016/01/29 OBS 勉強会 #1
インターネットの普及状況
（出典：総務省）
３．日本の話も少し

25. 2016/01/29 OBS 勉強会 #1
インターネットの利用状況
（出典：総務省）
平成26年末のインターネット利用者数3は、
平成25年末より26万人減少して10,018万人（前年
比0.3%減）、
人口普及率は昨年末と同様82.8％となった。
また、端末別インターネット利用状況をみると、
「自宅のパソコン」が53.5％と最も多く、
次いで「スマートフォン」（47.1％）、
「自宅以外のパソコン」（21.8％）となっている。
３．日本の話も少し

26. 2016/01/29 OBS 勉強会 #1
１．はじめに
２．少し、世界のデータを見てみる
３．日本の話も少し
４．昨今のUXについても少し
５．W3C的な話
６．Webアクセシビリティとは・・・
７．Webアクセシビリティのメリット
８．最後に

27. 2016/01/29 OBS 勉強会 #1
４．昨今のUXについても少し
UXという言葉が、バズワードになった。
UXDとはなんだろうか？
特性や状況も含めて、 「ユーザー」 は多様
（ISO/IEC25010によるユーザーの区別）であり、
設計側が関与できないことが多い。
これは、UX白書でも言及されている。

28. 2016/01/29 OBS 勉強会 #1
４．昨今のUXについても少し
HCDなどでインタビューやSD法やあれこれで情報を取得できたとしても、その時の感情や状況に
よって変わるし、記憶も変容する。
ゆえに、目の前のあるデータだけを正しいと信じて何かを作り上げるのは、統計学の理論からもわ
かるとおり、極めて慎重にならなければならない。
UXを考慮するのであれば、人とは何か、人はどう感じ、考えるか、といった、
文化・言語・国籍の違い、老若男女といった差異、障害・能力の如何を問わずに利用できるよう
に配慮するユニバーサルデザインは、まずもって前提としてあるべきなのである。

29. 2016/01/29 OBS 勉強会 #1
４．昨今のUXについても少し
最初から、特定の誰かのためだけに作られた局所的な人工物
は、他の人工物とのスケーラビリティも確保できず、
メンテナビリティ、サステナビリティにも脆い。
さらにいえば、局所的対応のため、
全体的なユーザビリティの担保も、極小になることは言うまで
もない。
これは、WWWの意思に反する。

30. 2016/01/29 OBS 勉強会 #1
１．はじめに
２．少し、世界のデータを見てみる
３．日本の話も少し
４．昨今のUXについても少し
５．W3C的な話
６．Webアクセシビリティとは・・・
７．Webアクセシビリティのメリット
８．最後に

31. 2016/01/29 OBS 勉強会 #1
５．W3C的な話
文書から文書へ飛べる仕組み、それがハイパーリンクであり、
HTTP（Hypertext Transfer Protocol）は、その原点ま
た現在も、基礎となっている。
WWW上の文書を記述するために、HTMLが存在し、どのよ
うなマークアップが存在するかは、文書型宣言（DOCTYPE
宣言）の中で、文書型定義（Document Type
Definition）を定義するためのスキーマ言語とリンクする。
いずれにせよ、"文書"であることが、最も基本であり、それは
つまり、"テキスト"である。

32. 2016/01/29 OBS 勉強会 #1
５．W3C的な話
CSSは、その文書を装飾し、理解を促進させるユーザビリティ
の役目を果たす。
JavaScriptは、動的なウェブサイト構築や、リッチインターネッ
トアプリケーションなど高度なユーザインタフェースの開発に用い
られる。

33. 2016/01/29 OBS 勉強会 #1
５．W3C的な話
いずれにせよ、目の前の"見えているもの"しか考慮にいれないことが、
いかに本質をみていないかに、愕然とする結果になることが多い。
マシンリーダブルとかも邪険にしすぎ。
Web of Things at W3C

34. 2016/01/29 OBS 勉強会 #1
１．はじめに
２．少し、世界のデータを見てみる
３．日本の話も少し
４．昨今のUXについても少し
５．W3C的な話
６．Webアクセシビリティとは・・・
７．Webアクセシビリティのメリット
８．最後に

35. 2016/01/29 OBS 勉強会 #1
６．Webアクセシビリティとは・・・
Webアクセシビリティは、
Webの普遍的な基礎であり、Webの本質であり、テクニックである。
Webアクセシビリティは、Webサイトにおいて、誰でも閲覧できる状態を作り、
World Wide Webたる状況を作ることができる基本である。
・テキストを画像にしたり、自分にしかわからない言葉を使ったり
・固定のグリッドでのレイアウトで作ったり
・作り手の勝手な構造をもったり
といったことが、いかに愚かであるかわかってくる。

36. 2016/01/29 OBS 勉強会 #1
６．Webアクセシビリティとは・・・
・・・・にも関わらず、
"Web"デザイナーや、
"Web"エンジニア、
"Web"ディレクター
などといった肩書きを持った人が、
破滅的な人工物を世の中に送り出していることの、なんと多いことか。。。

37. 2016/01/29 OBS 勉強会 #1
６．Webアクセシビリティとは・・・
×
アクセシビリティを含む
W3C仕様
標準品質ライン
標準以下から始めるため、
製品品質が、標準以下に
なるパターン
標準から始めるため、
製品品質が、標準以上に
なるパターン
HCD！UX！
HCD！UX！
×

38. 2016/01/29 OBS 勉強会 #1
６．Webアクセシビリティとは・・・
UXだとかHCDだとか主張する前に、
アクセシビリティ（UD）を勉強した方が、
よっぽど社会的にまともなものが
作れるでしょーが！！！

39. 2016/01/29 OBS 勉強会 #1
１．はじめに
２．少し、世界のデータを見てみる
３．日本の話も少し
４．昨今のUXについても少し
５．w3c的な話
６．Webアクセシビリティとは・・・
７．Webアクセシビリティのメリット
８．最後に

40. 2016/01/29 OBS 勉強会 #1
７．Webアクセシビリティのメリット
Webアクセシビリティって、
高齢者とか障害者向けでしょ？
どのような環境下でも情報閲覧す
る可能性が高くなるため、
社会的（ビジネス的）な
機会損失を小さくできる。

41. 2016/01/29 OBS 勉強会 #1
７．Webアクセシビリティのメリット
Webアクセシビリティって、
ガイドライン作ることでしょ？
標準の仕様を元に作れば、人工物品
質は必ず一定以上を保つことができ、
手戻りやエラーなどを回避することができ
るため、人や時間やコストを抑えること
ができる。

42. 2016/01/29 OBS 勉強会 #1
７．Webアクセシビリティのメリット
Webアクセシビリティって、
お金がかかるでしょ？
大局的なコストを抑えられること以上に、
スケーラビリティ、メンテナビリティ、サス
テナビリティを確保でき、無駄な議論で
時間を費やすこともなくなり、
みんなハッピー。

43. 2016/01/29 OBS 勉強会 #1
７．Webアクセシビリティのメリット
Webアクセシビリティ（ユニバーサルデザイン）を
前提にデザインすることは、
想像できないほどの多大なメリットを、
存分に享受できることがわかる。

44. 2016/01/29 OBS 勉強会 #1
７．Webアクセシビリティのメリット
・・・なのですが、
まぁ「ステークホルダー」がお望みなら、
仕方ないですよね（嫌味）

45. 2016/01/29 OBS 勉強会 #1
１．はじめに
２．少し、世界のデータを見てみる
３．日本の話も少し
４．昨今のUXについても少し
５．W3C的な話
６．Webアクセシビリティとは・・・
７．Webアクセシビリティのメリット
８．最後に

46. 2016/01/29 OBS 勉強会 #1
８．最後に
「自分が正しい」といった作り手のわがままのために、
Webアクセシビリティ・・・というより、
Webの本質が無視されすぎで、気にくわない。

47. 2016/01/29 OBS 勉強会 #1
ありがとうございました。