Bootstrap

ブートストラップ

作成日: 2026-01-18 | 最終更新: 2026-01-18

概要

Bootstrap（ブートストラップ）とは、Webサイトのデザインを効率的に作るためのCSSフレームワークです。

想像してみてください。Webサイトを作るとき、ボタン、ナビゲーションバー、カードなど、 毎回ゼロからCSSを書くのは大変ですよね。

Bootstrapは、よく使うデザインパーツが最初から用意されているので、HTMLにクラス名を追加するだけで、 見栄えの良いサイトが作れます。

💡 このサイトはBootstrapを使っていません
なぜなら、オリジナルのデザインで差別化したいから。 でも、管理画面などでは大活躍しています！

CSSフレームワークとJSフレームワークの違い

フレームワークには、大きく分けて2種類あります：

種類役割代表例
CSSフレームワーク見た目（デザイン）を楽にするBootstrap、Tailwind CSS、Bulma
JSフレームワーク動き（機能）を楽にするReact、Vue.js、Angular

Bootstrap = CSSフレームワークなので、 「見た目をキレイにする」のが得意です。 React や Vue.js と組み合わせて使うことも多いです。

Bootstrapの賛否両論

Bootstrapは世界中で使われている人気のフレームワークですが、賛成派と反対派で意見が分かれます。

✅ 賛成派の意見（メリット）

メリット説明
⚡ 爆速開発ボタン、ナビゲーション、カードなどが最初から用意されているので、デザインに悩まず実装できる
🎨 デザイン知識不要CSSを書かなくても、クラス名を追加するだけで見栄えの良いサイトが作れる
📱 レスポンシブ自動対応PC、タブレット、スマホに自動で対応。1つのHTMLで全デバイスOK
🆓 完全無料オープンソースで商用利用も可能。ライセンス料なし
📚 情報が豊富世界中で使われているので、困ったときの解決策がすぐ見つかる

❌ 反対派の意見（デメリット）

デメリット説明
😐 どのサイトも似たデザインみんな同じフレームワークを使うと、見た目が似てしまう。差別化が難しい
👀 Bootstrap感が消せない色やフォントを変えても「Bootstrap感」が残る。プロが見ると一発で分かる
🔧 カスタマイズが難しいBootstrapのデフォルトから外れたデザインにするのは、逆に時間がかかる
📦 ファイルサイズが大きい使わない機能も含まれているため、サイトの読み込みが遅くなる可能性
📖 学習コストクラス名のルールを覚える必要がある。CSS書いた方が早いこともある

Bootstrap使ってるサイトの実例

Bootstrapを使うべきケースと、使わない方が良いケースを見てみましょう。

✅ Bootstrap使って正解なケース

  • 管理画面・ダッシュボード
    → 見た目より「機能」が重要。データを見やすく表示できればOK
  • プロトタイプ（試作品）
    → アイデアを素早く形にしたい。デザインは後で考える
  • 社内ツール
    → 社内でしか使わないので、見た目より使いやすさ優先
  • ドキュメントサイト
    → 読みやすさ優先。オリジナリティは不要
  • 短期間のイベントサイト
    → 数週間で終わるイベント。開発スピード最優先

⚠️ Bootstrap使わない方が良いケース

  • ブランドサイト（企業HP）
    → 他社と差別化したい。オリジナルのブランドイメージが重要
  • ECサイト（ネットショップ）
    → デザインで商品を魅力的に見せたい。競合と似ると困る
  • ポートフォリオサイト
    → デザイナー・クリエイターなら独自性が命。Bootstrap感は避けたい
  • ランディングページ（LP）
    → CVR（成約率）を上げるには、オリジナルのデザインで目を引きたい

Bootstrap感の見分け方

「このサイト、Bootstrapで作られてるな」と分かってしまう特徴があります。

1. デフォルトの青いボタン

Bootstrapのボタンは、デフォルトで青色（#007bff）です。 この色をそのまま使っているサイトは、高確率でBootstrap製です。

2. 12分割グリッドシステム

Bootstrapは画面を12分割して、レイアウトを作ります。 そのため、「なんかキレイに3列に並んでるな」「4:8の比率だな」というレイアウトが多いです。

<!-- Bootstrapの典型的なレイアウト -->
<div class="row">
  <div class="col-md-4">左カラム（12分の4）</div>
  <div class="col-md-8">右カラム（12分の8）</div>
</div>

3. 均等な余白（padding/margin）

Bootstrapは、余白が均等です。p-3、m-4 などのクラスで余白を指定するので、 「なんかキレイに揃ってるな」という印象になります。

4. 角丸のカード

Bootstrapのカードコンポーネントは、角が丸く、影がついています。 この「カード感」がBootstrapの特徴です。

5. ナビゲーションバーの形

Bootstrapのナビゲーションバー（navbar）は、独特の形をしています。 ハンバーガーメニュー（☰）の位置、ロゴの配置などに「Bootstrap感」が出ます。

いつBootstrapを使うべき？

Bootstrapを使うかどうかは、「デザインの独自性」と「開発スピード」のどちらを優先するかで決めましょう。

優先事項Bootstrap使う？理由
開発スピード最優先✅ 使うデザインに悩まず、機能実装に集中できる
デザインの独自性優先❌ 使わないカスタムCSSで1から作る方が自由度高い
見た目より機能重視✅ 使う管理画面、ダッシュボードなど
ブランドイメージ重視❌ 使わない企業HP、ECサイトなど
学習目的✅ 使うレスポンシブデザインの基本が学べる

Bootstrapの基本的な使い方

Bootstrapを使うには、2つの方法があります：

1. CDN経由で使う（簡単）

HTMLに以下を追加するだけで、すぐ使えます。 最新バージョンはBootstrap公式サイトで確認してください：

<!DOCTYPE html>
<html>
<head>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <button class="btn btn-primary">ボタン</button>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

2. npmでインストールする（本格開発）

npm install bootstrap

Bootstrapの代替フレームワーク

「Bootstrap感が嫌だ」という人は、他のCSSフレームワークも検討しましょう：

フレームワーク特徴向いている人
Tailwind CSSユーティリティ型。小さいクラスを組み合わせるオリジナルデザインを作りたい人
Bulmaモダンでシンプル。JavaScript不要軽量なサイトを作りたい人
Foundation企業向け。カスタマイズ性高い大規模サイトを作る人
Material-UIGoogleのマテリアルデザインReactを使う人

よくある質問（FAQ）

関連用語

用語説明
フレームワークBootstrapはCSSフレームワークの一種
CSSBootstrapはCSSを楽にするツール
HTMLBootstrapはHTMLにクラス名を追加して使う
npmBootstrapをnpmでインストールできる