2026年7月29日

UI要素とは？ボタン・アイコン・フォーム…画面の“部品”を具体例とともに総ざらい

「UIが大事」とはよく聞くものの、いざ自社サイトの改善を考えると「この丸いやつ」「上のあれ」としか言えず、もどかしい思いをしていませんか。

実は、Webサイトやアプリの画面は名前のついた部品（UI要素）の集合体です。部品の名前さえ分かれば、画面の話は驚くほど具体的にできるようになります。

この記事では、UI要素とは何かを実際の画面の“解剖図”と部品カタログで総ざらいし、UIコンポーネントとは何が違うのかまで、初心者にも分かる言葉で解説します。

読み終える頃には、Web制作会社への依頼や社内の議論で「ここのハンバーガーメニューを」「主ボタンの色を」と正確に伝えられる語彙が身についているはずです。

UI要素とは何か？画面を構成する“部品”の正体をやさしく解説

UI要素とは、Webサイトやアプリの画面を構成する一つひとつの部品のことです。

ボタン、アイコン、テキストを入力する欄、メニュー、画像、リンク。あなたがいまこの記事を読んでいる画面も、そうした部品が組み合わさってできています。

そもそもUI（ユーザーインターフェース）とは、ユーザーと製品・サービスの「接点」を指す言葉です。

Webサイトでいえば、ユーザーが見て、読んで、触れる画面そのものがUIであり、その画面を細かく分解していったときに現れる最小単位の部品がUI要素だと考えると分かりやすいでしょう。

家にたとえるなら、UIが「家全体の間取りや内装」で、UI要素は「ドア、窓、照明のスイッチ、蛇口」といった建具や設備にあたります。

どれも毎日触れているのに、名前を意識することはほとんどない。しかし、リフォームを頼むときには「あのくるくる回すやつ」ではなく「レバー式の水栓」と言えたほうが、圧倒的に話が早いのです。

なぜUI要素の名前を知ると得をするのか

UI要素の名前を知る最大のメリットは、画面についての会話の解像度が一気に上がることです。

たとえば、アパレルのECサイトを運営する小売店が、リニューアルをWeb制作会社に依頼するとします。

打ち合わせで「トップのあの動く画像の下にある、切り替えられるところを直してほしい」と伝えても、制作側は「カルーセルの下のタブのことだろうか、それともカテゴリのナビゲーションだろうか」と確認を重ねることになります。

もし発注側が「カルーセルの下のタブを、初期表示で『ランキング』が選ばれた状態にしたい」と言えれば、認識のずれはほぼ起きません。

UI要素の語彙は、発注・修正依頼・社内レビューの共通言語として機能します。

デザインの専門知識がなくても、部品の名前と役割さえ知っていれば、Web制作の現場と対等にコミュニケーションが取れるようになるのです。

見逃せないのは、認識のずれがそのまま費用と納期に跳ね返るという点です。

曖昧な指示は確認のやり取りを増やし、思い違いのまま作業が進めば手戻りが発生します。議事録やチャットにも「カルーセル」「タブ」と部品名で残しておけば、後から見返したときの行き違いも防げます。

UI要素の語彙は、単なる知識ではなくプロジェクトの進行を速く、安くする実務スキルでもあるのです。

「UI要素」で検索するとRPAの解説が出てくる理由

なお、「UI要素とは」と検索すると、Power AutomateなどのRPA（業務自動化ツール）の解説記事が数多く表示されます。

これは、RPAの世界でも「操作対象となる画面上の部品」をUI要素と呼ぶためです。自動化ツールがボタンを押したり入力欄に文字を入れたりする際、その対象を指定する単位がUI要素なのです。

呼び名は同じでも、文脈はまったく異なります。

本記事で扱うのは、Webデザイン・UIデザインの文脈でのUI要素、すなわち「人間が見て触れる画面の部品」です。RPAの設定方法を知りたい方は、ツール名を添えて検索し直すのが近道でしょう。

逆にいえば、デザインの文脈でも自動化の文脈でも同じ言葉が使われるほど、「画面は部品の集合体である」という考え方は普遍的だということです。

