インクルーシブ Web デザイン: 重要な理由とその方法

公開: 2023-03-16

社会的包括性は重大な問題となっており、多くの組織や擁護団体は、社会的排除を経験している人々に対する差別を止める方法を探しています。

しかし、デジタル環境はどうでしょうか? 世界人口の 15% がなんらかの障害を持って生活しているため、オンライン体験における包括性は単なるトレンドではありません。

たとえば、ウェブデザインを考えてみましょう。あなたのウェブサイトを訪れても、ナビゲートできない人はおそらく何千人もいるでしょう。それで、それはあなたに何を残しますか？何百万人もの人々が、感銘を受け、課題に取り組み、長期的な関係を築く機会を失っています。そのため、企業はすべてのユーザーに平等な Web ブラウジングエクスペリエンスを提供することに注力し始めています。

しかし、インクルーシブなウェブデザインがニューノーマルになるには、まだ長い道のりがあります。ほとんどのマーケティング担当者は、時間と費用がかかると考えて、インクルーシブデザイン戦略の実装に消極的です。この記事では、インクルーシブ Web デザインについて知っておくべきこと、なぜそれが必要なのか、それを正しく行うためのベストプラクティスを共有することで、この一般的な信念に取り組みます。

インクルーシブ Web デザインとは

インクルーシブ Web デザインとは、マイノリティグループに属しているためにさまざまな方法で除外を経験しているユーザーの特定のニーズを考慮する実践です。デザインの包括性には、永続的な障害を持つ人々だけでなく、抑圧されたグループや、デジタル製品を操作する際に制限や除外を経験するユーザーも含まれます。

UX の専門家であるあなたは、誰もがアクセスできる製品を作成する責任に直面しています。会社のブログを作成する方法であろうと、ランディングページを作成する方法であろうと、訪問者が直面する制限の種類に関係なく、全員のブラウジングニーズに対応することは、後から考える必要はありません。そうは言っても、インクルーシブデザインとアクセシビリティプラクティスを混同すべきではありません。

インクルーシブ Web デザイン vs. アクセシブル Web デザイン

インクルーシブ Web デザインはアクセシブルな Web デザインと同等であるという誤解がよくあります。デザインにおけるアクセシビリティと包括性は密接に関係しているかもしれませんが、同じではありません。インクルーシブ Web デザインは、アクセシビリティの方法を含む包括的な用語であり、障害を持つ人々がデジタル製品を簡単に理解できるようにすることを含みます。包括性は、技術的な制約、言語、人口統計学的な障壁、またはユーザーが Web ページに完全に関与することを妨げるあらゆる種類の状況的制限など、他の要因にまで及びます。

インクルーシブデザインについて話すとき、実際には、小さな画面を使用している人やインターネット接続が遅い人から、腕のけがなどの一時的な障害を持つ人まで、あらゆる種類の制限に対処するユニバーサルデザインを意味します。インクルーシブデザインは、アクセスしやすく使いやすいソリューションを提供することに限定されませんが、さらに重要なことは、人々に感謝の気持ちを抱かせることです。

簡単に言うと、インクルーシブ Web デザインとは、結果そのものよりも、多様性を考慮したデザインへのアプローチ方法に関するものです。

インクルーシブ Web デザインの重要な柱

インクルーシブなデジタル製品を構築するために、デザイナーはあらゆるユーザーのニーズと状況を満たすエクスペリエンスを作成する必要があります。したがって、最初から包括的なデザインの考え方を採用することが重要です。

心に留めておく必要があるインクルーシブデザインの柱を調べてみましょう。

除外の種類を特定します。 物事を開始する前に、除外ポイントを検索し、それらを出発点として活用して、新しいより包括的なオプションを作成します。個人が排除されていると感じている理由と理由をデザイナーが理解すれば、インクルーシブなデジタルエクスペリエンスに向けたロードマップを作成しやすくなります。
ユーザーを巻き込みます。 ユーザーは、すべてのデジタルソリューションの中心にいる必要があります。設計者がさまざまなユーザーグループの価値を知るには、それらを関与させることが優先されるべきです。これは、デザイナーがあまり知らないグループにとってさらに重要になります。そのため、彼らの意見を求めて、彼らの変化するニーズを発見し、彼らの意見に基づいてアイデアをテストして、彼らが感謝する経験を提供してください.

