初心者必見!モバイルUIデザインのアクセシビリティを高める方法

Alexis Odysseos

私は、Proto.io.の共同創設者兼CTOです。輸出、貿易及び金融の分野のMScを有する、独学のプログラマーです。私はウインドサーフィンとテニスをしますが、私のObjective-Cスキルのほうがわずかに優れています。
TwitterでAlexisをフォローしましょう

この記事はProto.ioからの翻訳転載です。配信元または著者の許可を得て配信しています。

The Beginner’s Guide to Accessible Mobile UI Design (2015-09-30)

アクセシビリティは、ただあれば良いという訳ではありません。モバイルアプリデザイナーとデベロッパーにとってアクセシビリティは、より幅広いオーディエンスにモバイルUIデザインがたどり着くようにし、誰にとっても利用しやすいものにするものです。しかしアクセシビリティは何を意味し、なぜ重要なのでしょうか?

mobile_UI_design_purchasing_cell_phone_accessibility

アクセシビリティデザインの方法や、それが何のためにのかということに関する情報は、一冊の本を書けるほど膨大にあります。しかし、アクセシビリティがなぜ重要なのか、そしてモバイルアプリにどのようにそれを取り入れるべきかをしっかりと理解することが成功への道です。今回は、AndroidとiOSであなたがキープしておくべきツールや参考ガイドなど、モバイルUIデザインについて知っていなければならないものをご紹介しましょう。

モバイルUIデザインが誰にとっても利用しやすいものであるべき4つの理由

アクセシビリティは、多種多様な人々が、同じ資源、製品およびサービスを楽しめるようにするものです。

モバイルUIデザインでは、アクセシビリティは多くの意味を持ちます。例えば、ユーザーの視覚的能力や好みよって、文字や画像の大きさをカスタマイズできるようにしたり、ユーザーがタッチ操作をするだけで、ある画面や動作から次の画面や動作へと誘導したりといったことです。アクセシビリティのあるモバイルUIデザインは、どんな身体的能力を持ったユーザーでもアプリが使えるようにします。

アクセシビリティはWebデザインにおいて、SEOを評価するとき、需要な評価基準となります。では、アプリではどうでしょうか? 実は、モバイルUIデザインにおいてもアクセシビリティは重要なのです。なぜ重要なのかお教えしましょう。

1.ユーザー視点に立った時、あった方が良いことだから

「潜在ユーザーが何らかの障害を持っていて、特別なニーズがあるかもしれない」という視点を持たなければ、彼らのニーズを無視したアプリのビジュアルを作ってしまいかねません。自分のアプリに入れた視覚的なアイデアが、ある人にとっては使いにくかったり使えないはずはないとあなたが本気で思いこんでいたり、もしくは単にモバイルUIデザインでアクセシビリティチェックに徹底的に時間を費す気がないならば、あなたも残念ながらそういったアプリの作り手になってしまうでしょう。

しかし私たちは、モバイルアプリは障害を抱えていない人たちのためだけのものでないと考えています。モバイルアプリは、私たちの生活を良くする手助けでなくてはいけません。Uberが都市を散策することをより簡単にしたり、MyFitnessPalがダイエットと運動から推測データを取り出すように、モバイルアプリは 障害の有無に関係なく、ユーザーの暮らしを楽にすることができますし、そうすべきなのです。

実際、スマートフォンと他のモバイルデバイスは、健康とアクセシビリティの新しいチャンスが生まれる場です。例えばPacificaは、不安障害のような精神的な問題を抱えているユーザーの役に立つアプリです。一方、LookTelは、視覚障害のある人々がより簡単にお金を数えられるようにします。スマートデバイス、ウェアラブル、およびIoAにおいては、障害や持病を持っていたり特別な支援を必要としている人でも、障害を持たない人が当然のようにやっている活動に何の障壁もなく参加できるようにすることが可能なのです。

あなたは、モバイルアプリデザイナーとしてこのような素晴らしい未来の作り手になるか、そうなれないかどちらになる可能性もあります。幸いにも、アクセシビリティに関する標準化されたガイドラインやテストツール、その他のリソースがあるので、幅広いユーザーが利用できるモバイルUIデザインを作ることはそこまで難しいものではありません。

2.アクセシビリティを高めることで、潜在ユーザーとリーチが拡大するから

Young_Girl_Using_Mobile_Device_mobile

