高齢者が使うアプリケーションのアクセシビリティデザイン
この記事は、とある高齢者がメインターゲットのアプリケーションを制作するに当たって、私がデザインを行うために留意していたアクセシビリティデザインに関するポイントや得た学びをまとめています。
これからアプリケーションデザインを行う際に、アクセシビリティについて参考にしていただければ嬉しいです。
今回アクセシビリティデザインをするために行ったことは以下です。
- 高齢者がスマホを使いこなせるのかを検証する
- 色のコントラスト比と余白の確保
- 色覚異常を考慮したカラー選定
- 数字を考慮したフォント選定
まずは順を追ってそれぞれのフェーズで何をしたのかについて説明したいと思います。
高齢者がスマホを使いこなせるのかを検証する
今回は高齢者向けのアプリだったため、最初に高齢者がスマートフォンを正確に使えるかを検証する必要がありました。そのため、デザイン性を高めることをあえて我慢しました。なぜならフェーズとして「デザインを磨く」のではなく、「ユーザビリティを検証する」ことが前提にあったからです。
このフェーズでは、まず高齢者の方が我々が意図した通りに操作できるかを検証することが大切です。そのため、今回は1階層目に情報を配置するのではなく、わざと情報の階層を作り1~2タップしないと求めている情報に辿り着けないようにし、ユーザーがゴール（ページ）まで辿り着くことができるかを確認しました。
注意すべき点として、このフェーズではユーザーの判断に影響を及ぼしうる色やビジュアル（アイコンなど）の使用をできるだけ避けることが挙げられます。もちろん完璧な表層デザインを提案することもできますが、まずはユーザーが「こちらが意図しているとおりに画面から画面へ移動することができるのか」を明確にしなくてはいけません。できるだけシンプルに検証したいことだけにフォーカスすると良いでしょう。また、デザインコンセプトが決定する前にフォントの大きさ、カラーなどを当ててしまうと、ユーザーにその印象を焼き付けてしまい、後々バイアスが生じる原因になりかねません。
この検証では2点の気づきがありました。1つ目は、高齢者は無意識にボタンをタップしてしまうことです。検証の際には、内容（ボタンのラベル）を読まずにとりあえずタップしている様子が見受けられました。2つ目は、縦スクロールには抵抗感はないが、横スワイプには慣れていないということです。画面を表示されたらまずは下から上に指を動かし下の情報を探しますが、一度画面が動かなくなると戸惑います。その後1〜2回再度上下に動かし、何も起こらないことを確認してから左右（横）に動くかを試していました。
色のコントラスト比と余白の確保
ユーザビリティテストを経て情報設計がある程度決定した後は、色のコントラスト比と余白のサイズを決めました。
色のコントラスト比
色のコントラスト比はWCAG 2.0をベースに チェッカー を使います。
日本語の資料はこちらを見ると良いと思います。（参考：WCAG20 日本語バージョン）
ターゲット層にもよると思いますが、高齢者向けの場合は最低7 : 1 （対象色 : 背景色）を目指すと良いでしょう。また、基本的な文字色は #000000（黒）に近い色を使用し、他の色に対しても最低でも12〜15 : 1以上のコントラスト比を出すようにこころがけると良いでしょう。逆に色が真っ黒すぎると目が疲れると感じる人もいるので、真っ黒にはならない程度で調節するのも良いでしょう。
目の悪い高齢者は、少しでも背景色と文字情報のコントラストが強い方が情報を認識しやすくなります。また、いつも明るい環境にいるとは限らないため、画面が少し暗くても伝えたい情報が鮮明に見える色の方が良いでしょう。
余白（マージン）の確保
スマートフォンのアプリケーションの場合は横幅に制限があります。できれば縦の方に十分なマージンをとり、情報のまとまりと区別をつけることで認識・理解を少しでもしやすくすることにフォーカスします。
マージンを最低28〜40pxと少し広めにとっても良いと思います。最も重要な情報の80%以上をファーストビューで確認できるように情報を調節し、付加的な情報はスクロールもしくは奥の階層に移動するなどコンテンツの構成を工夫しましょう。まとめられそうな情報はまとめる、区別しないといけない情報は他と区別した情報として直感的に認識できるようにマージンを取るのがポイントです。デメリットとしてはファーストビューで見える情報の量が少なくなることですが、ここでは情報の区別をさせることをより重視します。
色覚異常を考慮したカラー選定
世界的にもそうですが、日本でも「20人に1人が色覚異常（色弱・色盲）」と言われています。つまり、日本だけでもおよそ300万人以上の色覚異常者がいるのです。中でも、緑色と赤色の区別ができない人が比較的多いそうです。緑色の認識ができないユーザーは、緑色を見るとグレーに見えるといいます。
例えば下の画像を見てみましょう。
出処：滋賀医科大学 滋賀医科大学眼科学講座
一番左の画像が元画像、真ん中の画像が赤色の認識ができない（1型2色覚）人から見た様子を表した画像、右の画像が緑色を認識ができない（2型2色覚）人から見た様子を表した画像です。
デザイナーは色覚異常者が見た際にも少しでも認識しやすくなることを想定し、色の調節をしなくてはいけません。
色覚タイプによる見え方は、Adobe photoshopでもテストすることができます。文字情報に適用した際の見え方も一緒に確認しましょう。
（参考：https://www.adobe.com/jp/joc/pscs4/showcase/vol02/tips/）
色のテスト例：緑色
色の見え方
テキストに適用してみた例
色のテスト例：赤色
色の見え方
テキストに適用してみた例
数字を考慮したフォント選定
今回担当していたサービスは数字が主体となるアプリケーションでした。そのために色んなフォントを検証して最適なフォントを模索しました。
今回選んだのは、Lato というフォントです。iOS純正の SF フォントと Hiragino Kaku Gothic も良い組み合わせなのですが、今回は日本語フォントに Noto-sans を使用したかったため、Noto-sans と相性が良い Lato にしました。
Lato の特徴は Typography 用語で「Joint」と言われる曲がる部分のデザインが Bitmap 対応されていて、小さくなった時に太い Bold であっても文字が潰れないことです。
例：
各フォントの特徴
Latoの特徴 [Joint]
小さいサイズで見てみると、前述した「Joint」の部分が役割を発揮し、他のフォントと比べて「Joint」の部分が太く見えないのです。
上の画像は、Adobe Illustratorでスクリーンショットを撮ったので比較的きれいに見えますが、Bitmapで見るとJointの部分がより太く見えることに気がつくと思います。
終わりに
今回は私が実際に高齢者向けにアプリケーションデザインを行う中で、アクセシビリティデザインをする際に必ずと言ってよいほど留意すべき点に関してお伝えしました。実際に私がプロトタイプを作成する際に用いた色のコントラストやフォントを実例として用いてますので、少しでも参考にしていただければ幸いです。
また今後、より多くのアプリケーションにこうしたデザインが適応されることを期待しています。