この部品として画面を見る目こそが、UIを語るうえでの出発点になります。次章では、実際のスマホ画面を1枚まるごと分解して、その目を養っていきましょう。

画面の解剖図で見るUI要素｜スマホの1画面を部品に分解してみる

UI要素を理解する最短ルートは、用語の暗記ではなく、実際の画面を分解して「どこに何という名前の部品があるか」を確かめることです。

私たちは毎日何十回もこれらの部品に触れているため、名前と実物さえ結びつけば知識は一気に定着します。

次の図は、架空のECアプリのトップ画面を“解剖”し、主要なUI要素に名前を付けたものです。まずは全体を眺めて、「全部に名前があるのか」という感覚をつかんでください。

画面上部：ヘッダーに集まるUI要素

画面の最上部の帯はヘッダーと呼ばれ、サイトやアプリのメインUI要素が集まります。

左端の三本線はハンバーガーメニュー。押すとメニューが開く定番の部品で、形がハンバーガーに似ていることからこの名前がつきました。

中央付近の店名はロゴ、右側の虫めがねは検索アイコンです。カートのアイコンに付いた赤い丸はバッジと呼ばれ、通知や未読の件数を伝えます。「カートに2点入っている」と一目で分かるのはこの小さな部品のおかげです。

その下の「キーワードで探す」と書かれた横長の枠は検索バーです。

正確には、文字を入力するテキストフィールドに虫めがねのアイコンを組み合わせた複合的な部品で、薄い文字で表示された例文はプレースホルダーという名前を持っています。

画面中央：コンテンツを見せるUI要素

大きなセール画像はカルーセル（バナー）です。横にスライドして複数の画像を切り替えられる部品で、下に並んだ小さな点はインジケーターと呼ばれ、「何枚中何枚目か」を示しています。

その下の「おすすめ／新着／ランキング」はタブ。ページを移動せずに、同じ画面内で表示内容を切り替えるためのUI要素です。

選ばれているタブに下線や色が付いているのは、選択中の状態（ステート）をユーザーに伝えるための工夫です。

商品が収まった枠はカードと呼ばれます。画像・商品名・価格・ボタンをひとまとめにした部品で、厳密には単一のUI要素ではなく、複数の要素を束ねたUIコンポーネントです（この違いは後の章で詳しく解説します）。

カードの中の「カートに入れる」はボタン、なかでもユーザーに最も取ってほしい行動を促すものはCTAボタン（Call To Action＝行動喚起）と呼ばれます。商品名や価格の文字はテキストラベルという立派なUI要素です。

画面下部：移動を支えるUI要素

画面の一番下に固定された帯はタブバー（ボトムナビゲーション）です。

ホーム・カテゴリ・お気に入り・マイページといったアプリの主要画面を行き来するためのメニューで、スマホを持つ手の親指が届きやすい位置に置かれているのがポイントです。

こうして分解してみると、1つの画面が10種類以上の名前を持つ部品で構成されていることが分かります。

重要なのは、どの部品も「見た目」と「役割」がセットで決まっているということです。ハンバーガーメニューは「畳まれたメニューを開く」、バッジは「件数を知らせる」、タブは「表示を切り替える」。

この役割まで含めて名前を覚えると、Web制作の打ち合わせで「なぜその部品を使うのか」という議論にも参加できるようになります。

入力・操作系のUI要素一覧｜ボタン・フォーム・チェックボックスの名前と役割

UI要素の中でも、成果に最も直結するのが「入力する・選ぶ・押す」ための操作系の部品です。

お問い合わせ、資料請求、購入といったWebサイトのゴールは、必ずこれらの部品を通過して達成されるからです。フォームまわりの使い勝手ひとつでコンバージョン（成果)の割合が大きく変わることは、Web制作の現場で広く知られています。

まずは代表的な部品を、実物の見た目とセットでカタログとして押さえましょう。

ボタンと入力欄：フォームの主役たち

ボタンは、押すと何らかの動作が起きるUI要素の代表格です。

