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

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

 

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

 

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

 

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

 

 

 

 

 

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

 

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

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

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

 

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

 

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

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

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

 

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

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

 

 

 

まとめ

 

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

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

 

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

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

 

---

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

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

 

• Webソリューション事業

• Web戦略立案サービス

• Webサイト集客・SEO対策サービス

• CMS構築サービス

• Webサイト制作実績

 

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