Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Yu Morita
August 14, 2020

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

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

Yu Morita

August 14, 2020
Tweet

More Decks by Yu Morita

Other Decks in Design

Transcript

  1. 界面よもやま話
    ── アクセシビリティの実装を解釈する
    趣味の世界ライトニングトーク
    2020年8月14日
    森田 雄
    株式会社ツルカメ 代表取締役社長
    インフォメーション・アーキテクト/UXデザイナー

    View full-size slide

  2. お前は誰だ。そしてお前の趣味は何だ。
    • 株式会社ツルカメ代表取締役社長にして株式会社ネコメシ代表取締役CEO、そし
    て株式会社草冠CXOの森田雄です。IAおよびUXデザインの専門家を名乗ってお
    ります。
    • Webにまつわる「ものづくり活動」がそもそも趣味ですが、趣味というには
    ちょっと業務に足を突っ込みすぎています。
    • しかしながら、特に「アクセシビリティ」の領域は完全に趣味だといえます。
    • 趣味で、25年以上やっています。
    • もちろん、業務でアクセシビリティをやることもあります/ました。
    • 本日は、アクセシビリティに通じる界面の話を、僕なりの解釈でお話しようと思
    います。
    2020/8/14 界面よもやま話 2
    ※スライド内で使用している写真・スクショは自分で撮影したものです(いらすとやを除く)。表紙はパワポの素材です。

    View full-size slide

  3. 界面とは何か
    • 何かと何かの境目のことを界面といい、コンピュータサイエンスの
    領域では「インターフェース」ともいいます。
    • 界面がいかにも界面っぽくなるためには、異なる相(そう)同士の
    境目であることが必要です。
    • 界面の代表格は「ユーザーインターフェース」です。コンピュータ
    とそれを利用する人間が情報をやりとりする(ないし操作する)際
    の界面を意味していて、情報を得ようとする意思がこの界面を通過
    してフィードバックを得ることを「インタラクション」といいます。
    じゃっかん鶏卵ですが、インタラクションが発生しうるコンテクス
    トに応じて界面が発現するため、概念的には界面はレイヤーがごと
    く幾重にも折り重なっているといえます。
    2020/8/14 界面よもやま話 3

    View full-size slide

  4. 折り重なる界面レイヤー(概念)
    人間
    2020/8/14 界面よもやま話 4

    View full-size slide

  5. 折り重なる界面レイヤー(概念)
    人間
    【マウスやキーボード等】
    人間とコンピュータの界面
    2020/8/14 界面よもやま話 5

    View full-size slide

  6. 折り重なる界面レイヤー(概念)
    人間
    【マウスやキーボード等】
    人間とコンピュータの界面
    【OSやブラウザ等】
    ユーザ(サイバー空間における人間)と
    データの界面
    2020/8/14 界面よもやま話 6

    View full-size slide

  7. 折り重なる界面レイヤー(概念)
    人間
    【マウスやキーボード等】
    人間とコンピュータの界面
    【OSやブラウザ等】
    ユーザ(サイバー空間における人間)と
    データの界面
    【コンテンツないしデータ等】
    振る舞いの代行者(マウスカーソルやフォーカス)と
    HTML要素(情報のモジュール)の界面
    2020/8/14 界面よもやま話 7

    View full-size slide

  8. 折り重なる界面レイヤー(概念)
    人間
    人間が得ようとしている
    なにがしかのオブジェクト
    (情報であったり、
    操作そのものであったり)
    【マウスやキーボード等】
    人間とコンピュータの界面
    【OSやブラウザ等】
    ユーザ(サイバー空間における人間)と
    データの界面
    【コンテンツないしデータ等】
    振る舞いの代行者(マウスカーソルやフォーカス)と
    HTML要素(情報のモジュール)の界面
    2020/8/14 界面よもやま話 8

    View full-size slide

  9. アクセシビリティはすべての界面に宿る
    • ユーザビリティを「使いやすさの度合い」というのに対して、
    アクセシビリティは「近づきやすさの度合い」などといわれま
    す。
    • 折り重なる界面レイヤーを極限まで薄くし、人間が得ようとす
    るなにがしかのオブジェクトに対して、いかに容易に到達させ
    るかということを「アクセシビリティを実装する」といいます。
    • 人間は界面を障壁として認識するのではありません。アクセシ
    ビリティが宿った界面は、それ自体が道具であり、また人間自
    身の代行者でもあります。
    2020/8/14 界面よもやま話 9

    View full-size slide

  10. 世の中には、自分が馬鹿になったのではない
    かと錯覚するオブジェクトが無数にあります。
    • そうしたオブジェクトと人間の境目には「クソUI」という界面があります。
    • 本日はライトニングトークということで、そうしたクソUIを界面レイヤー
    の解釈で解きほぐし、つくってしまったデザイナーのつもりになって自戒
    していきたいと思います。
    • ちなみに、人間は生きているだけで、無数のクソUIに遭遇しますので、そ
    のたびに自戒して改善案を講じるのは、効率のいいトレーニングです。
    • なお、界面を薄くすることがアクセシビリティの勘所なので、それを阻害するデザ
    インは何であれアクセシビリティ品質の低下につながります。ユーザビリティの問
    題でもUXデザインの問題でもマーケティングの問題でも、何でもです。
    • 非webにおけるクソUIも、転じてwebに生かせることが多々ありますので良い教訓
    になります。
    2020/8/14 界面よもやま話 10

    View full-size slide

  11. 洗浄便器の操作パネル(1)
    2020/8/14 界面よもやま話 11

    View full-size slide

  12. 洗浄便器の操作パネル(1)
    2020/8/14 界面よもやま話 12
    「小」と「eco小」で迷わせる意味
    がわからない。もし「eco小」で流
    れなかったら小より非ecoになる。

    View full-size slide

  13. 2020/8/14 界面よもやま話 13
    洗浄便器の操作パネル(2)

    View full-size slide

  14. 2020/8/14 界面よもやま話 14
    洗浄便器の操作パネル(2)
    「快便」って何だ?
    出ない時に使うボタン?
    というかアイコン小便だろこれ。
    「Kids」キッズ自身に読めないラベル
    なぜつけた

    View full-size slide

  15. 洗浄便器そのもの(蓋閉じ時)
    2020/8/14 界面よもやま話 15

    View full-size slide

  16. 洗浄便器そのもの(蓋閉じ時)
    2020/8/14 界面よもやま話 16
    うん、パンダだな

    View full-size slide

  17. 洗浄便器そのもの(蓋開き時)
    2020/8/14 界面よもやま話 17

    View full-size slide

  18. 洗浄便器そのもの(蓋開き時)
    2020/8/14 界面よもやま話 18
    座ってるパンダだけでいいだろ
    なぜ正面を繰り返す

    View full-size slide

  19. トイレ使用後の注意文
    2020/8/14 界面よもやま話 19

    View full-size slide

  20. トイレ使用後の注意文
    2020/8/14 界面よもやま話 20
    いまどきのトイレはえてして、立ち上が
    ると自動洗浄になるので間に合わない。
    使ったことないやつが注意書きするな。

    View full-size slide

  21. トイレ使用に関する注意文
    2020/8/14 界面よもやま話 21

    View full-size slide

  22. トイレ使用に関する注意文
    2020/8/14 界面よもやま話 22
    駅長かと思ったら便器そのもの
    ちなみにこれは別にクソUIではない
    (便所におけるUIではあるが)

    View full-size slide

  23. 2020/8/14 界面よもやま話 23
    洗濯機の操作パネル

    View full-size slide

  24. 2020/8/14 界面よもやま話 24
    洗濯機の操作パネル
    「これっきりボタン」説明書を読まないとわか
    らないラベルをつけるな。必要かこれ?
    こんなラベルつける暇あったら隣の鍵アイコン
    のところに「ロック」って書け

    View full-size slide

  25. 2020/8/14 界面よもやま話 25
    スライサーの厚さ調節レバー

    View full-size slide

  26. 2020/8/14 界面よもやま話 26
    スライサーの厚さ調節レバー
    これは際どい。そこまでクソでもな
    いが、説明書を見なくても
    わかるようにするべきだろう

    View full-size slide

  27. 2020/8/14 界面よもやま話 27
    スライサーの厚さ調節レバーの説明書

    View full-size slide

  28. 2020/8/14 界面よもやま話 28
    スライサーの厚さ調節レバーの説明書
    この説明書は、スライサーのパッ
    ケージの裏面である。100%捨てら
    れる。番号は1・2・5のほうが良
    かったのでは?

    View full-size slide

  29. 2020/8/14 界面よもやま話 29
    リモコン(TV会議システム)

    View full-size slide

  30. 2020/8/14 界面よもやま話 30
    リモコン(TV会議システム)
    シールですでに押してるだろ…

    View full-size slide

  31. 2020/8/14 界面よもやま話 31
    リモコン(エアコン)

    View full-size slide

  32. 2020/8/14 界面よもやま話 32
    リモコン(エアコン)
    除湿切替?
    冷房や暖房は切替ではない?
    内部クリーン?
    電流カット?
    不在ECO?

    View full-size slide

  33. 2020/8/14 界面よもやま話 33
    壁据え付けのエアコンスイッチ

    View full-size slide

  34. 2020/8/14 界面よもやま話 34
    壁据え付けのエアコンスイッチ
    ツマミを強にしている時、
    最強を発動可能

    View full-size slide

  35. 照明のスイッチ
    2020/8/14 界面よもやま話 35

    View full-size slide

  36. 照明のスイッチ
    2020/8/14 界面よもやま話 36
    方角は不変なので
    間違いないといえば間違いないが…

    View full-size slide

  37. 映画の券売機
    2020/8/14 界面よもやま話 37

    View full-size slide

  38. 映画の券売機
    2020/8/14 界面よもやま話 38
    購入番号の黄色い欄がフォーカス。
    なぜフォーカス移動は上下ボタン?
    これタッチパネルなのに。

    View full-size slide

  39. 駐車料金の精算機
    2020/8/14 界面よもやま話 39

    View full-size slide

  40. 駐車料金の精算機
    2020/8/14 界面よもやま話 40
    挿入例、虚無に挿入してるだろ

    View full-size slide

  41. 駐車料金の看板
    2020/8/14 界面よもやま話 41

    View full-size slide

  42. 駐車料金の看板
    2020/8/14 界面よもやま話 42
    高すぎる
    もはや罠である

    View full-size slide

  43. ビジネスホテル
    2020/8/14 界面よもやま話 43

    View full-size slide

  44. ビジネスホテル
    2020/8/14 界面よもやま話 44
    デスクのほとんどを電子レンジが占
    めている。電子レンジとの対話。

    View full-size slide

  45. 不法侵入禁止の看板
    2020/8/14 界面よもやま話 45

    View full-size slide

  46. 不法侵入禁止の看板
    2020/8/14 界面よもやま話 46
    合いの手?

    View full-size slide

  47. 紙ゴミの捨て方
    2020/8/14 界面よもやま話 47

    View full-size slide

  48. 紙ゴミの捨て方
    2020/8/14 界面よもやま話 48
    難易度が高すぎる。もはや紙を捨て
    るのはあきらめたほうがいい。
    この紙も捨てられない。

    View full-size slide

  49. 東京水道局のパスワード再発行フロー(1)
    2020/8/14 界面よもやま話 49

    View full-size slide

  50. 東京水道局のパスワード再発行フロー(1)
    2020/8/14 界面よもやま話 50
    転居の際に住所変更しようとした
    らログインできなかったのでパス
    ワード再発行を申請したところ
    ハ、ハガキ……?
    しかも審査終了後って

    View full-size slide

  51. 東京水道局のパスワード再発行フロー(2)
    2020/8/14 界面よもやま話 51

    View full-size slide

  52. 東京水道局のパスワード再発行フロー(2)
    2020/8/14 界面よもやま話 52
    するとハガキの前にメールが届く
    そうなんだ。
    てか500日くらい余裕だろ。
    勝手に退会させるな。
    仕方ないので新規作成することに

    View full-size slide

  53. 東京水道局のパスワード再発行フロー(3)
    2020/8/14 界面よもやま話 53

    View full-size slide

  54. 東京水道局のパスワード再発行フロー(3)
    2020/8/14 界面よもやま話 54
    けっきょくハガキ
    金の無駄遣いでは?
    (むしろ脆弱性な気も)

    View full-size slide

  55. くらしTEPCOの「秘密の質問」の設定
    2020/8/14 界面よもやま話 55

    View full-size slide

  56. くらしTEPCOの「秘密の質問」の設定
    2020/8/14 界面よもやま話 56
    ここまでやるなら、出身地と行ってみた
    い場所もお名前にしてほしかった

    View full-size slide

  57. まとめ
    • 僕はクソUIを見るたびに、自分の仕事ではすべての界面レイ
    ヤーを極限まで薄くして、アクセシビリティを高めたいってい
    う気持ちが高まります。
    • もちろん僕にできることは限られるので、せめてwebのアクセ
    シビリティだけでもどうにかしたいということになります。
    • 最後に、本LTをご覧いただいた皆さんへの有益なお土産として、
    イケてる書籍を紹介します。アクセシビリティにド直球な書籍
    は「アクセシビリティ」で検索すれば出てきますので、そう
    じゃなくて、しかもどっちかっつーと古典的な名著です。
    2020/8/14 界面よもやま話 57

    View full-size slide

  58. クソUIとの向き合い方を論じ続けてきた
    名著3選(1)
    ユーザーインターフェイスデザイン
    ―Windows95時代のソフトウェアデザイン
    を考える (Programmer’s SELECTION)
    https://www.amazon.co.jp/dp/4881353683/
    1996/5/1
    アラン クーパー (著)
    2020/8/14 界面よもやま話 58

    View full-size slide

  59. クソUIとの向き合い方を論じ続けてきた
    名著3選(1)
    ユーザーインターフェイスデザイン
    ―Windows95時代のソフトウェアデザイン
    を考える (Programmer’s SELECTION)
    https://www.amazon.co.jp/dp/4881353683/
    1996/5/1
    アラン クーパー (著)
    てか売ってない
    入手困難すぎる
    僕は今までに5冊は買ってる
    2020/8/14 界面よもやま話 59

    View full-size slide

  60. クソUIとの向き合い方を論じ続けてきた
    名著3選(2)
    コンピュータは、むずかしすぎて使えない!
    https://www.amazon.co.jp/dp/488135826X/
    2000/2/1
    アラン クーパー (著)
    2020/8/14 界面よもやま話 60

    View full-size slide

  61. クソUIとの向き合い方を論じ続けてきた
    名著3選(2)
    コンピュータは、むずかしすぎて使えない!
    https://www.amazon.co.jp/dp/488135826X/
    2000/2/1
    アラン クーパー (著)
    Amazonで中古1700円前後
    価値が見出されていない
    買うなら今だ
    2020/8/14 界面よもやま話 61

    View full-size slide

  62. クソUIとの向き合い方を論じ続けてきた
    名著3選(3)
    About Face 3
    インタラクションデザインの極意
    https://www.amazon.co.jp/dp/4048672452/
    2008/7/22
    アラン クーパー (著)
    2020/8/14 界面よもやま話 62

    View full-size slide

  63. クソUIとの向き合い方を論じ続けてきた
    名著3選(3)
    About Face 3
    インタラクションデザインの極意
    https://www.amazon.co.jp/dp/4048672452/
    2008/7/22
    アラン クーパー (著)
    Amazonで中古で29,850円
    値段が高騰しすぎ
    さすがに買わなくていい
    2020/8/14 界面よもやま話 63

    View full-size slide

  64. おしまい
    2020/8/14 界面よもやま話 64

    View full-size slide

  65. おしまい
    2020/8/14 界面よもやま話 65
    ちなみに名著3選は3冊ともだいた
    い同じことが書いてあるので、と
    りあえず「コンピュータはむずか
    しすぎて使えない」を買おう!

    View full-size slide