blog

初学者のひとりごとメモ

机の上で紙に何かを書いている人の右手。画面奥にはマグカップが置かれている

カテゴリ: カンファレンス・イベント

タグ:,

人間中心設計の基本と、あせらず進める堅実なアクセシビリティ改善計画

投稿日:2024年3月30日

「人間中心設計の基本と、あせらず進める堅実なアクセシビリティ改善計画」に参加してきました。

普段勉強会でお世話になっている吉川先生もHCDやUI/UXの手法を中心に教えてくださるので、用語には馴染みがありましたが、今回より体系的に聞くことができ、目的や実務上の流れをイメージしやすくなりました。

人間中心設計の基本

「デザインとは、橋の形を考えることではなく、向こう岸への渡り方を考えることだ」
――ディーター・ラムス

講師:水本 徹 氏

  • NPO法人 人間中心設計推進機構 副理事長・関西支部長
  • 認定人間中心設計専門家
  • 日本人間工学会 認定人間工学専門家

HCDについて

「モノ中心」ではなく、「使う人間を中心」にしたモノづくりへ。

「誰が」「どこで」「いつ」「何をするための製品か」を考える。
ex. おばあさんが自宅で台風や大雨、自身が発生したときに、すぐにニュースを見て情報を得られて安心できるTV

1999年にHCD思想が入ってくる=製品ライフサイクルの成熟期、中国やアジア圏の製品に勝てなくなってきた。いつの間にか機械(モノ)中心設計になっていたが、かつては人間(≒ユーザー)中心だったはずだからそこに戻りましょう、という動き。

製品自体(=基本機能・性能)の価値が下がり、顧客が決める(どんな体験が得られるか、どれくらい共感できるかの)価値が上がってきたなど、価値観の変動も影響。

調査方法・手法について

アンケートやインタビューの顕在ニーズも有効だが、何よりも行動観察による潜在ニーズが大事。

ex.酔った客がホームから転落するパターン
よろよろ千鳥足のイメージがあるが、実はベンチから突然立ち上がってまっすぐ歩き出して転落するパターンが一番多い→【対策】ベンチを線路に対して直角に置いた

手法としては他にも、

ペルソナユーザー像理解の促進、コラボレーションの促進、創造的なデザイン、効果的なユーザー評価。
「ペルソナにしか満足してもらえないものになる」?→一番極端な人の像を作ることで、むしろその周囲にも評価の高いものを作ることができる
カスタマージャーニーマップ最終的に感情がプラスに終わっていればそのエピソードは「成功」。そこから、マイナス値を直していくか、プラス値をさらに磨いていくかはケースバイケース。
→基本は「改善」のための手法である(≠まったく新しいアイデア・発想)
プロトタイピング◎仮想カタログ(予期的UX)
◎アクティングアウト
◎ペーパープロトタイピング:紙芝居。Figmaとかでやるのはここ
◎オズの魔法使い:音声認識ソフトとかの代わりを人間がやる
◎ホットモック(アクティブモック)
ユーザビリティ評価◎ユーザーによる評価:大変だけどユーザーにしかわからない視点が出てくる
◎専門家による評価:エキスパートレビュー、ヒューリスティック法、認知的ウォークスルーなど。比較的容易

印象に残った点箇条書き

  • 水本さんは「「困りごとを解決出来たらうれしいよね」という仕事をしている」そう
  • ユーザビリティは、「利用前(予期的UX)→利用中(一時的UX)→利用後(エピソード的UX)→利用時間全体(累積的UX)」のうち、特に利用中の体験を良くするもの
    UXは利用前~利用時間全体のすべてを良くするもの
  • キャナルシティのデザインは、「わざと迷うように」設計されているらしい。いろいろなお店と出逢う体験をしてもらうため
  • HCDをより深く修めるための学問分野は広い。人間工学、認知工学、ゲシュタルト心理学、行動経済学、etc…
  • UI:設計品質、仕様
    UX:利用品質。これを良くしていくためにHCD思想がある
  • 「サービス」とは、人の「苦い体験」を「うれしい体験」に変えるもの。考える順番としては、「苦い体験→うれしい体験→サービス」
  • UXを向上させたところで劇的に売り上げが上がるとは限らないが、販売量、値引き率、再購入率などは上がる。コストも低減できる
  • 部門が縦割りだとUXやHCDをうまくやっていけない。究極的には組織の壁を壊さないといけない

ご紹介のあった本

『こころのふしぎ なぜ?どうして?』

「人をたすけるには、たすけるためのべんきょうがひつようなのです」

あせらず進める堅実なアクセシビリティ改善計画

講師:平尾 ゆうてん 氏

  • 株式会社ディーゼロ 執行役員・フロントエンドテックリード
  • ウェブアクセシビリティスペシャリスト

結論

  • 完璧はない・画一的なやり方はない
  • 成果がすぐ出るものもあれば、出ないものもある
  • あせらず計画できることが大事

計画または戦略

  • 啓発の計画または戦略
  • 学習の計画または戦略
  • 実施の計画または戦略

freeeのアクセシビリティ方針

誰もが
ほぼ同じコストで(経済的、時間的、身体的、精神的)
ほぼ同じ量の情報を得られ
同じ目標を達成できる=公平

ユーザビリティとの関係性

アクセシビリティがあって、ユーザビリティがある。
そもそもアクセシブルでないとユーザビリティが測れない。
UXピラミッドでも、アクセシビリティは一番下の層に位置する。

