先生と生徒の会話形式で理解しよう

生徒

「Bootstrapの色って、最初から青や緑が決まっていますよね。でも、自分の好きな色に変えてサイト全体を統一したいんです。」

先生

「その気持ちは大切ですね。色を統一することを『カラーパレット設計』と言って、Webサイトの印象を決める大事な要素なんですよ。」

生徒

「カラーパレットって難しそうですが、どうやって作ればいいんでしょう？」

先生

「難しく考えなくても大丈夫。まずは、プライマリカラー・セカンダリカラー・アクセントカラーという3つの役割を理解することから始めましょう。」

1. カラーパレット設計とは？

カラーパレットとは、Webサイトやアプリで使用する色の組み合わせのことです。デザインを統一し、見やすくするための「色のルールブック」と考えてください。Bootstrapには標準の色（ブルーやグリーンなど）が用意されていますが、そのまま使うと他のサイトと似た印象になってしまうことがあります。そこで、自分のブランドや目的に合わせて色を設計することが大切です。

例えば、青を基調としたサイトなら落ち着いた雰囲気に、オレンジを基調にすると元気で親しみやすい雰囲気になります。このように色は訪問者の印象を大きく左右するので、初心者でも最初に取り組んでおきたいポイントです。

2. プライマリカラーの決め方

プライマリカラーとは、サイト全体の顔になるメインの色です。ロゴやブランドカラーがある場合は、その色をプライマリカラーに設定すると良いでしょう。ボタンやリンク、見出しなどに使われ、訪問者が「このサイトはこの色」という印象を持つ大切な役割を担います。

Bootstrapでは、.btn-primary や .text-primary などに使われる色がプライマリカラーです。これを自分好みに変えることで、オリジナリティのあるデザインが完成します。


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
.btn-primary {
    --bs-btn-bg: #ff6600;
    --bs-btn-border-color: #ff6600;
    --bs-btn-hover-bg: #e65c00;
    --bs-btn-hover-border-color: #e65c00;
}
</style>

<button class="btn btn-primary">メインボタン</button>

ブラウザ表示

この例では、プライマリカラーをオレンジに変更しています。クリック時やホバー時の色も設定すると、自然で一貫性のある動きになります。

3. セカンダリカラーの役割

セカンダリカラーとは、プライマリカラーを引き立てる補助的な色です。背景や区切り線、カードなどのパーツに使うとバランスが取りやすくなります。例えば、プライマリカラーをオレンジにした場合、セカンダリカラーにはグレーやブルーを使うと落ち着きが出ます。


<style>
.btn-secondary {
    --bs-btn-bg: #006699;
    --bs-btn-border-color: #006699;
    --bs-btn-hover-bg: #005580;
    --bs-btn-hover-border-color: #005580;
}
</style>

<button class="btn btn-secondary">セカンダリボタン</button>

ブラウザ表示

ここでは、セカンダリカラーをブルー系に設定しています。オレンジ（プライマリ）とブルー（セカンダリ）は補色関係なので、視覚的にわかりやすくまとまりやすい配色です。

4. アクセントカラーの使い方

アクセントカラーは、注目させたい部分にだけ使う色です。警告や強調に利用される赤や、成功を意味する緑などが代表例です。使いすぎると全体がごちゃごちゃしてしまうため、ポイントでの使用が鉄則です。


<style>
.btn-success {
    --bs-btn-bg: #33cc66;
    --bs-btn-border-color: #33cc66;
    --bs-btn-hover-bg: #29a35a;
    --bs-btn-hover-border-color: #29a35a;
}
</style>

<button class="btn btn-success">アクセントボタン</button>

ブラウザ表示

この例では、緑色をアクセントカラーとして設定しています。フォームの送信ボタンや成功メッセージに使うと、ユーザーに「うまくいった」と直感的に伝わります。

5. 配色戦略のコツ

カラーパレットを設計する際は、次のようなルールを意識するとバランスが取れます。

プライマリカラーは「全体の印象を決める色」なので、ブランドや目的に合ったものを選ぶ
セカンダリカラーは「調整役」。プライマリを邪魔せずに支える色にする
アクセントカラーは「強調のためだけに」少量だけ使う
背景色や文字色とのコントラストを意識して、読みやすさを優先する

