☰や⋮って何て言う？Webでよく見るアイコンの伝え方・変換方法まとめ【三本線・縦三点対応／保存版】

Webサイトやアプリを見ていると、頻繁に目にする『 ☰ 』や『 ⋮ 』のアイコン。

いざ、これらのアイコンを入力や検索をしようとしても、「どうやって出すのかわからない」ということはありませんか？

ぱぱ

名前が分からないから検索できない！
相手にうまく伝わらない！
どうやって入力するのか分からない！

本記事では、Webでよく見るアイコンの正式名称・伝わる言い方・変換方法を解説します。

ハンバーガーメニューやケバブメニューといった専門用語から、Windows・Mac・スマホでの入力方法、さらに辞書登録による時短テクニックまでまとめました。

保存版として、ぜひブックマークしてご活用ください。

この記事でわかること

「このマーク何？」をすぐに調べらる
三本線や縦三点の正式名称が分かる
会話や資料で“伝わる言い方”ができる
アイコンを自分で入力・変換できるようになる

まずは超定番！メニュー系アイコンの名前と出し方
操作系アイコンの名前と出し方
メディア系アイコン（再生・音量・全画面）
通知・状態系アイコン
数学・論理系（出しにくい）特殊記号
アイコンや特殊記号の出し方・変換方法まとめ
すぐ使える！コピペ用アイコン一覧
よくある質問（FAQ）
補足）Webアイコン素材の参考サイト
まとめ

まずは超定番！メニュー系アイコンの名前と出し方

Webサイトやアプリで特によく見かけるのがメニュー系アイコンです。

とくに以下の3つは使用頻度が非常に高く、操作方法の検索や資料説明の際に覚えておくと便利なものを紹介します。

アイコン	一般向けの呼び方	制作者向け名称	主な用途
☰	三本線	ハンバーガーメニュー	ナビ表示
⋮	縦三点	ケバブメニュー	追加操作
⌄	下向き三角	キャレットダウン	開閉表示

☰ ハンバーガーメニュー（三本線）

なんて言えば伝わる？

一般向け：三本線のメニュー
制作者向け：ハンバーガーメニュー
英語名：Hamburger Menu

どんな場面で使われる？

スマホサイトのナビゲーション開閉
メニューの格納表示
画面スペースを節約したいとき

なぜ“ハンバーガー”？

三本線が「パン・具材・パン」に見えることから名付けられたと言われています。
モバイルUI（スマホ向け画面設計）の普及とともに世界的に広まりました。

⋮ ケバブメニュー（縦三点）

なんて言えば伝わる？

一般向け：縦三点メニュー
制作者向け：ケバブメニュー
英語名：Kebab Menu / Vertical Ellipsis

どんな場面で使われる？

各項目ごとの「その他の操作」
削除・編集・共有などの隠れメニュー
詳細オプション表示

なぜ“ケバブ”？

串に刺さったケバブに似ていることが由来です。
横三点（…）と区別するために「縦三点」と呼ばれます。

⌄ キャレット（ドロップダウン矢印）

なんて言えば伝わる？

一般向け：下向き三角
制作者向け：キャレットダウン
英語名：Caret Down

※キャレットとは、テキストやUIで位置や方向を示す記号のこと。

どんな場面で使われる？

プルダウンメニュー
アコーディオンUI
詳細表示の開閉

縦三点（⋮）と横三点（…）の違いはなに？

見た目が似ているため混同されがちですが、用途も意味もまったく異なります。

項目	…（横三点）	⋮（縦三点）
正式名称	三点リーダー	縦三点／ケバブメニュー
用途	文章の省略・余韻表現	UI上の追加メニュー表示
使用場面	テキスト内	ボタン・操作エリア
Unicode	U+2026	U+22EE

使い分けのポイント

文章中なら「…（三点リーダー）」
操作用アイコンなら「⋮（縦三点／ケバブメニュー）」

この違いを理解しておくと、デザイン指定や文章作成時のミスを防げます。

ハンバーガーメニューとケバブメニューの違いはなに？

よく混同されがちな「☰（三本線）」と「⋮（縦三点）」の違いを、簡単に整理します。

項目	☰ 三本線	⋮ 縦三点
正式名称	ハンバーガーメニュー	ケバブメニュー
主な役割	サイト全体のナビゲーション	個別項目の追加操作
表示位置	画面左上に配置されることが多い	各コンテンツ右上に配置されることが多い
表示内容	メニュー一覧・ページ一覧	編集・削除・共有など

使い分けのポイント

ページ移動やナビ表示なら「☰（ハンバーガーメニュー）」
追加操作や詳細オプションなら「⋮（ケバブメニュー）」

