アクセシブルなデザイン – グラフィック デザイナーに欠かせない 5 つの秘密

包括性は、もはや無視できないデザインのトレンドになりつつあります。 ブランドとメッセージを正確に捉えたデザインを作成することが重要です。 しかし、さらに重要なことは、顧客が正しい方法で見て処理できるデザインを作成することです。 これには、さまざまな種類の障害を持つ人々のための設計も含まれます。 何らかの形の障害を抱えて生活している人口の大部分があります。 これは、米国だけで 6,100 万人の成人に相当します。 したがって、アクセシブルなデザインは軽視できないものです。 国際障害者デーは12月3日です。 というわけで、アクセシブルなデザインについて話す良い機会になりました。

上の画像で73という数字が見えましたか？ 誰もができるわけではありません！ また、色の識別が困難な人もターゲット オーディエンスの一部です。 そのため、アクセシブルなデザインを優先することが重要です。 どこから始めればよいかわかりませんか？ つかまえた！ すべての違いを生み出すことができる簡単な調整と設計上の考慮事項に関するいくつかの実行可能なヒントを提供します.

アクセシブルなデザイン – グラフィックデザインの観点から

代表的な広告とマーケティングにおける包括性について話すとき、多くの場合、多様な文化的表現を含めるという概念に限定されます。 さまざまな人口統計の人々が含まれていると感じさせる. さまざまな民族性を認め、受け入れる。 しかし、包括性はそれを超えています。 さまざまな障害を持つユーザーのエクスペリエンスを評価して微調整することは、インクルーシブ マーケティングのもう 1 つの重要な要素です。

アクセシブルなデザインは、かなり広大な領域です。 これには、すべての顧客タッチポイントでのアクセシビリティの設計が含まれます。 アクセシブルな UI デザインから、あらゆる種類のユーザーの使用を簡素化するアプリ機能まで、ブランドが実行できる対策はいくつかあります。 しかし、このブログでは、特にグラフィック デザインにおけるアクセシビリティについてお話しします。 これには、障害のある人にとって使いやすいプロモーション グラフィックの作成が含まれます。

ほとんどのブランドは、失明や聴覚障害などの身体障害を考慮しています。 しかし、認知障害もあなたの注意のかなりの部分を必要とします. 失語症、自閉症、失読症、ADHD – あなたが提示した情報を人々が処理することを困難にする認知障害がいくつかあります. あなたの広告は、あなたが画面上で素晴らしいと思うデザインでも、彼らにはまったく異なって見えるかもしれません。

たとえば、テキストと背景のコントラストが不十分で、ユーザーが重要な情報を見逃している場合はどうなるでしょうか。 または、インフォグラフィックの円グラフがパラメータごとに異なる色で表示されていても、色覚異常のユーザーがそれらを区別できない場合はどうでしょうか? 設計の目的が失われます。 そのため、マーケティングやブランディングの設計においてアクセシビリティ機能を考慮することが重要です。

そして何よりも、マーケティングにおけるアクセシブルなデザインはそれほど難しくないということです。 いくつかの小さな調整を行うだけで、一般ユーザーと障害を持つユーザーの両方に対応するデザインが完成します。 これを実現するためのいくつかのアイデアを見てみましょう。

1. タイポグラフィに注意を払う

タイポグラフィのさまざまな側面が、コピーの読みやすさと読みやすさに影響を与えます。 適切な書体の選択やフォントのスタイリングを常に制限できるわけではありませんが、いくつかの側面を考慮することで、視覚障害や神経障害を持つ人々にとってデザインが非常に便利になります。

小さなフォントを使用する前によく考えてください

小さなフォントは目に大きな負担をかけます。 そして、それはあなたのユーザーがメッセージを得るために一生懸命働くようにします. チャンスはありません。 さらに、12px 未満のフォントは、特に携帯電話では読みにくい場合があります。 世界中の Web トラフィックの 58.99% がモバイル デバイスから来ていることを考えると、小さなフォントを避けることは、アクセシブルなデザインにとって間違いなく良い決断です。

そのため、ヒーロー テキストの大きな太字フォントは、注目を集めたり、スクロールを止めたりするだけでなく、複数のユーザーにとって読みやすさを確保します。 セクションごとにフォント サイズを変えることで、あらゆる種類のユーザーが階層を理解しやすくなります。 多くの場合、最大のフォントはほとんどの人が最初に気づき、最小のフォントはおそらく最後に気付くためです。

選択する書体が重要