個人的な偏見から離れてください。 個人的な偏見が公平なソリューションの設計の妨げにならないように、さまざまなバックグラウンドやコミュニティのユーザーを含めます。これにより、設計プロセスから誰を除外しているのかを知ることができます。
あなたのチームから始めましょう。 偏見を避けるための最初のステップは、自分のチームから始めることです。インクルーシブな労働力を持つことは、個人的な偏見を認識するだけでなく、それらを克服するのにも役立ちます。さまざまなバックグラウンドと能力を持つ人々で構成されるデザインチームは、より幅広いユーザーの課題を解き放つための鍵です。

インクルーシビティがウェブデザインに欠かせないのはなぜですか?

ユーザーのニーズは多様です。したがって、画一的なアプローチを想定すると、大惨事になる可能性があります。さらに、Web デザインにおける包括的開発は、業界のリーダーとしての地位を確立し、競合他社をしのぐのに役立ちます。

デジタル製品を設計する際に包括的な考え方を採用する最も重要な理由を分析しましょう。

1.より多くの視聴者にリーチする

社会的影響はさておき、インクルーシブ Web デザインはビジネスの観点からも重要です。オーディエンスの大部分を除外すると、顧客を失うことは言うまでもありません。翻訳オプション、ビジュアルコンポーネント、音声アシスタントなどの包括的な機能は、より多くの視聴者にリーチし、Web サイトデザインの包括性を高めるのに役立ちます。普遍的にポジティブなエクスペリエンスを構築することに集中すれば、ユーザーは忠誠心であなたに報いるでしょう.

2. 人々はあなたにそれを期待しています

ソーシャルメディアプラットフォームは社会的不正にスポットライトを当てているため、今日のユーザーはこれまで以上に社会的意識を高めています。人々は、企業がインクルージョンに移行することを期待しています。それは正しいことだからです。そのため、さまざまなニーズや能力を持つ人々を含めることは、ビジネス上の決定以上のものです。

ユーザーを含めるために全力を尽くさないと、意図せずとも、製品との関わりからユーザーを除外することになります。ユーザーが顧客になることを選択するかどうかに影響を与えるため、今こそ多様性を設計する時です。

3. さまざまな問題を同時に解決する

Web サイトの訪問者には、それぞれ興味や動機があり、さまざまな状況に基づいて自分の能力に限界があります。その結果、誰もが Web デザインを操作しているときに排除を経験する可能性があります。ここで、インクルーシブデザインが、さまざまな制限を持つさまざまなユーザーを同様の方法で結び付けることができます。たとえば、大きなきれいなテキストは視力の弱い人に役立ちますが、運転者や移動中にブラウジングする他の人にも役立ちます。

4. ブランド認知度を高める

消費者は生活を楽にしてくれるブランドを好みます。包括的なデザイン要素ほどその意図を示すものはありません。インターネットユーザーは注意持続時間が短く、さまざまな画面に多くの時間を費やします。そのため、手根管症候群やコンピュータービジョン症候群などの問題は、私たちが思っているよりも一般的です。これらの人々は、どのデバイスでも簡単にナビゲートできる Web サイトにアクセスすることを好みます。

包括性を念頭に置いて Web サイトを設計すると、訪問者は歓迎され、提供されるカスタマージャーニーに快適に感じます。そうすれば、あなたのブランドは常に頭に浮かび、競争上の優位性を持つことができます。

5.SEOを改善する

検索エンジンは、より優れたユーザーエクスペリエンスとインクルージョン機能のために最適化された Web ページを好みます。アクセシビリティのベストプラクティスについていけない場合、説得力のある Web サイトは SEO の点で有利にはなりません。

多くのマーケティング担当者は、Web サイトのユーザビリティとアクセシビリティを見落としがちです。ただし、検索エンジンが Web サイトを認識してランキングを向上させるための防弾の方法です。 Google の検索アルゴリズムに合わせることで Google の満足度を維持できるだけでなく、訪問者に最高のオンページエクスペリエンスを提供することもできます。

8 つのインクルーシブデザインのベストプラクティス

