伝わるWebサイトをつくる! ユニバーサルデザインの基本と具体的な改善方法
また、リンクテキストは青字に下線が基本となっているので、普通の文章に下線をひくと混乱するので避けるのがベター。また、同じ見た目でも押せたり押せなかったりするとユーザーが戸惑うため、リンクのデザインは一貫していることが望ましい。
また、小さなボタンだったり、リンクが密集していたりすると、意図していないものをタップする可能性があるので注意が必要だ。物理サイズで9mm程度の大きさを確保するとタッチデバイスでも使いやすくなるという。 ■ [よくある失敗(2)] キーボードで操作できないUI Webサイトを開いた状態で、キーボードのTabキーを押していくと、リンクやボタン、フォームなど、操作できる部分が強調される機能がある。これは「どこにフォーカスが当たっている」のかを表す「フォーカスインジケーター」である。
これがアクティブになっていないと、どこが選択されているのかがわかりにくい。そこで、コーディングなどの際に、このフォーカスインジケーターを意図せずに消してしまっていないかを確認しておくことが大切だ。
また、サイトを開いた時に表示することの多い「お知らせ」などの「モーダルダイアログ」も操作上の問題が起きやすいUIだ。たとえば、開いたモーダルの上にフォーカスされず、キーボード操作で閉じることも、リンク先に移動することもできなくなってしまうことがある。マウスやタップだけでなく、キーボードでの操作ができるかをチェックする必要がある。 ■ [よくある失敗(3)] 勝手に動くUI 勝手に動いたり、音が鳴ったりするUIは、集中して閲覧することの妨げになることがある。文章を読んだり操作したりするスピードは人によって異なるため、コンテンツが次々に変わって読み終わる前に流れていくと、意図しない部分をクリックしたり、自分が読みたいコンテンツに集中できなかったりすることが起きる。 またスクロールアニメーションなどのように、意図しない動きが画面全体に出てくると、画面酔いを起こす人もいる。 ┌────────── 画面に動きを取り入れる場合は慎重に行ってください。まずはコンテンツを動かさずに表示する方法を検討しましょう。 ニュースでは新着分をリスト表示したり、グリッドレイアウトで複数のコンテンツを見せたり、カルーセルを採用する場合は見る人が自分のタイミングでコントロールできるようにしてほしいです(間嶋氏) └────────── なお、Webサイトギャラリー「AAA11Y(Accessible Website Gallery)」では、動きやモダンな技術を使いつつ、アクセシブルで魅力的なサイトが多数掲載されている。 ┌────────── ユニバーサルデザインやアクセシビリティに対応しようとすると、デザインがダサくなるという声も聞かれますが、『AAA11Y』に掲載されているデザインを見ていると、より多くの人に魅力的かつ確実に情報を伝えるための工夫はまだまだできると感じられます。 使う人が自分の特性や状況に合った使い方を選べるのは、Webやデジタル媒体の大きな強み。マウスでの操作だけでなく、タッチデバイスやキーボードなどでも意図した操作ができるかを確認してみてほしいです(間嶋氏) └────────── インタラクティブなUIを実装する際のデザインは、「わかりやすさ」がおざなりになりがち。より伝わりやすい表現がないか、ユーザーが自分のタイミングで自分の使いたい方法できちんと操作ができるか、客観的な視点から確認することが大切だ。より多くの人に伝わりやすく、使いやすいものにするためにも、ユニバーサルデザインの視点を取り入れてみてはいかがだろうか。