Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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