その他

2023.11.17

アクセシビリティの基礎を学ぶ

デザイナーのHandaです。

先日、「Understanding Accessibility」という素敵なデザインのサイトを見つけました。

こちらのサイトにはデザイナーとして理解しておくべきアクセシビリティの基礎が記載されています。
アクセシビリティとは「アクセスしやすさ」「利用しやすさ」といった意味合いがあり、デザイナーとして無視できない内容です。

サイト内は全て英語で書かれているのですが、WEBデザインを制作する上でも基礎となる大事な部分がたくさん書かれていたので、ポイントをまとめてみました。

アクセシビリティで気をつけたいポイント

色について

  • コントラストカラーチェッカーを使って、常に適切なコントラスト比を設定する
  • 色の数が多いと読みにくいため、最小限に抑える

レイアウトについて

  • ユーザーが異なるブロックを認識できるように、サイト全体で一貫したレイアウトを使用する
  • ナビゲーションバーとフッターを必ず入れる
  • スマートフォンやタブレットなど、あらゆる画面に対応できるようにする

フォントについて

  • 13pt未満のフォントサイズは使用しない (フォントのデザインによる)
  • 読みやすいフォントを選ぶ (セリフ体よりもサンセリフ体のほうが読みやすい)
  • ボディコピーの場合、1行あたり単語数はスペースを含めて45~80文字にする

最後に

どの項目もデザインする上でとても重要なものばかりでした。

アクセシビリティはトレンドを押さえた”イケてる”デザインを妨げるものではありませんが、アクセシビリティを念頭に置くことで情報を多くの人に正しく伝えることができます。
今回まとめた内容はほんの一部に過ぎませんが、デザインするときはいつもユーザーのことを考えながら作っていきましょう!

この記事をシェアする

関連記事

  • 2024.03.22

    Webデザインにおけるアニメーションについて考えてみた〜実例編〜

    その他

  • 2024.03.12

    Webデザインにおけるアニメーションについて考えてみた〜メリット・デメリット編〜

    その他

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    その他

おすすめ記事

  • 2021.01.08

    【jQuery】jQueyでスマホ・PC判定をする

    その他

  • 2021.04.07

    【CSS】背景色のみを透過する方法

    その他

  • 2022.08.26

    写真にたったひと手間加えるだけでオシャレに!?加工テクニック3選

    その他

TAG

×