コンポーネントとは?UIデザインでの意味とパーツとの違いを初心者向けに解説

コンポーネントとは何か

まずは、コンポーネントという言葉の意味と、UIデザインでどんなものをコンポーネントと呼ぶのかを押さえましょう。

コンポーネントの意味

コンポーネント(component)は、英語で「構成要素・部品」という意味の言葉です。

UIデザインでのコンポーネントとは、ボタンや入力欄のように画面を組み立てる部品を、何度でも同じように使えるよう、見た目と使い方のルールまで決めて整えたものを指します。

UI(ユーザーインターフェース)とは、Webサイトやアプリで使う人が見たり触れたりする部分のことで、コンポーネントはそのUIを組み立てる「ブロック」のような存在です。

たとえば「ボタン」というコンポーネントを1つ用意しておけば、申し込み画面でも、お問い合わせ画面でも、同じボタンを置くだけで済みます。

日本の行政サービス向けに公開されているデジタル庁デザインシステムでも、「コンポーネントは、ユーザーインタフェースを作成するためのデザイン構成要素です」と説明されています(コンポーネント – デジタル庁デザインシステム)。

UIコンポーネントの例

Webサイトやアプリでよく使われるコンポーネントには、次のようなものがあります。

コンポーネント	どんな部品か
ボタン	押すと送信・保存などの操作をする
テキストフィールド(入力欄)	名前やメールアドレスなどを入力する
チェックボックス	選択肢から当てはまるものを選ぶ(いくつでも選べる)
カード	画像・見出し・説明を1つの枠にまとめて並べる
タブ	同じ場所で表示する内容を切り替える
ナビゲーション(メニュー)	サイトの中のほかのページへ移動する
モーダル	画面の上に重ねて表示し、確認や入力を求める

実際の部品の見た目は、次のようになります。

どれも、1つのサイトの中で何度も登場する部品です。

このような「くり返し使う部品」を見つけ出し、使い回せる形に整えることが、コンポーネントを考える第一歩になります。

コンポーネントとパーツの違い

「パーツ」も「部品」という意味なので、コンポーネントとほとんど同じ意味で使われることがあります。

ただ、両者を区別して使う場合は、パーツは画面を構成する部品全般、コンポーネントはくり返し使えるようにルールまで決めた部品という違いがあります。

	パーツ	コンポーネント
指すもの	画面を構成する部品全般	くり返し使えるよう整えた部品
作り方	その場に合わせて1つずつ作ることもある	1つの決まった形を、ほかの画面でも使い回す
決めておくこと	見た目だけのことが多い	見た目に加え、役割・使いどころ・状態(押したとき・押せないときなど)
例	このページのために描いた1つのボタン	サイト中のすべての画面で使う「メインボタン」

たとえば、あるページのために1つだけボタンを描いた段階では、それは「ボタンのパーツ」です。

そのボタンの色・角の丸み・文字の大きさ・押したときの見た目などをルールとして決め、ほかの画面でも同じものを使うようにすると、「ボタンのコンポーネント」と呼べるようになります。

1つしか使わないボタンでも、色や角の丸みは決めて描きます。

分かれ目は、ルールがあるかどうかより、ほかの画面でも使い回す前提で「元」として用意しているかです。

その場かぎりで描いたボタンはパーツ、どの画面でもそれを置けばよいように「元」として登録したボタンはコンポーネント、と考えると区別しやすくなります。

なお、この区別は現場や人によって少しずつ違い、「UIパーツ」と「UIコンポーネント」をほぼ同じ意味で使うことも珍しくありません。

言葉の違いにこだわるより、「くり返し使うためのルールが決まっているか」に注目すると理解しやすくなります。

プログラミングのコンポーネントとの関係

「コンポーネント」という言葉は、プログラミングでもよく使われます。

たとえば、Webの画面を作るためのJavaScriptの仕組み(ライブラリ)Reactでは、画面の部品を表すプログラムのまとまりをコンポーネントと呼びます(初めてのコンポーネント – React公式ドキュメント)。

