2021/05/14

「おもしろい」Webデザイン用語（ナビゲーション・メニュー編）

こんにちは！

10月から西日本支社に仲間入りしたアシスタントのたっちゃんです。

Webサイトや携帯画面でよく見かけるメニューボタンには、実は、【食べ物】の名前がついているのをご存じですか？

今回は、そんな身近に見るちょっとおもしろい「食べ物×メニューボタン」のデザイン用語をご紹介いたします。

食べ物×メニューボタン

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

　Webサイトやスマホ画面で、よく見ることはありませんか？Webサイト・アプリケーションの設定メニューを確認する時、無意識にこのメニューボタンを押しているのではないでしょうか。実は、このメニューボタンには、３本線のデザインがハンバーガーの形に見えることから、「ハンバーガーメニュー」という名前があります。

スマホやPCでWebサイトを閲覧するときやアプリ操作をする時、クリックすると操作項目が出現するボタンのことです。とてもシンプルで、ボタン機能を記憶しやすく、選択されることを目的としたデザインのため、最近では、レスポンシブサイトの普及により、スマホやタブレットだけでなくPCサイトでも見る機会が非常に増えてきました。

2.お弁当メニュー　

　ハンバーグや唐揚げ、お浸しなど、おかずが小分けになっているお弁当をモチーフに「お弁当メニュー」と呼ばれています。ハンバーガーメニューのように、アプリケーション本体の設定を変更するナビゲーションボタンとなるため、ハンバーガーメニューとお弁当メニューが二つ同時に使用することは、ないそうです。

3.ドネルメニュー　

ハンバーガーメニューと少し似ていますが、水平線が3本線並びで、上から順番に小さくなる「ドネルメニュー」と呼ばれています。名前の由来は、トルコ料理でお馴染みのドネルケバブ（回転するケバブ）に似ているところから、モチーフになっていますが、使用されるアプリケーション・Webサイトは、見つけることができませんでした…

見かけた方は、是非、教えてください！

4.ケバブメニュー

先ほど、紹介した「ドネルメニュー」のモチーフでもあるトルコ料理のドネルケバブですが、「ケバブメニュー」は、串に刺して焼いたケバブをモチーフとしています。GoogleChromeの右上に使用されるように、ページコンテンツの設定ではなく、本体メニューの設定・変更ができるナビゲーションです。

5.ミートボールメニュー

　お肉を小さく丸くしたミートボールがモチーフの「ミートボールメニュー」と呼ばれます。Twitter、Instagramなどアプリケーションの投稿の右上によく見かけられ、アプリケーション・Webサイト上にある追加メニューや小カテゴリー、設定メニューなどを確認するための入り口として使用されています。

アイコンの重要性

アイコンの存在は、Webサイト、アプリケーションをユーザーが使用する際に、重要な役割をしています。ユーザーは、文字情報なく、アイコンの意味を理解・認識することで、視覚的・直感的なアクションやコンテンツの可読性を高めることができます。しかし、デメリットもあります。アイコンは、「記号」のため、事前にそのアイコンが何の情報を表しているのかを明確に可視化しないとユーザーに正しい情報を伝えることができません。だからこそ、アイコンのデザインが重要となります。幅広い年齢層のユーザーに対し、認識がしやすい・理解しやすい・見栄えなどを重要視し、デザインしなければなりません。

そうすることにより、コンテンツ情報を明確に、可視化されたアイコンをユーザーへ届けることで、親しみやすく重要な存在となるのです。

これらの食べ物×アイコンは、最初から名前が付けられていたのではありません。色々と調べてみると、「縦三点リーダー、横三点リーダー」と名前が異なることもあります。そのため、デザイナー同士の間で、見た目が面白く、覚えやすく、会話のアクションとしても面白い【ニックネーム】として、活用されていたそうです。おもしろいですよねぇ。