スマホアプリのメニューでよく使用されるあのアイコンの名前、ハンバーガーとかケバブとかミートボールとか

先日の記事「Chrome 67でアップデートされたデベロッパーツールの新機能」で、「ケバブって言うんだ」という声が聞こえたので、メニューでよく使用されるアイコンの名称を紹介します。

横3本線のアイコンはほとんどの人が「ハンバーガー」で通じるでしょう。横3つのドット、縦3つのドットは、何て呼んでますか?
特に名前は使わない、別の呼び方をしているなどありましたら、教えてください。

サイトのキャプチャ

CSS Menu Icon Animation


ちょうど、スマホアプリのメニューで使用されるアイコンのデモにもそれらの名称が使用されていました。これらはクリエイターの遊び心で名付けられたもので、公式な名称ではありません。

私は最初、この呼び方を下記のツイートで見た記憶があります。

それぞれ役割も異なります。
ハンバーガーは、ハンバーガーメニューを開くために使用されます。スクリーンの横からスライドし、スクリーン全体を占めるドロワーとして表示されます。ケバブは、Material Designから登場したもので、小さなインラインのメニューを開くようにデザインされています。ミートボールは、さらに多くのオプションを開くためのアイコンです。

ハンバーガー メニュー
同じ長さの水平線が3本並んだアイコン。
由来: バンズ・パティ・バンズに例えたハンバーガーです。
ドネル メニュー
水平線が3本並び、上から順に小さくなるアイコン。
由来: 肉の塊を回転させるドネルケバブです。
弁当 メニュー
矩形のドットが9つ正方形に並んだアイコン。
由来: お弁当そのものです。
ケバブ メニュー
3つのドットが垂直に並んだアイコン。
由来: 肉の串焼きです。
ミートボール メニュー
3つのドットが水平に並んだアイコン。
由来: 並んだミートボールです。

デモでは、これらのメニューアイコンを使用したアニメーションを楽しめます。

サイトのキャプチャ

CSS Menu Icon Animation

sponsors

top of page

©2018 coliss