Blog

TOP > ブログ > カラーアクセシビリティとは?- コントラスト比の基準と色に依存しない表現 について【Webアクセシビリティ入門編】

POSTED : 2022.07.14

カラーアクセシビリティとは?- コントラスト比の基準と色に依存しない表現 について【Webアクセシビリティ入門編】

Webサイトでよく使われているパーツで、デザインも機能もイメージがつくけれど、いざ発注をしようと思った時に名前が分からないパーツ。意外と結構ありませんか?

 

「押すとメニューが表示される三本線」とか「今いるページがサイト内のどこにいるのか分かるもの」とか「押すとコンテンツが開いてもう一度押すと閉じるもの」とか、これでもある程度イメージはつくと思いますが、一般的に使われている名称を知っているとWeb制作の発注をする際にも制作者との認識の齟齬が無く、よりスムーズに進むかもしれないですよね。

 

また、それらの機能がユーザーにとってどのような印象を与えるか、メリットあるいはデメリットを理解できているとより良いWebサイトの制作ができるかと思います。

 

今回はWebサイトでよく使われる定番UI(ユーザーインターフェース)パーツを集めてみましたので、その名称と機能、メリット・デメリットやデザイン例についてご紹介します。

 

 

 

Webサイトの制作・リニューアルをお考えの方へ。Web制作をトータルサポート。Web制作サービスの詳細はこちらをクリックしてください。

 

 

1.ハンバーガーメニュー

 

冒頭で記載した「押すとメニューが表示される三本線」ですね。

クリックまたはタップをすることで、メニュー画面を表示できます。

スマートフォンやタブレットなど、PC画面に比べて表示領域が狭い場合に多くのナビゲーションメニューを格納する為に実装されることが多いです。

 

名前の由来は三本の線がハンバーガーのように見えるからです。(そのままですが)

 

現在は一般的にもこのアイコンでメニューを表示することが広く認知されていることもあり、多くのサイトで使われているデザイン手法になります。

ただし、メニューを表示させるためにどうしてもワンアクション増えてしまう為、そもそも表示させるメニューが少ない場合など、実装する必要性が無ければ闇雲に採用しない方が良いかもしれません。

あくまで、ナビゲーションメニューを表示させる為のひとつの手法として認識しておくことが重要です。

 

また、先程「現在は一般的にもこのアイコンがメニューを表示することが広く認知されている」と記載しましたが、ターゲットとするユーザー層によっては、このアイコンがメニューを表示させることが認識できない可能性もあります。

その為、アイコンの下に「メニュー」と記載しておくなどの対応も検討しておくと良いでしょう。

 

※おまけ知識

機能は同じでもアイコンの見た目違いで呼び名が変わります。

例えば3つの丸が縦に並んだものは「ケバブメニュー」、3つの丸が横に並んだものは「ミートボールメニュー」などです。(食べ物の例えが多いですね。)

とはいえ全部を覚える必要はなく、機能面を伝える為には「ハンバーガーメニュー」といえば基本的に伝わると思いますので、その上でデザインの相談をすると良いかと思います。

 

 

まとめ

 

Webサイトでよく使われる定番UI(ユーザーインターフェース)パーツの名称と機能、メリット・デメリットやデザイン例についてご紹介しました。

今回ご紹介したUIパーツの多くは、上手く採用すれば大きなメリットがあることと同時に、場合によってはその機能がユーザーにとってデメリットとなる可能性もあります。

 

重要なのはコンテンツにとってその機能が必要かどうかということをしっかりと検討することです。

あくまでコンテンツが主役であるため、機能ありきデザインありきで考えるのではなく、情報・コンテンツにとってその機能が必要かどうかということを考え設計し、ユーザーにとって価値のあるサイトを制作していきましょう!

 



Webサイトの制作・リニューアルをお考えの方へ。Web制作をトータルサポート。企画・構築・運用・アクセス解析までワンストップでの支援はもちろん、デザインのみ、コーディングのみといったご依頼にも柔軟に対応しております。まずはお気軽にご相談ください。Web制作サービスの詳細はこちらをクリックしてください。

Webサイトの立ち上げ、改善、リニューアルをお考えの方へ。Web制作をトータルサポート。企画・構築・運用・アクセス解析までワンストップでの支援はもちろん、デザインのみ、コーディングのみといったご依頼にも柔軟に対応しております。まずはお気軽にご相談ください。Web制作サービスの詳細はこちらをクリックしてください。

オレンジ社では、国内/海外サイトの企画・構築・運用サービスをご提供しています。

国内サイト海外サイト問わず、Webサイトのことならお気軽にご相談ください。

 

 

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

OUR BUSINESS事業内容

外国語による情報発信に関することなら
お気軽にご相談ください。

TEL.03-3239-0700

受付時間 9:00~18:00(土・日・祝日除く)