コンポーネント
Web サイトの画面(UI)を構成する、「再利用可能なパーツ(部品)」のことです。サイト作りの「レゴブロック」をイメージすると分かりやすいです。
具体例：ボタン、入力フォーム、モーダル(モーダルウィンドウ)(画面の上に浮き出る小窓)、商品情報がまとまったカード型のデザインなど。
最大のメリットは「一貫性」と「保守性」
何度も使うパーツを「コンポーネント」としてあらかじめ定義(部品化)しておくことで、以下のような大きなメリットがあります(「デザインシステム」という概念とセットで語られます)。
- 一貫性の担保：どこを開いてもボタンの色や形が揃っており、ユーザーが使いやすい。
- 修正の手間が激減：たとえば「ボタンの色を変えたい」時、大元のコンポーネントの指示を 1 箇所変更するだけで、サイト全ページのボタンが一斉に切り替わります。
実務の鉄則：長期運用を見据えた「投資」
コンポーネント化は、大規模かつ長期運用を前提とした投資です。リニューアルなどのタイミングでこの仕組み(部品単位で改修できる構造)を組み込んでおくと、その後の運用・保守コストが劇的に下がります。
初心者が陥りやすい罠(落とし穴)
- 機能追加による「デザインカオス」：コンポーネント化されていない古いサイトに、継ぎ接ぎ(継ぎ接ぎ化)で新しい機能を次々に追加してしまい、ページごとにボタンの形や文字サイズがバラバラの「カオス(混沌)状態」になってしまう。
言葉をよく利用する人
- デザイナー
- コーダー / フロントエンドエンジニア
- Web 担当者(発注側)
- バックエンドエンジニア
会話上での使用例
ページごとにデザインがバラついてきた問題をデザイナーと相談する場面
-
デザイナー
ページを追加するたびにボタンや見出しの見た目が少しずつズレてきていて、全体の統一感が崩れ始めています。
-
Web 担当者
そろそろコンポーネントとして部品を共通化したいですね。次のリニューアルのタイミングでデザインシステムの整備を組み込めば、その後の追加でも一貫性を保てます。
-
デザイナー
賛成です。ボタンやカードあたりから定義していきましょう。
改修のたびにコストがかさむ問題をコーダーと相談する場面
-
コーダー
同じような修正を何ページにも手で当てていて、正直コストが高くついています。
-
Web 担当者
コンポーネント単位で改修できる構造に作り直しませんか。部品を1か所直せば全ページに反映されるので、長期で見ると保守がかなり楽になります。
-
コーダー
たしかにそのほうが安全ですね。設計から見直してみます。