UIパーツの名称一覧｜よく使う部品の名前と使い分け

「ここ、あの…押したら開くやつにしてください」
画面の部品を説明しようとして、こんな言い方になったことはありませんか？

UIパーツには全部名前があります。名前で呼べるようになると、修正の指示が1行で済みます。「押したら開くやつ」は「アコーディオン」の3文字で伝わります。
それだけではありません。名前を知ると選び方も分かります。丸い印は1つだけ選ぶもの、四角い印はいくつでも選べるもの。形そのものが意味を持っているからです。

このレッスンでは、よく使うUIパーツを役割ごとに3つのグループに分けて見ていきます。最後に、自分がよく使うアプリから10個見つける練習もあります。

UIパーツは、画面に置く部品のこと

UIは「ユーザーインターフェース」の略で、人と画面が触れ合う部分を指します。そこに置く部品がUIパーツです。ボタン、入力欄、タブ、チェックボックス。全部UIパーツです。
「UIコンポーネント」「UI要素」と呼ぶ現場もあります。指しているものは同じなので、周りに合わせて使い分けてください。

UIパーツは自分で発明しないでください。見慣れた形をそのまま使うのが正解です。新しい形は、使い方を覚えてもらうところから始まります。その手間を読む人に払わせる理由は、たいていありません。

ここからは、役割ごとに3つのグループで見ていきます。情報を出し入れするパーツ、入力するパーツ、移動と状態を伝えるパーツです。

情報を出し入れするパーツ

画面に入りきらない情報を、隠したり出したりするパーツです。4つ覚えれば足ります。

タブ

同じ並びの内容を切り替えるパーツです。「概要・料金・実績」のように、どれか1つを選んで表示します。
並べる数は2〜5個まで。それ以上になると、選択肢を読むだけで疲れます。切り替えた先の中身は、同じくらいの分量にそろえてください。

アコーディオン

見出しを押すと下が開くパーツです。楽器のアコーディオンのように伸び縮みするのでこの名前が付きました。よくある質問のページで見かけますよね。
畳んだ状態が初期表示になるので、開かれない前提の内容だけを入れてください。読んでほしい内容を畳むと、そのまま読まれません。

YouTubeの動画の下にある概要欄も同じ形です。最初は数行だけ見えていて、「…もっと見る」を押すと続きが開きます。畳まれた部分を読む人が少ないことは、自分の使い方を思い出すと分かります。

モーダルウィンドウ

画面の手前に重ねて出す小窓です。後ろが暗くなって、閉じるまで他の操作ができなくなります。
操作を止めるので、使いどころは限られます。「この内容で送信しますか」のような、答えないと先へ進めない確認だけにしてください。案内やお知らせを出すのには向きません。

Xで画像を押すと、後ろが暗くなって画像だけが手前に出ます。閉じるまで他を触れません。あれがモーダルウィンドウです。

カルーセル（スライド）

同じ場所で複数の画像を順に見せるパーツです。スライダー、スライドとも呼びます。
たくさん載せられるので便利に見えますが、2枚目から先はほとんど見られません。自動で切り替わる設定にすると、読んでいる途中で切り替わって読み手が困ります。1枚目に、いちばん伝えたいものを置いてください。

Amazonや楽天のトップにある、勝手に切り替わる大きなバナーがカルーセルです。何枚目に何があったか思い出せる人は、ほとんどいません。

タブとアコーディオンの使い分け

この2つで迷う人が多いので、表にまとめます。

	タブ	アコーディオン
同時に開ける数	1つだけ	いくつでも
項目数	2〜5個	何個でも
向いている中身	比べて選ぶ内容	必要な人だけが読む内容
スマホでの相性	横に並ぶので数が限られる	縦に積むので相性がよい

選び方はこうです。比べて選んでほしいならタブ、探しに来た人に答えるならアコーディオン。料金プランの比較はタブ、よくある質問はアコーディオンになります。

入力するパーツ

フォームで使うパーツです。ここは形が意味を持っているので、覚え間違えると読み手が操作を誤ります。

入力フィールド

文字を打ち込む枠です。テキストフィールド、入力欄とも呼びます。
ラベル（「お名前」などの見出し）は、枠の中ではなく上に置いてください。枠の中に薄い文字で入れる作りをよく見ますが、打ち始めると消えてしまい、何の欄だったか分からなくなります。

枠の横幅も意味を持ちます。郵便番号の欄が氏名と同じ幅だと、長い文字を入れる欄だと思われます。入る文字数に合わせて幅を変えると、説明なしで伝わります。

ラジオボタン

丸い印の選択肢です。選べるのは1つだけ。別のものを選ぶと、前の選択が外れます。
支払い方法や配送方法のように、どれか1つに決める項目で使います。選択肢が6個を超えるなら、プルダウン（押すと選択肢が下に開く形）に変えたほうが縦の場所を取りません。

