UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。

IT業界だと当たり前のように使うのが「ハンバーガーメニュー」です。
ウェブサイトでよく見かける3本線のメニューのことで、非IT業界の人に「ハンバーガーメニューを……」と言うと「ハンバーガーメニューっていう名前だったんだ」と驚かれます。

UI要素には、ハンバーガーメニューのように食べ物の名前がついたものが多いです。
今回はそんな面白い名前のUI要素をいくつか紹介します。

メニュー系

メニュー系は食べ物の名前がついているものが非常に多いです。

ハンバーガーメニュー（Hamburger Menu）

先ほども紹介したハンバーガーメニューは、3本並んだ線がハンバーガーのように見えることから名前がついています。

クリック・タップすることでリストが表示されます。

ベントウメニュー（Bento Menu）

四角が等分に並んでいるのが日本の弁当に似ていることから、ベントウメニューと呼びます。

ちなみに、チョコレートに見えることから「チョコレートメニュー」と呼んだり、四角ではなく丸が並んでいるメニューの場合は「キャンディーボックスメニュー」と呼ぶこともあるそうです。

ケバブメニュー（Kebab Menu）

3つの点が縦に並ぶメニューアイコンのことです。
お肉が3つ串刺しになってるように見えるからこの名前になっているようです。

ちなみに、コーディング時の入力規則に「ケバブケース」というものがあります。
これはハイフン（-）を使って単語を区切る入力規則で、「kebab-case-sample」ように区切った見た目が串刺しにしたケバブに見えることからケバブケースと呼ばれています。

後ほど紹介するドネルケバブメニューもありますし、IT業界ではやたらとケバブに例えられることが多いです。

ミートボールメニュー（Meetballs Menu）

縦に並ぶケバブメニューに対して、3つの点が横に並ぶメニューの場合はミートボールメニューと呼びます。

ドネルケバブメニュー（Doner Kebab Menu）

主にフィルターやソート用のメニューとして使われることが多いメニューです。
略して「ドネルメニュー」と呼ぶこともあります。

ちなみに、逆三角形の形がイチゴに似ていることから、「ストロベリーメニュー」と呼ばれることもあるそうです。

通知系

トースト（Toast）

システムからの通知など、一時的に画面に表示されるお知らせのことをトーストと呼びます。

これはお知らせが一時的に表示されることを、昔のトースターがパンが焼き上がったら上に飛び上がってくる様子に例えています。

スナックバー（Snackbar）

トーストと混同されやすいUI要素にスナックバーがあります。
トーストと似たような見た目ですが、スナックバーはユーザーが行う動作に直接関係する通知を指します。

また、スナックバーはアクションを含むことができたりスワイプで消せるなど、できることも違います。

その他

パンくずリスト（Breadcrumb）

ページの階層をリスト化して表示するナビゲーションのことです。

ユーザーがサイトのどの部分にアクセスしているのかを把握して迷わないようにしたり、アクセシビリティや検索エンジンによるクロールをサポートする効果があります。

パンくずリストという名前は童話『ヘンゼルとグレーテル』で、主人公のヘンゼルが道に迷わないようにパンをちぎって道に落とし、帰るときの道しるべにしようとしたことに由来しています。

ただ、童話では鳥にパンくずを食べられてしまい、結局道に迷ってしまうため、例えとして適切ではないのでは？と思ってしまいます。

豆腐（Tofu）

UI要素ではありませんが、フォントが対応していない文字を表示しようとしたときに発生する「〿」のような四角形のことを「豆腐（Tofu）」と呼びます。

見た目がまさに豆腐のように見えるからで、英語圏でもTofuと呼ぶようです。

ちなみに、Google と Monotype（一部 Adobe）が共同開発したフォントに「Noto Sans ○○」というフォントがあります。
このフォント名の由来は下記2つです。

• ラテン語で「I write, I mark, I note」という意味
• 「No Tofu」の略

豆腐が無い（すべての文字に対応している）という意味で付いているオシャレな名前のフォントです。

まとめ

当たり前のことかもしれませんが、改めて整理してみると、どんなものにでも名前があるんだなと驚かされます。

気になったUI要素は、名前やその由来を調べてみると面白いかもしれません。

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！