美しく読みやすいセリフフォントはたくさんあります。 そのことに疑いの余地はありません。 しかし、視覚障害者を念頭に置いてデザインする場合、サンセリフ フォントには明らかな利点があります。 すっきりとした無駄のない文字形状により、読みやすくなっています。 これは、印刷物とデジタルの両方のデザインに当てはまります。

サンセリフ書体の中で、非常に細いストロークのフォントは避けるべきです。 装飾フォントは、視覚障害のある人向けにデザインするときに機能しない他の種類のフォントです。 適度に装飾的なフォントを使用しても問題ありません。 ただし、核となるメッセージを伝えるセクション、CTA、テキストの多いエリアには、より読みやすい代替手段を用意する必要があります。

文字間隔に注意

カーニングまたはコピー内の文字間のスペースにより、読者は情報を正しく読むことができます。 そして、彼らがそれを難なく読んだこと。 文字同士が近すぎると、テキスト全体が読みにくくなる場合があります。 視覚障害や認知障害のある人にとって、文字間のスペースが少なすぎると、さらに大きな問題が生じます. 読者に意図した効果がなければ、良いコピーは何の役に立つでしょうか? さらに悪いことに、彼らが経験不足のためにあなたのブランドを放棄した場合はどうなりますか?

十分な間隔の文字とすっきりとした全体的なレイアウトは、まさにあなたが必要としているものです. 忙しいデザインではありません。 障害のある人だけでなく、誰もそれを好きではありません。

上記の名刺には、マインドフルなタイポグラフィ調整に関する上記のすべてのアイデアが組み込まれています。 全体的にシンプルなサンセリフフォントを使用しています。 文字間のスペースにより、テキストが読みやすくなります。 そして最後の仕上げとして、QR コードは完璧なハイブリッド デザインの作成に役立ちます。 コードをスキャンすると、Web サイト、ソーシャル メディア ページ、直通ダイヤル リンクへのリンクが記載されたデジタル名刺が表示されます。 すべてのタイプのユーザーは、このようなユーザー中心の賢明なデザインを気に入るはずです。

ヒント:選択したタイポグラフィが読者の目にやさしいかどうかわかりませんか? 以下の文字を並べて書き留めてください。

• 大文字の「イ」
• 小文字の「l」
• そして数字の「1」

フォント サイズについては、デザインから少し離れて、ズームインしなくてもテキストを快適に読めるかどうかを確認してください。チーム メンバーからいくつかの異なる視点を得れば、準備完了です。

タイポグラフィを機能させることを心配していますか? キンプチームにお問い合わせください。

2. 色のコントラストは特別な注意が必要です

コントラストは、すべてのデザインにおいて不可欠な要素です。 色のコントラストは、2 つの色がどの程度異なっているかを示します。 それらを並べて配置するか、前景と背景に重ねて配置します。色がほとんど混ざり合っている場合は、コントラストが低すぎます。 コントラストが低いと、あらゆる種類の人にとって苦痛になる可能性があります。 また、視覚障害のある人にとっては、メッセージを理解するのが特に難しくなっています。

The World Wide Web Consortium (W3C) によると、前景テキストと背景のコントラスト比は 4.5:1 以上が推奨されています。

同時に、コントラストが高すぎると、依然として多くの不快感を引き起こす可能性があります. 赤の背景に緑のテキストを含む以下の例は、良い例です。 コントラストは高いですが、この組み合わせは目に負担がかかる可能性があります。

また、ハイ コントラスト カラーを含むちらつきや点滅のアニメーションも望ましくありません。 これらは、光に敏感な人には厳しい場合があります。

ヒント: フォントに選択した赤が灰色の背景に似合うかどうかを考える代わりに、WebAIM Contrast Checker などのオンライン ツールを使用してコントラスト比を調べます。

3. テキストオーバーレイを使用するときは注意してください

アクセシブルなデザインを作成する場合に避けるべきもう 1 つのデザイン要素は、複雑な背景にテキスト オーバーレイを配置することです。 バックグラウンドで多くのことが行われている場合、最も読みやすいフォントでも読みにくいことがあります。 たとえば、失読症の人にとってはより困難になる可能性があります。 人口の推定 10% がディスレクシアを持っています。 ビジネスのチラシ、名刺、またはソーシャル メディアのデザインは、読みやすいものにする必要があります。

複雑な背景は、写真やパターン化された背景の形にすることができます。 これらのデザインはどちらも素晴らしい背景を作成しますが、前景にあるテキストを常に正当化するとは限りません。

これを回避するには、単色または半透明のテキスト ボックスまたはアクセントを使用できます。 もう一度、フォントの色とアクセントの色のコントラスト比を確認してください。