チェックボックス

四角い印の選択肢です。いくつでも選べます。0個のままでも進める項目に使います。
1つだけ置く使い方もあって、その場合は「利用規約に同意する」のような確認になります。

Googleフォームを思い出すと早いです。質問の形式で「ラジオボタン」を選ぶと丸い印、「チェックボックス」を選ぶと四角い印になります。回答する人が選べる数が変わります。

丸は1つだけ、四角はいくつでも。この形の意味は世界共通です。形を入れ替えると、選び方を読み違えられます。デザインの都合で丸を四角に変えないでください。

移動と状態を伝えるパーツ

最後は、押せることや変わったことを知らせるパーツです。

ページネーション

長い一覧を番号で分けるパーツです。記事一覧の下にある「1 2 3 …」がそれです。Amazonの検索結果の下にも同じ形が並んでいます。
今が何ページ目かを必ず目立たせてください。色を変えるか、背景を塗るかのどちらかです。前後へ移る矢印も添えると、番号を狙って押さなくて済みます。

ホバー（マウスオーバー）

パーツではなく状態の名前です。カーソルを重ねている間だけ見た目が変わることを指します。マウスオーバーとも呼びます。
ボタンやリンクには必ず付けてください。色が変わると「押せる」と分かります。

ただし、スマホにはカーソルがありません。ホバーしたときにだけ出てくる説明文は、スマホでは一生表示されません。大事な情報をホバーの中に入れないでください。

スプラッシュスクリーン

アプリを開いた直後に一瞬だけ出る画面です。ロゴが中央にあるあれですね。読み込みが終わるまでの間を埋める役割があります。
読み込みが早いのにわざと2秒表示する作りは、待たせているだけになります。Webサイトで同じことをする例も見ますが、離脱の原因になりやすいので避けてください。

ミニ実践：アプリからUIパーツを10個見つける

10分の観察練習です。使うのは、自分がいちばんよく開くアプリ1つ。

おすすめは通販アプリです。1画面の中にカルーセル・タブ・入力フィールド・ページネーションが全部そろっていることが多いので、10個はすぐ集まります◎

名前が分からない部品が残ったら、公開デザインシステムの一覧が使えます。

集めたら、1つだけ選んで「なぜこの部品なのか」を考えてみてください。チェックボックスが使われている場所を見つけたら、複数選べる項目のはずです。ラジオボタンなら1つだけ。選ばれている形には理由があります。

自分でフォームや画面を作るときは、次のチェックリストで確認してみてくださいね。

よくある質問

UIパーツとは何ですか？

画面に置く部品のことです。ボタン、入力欄、タブ、チェックボックス、カルーセルなどが当てはまります。
UIコンポーネント、UI要素と呼ばれることもあります。どれも同じものを指しているので、周りの言い方に合わせて大丈夫です。

Web画面のパーツの名称はどこで覚えられますか？

使っているアプリやサイトから拾うのがいちばん早いです。名前を調べたい部品を見つけたら、見た目の特徴で検索してみてください。「押すと下が開く UI 名前」のような調べ方で見つかります。
覚える順番は、このレッスンで扱った10個ほどから始めれば足ります。現場で使う部品はそれほど多くありません。

ラジオボタンとチェックボックスはどちらを使えばいいですか？

選べる数で決めます。1つだけ選ばせたいならラジオボタン（丸）、いくつでも選べるならチェックボックス（四角）です。
見た目の好みで入れ替えないでください。この形の意味は世界中のアプリで共通なので、変えると操作を間違えられます。

UIパーツを自分で新しく作ってもいいですか？

やめておくほうが無難です。新しい形は、使い方を覚えてもらうところから始まります。
見慣れた形を使えば、説明なしで操作してもらえます。オリジナルを出すのは、色や余白や文字の選び方で十分できますよ。

次に学ぶこと

このレッスンの要点をまとめます。

• UIパーツは画面の部品。名前で呼べると、指示が短くなる
• 情報を出し入れするのは、タブ・アコーディオン・モーダルウィンドウ・カルーセル
• 入力は、入力フィールド・ラジオボタン（丸・1つだけ）・チェックボックス（四角・いくつでも）
• 移動と状態は、ページネーション・ホバー・スプラッシュスクリーン
• 形は自分で発明しない。見慣れた形をそのまま使う

部品を置く場所はナビゲーションの種類とWebページの構成で扱っています。
次はUIとUXの違いです。部品を選ぶ判断が、使う人の体験にどうつながるかが見えてきます。

ほかのレッスンはデザインの基本コース目次から選べます。順番に進めても、気になるところだけ読んでも大丈夫です。