「部品に分けて、何度も使い回す」という考え方は、デザインのコンポーネントと共通しています。

この記事で扱うのは、画面の見た目と使い方を設計するデザインの部品としてのコンポーネントです。

デザインで決めたボタンのルールが、開発ではプログラムのボタン部品として作られる、という関係だとイメージするとよいでしょう。

プログラミングでのコンポーネントの作り方は、React入門 #05 コンポーネントの基本やNext.js入門 #11 UIコンポーネントライブラリで解説しています。

コンポーネント化の考え方

ここからは、部品をコンポーネントとして整える「コンポーネント化」とは何か、そしてなぜ大切なのかを見ていきます。

コンポーネント化とは

コンポーネント化とは、画面の中でくり返し出てくる部品を見つけて1つの形にまとめ、どの画面でもそれを使い回せるようにすることです。

毎回ゼロから部品を描くのではなく、1つの「元」を作っておいて、そのコピーを並べていくイメージです。

デザインツールのFigmaには、まさにこのための「コンポーネント」という機能があり、元になる部品を直すと、使っている場所すべてにその変更が反映されます(Figmaのコンポーネントについてのガイド – Figma ヘルプセンター)。

ハンコの原版と、紙に押したいくつものハンコの跡をイメージすると分かりやすいでしょう。

ただし本物のハンコと違って、原版を彫り直すと、すでに押した跡までまとめて新しい形に変わります。

Figmaでは、この原版にあたる元の部品を「メインコンポーネント」、押した跡にあたるコピーを「インスタンス」と呼びます。

再利用するとよいこと

コンポーネント化して部品を再利用すると、作る人にも使う人にもよいことがあります。

• 作るのが速くなる
  一度作った部品を置くだけなので、新しい画面を作るたびに同じ部品を描き直す必要がありません。
• 直すのが一度で済む
  ボタンの色を変えたくなったとき、元の部品を1つ直せば、すべての画面のボタンがそろって変わります。
  1画面ずつ直すと、直し忘れが起きやすくなります。
• 見た目と使い方がそろう
  どの画面でも同じ部品を使うので、サイト全体に統一感が生まれ、使う人も迷いにくくなります。

一貫性が大切な理由(同じ役割は同じ見た目に)

コンポーネントを考えるうえでいちばん大切なのは、同じ役割のものは、どの画面でも同じ見た目と動きにするという一貫性です。

使う人は、一度「この青いボタンを押すと次に進める」と覚えると、ほかの画面でも同じ見た目のものを同じように使おうとするからです。

反対に、同じ「購入する」ボタンが画面によって色も形も違うと、使う人はそのたびに「これは押せるのか」「さっきと同じ意味なのか」を考え直すことになります。

同じ通販サイトの3つの画面に置いた「購入する」ボタンで比べてみましょう。

NGの見本では、画面ごとに塗りつぶし・丸い枠・下線付きの文字と見た目が変わるため、同じ操作なのに別のもののように見えます。

OKの見本のように、どの画面でも同じコンポーネントを使えば、使う人は一度覚えた見た目をそのまま頼りに操作できます。

逆に、役割が違うもの(たとえば「購入する」と「キャンセル」)は、見た目にもはっきり差をつけて区別します。

似たものを同じに見せる、違うものを違って見せるという考え方は、人の見え方の性質(ゲシュタルトの法則)とも関係しています。

人は、色や形が似ているものを、意識しなくても「同じ仲間」「同じ働きをするもの」として受け取りやすい性質があります。

そのため、同じ役割の部品の見た目がばらばらだったり、違う役割の部品がそっくりだったりすると、使う人は混乱してしまいます。

初心者向け:コンポーネント化の進め方

コンポーネント化は、次の順番で進めると取り組みやすくなります。

1. くり返し出てくる部品を探す
   作った画面や、参考にしたいサイトを眺めて、ボタン・入力欄・カードなど、何度も登場する部品に印をつけます。