たとえば、プライマリをオレンジ、セカンダリをブルー、アクセントを緑に設定した場合、見出しや重要なボタンにオレンジ、補助的なパーツにブルー、完了メッセージに緑を使うと、まとまりのあるサイトになります。

6. 実際のカラーパレット例

ここからは、実際にカラーパレットを反映させるサンプルコードを紹介します。単純に:rootに色を定義しただけでは、Bootstrapのボタンには反映されません。なぜなら、ボタンには専用のCSS変数（--bs-btn-bgなど）が割り当てられているからです。そのため、プライマリ・セカンダリ・アクセントを使うには、それぞれのボタン用変数も上書きしてあげる必要があります。


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
/* プライマリ（オレンジ） */
.btn-primary {
    --bs-btn-bg: #ff6600;
    --bs-btn-border-color: #ff6600;
    --bs-btn-hover-bg: #e65c00;
    --bs-btn-hover-border-color: #e65c00;
    --bs-btn-active-bg: #cc5200;
    --bs-btn-active-border-color: #cc5200;
}

/* セカンダリ（ブルー） */
.btn-secondary {
    --bs-btn-bg: #006699;
    --bs-btn-border-color: #006699;
    --bs-btn-hover-bg: #005580;
    --bs-btn-hover-border-color: #005580;
    --bs-btn-active-bg: #004466;
    --bs-btn-active-border-color: #004466;
}

/* アクセント（グリーン） */
.btn-success {
    --bs-btn-bg: #33cc66;
    --bs-btn-border-color: #33cc66;
    --bs-btn-hover-bg: #29a35a;
    --bs-btn-hover-border-color: #29a35a;
    --bs-btn-active-bg: #208c4d;
    --bs-btn-active-border-color: #208c4d;
}
</style>

<button class="btn btn-primary">プライマリ</button>
<button class="btn btn-secondary">セカンダリ</button>
<button class="btn btn-success">アクセント</button>

ブラウザ表示

このように、各ボタン専用の変数を上書きすることで、Bootstrap標準の色から自分のカラーパレットに切り替えることができます。

7. ダークモードに合わせたパレット切り替え

さらに便利なのが「ダークモード対応」です。最近のサイトやアプリでは、ライトモードとダークモードを切り替えるのが当たり前になっています。そのため、カラーパレットもモードごとに用意しておくと、より見やすく使いやすいデザインになります。

方法はシンプルで、[data-theme="dark"]などの属性を利用して変数を切り替えるだけです。ユーザーがダークモードに切り替えると、ボタンの色も自動で変化します。


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
/* ライトモード */
.btn-primary {
    --bs-btn-bg: #ff6600;
    --bs-btn-border-color: #ff6600;
}
.btn-secondary {
    --bs-btn-bg: #006699;
    --bs-btn-border-color: #006699;
}
.btn-success {
    --bs-btn-bg: #33cc66;
    --bs-btn-border-color: #33cc66;
}

/* ダークモード */
[data-theme="dark"] .btn-primary {
    --bs-btn-bg: #ffaa66;
    --bs-btn-border-color: #ffaa66;
}
[data-theme="dark"] .btn-secondary {
    --bs-btn-bg: #3399cc;
    --bs-btn-border-color: #3399cc;
}
[data-theme="dark"] .btn-success {
    --bs-btn-bg: #66ff99;
    --bs-btn-border-color: #66ff99;
}
</style>

<div data-theme="light" class="p-3">
    <button class="btn btn-primary">プライマリ</button>
    <button class="btn btn-secondary">セカンダリ</button>
    <button class="btn btn-success">アクセント</button>
</div>

<div data-theme="dark" class="p-3 mt-3">
    <button class="btn btn-primary">プライマリ（Dark）</button>
    <button class="btn btn-secondary">セカンダリ（Dark）</button>
    <button class="btn btn-success">アクセント（Dark）</button>
</div>

ブラウザ表示

この例では、data-theme="dark" が付いている要素の中では、少し明るめの色に切り替わるようにしています。ダークモードでは背景が暗いので、ボタンの色も少し鮮やかにすると読みやすくなります。

これで、カラーパレットをライトモードとダークモード両方に対応させることができ、現代的なWebサイトのデザインに近づけます。