この違いを押さえておけば、仕様書作成やデザイナーとのやり取りでも迷いません。

操作系アイコンの名前と出し方

検索・設定・閉じるなど、ユーザーの操作を示すアイコンです。

アイコン	一般向け	制作者向け	主な用途
🔍	虫眼鏡	Search Icon	検索
⚙	歯車	Gear / Settings	設定
✕	バツ	Close Icon	閉じる
⟳	更新マーク	Reload / Refresh	再読み込み
⤴	共有	Share Icon	シェア

🔍 検索アイコン

呼び方：虫眼鏡マーク
用途：サイト内検索・商品検索
入力：絵文字パネルから選択

⚙ 設定アイコン

呼び方：歯車マーク
用途：アカウント設定・詳細オプション

✕ クローズアイコン

呼び方：バツマーク
用途：ポップアップやモーダルを閉じる

メディア系アイコン（再生・音量・全画面）

アイコン	呼び方	正式名称	用途
▶	再生ボタン	プレイアイコン	再生
⏸	一時停止	ポーズアイコン	停止
⛶	全画面	フルスクリーン	画面拡大
🔊	音量	ボリューム	音量調整

通知・状態系アイコン

アイコン	呼び方	正式名称	意味
🔔	通知ベル	ベルアイコン	お知らせ
●	赤丸	通知バッジ	未読数
✔	チェック	チェックマーク	完了
⚠	警告	警告アイコン	エラー
ℹ	iマーク	情報アイコン	補足

数学・論理系（出しにくい）特殊記号

ビジネス文書や資料作成で意外と困るのが、数学・論理系の特殊記号です。通常変換では出にくいものも多いため、あらかじめ知っておくと便利です。

記号	名前	変換例（読み）
≠	ノットイコール	のっといこーる
≒	ニアリーイコール	にありー
∴	ゆえに	ゆえに
∵	なぜなら	なぜなら
℃	摂氏	せっし
㎡	平方メートル	へいほう
㊙	丸秘	まるひ

※環境によってはIMEパッドや記号一覧から選択する必要があります。

アイコンや特殊記号の出し方・変換方法まとめ

名前が分かっても、「実際にどうやって入力するのか？」でつまずく人も多いと思います。

ここではWindows・Macそれぞれの基本操作と、効率よく使うためのコツをまとめます。

Windowsの場合

Win + . （ドット）→ 絵文字・記号パネル
IMEパッド → 記号一覧から選択

Macの場合

control + command + space
記号ビューアで英語名検索

よく使うなら辞書登録がおすすめ

マニュアル作成などでよく使うのであれば、事前に辞書登録しておくのがおすすめです。

読み	登録文字
はんばーがー	☰
けばぶ/さんてんたて	⋮

これでIMEパッドを開く手間が省けます。

すぐ使える！コピペ用アイコン一覧

「今すぐ使いたい」という方向けに、主要アイコンをまとめました。
そのままコピーしてお使いください。

メニュー系

☰
⋮
…
⌄

操作系

🔍
⚙
✕
⟳
⤴

メディア系

▶
⏸
⏹
⏭
🔊
🔇
⛶

通知・状態系

🔔
●
✔
✖
⚠
ℹ

数学・論理系

≠
≒
∴
∵
℃
㎡
㊙

※フォントや環境によっては表示が異なる場合があります。

必要なときにすぐ使えるよう、ブックマークしておくと便利です。

よくある質問（FAQ）

Q1. ☰は正式には何と言いますか？

ハンバーガーメニューアイコンです。

Q2. ⋮は何と呼びますか？

ケバブメニュー、または縦三点です。

Q3. …と⋮は同じですか？

違います。…は文章記号、⋮はUIアイコンです。

Q4. 三本線メニューは古い？

一部で議論はありますが、モバイルUIでは今も標準的です。

Q5. Webアイコンはどう作られていますか？

SVG形式
アイコンフォント
PNG画像

補足）Webアイコン素材の参考サイト

実際にWeb制作の現場でよく利用されている代表的なアイコン配布サイトを紹介します。

■ SVG形式で探すなら

Material Icons（Google公式）（https://fonts.google.com/icons）
Googleが提供するUIアイコン集。SVGでダウンロード可能で、Webやアプリ開発に最適化されています。
Heroicons（https://heroicons.com/）
シンプルで洗練されたSVGアイコンセット。モダンなUIデザインとの相性が良いです。
Font Awesome（https://fontawesome.com/）
世界的に利用されている大規模アイコンライブラリ。SVG・Webフォント両対応です。