お使いのブラウザは、バージョンが古すぎます。

このサイトは、Internet Explore8・Internet Explore9には対応しておりません。
恐れ入りますが、お使いのブラウザをバージョンアップしていただきますよう宜しくお願いいたします。

ユニバーサルデザインを意識したアプリ作りについて考えてみました

どうもこんにちはJBです。
ターゲット層がものすごく広いアプリを作る時、「どんな人でも快適に使える」ということが重要になってきますよね!老若男女にも使いやすいものを作るにはどんな事を考えればいいかなーという部分をちょっとばかり考えてみました。

ユニバーサルデザインとは?

そもそもユニバーサルデザインとは何ぞや?という事なんですが、Wikipediaによるとこんな感じでした。

ユニバーサルデザイン(Universal Design、UD)とは、文化・言語・国籍の違い、老若男女といった差異、障害・能力の如何を問わずに利用することができる施設・製品・情報の設計(デザイン)をいう。

何だかとてもデカい話。
具体的には、ユニバーサルデザインには以下の7原則があります。

  • どんな人でも公平に使えること
  • 使う上での柔軟性があること
  • 使い方が簡単で自明であること
  • 必要な情報がすぐに分かること
  • うっかりミスを許容できること
  • 身体への過度な負担を必要としないこと
  • アクセスや利用のための十分な大きさと空間が確保されていること

だそうです。Webやアプリでは、アクセシビリティ論なんかがこの範疇に入りそうですね!

具体的なポイント

それでは、アプリを作る際に適用できそうな具体例を挙げてみたいと思いますよ!

タップ領域

お年寄りと若者では、タップの精度が違います。人によって指の太さも違います。障害をお持ちの方で、タップ対象を定めにくい…とかもありますかね。
まあそんな部分を鑑みて、それ相応のサイズでタップ領域を用意する必要があります!
AndroidのAccessibilityに関する項目では、最小で48dp四方のタップ領域を確保してください!とあります。iOSも、最小44px(@1xの場合)程度のサイズにしてください…とのガイドラインが。

iOS最小タップ領域

iOS Human Interface Guidelines | Adaptivity and Layoutsより


実寸で7mm〜10mmが最小サイズとして奨励されている様です。
最小サイズを守っていても、隣接して敷き詰められているとミスタップが起こりやすかったりしますので、小さいボタンサイズの場合は十分に余白を持たせてあげてください。ちなみにMicrosoftのTouch Interaction for Windowsによると、最低2mmのスキマがあるといいそうです(ボタンが大きい場合はそんなこともないと思います)。
ボタンの配置間隔

Touch Interaction for Windowsより


デザインの関係で小さいボタンにしたい時もあると思いますが、見た目が小さくても、タップ領域にはそれなりのサイズを持たせてあげる必要がありそうですね!

テキスト

老眼の方や弱視の方は、小さい字が読みづらいよ…というワケですが、もともとOSの機能でテキストサイズは変更できます。アプリ内でもこれを適応させるには、プログラム側で実装する必要があります。
デザイン側で言えば、テキストサイズ変更による大幅な崩れが出ないように設計する、テキストサイズを可変化したい部分は画像にしない…という感じですかね?

音声読み上げ

iOSにはVoiceOver、AndroidにはTalkBackという音声読み上げ機能があります。
読み上げ対応をするには、開発側でごにょごにょすることになるんですが…。画像の名前をちゃんとつけたり、フォーカス対象を調整したりなど…諸々あります…。対応できそうなアプリなら、ぜひぜひやってみてはいかがでしょうか!

カラーデザイン

色弱者の方って結構多いそうです。日本だと大体320万人以上いるとかいないとか(割合的には男性の方が高いですー)。
型は大体3つに分かれています。赤系の色覚が弱いP型、緑系の色覚が弱いD型、青系の色覚が弱いT型です。
色弱者の見え方
色弱者の方にとっては、色相が違っていても明度・彩度が同じだと、同じように見えてしまったりすることがあります。グラフやボタン、カテゴリーなどを「色」単一要素で判別を促すのはあまりよろしくなさそうです…。
実際に作ったものがどういう風にみられるのかしらーというのは、Coblis — Color Blindness Simulatorみたいなオンラインチェッカーや、Photoshopなどでチェックできます(表示 > 校正設定 > P型またはD型を選べばOK。T型はないんだなあ…)。
カラーユニバーサルデザイン推進機構などで、CUD推奨配色セットガイドブックなんかも配付されているので、参考にしてみても良いのではないでしょうか!

アイコン・ピクトグラム

アイコン・ピクトグラム
言葉が通じなくても絵で分かるよ!というアイコン・ピクトグラム。
アプリの世界でも、OSによって提供されていて共通認識があるアイコンがたくさんありますよね!なので、それに準じたものをきちんと使ってあげればいいと思います。使う場面によっては、現実世界でのピクトグラムを反映させても分かりやすくなりそうです。
もちろんオリジナルでアイコンを作る時もたくさんあると思いますが、その場合は

  • ちゃんと意味を考えること(記号的な判別補助なら話は別です!)
  • 既存のアイコンとの兼ね合いを踏まえること(似たアイコンで全然違う意味…とかは混乱します)

などなどを考えていく必要があると思います。

導線・アクション設計

特殊なアクションでメニューを呼び出す…というのも、画面上はスッキリするかもしれませんが、「どうすりゃいいんだ」と思わせてしまうのも事実。出来る限りナビゲーションは分かりやすい場所に配置し、中にしまう場合はトリガーボタンをきちんと明示してあげた方が良さそうです。
うっかり操作で大変なことに…!とならないように、アラートや確認画面の出し方も考えたいところ。

ラベリング

ボタンのテキスト表記
ボタンやナビゲーションに表記する文字(ラベル)も、ジェネレーションギャップを考えます。IT系のカタカナ語が分からない…という方が結構いらっしゃる模様。出来るだけ万人に分かる単語を使いましょう。他にも分かりやすくする方法として、ボタンの行為を動詞にするのも良いそう。行動を促す役割があるみたいです。

まとめ

いかがだったでしょうか?

まだまだ気をつける所はたくさんあると思いますが、とりあえず考えついたものを挙げてみました!
しかし万人向けというものは難しいですね…。出来るだけ多くの人に快適に使ってもらえるためには、作る側の工夫が必要です。「いやーこのくらい出来るっしょー」という考えは捨てて、色々な立場に立って考えていきたいと思います!

それではー

コメントをどうぞ

メールアドレスは公開されません。* が付いている欄は必須項目です。


お気軽にお問い合わせください。

日本VTR実験室では、お仕事のご依頼、ブログ・コラムのご感想などを受け付けております。
アプリ開発・コンテンツ制作でお困りでしたら、お気軽にご相談ください。
ご連絡お待ちしております。

お問い合わせはこちらから

03-3541-1230

info@nvtrlab.jp

電話受付対応時間:平日AM9:30〜PM6:00