注目したいのは、塗りつぶされた主ボタン（プライマリボタン）と、枠線だけの副ボタン（セカンダリボタン）という階層があること。「送信する」は目立つ塗りつぶし、「キャンセル」は控えめな枠線、と視覚的な強弱をつけることで、ユーザーを迷わせずに本命の行動へ導きます。

テキストフィールドは1行の文字を入力する箱、テキストエリアはお問い合わせ本文のような長文を入力する大きな箱です。

入力欄の上に添えられた「お名前」などの項目名はラベル、欄の中に薄く表示された記入例はプレースホルダーと呼ばれます。

プレースホルダーは入力を始めると消えてしまうため、ラベルの代わりにプレースホルダーだけで済ませるのは避けるべき、というのがUIデザインの定石です。

選ばせる部品：チェックボックス・ラジオボタン・トグルスイッチ

選択のためのUI要素は、似ているようで役割が明確に分かれています。

チェックボックスは四角い部品で、複数の選択肢からいくつでも選べる場面で使います。

一方、丸いラジオボタンはどれか1つだけを選ばせる部品です。「個人か法人か」のような二者択一・多者択一で登場します。

発注側がこの違いを知らないまま「チェックで選べるように」と依頼すると、複数選択できてはいけない項目に複数選択が実装されてしまう、といった手戻りが起こりがちです。

トグルスイッチは、左右にスライドしてオン／オフを切り替える部品で、スマホの設定画面でおなじみです。チェックボックスと似ていますが、切り替えた瞬間に即座に反映される設定に使うのが本来の役割とされています。

選択肢が多いとき・数値を扱うときの部品

選択肢が47都道府県のように多い場合は、押すと一覧が垂れ下がるプルダウン（セレクトボックス）が使われます。画面の場所を節約できる反面、選択肢が隠れてしまうため、5つ程度までの選択肢ならラジオボタンで見せたほうが親切という使い分けが知られています。

価格帯や音量のような連続的な値には、つまみを動かすスライダー。商品の個数のような整数の増減には、＋と−のステッパーが適しています。

たとえば、賃貸物件を扱う不動産会社が、物件検索ページの使い勝手をWeb制作会社に相談する場面を考えてみましょう。

「家賃の入力が面倒」という課題に対して、テキストフィールドへの手入力をやめてスライダーとプルダウンの組み合わせに変える、という提案が出たときに、部品の名前と特性を知っていれば、その場で妥当性を判断できます。

入力・操作系のUI要素は、ユーザーの手間を減らす選択肢のカタログでもあるのです。

ナビゲーション系のUI要素一覧｜メニュー・タブ・パンくずリストで迷わせない

どれだけ良いコンテンツを用意しても、ユーザーがたどり着けなければ存在しないのと同じです。

そこで重要になるのが、サイト内の移動を支えるナビゲーション系のUI要素です。この分野は部品の種類が多く、名前を知らないと「上のメニュー」「下の番号のやつ」といった曖昧な会話になりやすいところでもあります。

代表的な部品を、見た目とセットで確認しましょう。

グローバルナビゲーションとハンバーガーメニュー

サイトの全ページに共通で表示されるメインメニューをグローバルナビゲーション（グロナビ）と呼びます。

多くの場合、画面上部の帯であるヘッダーの中に置かれ、「ホーム」「サービス」「制作実績」「会社概要」「お問い合わせ」といった主要ページへの入口が並びます。末尾の「お問い合わせ」だけをボタンの見た目にして目立たせるのは、コーポレートサイトの定番の設計です。

画面の狭いスマホでは、このメニューを畳んでおくためにハンバーガーメニューが使われます。

押したときに横から滑り出てくるメニュー領域はドロワー（引き出し）と呼ばれます。「スマホではグロナビをハンバーガーメニューに格納する」という一文が通じるだけで、Web制作会社との打ち合わせは格段にスムーズになります。

現在地と一覧を支える部品：パンくずリスト・ページネーション

パンくずリストは、「ホーム › サービス › Web制作」のように、サイト内での現在地を階層で示す道しるべです。

童話『ヘンゼルとグレーテル』で、帰り道の目印としてパンくずを落としながら歩いた逸話が名前の由来とされています。ユーザーが上の階層に一発で戻れるだけでなく、検索エンジンにサイト構造を伝えるSEO上の効果も期待できるため、Web制作では欠かせない要素です。

