AI情報

あのUI、名前なんだっけ？サイトの部品の名前辞典34選——AIに一言で伝わる【動く図解】

2026.10.16

この記事でわかること

AIにサイトや画面を作らせるとき、部品の名前を知っていると一言で伝わる理由

ハンバーガーメニュー・ドロワー・モーダル・トーストなど34の部品の、動く図と説明

AIに画面の修正を指示するときの「名前＋場所＋動き」の伝え方

「社内のWebページや資料をAIで作れるようにしたい」という方はこちら

AIサービスの詳細・無料相談はこちら →

AIに社内向けのページや申込フォームを作らせたとき、修正の指示を出そうとして「右上の三本線を押したら、横からメニューが出てくるやつ」と長い説明になった経験はないでしょうか。

画面の部品には、それぞれ名前があります。
この記事は、サイトやアプリでよく見るのに名前を知られていない部品を、辞書のように引けるようにまとめたものです。
AIの導入を任された推進担当の方が、手元の辞書として使っていただけます。

UIの名前を知ると、AIへの指示が一言で伝わる

結論から言うと、部品の名前を1つ知っているだけで、AIへの指示は短く、正確になります。
「ハンバーガーメニュー」と書けば、AIは三本線のアイコンと、押したときに開くメニューまでを一度に理解します。

UI（ユーザーインターフェース）とは、ボタンやメニューのように、画面の中で人が見たり操作したりする部分のことです。
この記事の名前は、デザインの専門機関の Nielsen Norman Group のUI用語集や、Googleの Material Design、Appleの Human Interface Guidelines で使われている呼び方に合わせています（出典は各リンク先）。

メニューのアイコンの名前（ハンバーガー・ケバブ・ミートボール・ワッフル）

最初は、押すとメニューが開くアイコンです。
線や点の並び方で名前が変わり、食べ物にたとえた呼び方が多いのが特徴です。
三本線はハンバーガー、縦の3点はケバブ、横の3点はミートボールと覚えると区別がつきます。

ハンバーガーメニューHamburger menu

右上（または左上）の三本線のアイコン

横線3本のアイコンで、押すと隠れていたメニューが開きます。
線が重なる形がハンバーガーに見えることから、この名前で呼ばれています。

使い方の例「スマホではメニューをハンバーガーメニューにまとめてください」

ケバブメニューKebab menu

縦に並んだ3つの点

縦に3つの点が並んだアイコンで、その画面や項目に対する「その他の操作」を開きます。
串に刺さったケバブに見えることが名前の由来です。

使い方の例「各行の右端にケバブメニューを置き、編集と削除を入れてください」

ミートボールメニューMeatball menu

横に並んだ3つの点

横に3つの点が並んだアイコンで、ケバブメニューと同じく「その他の操作」を開きます。
SNSの投稿の右上などでよく見かけます。

使い方の例「カードの右上にミートボールメニューを付けて、共有とコピーを入れてください」

ワッフルメニューWaffle menu / Bento menu

9つの点（3×3）のアイコン

点や小さな四角を3×3に並べたアイコンで、押すとアプリやサービスの一覧が開きます。
ベントー（弁当）メニューと呼ばれることもあります。

使い方の例「右上にワッフルメニューを置き、社内ツールへのリンクを並べてください」

ページの中を移動する部品の名前

次は、メニューやページの間を行き来する為の部品です。
メニューの開き方と現在地の示し方は、サイトの迷いにくさを大きく左右します。

ドロワーDrawer / Navigation drawer

画面の横からスッと出てくるメニュー

画面の端から引き出し（ドロワー）のように出てくるパネルです。
ハンバーガーメニューを押したあとに出てくる部分がこれにあたります。

使い方の例「メニューは左からドロワーで出し、背景を少し暗くしてください」

ボトムナビゲーションBottom navigation / Tab bar

スマホの下にアイコンが横に並んでいる帯

スマホ画面の下に固定された、主な移動先のアイコンの帯です。
iPhoneのアプリでは「タブバー」と呼ばれます（出典：Apple公式）。

使い方の例「スマホではホーム・検索・お気に入り・設定の4つをボトムナビゲーションにしてください」

ページトップボタンBack to top button

右下の、押すと一番上に戻る矢印

押すとページの一番上まで戻るボタンです。
長いページで、ある程度スクロールしたときだけ右下に出す形がよく使われます。

使い方の例「少しスクロールしたら右下にページトップボタンを出してください」

アンカーリンク（ページ内リンク）Anchor link / Jump link

目次を押すとページの途中まで飛ぶリンク

押すと、同じページの中の指定した場所まで移動するリンクです。

