界面よもやま話 ──アクセシビリティの実装を解釈する / kaimen-yomoyamabanashi

これは2020年8月14日開催、10人規模くらいの小さなライトニングトークイベントで発表したものです（配布版としてじゃっかん再構成しています）。アクセシビリティの実装に通じる界面にまつわる雑多なトピックを、僕なりの解釈でゆるくお話するものです。

Transcript

1. 界面よもやま話 ── アクセシビリティの実装を解釈する 趣味の世界ライトニングトーク 2020年8月14日 森田 雄 株式会社ツルカメ 代表取締役社長 インフォメーション・アーキテクト／UXデザイナー
2. お前は誰だ。そしてお前の趣味は何だ。 • 株式会社ツルカメ代表取締役社長にして株式会社ネコメシ代表取締役CEO、そし て株式会社草冠CXOの森田雄です。IAおよびUXデザインの専門家を名乗ってお ります。 • Webにまつわる「ものづくり活動」がそもそも趣味ですが、趣味というには ちょっと業務に足を突っ込みすぎています。 • しかしながら、特に「アクセシビリティ」の領域は完全に趣味だといえます。 • 趣味で、25年以上やっています。 • もちろん、業務でアクセシビリティをやることもあります／ました。 • 本日は、アクセシビリティに通じる界面の話を、僕なりの解釈でお話しようと思 います。 2020/8/14 界面よもやま話 2 ※スライド内で使用している写真・スクショは自分で撮影したものです（いらすとやを除く）。表紙はパワポの素材です。
3. 界面とは何か • 何かと何かの境目のことを界面といい、コンピュータサイエンスの 領域では「インターフェース」ともいいます。 • 界面がいかにも界面っぽくなるためには、異なる相（そう）同士の 境目であることが必要です。 • 界面の代表格は「ユーザーインターフェース」です。コンピュータ とそれを利用する人間が情報をやりとりする（ないし操作する）際 の界面を意味していて、情報を得ようとする意思がこの界面を通過 してフィードバックを得ることを「インタラクション」といいます。 じゃっかん鶏卵ですが、インタラクションが発生しうるコンテクス トに応じて界面が発現するため、概念的には界面はレイヤーがごと く幾重にも折り重なっているといえます。 2020/8/14 界面よもやま話 3
4. 折り重なる界面レイヤー（概念） 人間 2020/8/14 界面よもやま話 4
5. 折り重なる界面レイヤー（概念） 人間 【マウスやキーボード等】 人間とコンピュータの界面 2020/8/14 界面よもやま話 5
6. 折り重なる界面レイヤー（概念） 人間 【マウスやキーボード等】 人間とコンピュータの界面 【OSやブラウザ等】 ユーザ(サイバー空間における人間)と データの界面 2020/8/14 界面よもやま話 6
7. 折り重なる界面レイヤー（概念） 人間 【マウスやキーボード等】 人間とコンピュータの界面 【OSやブラウザ等】 ユーザ(サイバー空間における人間)と データの界面 【コンテンツないしデータ等】 振る舞いの代行者(マウスカーソルやフォーカス)と HTML要素(情報のモジュール)の界面 2020/8/14 界面よもやま話 7
8. 折り重なる界面レイヤー（概念） 人間 人間が得ようとしている なにがしかのオブジェクト (情報であったり、 操作そのものであったり) 【マウスやキーボード等】 人間とコンピュータの界面 【OSやブラウザ等】 ユーザ(サイバー空間における人間)と データの界面 【コンテンツないしデータ等】 振る舞いの代行者(マウスカーソルやフォーカス)と HTML要素(情報のモジュール)の界面 2020/8/14 界面よもやま話 8
9. アクセシビリティはすべての界面に宿る • ユーザビリティを「使いやすさの度合い」というのに対して、 アクセシビリティは「近づきやすさの度合い」などといわれま す。 • 折り重なる界面レイヤーを極限まで薄くし、人間が得ようとす るなにがしかのオブジェクトに対して、いかに容易に到達させ るかということを「アクセシビリティを実装する」といいます。 • 人間は界面を障壁として認識するのではありません。アクセシ ビリティが宿った界面は、それ自体が道具であり、また人間自 身の代行者でもあります。 2020/8/14 界面よもやま話 9
10. 世の中には、自分が馬鹿になったのではない かと錯覚するオブジェクトが無数にあります。 • そうしたオブジェクトと人間の境目には「クソUI」という界面があります。 • 本日はライトニングトークということで、そうしたクソUIを界面レイヤー の解釈で解きほぐし、つくってしまったデザイナーのつもりになって自戒 していきたいと思います。 • ちなみに、人間は生きているだけで、無数のクソUIに遭遇しますので、そ のたびに自戒して改善案を講じるのは、効率のいいトレーニングです。 • なお、界面を薄くすることがアクセシビリティの勘所なので、それを阻害するデザ インは何であれアクセシビリティ品質の低下につながります。ユーザビリティの問 題でもUXデザインの問題でもマーケティングの問題でも、何でもです。 • 非webにおけるクソUIも、転じてwebに生かせることが多々ありますので良い教訓 になります。 2020/8/14 界面よもやま話 10
11. 洗浄便器の操作パネル(1) 2020/8/14 界面よもやま話 11
12. 洗浄便器の操作パネル(1) 2020/8/14 界面よもやま話 12 「小」と「eco小」で迷わせる意味 がわからない。もし「eco小」で流 れなかったら小より非ecoになる。
13. 2020/8/14 界面よもやま話 13 洗浄便器の操作パネル(2)
14. 2020/8/14 界面よもやま話 14 洗浄便器の操作パネル(2) 「快便」って何だ？ 出ない時に使うボタン？ というかアイコン小便だろこれ。 「Kids」キッズ自身に読めないラベル なぜつけた
15. 洗浄便器そのもの(蓋閉じ時) 2020/8/14 界面よもやま話 15
16. 洗浄便器そのもの(蓋閉じ時) 2020/8/14 界面よもやま話 16 うん、パンダだな
17. 洗浄便器そのもの(蓋開き時) 2020/8/14 界面よもやま話 17
18. 洗浄便器そのもの(蓋開き時) 2020/8/14 界面よもやま話 18 座ってるパンダだけでいいだろ なぜ正面を繰り返す
19. トイレ使用後の注意文 2020/8/14 界面よもやま話 19
20. トイレ使用後の注意文 2020/8/14 界面よもやま話 20 いまどきのトイレはえてして、立ち上が ると自動洗浄になるので間に合わない。 使ったことないやつが注意書きするな。
21. トイレ使用に関する注意文 2020/8/14 界面よもやま話 21
22. トイレ使用に関する注意文 2020/8/14 界面よもやま話 22 駅長かと思ったら便器そのもの ちなみにこれは別にクソUIではない （便所におけるUIではあるが）
23. 2020/8/14 界面よもやま話 23 洗濯機の操作パネル
24. 2020/8/14 界面よもやま話 24 洗濯機の操作パネル 「これっきりボタン」説明書を読まないとわか らないラベルをつけるな。必要かこれ？ こんなラベルつける暇あったら隣の鍵アイコン のところに「ロック」って書け
25. 2020/8/14 界面よもやま話 25 スライサーの厚さ調節レバー
26. 2020/8/14 界面よもやま話 26 スライサーの厚さ調節レバー これは際どい。そこまでクソでもな いが、説明書を見なくても わかるようにするべきだろう
27. 2020/8/14 界面よもやま話 27 スライサーの厚さ調節レバーの説明書
28. 2020/8/14 界面よもやま話 28 スライサーの厚さ調節レバーの説明書 この説明書は、スライサーのパッ ケージの裏面である。100%捨てら れる。番号は１・２・５のほうが良 かったのでは？
29. 2020/8/14 界面よもやま話 29 リモコン(TV会議システム)
30. 2020/8/14 界面よもやま話 30 リモコン(TV会議システム) シールですでに押してるだろ…
31. 2020/8/14 界面よもやま話 31 リモコン(エアコン)
32. 2020/8/14 界面よもやま話 32 リモコン(エアコン) 除湿切替？ 冷房や暖房は切替ではない？ 内部クリーン？ 電流カット？ 不在ECO？
33. 2020/8/14 界面よもやま話 33 壁据え付けのエアコンスイッチ
34. 2020/8/14 界面よもやま話 34 壁据え付けのエアコンスイッチ ツマミを強にしている時、 最強を発動可能
35. 照明のスイッチ 2020/8/14 界面よもやま話 35
36. 照明のスイッチ 2020/8/14 界面よもやま話 36 方角は不変なので 間違いないといえば間違いないが…
37. 映画の券売機 2020/8/14 界面よもやま話 37
38. 映画の券売機 2020/8/14 界面よもやま話 38 購入番号の黄色い欄がフォーカス。 なぜフォーカス移動は上下ボタン？ これタッチパネルなのに。
39. 駐車料金の精算機 2020/8/14 界面よもやま話 39
40. 駐車料金の精算機 2020/8/14 界面よもやま話 40 挿入例、虚無に挿入してるだろ
41. 駐車料金の看板 2020/8/14 界面よもやま話 41
42. 駐車料金の看板 2020/8/14 界面よもやま話 42 高すぎる もはや罠である
43. ビジネスホテル 2020/8/14 界面よもやま話 43
44. ビジネスホテル 2020/8/14 界面よもやま話 44 デスクのほとんどを電子レンジが占 めている。電子レンジとの対話。
45. 不法侵入禁止の看板 2020/8/14 界面よもやま話 45
46. 不法侵入禁止の看板 2020/8/14 界面よもやま話 46 合いの手？
47. 紙ゴミの捨て方 2020/8/14 界面よもやま話 47
48. 紙ゴミの捨て方 2020/8/14 界面よもやま話 48 難易度が高すぎる。もはや紙を捨て るのはあきらめたほうがいい。 この紙も捨てられない。
49. 東京水道局のパスワード再発行フロー(1) 2020/8/14 界面よもやま話 49
50. 東京水道局のパスワード再発行フロー(1) 2020/8/14 界面よもやま話 50 転居の際に住所変更しようとした らログインできなかったのでパス ワード再発行を申請したところ ハ、ハガキ……？ しかも審査終了後って
51. 東京水道局のパスワード再発行フロー(2) 2020/8/14 界面よもやま話 51
52. 東京水道局のパスワード再発行フロー(2) 2020/8/14 界面よもやま話 52 するとハガキの前にメールが届く そうなんだ。 てか500日くらい余裕だろ。 勝手に退会させるな。 仕方ないので新規作成することに
53. 東京水道局のパスワード再発行フロー(3) 2020/8/14 界面よもやま話 53
54. 東京水道局のパスワード再発行フロー(3) 2020/8/14 界面よもやま話 54 けっきょくハガキ 金の無駄遣いでは？ （むしろ脆弱性な気も）
55. くらしTEPCOの「秘密の質問」の設定 2020/8/14 界面よもやま話 55
56. くらしTEPCOの「秘密の質問」の設定 2020/8/14 界面よもやま話 56 ここまでやるなら、出身地と行ってみた い場所もお名前にしてほしかった
57. まとめ • 僕はクソUIを見るたびに、自分の仕事ではすべての界面レイ ヤーを極限まで薄くして、アクセシビリティを高めたいってい う気持ちが高まります。 • もちろん僕にできることは限られるので、せめてwebのアクセ シビリティだけでもどうにかしたいということになります。 • 最後に、本LTをご覧いただいた皆さんへの有益なお土産として、 イケてる書籍を紹介します。アクセシビリティにド直球な書籍 は「アクセシビリティ」で検索すれば出てきますので、そう じゃなくて、しかもどっちかっつーと古典的な名著です。 2020/8/14 界面よもやま話 57
58. クソUIとの向き合い方を論じ続けてきた 名著３選(1) ユーザーインターフェイスデザイン ―Windows95時代のソフトウェアデザイン を考える (Programmer’s SELECTION) https://www.amazon.co.jp/dp/4881353683/ 1996/5/1 アラン クーパー (著) 2020/8/14 界面よもやま話 58
59. クソUIとの向き合い方を論じ続けてきた 名著３選(1) ユーザーインターフェイスデザイン ―Windows95時代のソフトウェアデザイン を考える (Programmer’s SELECTION) https://www.amazon.co.jp/dp/4881353683/ 1996/5/1 アラン クーパー (著) てか売ってない 入手困難すぎる 僕は今までに5冊は買ってる 2020/8/14 界面よもやま話 59
60. クソUIとの向き合い方を論じ続けてきた 名著３選(2) コンピュータは、むずかしすぎて使えない! https://www.amazon.co.jp/dp/488135826X/ 2000/2/1 アラン クーパー (著) 2020/8/14 界面よもやま話 60
61. クソUIとの向き合い方を論じ続けてきた 名著３選(2) コンピュータは、むずかしすぎて使えない! https://www.amazon.co.jp/dp/488135826X/ 2000/2/1 アラン クーパー (著) Amazonで中古1700円前後 価値が見出されていない 買うなら今だ 2020/8/14 界面よもやま話 61
62. クソUIとの向き合い方を論じ続けてきた 名著３選(3) About Face 3 インタラクションデザインの極意 https://www.amazon.co.jp/dp/4048672452/ 2008/7/22 アラン クーパー (著) 2020/8/14 界面よもやま話 62
63. クソUIとの向き合い方を論じ続けてきた 名著３選(3) About Face 3 インタラクションデザインの極意 https://www.amazon.co.jp/dp/4048672452/ 2008/7/22 アラン クーパー (著) Amazonで中古で29,850円 値段が高騰しすぎ さすがに買わなくていい 2020/8/14 界面よもやま話 63
64. おしまい 2020/8/14 界面よもやま話 64
65. おしまい 2020/8/14 界面よもやま話 65 ちなみに名著3選は3冊ともだいた い同じことが書いてあるので、と りあえず「コンピュータはむずか しすぎて使えない」を買おう！