もちろん、モバイルUIデバイスのアクセシビリティを良くするメリットは、それが倫理的に正しいということだけではありません。あなたのアプリを利用することができる人が多ければ多いほど、それを利用する人が増えるということもメリットです。アクセシビリティの統計によると、2000万人近くの米国人が物を持ちあげる、または掴むのが困難であり、また、800万人が視覚障害にかかっており、760万人が聴力障害を持っています。これらの人々を合計すると3500万人以上になり、この人数は米国の全ての人口の10%以上です。これほどの人数の人が、あなたのモバイルアプリを利用する潜在ユーザーとなりえるのです。

スマートデバイスを利用している人口の中で特別な援助を必要としている人々はごく少数だと捉えるかもしれませんが、実際はそうではありません。潜在ユーザーのかなりの数は、音声認識やカスタマイズされた閲覧規制のような機能を必要としています。それらの機能をモバイルUIデザインに取り入れないとすれば、顧客を失う危険を冒すことになりかねません。

3.アクセシビリティが高いデザインは、優れたデザインである

上に書いたように、モバイルUIデザインにアクセシビリティ機能を絶対に必要とする人数はかなり膨大です。しかし、さらに言えることは、あらゆるひとにとって利用しやすいということは、実質的にそのアプリを使う誰にとっても良いものなのです。

AndroidAppleがデザイナーとデベロッパーに提案するアクセシビリティ機能の一部は、本当に優れており、常識的なデザインです。例えば、Androidは、特定の意味がある説明に「(例えばアイコンのような)視覚的な文字情報ではないもの」を使っている機能的なモバイルUIコンポーネントにテキストラベルをつけることを勧めています。これは実践すべきデザインの最も優れた例と言えるでしょう。

モバイルUIデザインを整理されたものにしたり、必要のないコピーや視覚的要素を排除したり、アプリを(使い方を理解するのにサポートが必要な人へのオプションを伴う)直感的に使えるものにするといったアクセシビリティ機能は、シンプルかつ魔法のようなモバイルアプリエクスペリエンスを提供します。いろいろなアクセシビリティガイドに目を通せば、常識的なデザインの優良事例のような多くのアドバイスを見つけることができるでしょう。

4.アクセシビリティを考えることはあなたの創造性を鍛えることになる

詩人、特に韻と正確な韻律を好む人に話かけてみてください。一見、ペトラルカ風ソネットや俳句の厳格なルールは、作者の創造性を制限しているように見えますが、実はそれは逆です。

あなたがルール(または頭韻法や類韻)なしで詩を書いているならば、言葉を考える順で、あなたは自分の頭の中にある言葉を書き出すことができます。しかし、特定の音節を数えるか、アクセントをつけるか、厳しい脚韻構成に続くように強制されたとき、突然、創意工夫をしなければならなくて、自然に、または、自動的にあなたが思い浮かばなかった言葉を選ばなければなりません。

それは、あなたのコンフォートゾーンを超えるでしょうか? それこそが、最も創造力がはたらく場所なのです! 

あなたが初めてモバイルUIデザインのアクセシビリティに深く携わっているか、新しいアクセシビリティの条件を満たすために、現在のデザインのある面を変える必要があるならば、最初はちょっとした悩みの種のように見えるかもしれませんが、それは創造的な機会になり得ます。例えば、一つの画面で要素の数を減らしたりボタンサイズや動作を変えて、デザインを単純化しなければならないかもしれません。または、色覚異常やその他の視覚障害を持つ人にとって、より読みやすいモバイルUIデザインにするために、カラースキームまたはコントラストを変える必要があると気がつくかもしれません。

newspaper-to-another-BlindUser

上のようなケースでは、普通は使わない手法を用いることを求められます。最近似通ったアプリしか作れていないと感じ始めているのであれば、あなたの現在のモバイルUIデザインと他を区別するのにうってつけの機会です。

モバイルUIデザインのアクセシビリティを高めるために大事な6つのポイント

本当にアクセシビリティが高いモバイルUIデザインは、まだ技術的発展と流行の流れについていく途中の段階でしょう。しかし、あなたがそれを実践したいのであれば、より幅広いオーディエンスにとって使いやすいアプリであることを確認するために必ず注意すべきポイントをご紹介しましょう。

1.シンプルにしよう

シンプルさは、私たちが以前にそれを時間をかけて作り直したほど、重要かつユニバーサルなデザインです。しかしそれは、シンプルなモバイルUIデザインがよりアクセシビリティが高いものであるということを繰り返し伝えています。1つのページに多くの情報が入り交じったレイアウトが、平均的なユーザーをより混乱させるエクスペリエンスを生み出すようなものに見えるのと同時に、過剰な視覚的刺激は、視覚の処理障害や学習障害を持っているユーザーに対して、ストレスの多いエクスペリエンスを生み出してしまう可能性があります。

