TH01-08
デザインの「反復」を実務で実現するためには、頭の中で意識するだけでは不十分です。
すべての要素を「ルール（規格）」として定義し、それを使い回す仕組みが必要になります。
これが、現代のデザイン現場で必須となっている「コンポーネント化」の考え方です。
目次
「毎回作る」のがデザインを壊す原因
初心者のデザインがバラバラに見える理由の1つは、新しいページを作るたびに、その場でボタンや見出しを「手作り」してしまうことにあります。
- 「さっきのボタン、角丸は4pxだったっけ？5pxだったっけ？」
- 「見出しの上下余白、今回はなんとなくこれくらいでいいか」
こうした小さなズレが積み重なると、サイト全体から一貫性が失われ、ユーザーに「信頼感のない、素人っぽいサイト」という印象を与えてしまいます。
主要要素のルール化（コンポーネント化）
以下の要素は、サイト制作の初期段階で「これ以外は使わない」というルールを固めてしまうべき項目です。
- ボタン：サイズ（大・中・小）、角丸の半径、色、ホバー時の挙動。
- 見出し（H1〜H4）：フォントサイズ、行間、文字間、装飾の有無。
- 余白（スペーシング）：TH01-03で触れた「8px単位」などの数値ルール。
これらを一度定義したら、サイト内のどこであっても「コピー＆ペースト」や「コンポーネント呼び出し」だけで配置するようにします。
ルール化する3つの大きなメリット
「NO SENSE, JUST LOGIC」の観点から、ルール化には以下の論理的なメリットがあります。
- 迷いの排除：デザイン中に「どうしようか」と悩む時間がゼロになります。
- 一括修正が可能：例えば「サイト全体のボタンの角丸を少し丸くしたい」と思ったとき、ルール（コンポーネント）を1箇所直すだけで、全ページに反映されます。
- 実装との連携：エンジニアに渡す際も「このボタンは『Button/Primary』です」と伝えるだけで済むため、コミュニケーションコストが減少します。
「システム」としてデザインを捉える
デザインは「絵を描くこと」ではなく、「部品を組み立てるシステムを作ること」だと考え方を変えましょう。
優れたWebデザイナーは、1枚の美しいページを作る人ではなく、「誰がどのページを作っても、同じクオリティで仕上がるルールを作れる人」のことです。
ルールはあなたの味方
自由奔放に作るのがデザインではありません。
あえて「ボタンはこの3種類だけ」と自分に制約を課すことで、デザインの密度と優れた一貫性が手に入ります。