【UIパーツ大全】タグ,ラベル,チップ[tag label chip]の違いと参考パーツ一覧

「タグ（tag）」「ラベル（label）」「チップ（chip）」は、情報の整理・視認性の向上・操作性の強化に欠かせないUIコンポーネントです。

しかしこれらの用語は似ているようで役割が異なり、デザイナーやエンジニアの間でも混同されがちです。本記事ではそれぞれの定義・使いどころ・代表的なUI例を明確に解説し、実際に参考にできるUIパーツ一覧も紹介します。

タグ（Tag）とは

タグの定義

タグとは情報を分類・カテゴライズするためのキーワードやラベルをUIとして表現したものです。ブログ記事、商品、投稿などに「#料理」「#旅行」などの形でよく使われます。

主な用途

• コンテンツのフィルタリング（例：検索機能で特定タグをクリック）
• カテゴリ表示（例：記事の上に「#UXデザイン」など）
• タグクラウド（タグを視覚的に並べる）

デザインの特徴

• 長方形や角丸のシンプルな形状
• 色分けされている場合が多い（カテゴリーごとに色分けなど）
• クリック可能なものが多い（リンクやフィルタに対応）

使用例

• ECサイトの商品タグ（#送料無料、#新商品 など）
• Qiitaやnoteの記事タグ
• Instagramのハッシュタグ

ラベル（Label）とは

ラベルの定義

ラベルは、UI上の入力欄やボタンなどに対して「これは何か」を示す説明用テキストです。タグやチップと異なり、補助的かつ静的な情報であることが多いです。

主な用途

• フォームの項目名（例：氏名、メールアドレス）
• スイッチやトグルの状態表示（例：ON/OFF、公開/非公開）
• データの区分説明（例：ステータス：完了）

デザインの特徴

• 基本はテキストベース、装飾は控えめ
• インタラクティブではないことが多い
• 常に対象要素とセットで表示される

使用例

• フォームフィールドの見出し（例：「パスワード」）
• ボタンの補足説明（例：小さい字で「クリックで送信されます」）
• UIコンポーネントのステータス表示（例：「処理中」）

チップ（Chip）とは

チップの定義

チップは短い情報やアクション要素をコンパクトに表示するUIパーツです。タグとラベルの中間のような存在であり、インタラクションが可能なことも多いのが特徴です。

主な用途

• 選択済みのフィルター表示（例：選んだ地域やカテゴリ）
• ユーザー情報（例：アバター＋名前の表示）
• 通知や状態の表示（例：新着、エラー）

デザインの特徴

• 角丸の矩形、丸型、アイコン付きなど多様
• 削除ボタン（✕）やアイコンを含むことが多い
• 操作可能なUI（選択、削除、展開など）

使用例

• Google Material Designのチップ
• Gmailの宛先表示（アドレスが小さな枠に入っている）
• Slackのメンバー選択時の名前チップ

タグ・ラベル・チップの違いまとめ

それぞれがUI内で果たす役割は明確に異なり、適切に使い分けることでUXが大きく改善します。

UI設計での使い分けのコツ

情報の「説明」か「分類」かを見極める

• 「説明」ならラベル
• 「分類」ならタグ

操作の必要性があるか確認する

• 削除・選択など操作が必要な場合はチップを検討
• 静的な表示だけでいいならラベルで十分

ビジュアル階層を意識する

• チップ：やや目立たせつつ、周囲との調和を意識
• タグ：アクセントカラーを使い区別しやすく
• ラベル：控えめなグレーや小サイズ

参考UIパーツ一覧（デザインギャラリー）

タグの参考例

• Material Design Tags
• Figma Community Tags Kit

ラベルの参考例

• Ant Design Form Labels
• Tailwind UI Forms

チップの参考例

• Google Material Chips
• Vuetify Chips
• Chakra UI – Tag/Chip Components

まとめ

「タグ」「ラベル」「チップ」は、どれも一見似ているようで、UI設計における役割は明確に異なります。

• タグ：情報の分類・検索補助
• ラベル：UI要素の説明・補足
• チップ：情報の表示と簡単な操作

この3つを正しく使い分けることでUIが整理され、ユーザーが直感的に情報を扱えるようになります。プロダクトのUI/UXを磨く上で、ぜひ今回の内容を指針にしてください。