使い方の例「冒頭に目次を置き、各見出しへのアンカーリンクにしてください」

ページの作りに関わる名前（ファーストビュー・カルーセル・アコーディオンなど）

ホームページやLP（1枚の縦長の宣伝ページ）をAIに作らせるときに、よく使う言葉です。
「ファーストビューに何を置くか」を決めて伝えるだけで、AIが作るページの印象は大きく変わる可能性があります。

ファーストビュー（ヒーローセクション）First view / Hero section

開いてすぐ目に入る、大きな写真と見出し

ページを開いて、スクロールせずに見える範囲をファーストビューと呼びます。
そこに置く大きな画像・見出し・ボタンの区画は、ヒーローセクションと呼ばれます。

使い方の例「ファーストビューに大きな写真と見出しと申込ボタンを置いてください」

カルーセルCarousel

画像が横にスライドして切り替わる枠

同じ枠の中で、複数の画像やお知らせを横に切り替えて見せる部品です。
名前は回転木馬（カルーセル）が由来です。

使い方の例「導入事例の3枚をカルーセルで横に切り替えてください」

CTA（シーティーエー）Call To Action

「無料で相談する」のような一番目立つボタン

「お問い合わせ」「資料請求」のように、読み手に次の行動を促すボタンや区画のことです。
Call To Actionの略で、ページの中で最も目立つ色にすることが多い部分です。

使い方の例「ページの最後に、無料相談へのCTAを大きく置いてください」

アコーディオンAccordion

押すとパカッと開いて答えが出るところ

見出しを押すと、その下の内容が開いたり閉じたりする部品です。
よくある質問の欄で多く使われます。

使い方の例「よくある質問はアコーディオンにして、最初は閉じておいてください」

カードCard

画像と見出しが入った箱が並ぶ形

画像・見出し・短い説明を、1枚の箱にまとめた部品です。
ブログの記事一覧や商品一覧のように、同じ形の情報を並べるときに使います。

使い方の例「お知らせ一覧は、画像付きのカードを横に3枚ずつ並べてください」

パララックスParallax

背景だけゆっくり動く、奥行きのあるスクロール

スクロールしたときに、背景と手前の要素を違う速さで動かして奥行きを出す演出です。
パララックスは「視差」という意味です。

使い方の例「トップの背景画像にパララックスをかけてください」

無限スクロールInfinite scroll

下まで行くと続きが自動で出てくる一覧

一覧の一番下までスクロールすると、次の項目が自動で読み込まれて続いていく仕組みです。
SNSのタイムラインが代表例です。

使い方の例「施工事例の一覧は無限スクロールにしてください」

ファビコンFavicon

ブラウザのタブに出る小さなマーク

ブラウザのタブやブックマークに表示される、サイトの小さなアイコンです。
favorite icon（お気に入りのアイコン）を縮めた言葉です。

使い方の例「会社のロゴからファビコンを作ってください」

画面の上に出てくるものの名前（モーダル・トースト・ポップオーバー）

操作したときに、画面の上に重なって出てくる部品です。
どれも「ポップアップ」とまとめて呼ばれがちですが、出方と消え方で名前が分かれています。
閉じるまで後ろを触れないのがモーダル、勝手に消えるのがトーストです。

トーストToast / Snackbar

「保存しました」が一瞬出て消える通知

操作の結果を、画面の端に短く表示して数秒で自動的に消える通知です。

使い方の例「保存したら画面下に『保存しました』とトーストで出してください」

ボトムシートBottom sheet

スマホの下からせり上がってくるパネル

スマホ画面の下からせり上がってくる、操作や詳しい情報のパネルです。
共有の一覧や、地図アプリでお店の詳細を表示する場面などで使われます。

使い方の例「スマホでは、絞り込みの条件をボトムシートで出してください」

小さな部品と読み込み中の表示の名前

最後は、画面の中の小さな部品と、読み込み中に出る表示です。

バッジBadge

アイコンの角に付く小さな丸と数字

アイコンの角に付けて、未読の件数やお知らせの有無を示す小さな印です。

使い方の例「お知らせのアイコンに、未読の件数をバッジで付けてください」

チップChip

×で外せる小さな角丸の札

絞り込みの条件やタグを、小さな角丸の札で表す部品です。
×印を押すと、その条件を外せる形がよく使われます。

使い方の例「選んだ条件を検索欄の下にチップで並べてください」

トグルスイッチToggle switch

オン・オフを横にスライドするスイッチ

オンとオフの2つの状態を、横にスライドして切り替えるスイッチです。