Web ページが公平なオンラインエクスペリエンスを提供しているかどうかを評価するのは難しいため、より包括的に設計するとイライラする可能性があります。出発点を選択する必要がある場合、それはすべての仮定を手放し、平均的なユーザーだけでなくすべてのユーザーを優先することを決定することです. 誰もが参加していると感じられるようにするために、読み進めて、デザイナーとして従うべきベストプラクティスを見つけてください。

1. よく構造化された読みやすいコンテンツを作成する

Web サイトのコンテンツは、コンテンツマーケティング戦略の不可欠な部分です。読みやすく、慎重に構成されたコンテンツは、訪問者の関心を維持するための鍵です。

認知障害または視覚障害のある訪問者が読むことができる構造を選択してください。また、コンテンツを通じてユーザーをガイドし、摩擦点を取り除く論理的な順序も含める必要があります。

これらの手順とは別に、ユーザーがコンテンツを操作する方法に違いをもたらす簡単な変更があります。読みやすく、意味のある順序で並べられたコンテンツに関する重要なガイドラインを次に示します。

簡単な言葉と短い文章を使用して、コンテンツを読みやすく、消化しやすいものにします
長いテキストブロックを小さなセクションに分割し、見出し、箇条書き、画像を使用して、視覚障害または読み取り障害のあるユーザーをサポートします。
アコーディオンなどの要素を含めてコンテンツを非表示にし、訪問者が最初にアクセスする必要があるコアコンテンツから注意をそらす
コンテンツとその背景の間に十分なコントラストを使用するようにしてください

2. レイアウトを明確かつシンプルに保つ

階層は、コンテンツと同様にレイアウトでも重要です。訪問者は、複雑なナビゲーションや混沌とした情報を伴う乱雑なデザインを好まないため、明確で最小限のデザインがトレンドとして廃れることはありません。明確でシンプルなレイアウトは、直感的で使いやすく、視覚的に魅力的なインターフェイスに変換されます。

最も関連性の高い情報から訪問者を迷わせることなく、その使いやすさを強調する Web サイトのコア機能を構築するようにしてください。次に、必要なコンポーネントを追加して価値を示し、さらに関与させることができます。

3. 一貫性を確保する

デザイナーであるあなたは、作成するすべてのデジタル製品に一貫性が不可欠であることをすでに知っています。多様なオーディエンスを含めるように設計する場合、これはさらに重要です。一貫性のないデザインは通常、ユーザーを混乱させ、Web サイトを離れてしまう原因となります。認知障害のある人にとっては、意味をなさない複雑なインターフェースに苦労するため、さらに困難です。

Web サイトのナビゲーションに一貫性があると、使いやすさが向上し、変換がより簡単かつ迅速に行われる可能性があります。ただし、誤解しないでください。一貫性とは、予測可能性を意味するものではありません。そのため、できるだけ創造性を保ちながら、フラストレーションの原因となる要素のみを削除するようにしてください。

4. 画像に代替テキストを使用する

経験豊富なマーケティング担当者は、画像、動画、インフォグラフィックなどの視覚的要素が感情を伝えながら注目を集める方法を知っています。ただし、代替テキストとキャプションをそれぞれ含めない場合、Web サイトに画像やビデオを含めても意味がありません。

スクリーンリーダーは、alt-text を使用して視覚障害のある人に画像を説明します。慎重に作成された簡潔な説明は、訪問者に画像の内容を知らせることで誤解を避けるのに役立ちます。

画像の代替テキストを記述する場合、考慮すべき重要な側面がいくつかあります。

ユーザーが最も重要な情報にすばやくアクセスできるように、写真で何が起こっているかを簡潔かつ正確に説明します
画像が周囲の環境とどのように関連しているかを含めることを忘れないでください
画像の大部分が装飾的な場合、空の <alt> フィールドを使用してスクリーンリーダーにその画像をスキップできることを知らせます

また、聴覚障害のある人がビデオコンテンツを理解できるように、ビデオコンテンツにキャプションを含めることを忘れないでください。ユーザーがあなたのメッセージを完全に理解できるように、ウェブサイトに掲載されているすべてのビデオにキャプションを付けてください。最後に、何をするにしても、動画を自動再生しないでください。ユーザーの認知負荷が増加するためです。

5. インクルーシブコピーを選択する

