Building Block = 基本構成単位。Componentとの違いは?

名詞句: Building Block

複数形: Building Blocks

IPA表記: /ˈbɪl.dɪŋ blɑːk/

読み表記: ビルディング・ブロック / BIL-ding blok

意味:

Webサイト全体の構造を破綻なく成立させるために不可欠な、独立したマクロ視点の基本骨組み単位。

一般的な訳語:

基本構成要素、構造単位、構成ブロック。Web設計や情報設計（IA）の文脈では、ナビゲーション、ヒーロー、ボディ、フッターのように「それらが揃うことで1つのWebサイトとして機能する大枠の区画」を指す。

詳細:

UI設計やフロントエンド開発で混同されやすい表現に「Component（コンポーネント）」がある。Componentはボタン、入力フォーム、カードUIのように、再利用性（Reusability）や単一責任の原則に基づいて設計された「自律的なミクロの部品」を指す。コードやデザインシステム内で独立して管理され、ページ内のどこにでも何度でも配置できる。

これに対してBuilding Blockは、「積み木」の原義通り、全体の構造や基盤を成立させるための「不可欠な構造モジュール」を指す。今回の動画でナビゲーション、ヒーローセクション、ボディ、フッターの4つがBuilding Blockとして挙げられているように、欠落するとサイト構造そのものが未完成になり、コンバージョンや回遊が成立しなくなる骨組みを意味する。Componentが「使い回すための部品ライブラリ」を論じるのに対し、Building Blockは「全体構造を支える構造的土台」としての役割と重要性を強調する表現である。

ネイティブな組み合わせ:

Fundamental Building Block (不可欠な基本構成要素)

"In responsive web design, flexible grid systems serve as the fundamental building block for cross-device consistency."

レスポンシブWebデザインにおいて、フレキシブルなグリッドシステムは複数端末間での一貫性を担保するための不可欠な基本構成要素として機能する。

Architectural Building Blocks (構造上の基本構成単位)

"Before styling individual UI elements, designers must define the architectural building blocks that dictate page hierarchy."

個別のUI要素をスタイリングする前に、デザイナーはページ階層を決定づける構造上の基本構成単位を定義しなければならない。

Serve As A Building Block (構成単位として機能する)

"Each semantic section should serve as a building block that directly contributes to technical SEO and content clarity."

各セマンティックセクションは、テクニカルSEOとコンテンツの明快さに直接寄与する構成単位として機能すべきである。

動画から切り取った生の文:

"(0:30) So if you look at a website in terms of building blocks it can really be broken down into just a few pieces: there's your navigation, your hero section, your body, and your footer."

Webサイトを構成ブロックという観点で捉えると、ごく少数の要素に分解できます。すなわち、ナビゲーション、ヒーローセクション、ボディ、そしてフッターです。

"(0:40) Each of these building blocks should contain very specific information."

これら個々の構成ブロックには、極めて明確で特定の情報を含める必要があります。

"(7:35) So if you follow these building blocks—your navigation, your hero section, the body, and the footer—your websites are going to look and feel and perform amazingly."

したがって、これら構成ブロック（ナビゲーション、ヒーローセクション、ボディ、フッター）の設計に従えば、Webサイトの外観・操作感・パフォーマンスは驚くほど優れたものになります。