Bootstrapテーマカラー完全ガイド！primary・secondary・successの意味と実務での使い分け

1. Bootstrapのテーマカラーとは何か

1. Bootstrapのテーマカラーとは何か

Bootstrapのテーマカラーとは、あらかじめ用意されている色のグループのことです。Bootstrap5では、primaryやsecondary、successなど、名前付きの色が用意されています。

これらは単なる色分けではなく、「この色はこういう意味で使う」という共通ルールを持っています。初心者の方は、まず色の名前と役割がセットになっていると覚えると理解しやすくなります。

例えば、信号機を思い浮かべてください。青は進む、赤は止まるというように、色には意味があります。Bootstrapのテーマカラーも同じ考え方です。

2. primaryの意味と使いどころ

2. primaryの意味と使いどころ

primaryは、画面の中で一番伝えたい操作や情報に使う色です。Webページで言えば、「一番押してほしいボタン」や「重要な見出し」に使われます。

実務では、送信ボタンや購入ボタンなど、ユーザーに行動してほしい部分に使われることが多いです。

<button class="btn btn-primary">送信する</button>

primaryを多用しすぎると、どれが重要かわからなくなるので、「ここぞ」という場面で使うのがポイントです。

3. secondaryの役割と注意点

3. secondaryの役割と注意点

secondaryは、primaryほど重要ではないが、補助的に必要な要素に使われる色です。主役ではなく脇役のイメージです。

例えば、戻るボタンやキャンセルボタンなどが代表例です。

<button class="btn btn-secondary">キャンセル</button>

primaryとsecondaryをセットで使うことで、ユーザーは自然と「どちらが大事か」を理解できます。

4. successが表す成功と安心

4. successが表す成功と安心

successは、処理がうまくいったときや、正しい状態を表す色です。一般的に緑色が使われます。

登録完了や保存成功など、「問題なく終わりました」という安心感を伝える役割があります。

<div class="alert alert-success">
    登録が完了しました
</div>

successはポジティブな意味を持つため、エラーや警告には使わないようにしましょう。

5. dangerとwarningの違い

5. dangerとwarningの違い

dangerは、危険やエラーを強く伝える色です。削除や失敗など、注意を引く必要がある場面で使われます。

warningは、すぐに問題ではないが、気をつけてほしい状態を表します。

<div class="alert alert-danger">
    エラーが発生しました
</div>
<div class="alert alert-warning">
    入力内容を確認してください
</div>

実務では、dangerは最終警告、warningは事前注意という感覚で使い分けます。

6. infoとlight・darkの使いどころ

6. infoとlight・darkの使いどころ

infoは、参考情報や補足説明に使われる色です。ユーザーに知っておいてほしい情報をやさしく伝えます。

lightとdarkは、背景とのコントラスト調整に使われます。lightは明るい背景、darkは暗い背景に向いています。

<div class="alert alert-info">
    パスワードは8文字以上で設定してください
</div>

色そのものより、「情報の重さ」で選ぶことがポイントです。

7. 実務でのテーマカラー使い分けの考え方

7. 実務でのテーマカラー使い分けの考え方

実際の現場では、見た目の好みではなく、意味を優先してテーマカラーを選びます。誰が見ても同じように理解できることが重要です。

Bootstrapのテーマカラーを使うことで、デザインに詳しくない人でも、一定のルールを守った画面を作ることができます。

初心者の方は、「この色は何を伝えたいのか」を考えながら使うクセをつけると、自然と実務レベルの感覚が身についていきます。