多くのマーケティング担当者が犯す間違いは、ビジュアルを優先してコピーを無視することです。しかし、言葉は自分自身を表現し、つながりを生み出すためのツールです。同じことがUXデザインにも当てはまります。より多くの聴衆に心を開いてもらうには、包括的で簡潔なコピーが必要です。インクルーシブコピーを実装するためのいくつかの戦術を確認してみましょう。

簡単な言葉を選び、複雑な用語や不必要な専門用語は避けてください。そうすることで、学習障害や認知障害のある人があなたのメッセージを理解できるようになります。
ウェブサイトで複雑なアイデアや用語を使用する必要がある場合は、画像や動画を使用して、障害を持つユーザーやネイティブスピーカー以外のユーザー向けに物事を簡素化することを検討してください。
オンラインフォームに含めるコピーには特に注意してください。これは、リードジェネレーションにおいて最もデリケートでありながら無視されている部分の 1 つです。質問する必要がある質問とその方法を確認し、提供する回答オプションに注意してください。
すべてのユーザーが正確に表現されていると感じられるように、性別の代名詞と性別に敏感な用語 (「淑女と紳士」など) を除外します。

6. 色を賢く選ぶ

色は感情を呼び起こし、見る人の注意を引くため、デザインにおいて大きな役割を果たします。問題は、すべてのユーザーが同じように色を知覚するわけではないため、制限があることです。

たとえば、赤緑色覚異常の人は、緑と赤の色合いを見るのが困難です。さらに、文化的背景が異なる訪問者は色の解釈が異なるため、コンテンツの理解に影響を与える可能性があります。たとえば、弱視または色盲の訪問者は、データを色の違いで表す円グラフを理解するのが難しい場合があります。

訪問者の間でこのような苦痛を避けるために何ができますか? 視覚的な手がかりとして色だけに頼るのではなく、ラベル、アイコン、太字のテキストなどの要素を組み込むようにしてください。また、コントラストの強い色を使用したり、同系色を並べたりすることは避けてください。このような小さなことにより、ユーザーはウェブサイトを快適に使用できるようになり、多様なオーディエンスグループ間の違いを埋めることができます。

どこから始めればよいかわからない場合は、Color Safe や WebAIM などのツールを使用して、アクセシブルな色の組み合わせを生成できます。

7.キーボードのアクセシビリティを忘れないでください

Web サイトを設計する際にテストする重要な要素の 1 つは、キーボードのアクセシビリティです。 Web サイトをキーボードナビゲーション用に最適化しないと、視覚障害や運動障害のある訪問者が苦労することになります。キーボードは、Web サイトにアクセスしてそのコンポーネントを操作する唯一の手段である可能性があることに注意してください。

しかし、キーボードナビゲーションの最適化とは何を意味するのでしょうか? 左から右、上下に移動して、キーボードのみを使用して Web ページをナビゲートできることを確認してください。

Tab を使用するだけで、ナビゲーションプロセスがどれほど簡単か、または難しいかをテストすることを忘れないでください。 Tab キーは、キーボードのみの訪問者が Web ページをナビゲートする方法であるため、キーボードのアクセシビリティにおいても同様に重要です。このオプションの背後にある主なアイデアは、Tab キーをクリックしてページ上のすべての要素を選択できるようにすることです。

包括性の重要性

長年にわたり、Web デザインは、注目を集める魅力的で、カラフルで、通常とは異なる Web ページを作成することを目的としてきました。これらの特性は依然として関連性がありますが、訪問者に本当に楽しい Web 体験を提供するには不十分です。

人目を引く Web サイトを作成することを想像してみてください。包括的な Web デザインを念頭に置いて構築しないと、大部分のユーザーがアクセスできなくなります。最終結果は、すべてのデバイスのすべてのユーザーに受け入れられるユニバーサルデザインになるはずです。

Web サイトをすべての訪問者にとって包括的で平等な空間にすることは、思ったほど難しいことではありません。それを成功させるには、まず、さまざまな視聴者グループがデジタル製品に関与するときに直面する課題をしっかりと理解する必要があります.

使いやすく価値のある Web サイトを作成するには、このガイドで共有されているベストプラクティスに従うことを忘れないでください。そして、あなたが何をするにしても、包括的で顧客中心のデジタル体験に対する絶え間なく進化する視聴者のニーズに追いつくことを決してやめないでください.