アクセシビリティが低いことにより起こる状態

アクセシビリティが低い・アクセシブルでない=誰かが情報を得られない・誰かを排除している、取り残している状態
→デジタル庁「誰一人取り残されない、人にやさしいデジタル化を」
Leave No One Behind(国連SDGs)

平等(Equality:同じものを与える)ではなく公平(Equity:同じ結果を与える)

障害者差別解消法

  1. 差別の禁止
  2. 環境整備
  3. 合理的配慮≒困りごとへの対話。ここが義務化されているだけであって、対応内容については話し合いの結果次第となる(過重な負担がない範囲であることが条件なので)

「要求」があってはじめて「合理的配慮」が始まる。
事前にやっておくのは(今のところ義務化されていない)「環境整備」の範疇だが、まあせっかくなら先にやっておいた方がいいよね、いざとなったときにコストがかからないよね、という話。

海外だとバンバン訴訟問題が起きているので、やろうとなったら法務を巻き込むのが一番いい。

アクセシビリティとは

「人権」である
誰もが公平に得られるべきもの
現代の情報化社会には必須
法律で守られている国もある

Webアクセシビリティについて

もともとWebはアクセシブルである。「サーバー→インターネット→PC」のラインに限定して考えるなら、Webに載るだけで圧倒的にアクセシブル。

ただ、PCから出力された情報が人間(ユーザー)に届いてそれを知覚し、理解できて初めて真に「アクセシブル」といえる。
光や音、触覚、いずれかの手段で知覚・理解できればアクセシブルである。とにかく「代替手段を作る」ことが重要。

また、各感覚器官がアクセスできたとして、

  • 視覚:画面を大きくしないと見えない、色の判別がつかない etc.
  • 聴覚:小さい音が聞こえない etc.
  • 神経・脳:特定の文字の判別ができない、特定の形が判別できない、ものごとの理解に時間がかかる etc.

などの「理解を妨げる状況」もある。
状況・特性からデザインを考える必要がある

Webアクセシビリティの原則

  • 知覚可能:文字が見えて読める、形が認識できる、スクリーンリーダーを介して聴ける etc.
  • 操作可能:操作がマウスに限定されない、操作中に邪魔が入らない、ブラウザやOSの機能を活用できる etc.
  • 理解可能:言語が明確、インタラクションを予想できる、入力内容や入力エラーが明確、難解な言葉には解説がある etc.
  • 堅牢:コンピュータがHTMLを解釈できる、ブラウザが進化してもページが壊れない(ここが特に難しい!) etc.

アクセシビリティをどう考えていくか

アクセシビリティは「人権」であり、経済的合理性もある。
→どちらの考えも持っておく必要があり、クライアントワークならどちらも説明責任がある。伝えていかないと、知らず知らずのうちに機会損失が起きているかもしれない。

アクセシビリティに取り組むための準備

  • できることを整理する
  • できることのコストを洗い出す
  • 優先順位をつけていく

「やった方がいいこと」と「できること」のバランスを取る。

  • 独自UIを採用しなければアクセシブル:JSを極力書かない。dialog、details、Popover APIの活用。或いはあらかじめ独自UIをアクセシブルにして準備する
  • 間違った設計をしない
  • 止められない動きを入れなければアクセシブル
  • 隠さなければアクセシブル
  • カラーコントラストの知識があればアクセシブル(かかるのは学習コストだけなのでクライアントにはかからない)
  • リンクはリンク、ボタンはボタン
  • ランドマークの知識
  • UIライブラリの選定し直し
  • 開発環境・リンター・ボイラープレート

などなど。

社内での取り組み方

  • まず仲間を増やす
    絶対にひとりでは推進できません(一人で一気通貫でやっているのでない限り)
  • 具体的な実践
    ディレクション:・方針を立てる・計画実施・継続
    ガイドラインに基づいた方針:独自のガイドラインもあり(freeeとか)
    JIS X 8341-3:2016=WCAG2.0
  • 対応表記
    JISは表記方法がちゃんとあるが、WCAGより緩い書き方が可能
    WCAGは「準拠」というなら完璧になってないとダメ!
    ただ、そもそも対応を公開するかどうかは任意なので、関係者と要協議
  • 実施計画
    試験実施コース:フルコース(WAICに則った試験)。知力体力があるなら一番おすすめ(人海戦術の面がある)
    コンバージョン改善コース:ユーザーファーストの小さく始めるコース。シナリオに沿ったページのみを改善する。ネイティブアプリでも使える
    テンプレートコース:まずは入れ物から改善する。CMSベースのサイトで効果が期待できる。アプリならコンポーネント改善という手も。DevOpsとの相性がいい。※コンテンツ自体の改善はできないので別の手段が必要

さらに一歩先へ

  • WCAGではサポートできない特性もある
  • ユーザビリティテストが大事
  • 迷ったらアクセシブルな方を選ぶ

最新のblog記事

  1. 学習メモ

    学習メモ

    XAMPPで複数サイトを管理したい

    2024年6月3日
  2. 制作日誌

    アクセシビリティ向上日誌3【ワイヤー編】

    2024年5月6日
  3. 学習メモ

    学習メモ

    CSS Nite リアルタイムでコードを共創できるオンラインエディターCodePenを活用しよう

    2024年4月26日
  1. 1
  2. 2
  3. 9
  4. 10