2.カスタマイズ可能なモバイルUIデザインを構築しよう

あなたはデザイナーとして、モバイルUIデザインをすみずみまでコントロールしたいと考えるかもしれませんが、時にはその一部をユーザーの好きに使えるようにしておかなければなりません — そして、これはアクセシビリティに関して特に言えることです。

あなたのユーザーは可視性、音声および使い方の学習方法に関して異なるニーズを持っているだけでなく、異なるスペックの異なるデバイスを使っているということを忘れないでください。つまり、モバイルUIデザインをカスタマイズ可能にすることは、特別なアクセシビリティのニーズを必要とするユーザーだけでなく、ユーザー全員にとって重要なのです。調節可能にする必要があるのは、フォントサイズ、全体的なズームと拡大、カラースキームとコントラスト、そしてタッチスクリーンの動作などです。

これらのアクセシビリティとカスタマイズオプションを、モバイルアプリに組み込まれるあらゆるヘルプやオプションメニューで簡単に見つけられるようにしましょう。

3.だれにでも分かる指示とシンボルを使用しよう

easily-recognizable-cues

ドキュメントを保存する現代の高校生が、実際にフロッピーディスクを使わないのにもかかわらず、Facebookのフィード上ではフロッピーディスク型のアイコンをクリックしなければならないという、時折目にする冗談のような現象をあなたはどう思いますか? 考えるには面白いものである一方、それは特定の視覚のメタファーの一般性に言及しています。ほとんど本能的に、今日の子供たちは、ゴミ箱アイコンが「削除」を意味しディスクアイコンが「保存」を意味するということを知っています。というのも、彼らが日常生活を通じて何度もそれらのアイコンを使ってきたからです。

創造力は決して悪いものでありません、しかし時に、車輪を再発明することは生産性の浪費以上の結果に終わります。多くのモバイルUIデザインは、 イコノグラフィーからメニューの配置まで、効果を発揮するために存在しているのです。アプリをデザインするとき、ユニークな見た目と雰囲気を追求するのも良いですが、このことも常に自問自答してください。「このレイアウトは、新しいユーザーによく知られていて直観的に使えるものか? 」

4.賢い色使いをしよう

あなたはモバイルUIデザインにおいて、要素を視覚的に識別するために色を使っていますか? もしそうであれば、あなたはアクセシビリティの改善のために、もう一度アプリを見直した方が良いかもしれません。特定のカラースキームは、色覚障害や他の視覚障害を持つユーザーにとっては、見えづらいものになってしまう可能性がありますが、少しの微調整で、モバイルUIデザインを特別なものにしてくれる要素を失うことなく、よりアクセシビリティの高いデザインにすることができます。

ユーザーが必要に応じてUIを調節することができるように、色に関係なく特定の要素を区別できるようにするためにパターンやテクスチャーを特定の要素に加えたり、先ほど提案したように、視覚のカスタマイズをアプリに組み込むことで、これらの調整はあなたが使っている色の色合いを調節するのと同じくらいシンプルなものとなる可能性があります。

ColorBlindness-Problem

5.テキストはサイズを大きめにし、情報を見分けやすくしよう

小さすぎるテキストはあらゆるユーザーにとってイライラするものですが、視覚障害を持つ人たちは、テキストが小さすぎると実質的にアプリが利用できなくなってしまう可能性があります。繰り返しになりますが、ユーザーが必要に応じて拡大・縮小することができることを確実にすることは、モバイルUIデザインのアクセシビリティにおいて重要な面ですが、それだけでテキストの読みやすさが担保されるわけではありません。

異なるテキストのスタイルで、ユーザーが見出し、小見出しと本文を簡単に見分けることができるようにすることも重要です。これは、特別な視覚のニーズを持つユーザーだけでなく、学習障害または処理障害を持つユーザーをもサポートします。だれにでも分かりやすく視覚階層や情報階層をまとめることは、単に優れたアクセシビリティというだけではありません。それは実質的に、あなたのアプリを手に取った全ての人にとって、情報処理をよりスムーズで簡単なものにします。

mobile_UI_Design_Vision_testing

6.フォームラベルを定義して、それらが理に適っているようにしましょう