ページネーションは、記事一覧や検索結果を複数ページに分けて移動させる番号ボタンです。

近年はスクロールに応じて自動で続きを読み込む無限スクロールという手法もありますが、「目的の位置に戻りやすいのはページネーション、閲覧が途切れないのは無限スクロール」と、それぞれ得意分野が異なります。

アコーディオンは、押すと下に開閉する部品で、よくある質問（FAQ）のように「見出しだけ並べて詳細は畳んでおく」場面で活躍します。楽器のアコーディオンのように伸び縮みすることが名前の由来です。

スマホ特有のナビゲーションと、最古のUI要素

アプリやスマホサイトの最下部に固定されるタブバー（ボトムナビゲーション）は、前章の解剖図でも登場した、親指で操作しやすい主要メニューです。

そして忘れてはならないのが、下線付きの青い文字でおなじみのテキストリンク。Webの黎明期から存在する、最も古く、最も基本的な移動のためのUI要素です。

たとえば、地域の税理士事務所から「サイトの問い合わせが少ない」という相談が寄せられたとします。

調べてみると、料金ページへの入口がフッターのテキストリンクしかなく、グローバルナビゲーションにも載っていなかった――このようなナビゲーション設計の抜けは、実際の改善提案でも頻繁に論点になります。

ナビゲーション系のUI要素の名前と役割を知っていれば、「グロナビに料金を追加し、記事下にもテキストリンクを置く」といった対話に、発注側としても主体的に加われるのです。

表示・フィードバック系のUI要素｜モーダル・トースト・バッジまで知っておくと役立つ

UI要素には、ユーザーが操作する部品だけでなく、情報を見せる部品とシステムの状態を伝える部品があります。

この「フィードバック系」の語彙は見落とされがちですが、「あのポップアップ」「くるくる回るやつ」と呼んでいたものに正式名称があると分かるだけで、不具合報告や改善依頼の精度が大きく上がります。

情報を見せる部品：カード・カルーセル・テーブル

カードは、画像・見出し・テキスト・ボタンをひとつの枠にまとめた表示形式で、記事一覧や商品一覧の主役です。情報のまとまりが明確で、スマホでもPCでも並べ替えやすいことから、現代のWebデザインで最も使われる表示パターンのひとつになっています。

カルーセルは複数の画像やカードを横にスライドして見せる部品、テーブルは料金比較のような行と列で整理された表です。

また、リストの各行に矢印（シェブロンと呼ばれる「＞」のアイコン）を添えて「押せば詳細に進める」と示すのも、スマホUIの定番の型です。

状態を伝える部品：モーダル・トースト・スピナー

画面の中央に覆いかぶさるように表示され、背後を暗くして操作をいったん遮る窓をモーダル（モーダルダイアログ）と呼びます。

「本当に削除しますか？」のような重要な確認に使われる強力な部品ですが、強制的に作業を中断させるため、多用するとユーザーの離脱を招くとして慎重な運用が推奨されています。

一方、画面の端に数秒だけ現れて自動で消える小さな通知はトースト（スナックバー）と呼ばれます。トースターからパンが飛び出すように現れることが名前の由来で、「保存しました」のような、作業を邪魔しない軽い報告に向いています。

モーダルとトーストは「割り込みの強さ」が正反対の部品であり、この使い分けはUIデザインの品質を左右します。

読み込み中にくるくる回るアイコンはスピナー（ローダー）、進み具合を棒で示すのはプログレスバーです。

さらに近年は、コンテンツの形だけを灰色で先に見せておくスケルトンスクリーンという手法も一般的になりました。SNSアプリの読み込み中に見る、灰色の四角が並んだあの画面のことです。

同じ待ち時間でも、真っ白な画面を見せられるのと、スケルトンで「もうすぐ表示される」と予感させられるのとでは体感の長さがまったく違うとされており、待たせ方の設計はユーザー体験の重要なテーマになっています。

通知と補足：バッジ・ツールチップ・エンプティステート