2. 役割ごとに分ける
   見た目ではなく役割で分けます。
   「一番押してほしいボタン」「控えめなボタン」のように、何のための部品かで仲間分けします(ボタンの役割による分け方はUIボタンの種類と使い分けで解説しています)。
3. 見た目のルールを決める
   役割ごとに、色・大きさ・角の丸み・文字の大きさ・余白を決めます。
4. 状態を考える
   マウスを乗せたとき、押せないとき、エラーのときなど、同じ部品が状況によってどう見えるかを決めます。
   たとえば、マウスを乗せるとボタンの色が少し濃くなる、入力が足りない間は送信ボタンが薄い灰色になって押せない、入力に間違いがあると入力欄の枠が赤くなる、といった見え方です。
   見た目が変わることで、使う人は「今押せるのか」「操作が届いたか」を判断できます(操作への反応の返し方はユーザーの操作とUIの関係とは?で解説しています)。
5. 名前をつけてまとめる
   「メインボタン」「サブボタン」のように名前をつけ、どこでも同じものを使えるように一か所にまとめておきます。

最初から完璧なルールを作る必要はありません。

2回目に同じ部品が出てきたときに「これはコンポーネントにしておこう」と気づければ、それが第一歩です。

実践のポイント

コンポーネントを考えるときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 1つの部品をきれいに作ることがゴールになってしまうことがあります。
  コンポーネントの目的は、どの画面でも同じルールで使えることです。
  ほかの画面に置いても違和感がないか、文字の長さが変わっても崩れないかを確かめましょう。
• 少しだけ違う部品を次々に作ってしまうことがあります。
  「ほぼ同じだけど角の丸みが違うボタン」が増えると、どれを使えばいいか分からなくなります。
  新しく作る前に、今ある部品で代わりにならないかを考えましょう。
• 見た目だけで仲間分けしてしまうことがあります。
  同じ青でも、押せるボタンと、押せない飾りのラベルは役割が違います。
  役割が違うものは、見た目も分けておきましょう。
• 使い始めた部品を、その場の都合で少しずつ手直ししてしまうことがあります。
  直したいときは、使っている場所ではなく元の部品を直し、すべての画面にそろって反映させましょう。

よくある質問

• Q. コンポーネントとパーツは、厳密に使い分けないといけない?
  A. 厳密な決まりはなく、現場によってはほぼ同じ意味で使われます。
  大切なのは呼び方ではなく、くり返し使うためのルールが決まっているかどうかです。
• Q. コードを書かないデザイナーにも、コンポーネントの考え方は必要?
  A. 必要です。
  Figmaなどのデザインツールでもコンポーネントを作って使い回すのが一般的で、デザインの作業効率と画面の統一感に直結します。
  また、デザインの段階で部品のルールが整理されていると、開発者もプログラムの部品として作りやすくなります。
• Q. コンポーネントとデザインシステムは何が違う?
  A. デザインシステムは、コンポーネントに加えて、色や文字のルール、使い方の説明などをまとめた「サイトやサービス全体の設計の仕組み」です。
  コンポーネントは、その中に含まれる部品の集まりにあたります。
  おもちゃのブロックにたとえると、コンポーネントは1つ1つのブロック、デザインシステムはブロックに加えて、色の決まりや組み立て説明書までそろえた一式です。
  デザインシステムの構成や公開例は、デザインシステムとは?で解説しています。

まとめ

UIデザインでのコンポーネントとは、ボタンや入力欄などの画面の部品を、くり返し使えるよう見た目と使い方のルールまで決めて整えたものです。

部品をコンポーネント化して再利用すると、作るのも直すのも速くなり、同じ役割のものが同じ見た目にそろうことで、使う人も迷わず操作できるようになります。

まずはよく使うWebサイトを1つ開き、同じ見た目のボタンがいくつの画面に出てくるかを数えてみてください。