使い方の例「メール通知のオン・オフをトグルスイッチにしてください」

セグメントコントロールSegmented control

横に繋がったボタンから1つを選ぶ切り替え

横に繋がった2〜5個ほどのボタンから、1つを選ぶ切り替えの部品です。
「日・週・月」のように、同じ内容の見せ方を切り替えるときに使います。

使い方の例「グラフの上に『日・週・月』のセグメントコントロールを置いてください」

ステッパーStepper / Progress steps

「入力→確認→完了」で今どこかを示す丸と線

手順がいくつあり、今が何番目かを、丸と線で示す部品です。
なお、数量を「＋」「−」で増やしたり減らしたりする部品も、ステッパーと呼ばれることがあります。

使い方の例「申込画面の上に、入力・確認・完了の3段のステッパーを付けてください」

フローティングアクションボタン（FAB）Floating action button

右下に浮かんでいる丸い「＋」ボタン

画面の右下などに、一覧の上に浮かぶように置かれた丸いボタンです。
新規作成のような、その画面で最もよく使う操作を1つだけ置きます。

使い方の例「一覧画面の右下に、新規登録のフローティングアクションボタンを置いてください」

スケルトンスクリーンSkeleton screen

読み込み中に、薄い色の枠だけ先に出る画面

読み込みが終わる前に、写真や文章が入る場所の形だけを薄い色の枠で先に見せる表示です。
どこに何が出るかが先に分かるので、待っている間も画面が止まって見えません。

使い方の例「読み込み中はスピナーではなくスケルトンスクリーンを出してください」

スピナーLoading spinner

くるくる回る読み込み中の印

読み込みや処理の最中に、くるくると回り続ける印です。
終わるまでの時間が分からない処理で使います。

使い方の例「送信ボタンを押したら、終わるまでスピナーを出してください」

プログレスバーProgress bar

左から右に伸びていく横長の帯

処理がどこまで進んだかを、左から右に伸びる帯で示す部品です。
スピナーと違い、残りがどれくらいかを見せることができます。

使い方の例「ファイルのアップロード中は、プログレスバーで進み具合を出してください」

AIに画面の修正を指示するときのコツ（名前＋場所＋動き）

部品の名前が分かったら、AIへの指示は「名前＋場所＋動き」の3つで組み立てると伝わりやすくなります。
たとえば「スマホのときだけ、右上にハンバーガーメニューを置き、押したら右からドロワーでメニューを出してください」という形です。

名前が「何を」、場所が「どこに」、動きが「どう出るか」を表します。
名前だけでは、場所や出方はAIの判断になる為、こだわりたい部分は3つとも書くことを推奨します。

JSON形式とは、「項目名と値」の組み合わせで情報を整理する書き方です。
AIへの指示を整理して渡す方法は、AIへの指示をJSON形式で渡す方法でも紹介しています。
ChatGPTでWebページを作る機能については、ChatGPT Codexの主要機能の解説をご覧ください。

資料に入れる図やグラフの名前は、資料の図解・グラフの名前辞典32選にまとめています。
サイトと資料の両方をAIで作る方は、あわせてご覧ください。

よくある質問（FAQ）

Q. ハンバーガーメニューとドロワーの違いは何ですか？

A. ハンバーガーメニューは押す為のアイコン（三本線）、ドロワーは押したあとに画面の端から出てくるパネルのことです。

Q. トーストとスナックバーは同じものですか？

A. どちらも、画面の端に短く出て自動で消える通知です。
Googleの Material Design では、「元に戻す」のような操作ボタンを1つ付けられるものをスナックバーとして説明しています。
一般のWebサイトでは、どちらもトーストと呼ばれることが多いです。

Q. モーダルとポップアップの違いは何ですか？

A. ポップアップは、画面の上に飛び出して出てくる表示全般を指す、広い呼び方です。
その中でも、閉じるまで後ろの画面を操作できないものをモーダルと呼びます。

Q. 名前が分からない部品は、どうやって調べればよいですか？

A. その部品が写った画面の写真をAIに見せて、「この部品の名前は何ですか」と聞く方法が手軽です。
この記事の図と見比べて探すこともできます。

AIで作る画面や資料を、社内で作れるようにしませんか

株式会社Orcaは中小企業向けに、完全カスタムのAI研修と伴走型のAI活用支援を提供しています。
「AIに指示を出しても思った画面にならない」という段階で構いません。お気軽にご相談ください。

無料相談する →

サービス内容と料金を見る

あの図、名前なんだっけ？資料の図解・グラフの名前辞典32選——AIに一言で伝わる

AI研修導入事例｜学校法人蓬莱学園様