視覚的障害があり画面を見ることができないユーザーの多くは、アプリ上で起こっていることを音声で説明するスクリーンリーダーを通してモバイルUIデザインにアクセスするでしょう。こういったユーザーに不自由無くアプリを使ってもらうためには、正確に、そして論理的にそれぞれのフォームにラベルをつける必要があります。こちらのガイドは、UXがどういう感じになるかということと、フォームにラベルを付けるプロセスを丁寧に紹介しています。

アクセシビリティが確保されたモバイルUIデザインに関する4つのおすすめ資料

あなたがアクセシブルデザインの初心者であっても、またはもっと知識を向上させようとしている段階であっても、次の4つの資料は読んでおくべきです:

1.ユニバーサルデザインセンター

建築家Ronald L. Mace氏によって作られたユニバーサルデザインは、能力に関係なく、誰でもそれを使うことができるようにどんな製品でもデザインされなければならないという哲学を指します。あなたがモバイルアプリでユニバーサルデザインを実行する前にその原則を詳しく知りたいならば、ユニバーサルデザインセンターは最適な場です。モバイルUIデザインには特化していないですが、アクセシビリティの全体像をつかむためにはおすすめです。さらに、他の業界から良いデザインを見ることは新しい角度から自分の作品にアプローチする手がかりになるでしょう。

2.AndroidとiOSのアクセシビリティガイドライン

あなたがAndroidiOSのアクセシビリティガイドラインをまだブックマークしていないのであれば、すぐにしてください。どちらもモバイルUIデザインのアクセシビリティに関する特別なアドバイスや、モバイルアプリプロジェクトのデザインと開発の両方でそれらを実行する方法に関するアドバイスを提供しています。

3.ワールドワイドウェブコンソーシアム(W3C)モバイルアクセシビリティガイドライン

Android、iOS、その他のモバイルプラットフォーム、ウェアラブルまたはIoTのどのデザインをするとしても、特定のアクセシビリティの原則は、どんなモバイルアプリケーションにでもあてはまります。そういったものとして、W3はモバイルウェブコンテンツ、モバイルWebアプリ、ネイティブアプリケーションおよび複合型アプリのための、アクセシビリティガイドラインの作成途中のものを発表しました。

これらのガイドラインは、「一貫したレイアウト」(スクリーンごとにメニューを動かさない)や「要素が起動可能という明確な指示」(ボタンがボタンであると明確に表示する)のような、モバイルUIデザインのアクセシビリティの一般原則を取り扱っていますが、2のAndroidとiOSのガイドラインとは異なり、これらのアドバイスを実行するための特定のコードやツールをデベロッパー向けに提供しているわけではありません。

しかし、モバイルUIデザインのアクセシビリティの基礎を学びたい人や、デベロッパーと違ってあまり実践的な情報は求めていないデザイナーとっては良い資料です。

4.テスト・品質保証チーム

品質保証とテストは、あなたのモバイルUIデザインの成功を左右する可能性があります。QAチームは、あなたの作ったアプリがクラッシュしないか、エンストしないかということを確認するためだけにあるのではありません。彼らは、モバイルアプリの見た目や動作に問題がないかを確認する役割も担っています。そして、アクセシビリティのチェックもしてもらえるでしょう(ぜひしてもらうべきです)。

社内のアクセシビリティガイドラインのリストを作成して(あなたが実践したい研究や有料事例と同じく、iOS、AndroidおよびW3Cの資料を使うことから始めましょう)、チェックリストを作成し、あなたのQAチームが何を追求すべきか、そして、どのようにそれを追求すべきかということに対して実力を持つようにしてください。もしあなたのプロジェクト範囲と予算に合うならば、アクセシビリティ監査を専門とする会社があるので、アウトソーシングを検討するかもしれません。この場合、アクセシビリティ監査役はあなたのQAメンバーと密接に働き、それぞれのアドバイスが最終的な製品で確実に実行されるよう尽力してくれるでしょう。

プロトタイプの段階でアクセシビリティを構築する

デジタルプロトタイプは、アプリにアクセシビリティを持たせる機能の全てを持つというわけではありません。しかし、特に重要ななバックエンドの開発のディテールにおいては、プロトタイプはあなたがモバイルUIデザインのアクセシビリティをテストすることができる最初の場所となります。レイアウトの直感的な使いやすさとユーザビリティーに関するA/Bテストを行うのにプロトタイプを使ってください。そうすれば、実際のベータ版を開発すればあとはバックエンドの最適化に集中するのみです。


イベント

2017/12/05(火)
Design Thinking Square