11. UIパーツの一貫性

この章では、UIパーツの一貫性を学びます。

Webページでは、ボタン、カード、見出し、ラベル、ナビゲーションなど、同じようなパーツが繰り返し使われます。

これらの見た目や使い方がバラバラだと、ページ全体が散らかって見え、使い方もわかりにくくなります。

UIパーツとは

UIパーツとは、Webページの中で使われる操作や表示の部品です。

たとえば、次のようなものです。

ボタン
リンク
カード
ラベル
タグ
ナビゲーション
フォーム
見出し
アラート
ページネーション

UIパーツは、見た目だけでなく役割も持っています。

同じ役割のパーツは、同じ見た目にすることで、使う人が迷いにくくなります。

一貫性が必要な理由

一貫性があると、ページを見る人はルールを覚えやすくなります。

たとえば、青い塗りのボタンが「主な行動」を表すとわかれば、別のページでも同じように理解できます。

逆に、同じ見た目なのに役割が違ったり、同じ役割なのに見た目が違ったりすると、迷いやすくなります。

一貫性は、見た目の整い方だけでなく、使いやすさにもつながります。

ボタンの一貫性

ボタンは、役割ごとに見た目を決めます。

たとえば、次のように分けます。

種類	役割
主ボタン	一番押してほしい行動
補助ボタン	詳細を見る、戻るなど補助的な行動
危険ボタン	削除、キャンセルなど注意が必要な行動

主ボタンの見た目を毎回変えると、どれが重要かわからなくなります。

色、角丸、余白、文字サイズ、ホバー状態をそろえます。

カードの一貫性

カード型レイアウトでは、カードのルールをそろえます。

確認したい項目は次の通りです。

画像比率
内側余白
見出しのサイズ
本文の文字量
ボタン位置
角丸
枠線や影
カード同士の間隔

同じ一覧に入っているカードは、同じルールで作ります。

カードごとに画像の高さや余白が違うと、一覧全体が落ち着かなくなります。

ラベルとタグ

ラベルやタグは、情報の分類や状態を伝えるために使います。

たとえば、次のようなものです。

NEW
お知らせ
募集中
初心者向け
重要
受付終了

ラベルやタグは小さな要素ですが、色や形を増やしすぎると散らかります。

役割ごとに色や形を決めて使います。

見出しの一貫性

見出しも、UIパーツの一部として考えます。

同じ階層の見出しは、サイズ、太さ、余白、装飾をそろえます。

たとえば、同じページ内で h2 の見た目が毎回違うと、どれが同じ階層なのかわかりにくくなります。

見出しでは、次のことをそろえます。

文字サイズ
太さ
色
上下余白
下線やアイコンの有無
セクション内の位置

見出しのルールがあると、ページ全体の構造が見えやすくなります。

ルールを作る

一貫性を保つには、パーツごとのルールを作ります。

たとえば、次のようなルールです。

主ボタンは塗り、補助ボタンは枠線
カード画像は16
セクション見出しは同じ余白にする
タグは小さな角丸で統一する
フォームのラベルは入力欄の上に置く

ルールがあると、ページが増えても見た目が崩れにくくなります。

変化をつける場所

一貫性は、すべてを同じにすることではありません。

重要な場所では、あえて変化をつけることもあります。

ただし、変化には理由が必要です。

たとえば、次のような場合です。

最重要CTAを目立たせる
注意メッセージを通常のカードと区別する
現在地をナビ内で強調する
エラー状態を通常状態と区別する

変化をつける時も、役割に合わせて使います。

この章のまとめ

UIパーツは、同じ役割なら同じ見た目にすると使いやすい
ボタン、カード、ラベル、見出し、ナビゲーションにはルールを作る
一貫性があると、見た目が整い、使う人も迷いにくい
ルール化されたUIは、コーディングや保守もしやすい
次の章では、画面幅に合わせたレスポンシブデザインを学ぶ