たとえば、以下のデザインでは、写真を際立たせながら、テキストを読みやすくしています。

コントラスト関連の問題は、特に食品ラベルや医薬品ラベルなどのアプリケーションに関しては爆発する可能性があります. アレルギーの免責事項または成分リストと投与量の指示が明確でない場合、パッケージのデザインはユーザーにとって安全上の問題になる可能性があります.

したがって、パッケージングのように作業するスペースが限られているアプリケーションに関しては、ここで試してみるべきアイデアがあります。 ケロッグは、視覚障害者向けの特別なパッケージ デザインを導入しました。 スクリーン リーダーを使用してスキャンできるオンパック コードがあります。 これは、デザインをハイブリッドにし、あらゆる種類の対象者に適したものにするための 1 つの方法にすぎません。

4. 色弱者向けのデザイン

色の選択は、それ自体がストレスの多い決定です。 しかし、色盲のユーザーに適したものにしなければならないとしたらどうでしょうか? 幸いなことに、多くのデザイン ツールを使用すると、色覚異常を持つユーザー向けにデザインできます。

色盲の最も一般的なタイプは、第一色覚、第二色覚、および第三色覚です。 エンド ユーザーが 1 つの色を別の色として認識できない場合、フォントと背景に異なる色を使用したり、インフォグラフィックの階層を捉えるために異なる色を使用したりするという決定はすべて無意味になります。

色盲は白人男性に最も多いと推定されています。 それがあなたのターゲットオーディエンスを説明している場合、色弱者に安全なカラーパレットを選択することについて議論の余地はありません.

Adobe color などのツールを使用すると、カラー パレットが色弱者に安全かどうかを確認できます。 選択した色が色盲の人にどのように見えるかのシミュレーションが表示され、同じように見える色を識別できます。 下の画像で、横線が入っている色が色弱者に似た色です。 アクセシブルなデザインを目指している場合は、このようなトリッキーな組み合わせを避けてください。

または、既存のデザインをチェックして色覚異常に対応したい場合は、Coblis-Color Blindness Simulator などのオンライン ツールを使用して、色覚異常のユーザーにデザインがどのように見えるかを確認できます。

CTA ボタンが飛び出して一般ユーザーの注意を引きますが、色盲のユーザーには背景に対してほとんど見えない場合でも、マークを見逃しています。 すべてのユーザーが重要であり、すべてのユーザー インタラクションが重要です。 したがって、適切な色を選択してください。

ヒント:色ベースの階層だけに頼るのではなく、フォント サイズやその他の要素を使用して、物事をより明確にします。

5. 動画に明確なキャプションを追加し、画像に代替テキストを追加する

一部のユーザーはスクリーン リーダーに依存していることに注意してください。 したがって、関連する代替テキストを使用しない限り、画像は役に立たない可能性があります。 はい、代替テキストは SEO に役立つだけではありません。 ユーザーにとってアクセシブルなデザインを作成するのに役立ちます。 しかし、はい、要点を守ってください。長い説明は避けてください。

ビジュアルのもう 1 つのテキストは、ビデオのキャプションです。 自動生成されたキャプションに頼らないでください。 テキスト オーバーレイを使用して、ビデオを通じてユーザーをガイドします。 YouTube では、チャプターを作成して物事をさらに良くすることができます。 そして最後に、キャプションを背景に消えない明確で読みやすいフォントで追加します。 ここには動く背景があることを忘れないでください。

キャプションを追加すると、ソーシャル メディアで動画をミュートで視聴することを好むユーザーのニーズを満たすこともできます。 いずれにせよ勝利です。 ソーシャル メディア プラットフォームが最近ビデオに自動キャプションを追加した LinkedIn などのアクセシビリティ機能を優先しているという事実は、アクセシブルなデザインを真剣に考える時期に来ていることを示しています。

Kimp でアクセシブルなデザインを簡素化する

マーケティングにおけるアクセシブルなデザインとは、オーディエンス グループの 1 つでも困難や要件を無視することなく、ビジュアルの力を活用することです。 実際、「ターゲット グループ」という概念を少し忘れて、あなたが一連のユニークな個人と 1 対 1 でコミュニケーションを取っていることを理解してください。 ブランドデザインの見方が変わります。 ブランドのアクセシブルなデザインを作成する際にサポートが必要な場合は、当社のデザイナーにお知らせください。多様な顧客層のニーズを満たす最高の広告やソーシャル メディアの投稿を考え出すお手伝いをさせていただきます。

今すぐサインアップして、Kimp のサブスクリプションを 7 日間無料でお試しください。

関連記事