アイコンの角に付く小さな数字の丸がバッジ、マウスを乗せたときに現れる短い説明がツールチップです。

入力ミスを知らせる赤い文字はエラーメッセージで、「何がだめか」だけでなく「どうすれば直るか」まで書くのが良い作法とされています。

そして意外に重要なのが、検索結果が0件のときなどに表示するエンプティステート（空の状態）です。

たとえば、人気レストランの予約サイトを思い浮かべてください。満席の日付を選んだユーザーに白紙の画面を見せるのか、「前後の空席がある日」を提案するのか。この差が機会損失の大きさを分けます。

フィードバック系のUI要素は、いわばサイトの「接客態度」を決める部品です。Web制作会社に「エラー時とローディング時と0件時の画面はどうなりますか」と確認できる発注者は、それだけで完成品の品質を一段と引き上げられます。

UI要素とUIコンポーネントとは何が違う？UIパーツ・UI素材との使い分けも整理

UI要素について調べていると、必ず出会うのが「UIコンポーネント」「UIパーツ」「UI素材」といった似た言葉です。

これらは対立する概念ではなく、部品を見る「粒度」と「文脈」の違いです。ここを整理しておくと、Web制作の見積書や提案書に出てくる言葉がすっと読めるようになります。

まず、全体の関係を図で見てください。

UIコンポーネントとは：部品を組み合わせた「再利用できる単位」

UIコンポーネントとは、複数のUI要素を組み合わせて、意味のあるまとまりとして再利用できるようにした単位のことです。

図の例でいえば、虫めがねのアイコン、入力欄、ボタンという3つのUI要素を組み合わせると「検索バー」というコンポーネントになります。

画像・テキストラベル・ボタンを組み合わせれば「商品カード」というコンポーネントです。そして、コンポーネントを画面に配置していくと、1つのページが完成します。

UI要素→UIコンポーネント→画面という、レゴブロックのような階層構造になっているわけです。

コンポーネントという考え方の最大の価値は再利用にあります。

「商品カード」を1回だけ丁寧に設計しておけば、100商品でも1000商品でも同じ品質で並べられますし、ボタンの色を変えたいときも大元のコンポーネントを1カ所直せば全ページに反映できます。

デザインの分野には、この階層を原子・分子・有機体、さらにそれらを組み上げたテンプレート・ページという5段階で体系化したアトミックデザインという有名な設計思想もあります。

UIパーツとは・UI素材とは：文脈で使い分けられる言葉

UIパーツとは、UI要素やUIコンポーネントとほぼ同じ意味で使われる、より日常語に近い呼び方です。厳密な定義の違いを気にする必要はほとんどなく、Web制作の現場でも「パーツ」という言葉は普通に飛び交います。

一方、UI素材とは、デザインを効率化するために配布・販売されている部品のデータ集を指すことが多い言葉です。

アイコンセットや、ボタン・フォーム・カードなどをまとめたUIキットがその代表で、「画面に置かれた部品そのもの」というより「部品を作るための材料」というニュアンスで使われます。

デザインシステムとFigma：コンポーネントを支える現代の仕組み

コンポーネントの考え方を組織的に運用する仕組みがデザインシステムです。

色・文字サイズ・余白のルールと、承認済みのコンポーネント一覧をまとめた「公式のレゴブロックセット」のようなもので、国内でも行政機関が自らのデザインシステムを公開するなど、大規模サイトでは標準的な取り組みになっています。

これを支える代表的なツールがFigma（フィグマ）です。

Figmaにはコンポーネント機能があり、大元の部品（メインコンポーネント）を直すと複製がすべて連動して更新されます。かつて制作に使われていたAdobe XDはすでに開発が事実上終了した状態で、現在のUIデザインの標準ツールはFigmaと考えて差し支えありません。

たとえば、複数の講座を展開するスクールが、数百ページ規模のサイト運営で「ページごとにボタンのデザインがばらばら」という悩みを抱えているとします。

その根本原因は担当者のセンスではなく、コンポーネントとして部品が管理されていないことにあります。Web制作会社に「コンポーネント単位で整理してほしい」と伝えられれば、それは場当たり的な修正ではなく、仕組みの改善を依頼したことになるのです。

UI要素の良し悪しをビジュアルで比較｜Web制作の発注・修正依頼に効く語彙

ここまででUI要素の名前と役割を押さえました。最終章では一歩進んで、同じ部品でも扱い方で使いやすさに差がつくことを、実際の見た目で比較します。

部品の名前に「良し悪しの観点」が加わると、あなたの語彙は単なる用語集から、改善を依頼できる武器に変わります。

次の図は、同じお問い合わせフォームを「悪い例」と「良い例」で並べたものです。

どこが違うのか：部品の名前で「悪さ」を言語化する

悪い例のフォームは、一見シンプルで悪くなさそうに見えるかもしれません。しかし、UI要素の語彙で観察すると問題点をはっきり言葉にできます。

第一に、ラベルがなくプレースホルダーだけで項目名を示しているため、入力を始めた瞬間に「何の欄だったか」が消えてしまいます。

第二に、必須／任意の表示がないため、ユーザーは送信ボタンを押してみるまでエラーに気づけません。

第三に、「戻る」と「送信」が同じ見た目のボタンで並んでおり、主ボタンの階層がないため押し間違いを誘発します。

良い例では、ラベルが常に表示され、必須・任意のバッジが添えられ、エラーはその場で欄の色とメッセージによって知らされます。

そして「この内容で送信する」は塗りつぶしの主ボタン、「入力画面に戻る」は控えめなテキストリンクにして、優先度を見た目で表現しています。どれも本記事で登場した部品の知識だけで説明できる改善です。

伝わる修正依頼の言い方：ビフォーアフターで比べる

この語彙があると、Web制作会社への依頼文はどう変わるでしょうか。

たとえば、精密機器を手がける中堅メーカーの問い合わせフォーム改善で考えてみます。

「フォームをもっと分かりやすくしてほしい」という依頼では、制作側は要件を推測で補うしかありません。

これが「プレースホルダー頼みになっているラベルを常時表示に変え、必須バッジを追加し、送信ボタンを主ボタンとして目立たせてほしい」となれば、見積もりも作業範囲も一義に決まります。

修正依頼のコツは、「場所（どのUI要素か）＋状態（今どうなっているか）＋期待（どうしたいか）」の3点セットで伝えることです。

文章だけで伝わりにくいときは、該当画面のスクリーンショットに部品名を書き込んで共有すると、さらに確実になります。

「スマホ表示のとき、ヘッダーのハンバーガーメニューを開くと、ドロワー内のお問い合わせリンクが埋もれている。ドロワーの最下部に固定のCTAボタンとして出したい」。

ここまで言語化できれば、あなたはもう「UIの話ができる発注者」です。

名前を知ることは、ユーザー視点を手に入れること

最後に強調したいのは、UI要素の語彙は発注効率のためだけのものではない、ということです。

部品の名前と役割を知ると、自分がユーザーとしてサイトを使うときにも「今このモーダルは必要だったか」「この選択肢はラジオボタンのほうが選びやすいのでは」と、使いにくさの正体を特定する目が育ちます。

その目は、自社サイトのどこがユーザーを離脱させているかを見抜く力に直結します。

UI要素の知識は、デザイナーだけのものではなく、Webで成果を出したいすべての担当者の基礎教養なのです。

まとめ

UI要素とは、ボタン・アイコン・フォームなど、画面を構成する名前のついた部品のことです。

本記事では、実際の画面の解剖図から、入力系・ナビゲーション系・フィードバック系の部品カタログ、そしてUIコンポーネントとは何かという階層の考え方、発注に効く語彙の使い方まで総ざらいしました。

部品の名前は、覚えたその日から打ち合わせや社内の会話で使える即効性の高い知識です。まずは自社サイトを開き、この記事の図と見比べながら「部品の名前で」眺め直してみてください。

そこで見つかった違和感を言語化できたら、次は実装のプロに相談する番です。クライマークスは、UI設計からデザイン・実装まで一貫して支援するWeb制作会社です。サイトの使いやすさに課題を感じたら、お気軽にお問い合わせください。