【2026年8月最新】Bootstrapの使い方入門｜レスポンシブサイトの基本とClaude Codeでの自社サイト制作
aikanri-admin
「自社サイトやLPを内製したいけれど、デザインもコーディングも詳しくない」「制作会社に頼むと時間もコストもかかる」——ホームページ制作を検討する経営者・担当者の多くが、こうした悩みに直面します。
この記事では、スマホ・PCどちらでも綺麗に表示されるレスポンシブサイトを効率よく作るための定番ツールBootstrapの基本的な使い方を、初心者向けに整理します。あわせて、内製・外注・ノーコードツール・Claude Codeという選択肢を比較し、Bootstrapの構文を覚えなくてもClaude Codeに日本語で任せる方法まで、非エンジニアの方にも分かるように解説します。
サイト制作の話は、とかく技術的な専門用語が先行しがちですが、この記事では経営判断として「どの方法を選ぶべきか」という視点を軸に据えています。技術の細部よりも、自社にとって最適な選択肢を見極めるための判断材料として活用していただければと思います。
代表菅澤
AI鬼管理山崎
この記事を最後まで読むと、次の5つが明確になります。
01 THE OPTIONS 自社サイト・LP制作、どんな選択肢があるか 内製・外注・ノーコード・AI、それぞれの特徴を整理する
| 選択肢 | 特徴 | 向いている場面 |
|---|---|---|
| 制作会社への外注 | 品質は安定するが費用・納期がかかる | 予算・時間に余裕がある大規模サイト |
| ノーコードツール | コード不要、テンプレートから選べる | 定型的なデザインで十分な小規模サイト |
| 自分でコーディング（Bootstrap等） | 自由度が高いが学習コストがかかる | 継続的に自社で更新・改修したい場合 |
| Claude Codeでの制作 | 日本語指示のみ、自由度と手軽さを両立 | 内製したいが技術習得に時間をかけたくない場合 |
この記事の主役であるBootstrapは、3番目の「自分でコーディングする」選択肢に位置づけられます。ただし後述するように、Bootstrapの知識そのものは、4番目のClaude Code活用を理解するうえでも役立ちます。
選択肢を決める前に、まず整理しておきたいのが「サイト公開後、どのくらいの頻度で更新するか」という視点です。一度作って数年間ほとんど更新しないサイトであれば外注も選択肢になりますが、キャンペーンやサービス内容の変更にあわせて頻繁に更新したい場合、その都度外部に依頼する運用は時間的なロスが大きくなります。
年数回程度
外注も選択肢
月1回程度
ノーコードも検討
週次・随時
内製が有利
Claude Codeでの
内製が最適
02 WHAT IS BOOTSTRAP Bootstrapとは何か レスポンシブサイト制作を効率化する定番ツール
Bootstrapは、Webサイトのデザイン・レイアウトを効率的に組み立てるための、オープンソースのCSSフレームワークです。もともとはTwitter社内のツールとして開発され、現在は世界中の開発者・デザイナーに広く使われています。
長年にわたり多くのサイトで採用されてきた実績から、公式ドキュメントやサンプルコード、解説記事などの情報量が非常に豊富である点も見逃せない強みです。分からないことがあっても検索すればほぼ確実に解決策が見つかるため、独学での学習のしやすさという観点でも定番ツールとしての地位を築いています。
📚 用語解説
CSSフレームワーク：Webサイトの見た目（レイアウト・配色・ボタンの形など）をゼロから1行ずつ書かなくても、あらかじめ用意された部品（クラス）を組み合わせるだけで整ったデザインを作れる仕組み。Bootstrapはその代表格で、他にもTailwind CSSなどが知られています。ゼロからCSSを設計する場合と比べて、制作にかかる時間を大幅に短縮できます。
Bootstrapの最大の特徴は、スマートフォン・タブレット・PCなど画面サイズが変わっても自動的にレイアウトが調整される「レスポンシブデザイン」が標準で組み込まれている点です。
📚 用語解説
レスポンシブデザイン：閲覧するデバイスの画面サイズに応じて、Webサイトのレイアウトが自動的に最適化される設計手法。スマートフォンでは1列表示、PCでは3列表示、というように同じHTMLでも画面幅に応じて見え方が変わります。近年はスマホからのアクセスが大半を占めるため、レスポンシブ対応は事実上必須の要件と言えます。
AI鬼管理山崎
スマホ用・PC用を別々に作る運用では、コンテンツを更新するたびに両方のサイトへ同じ修正を反映する必要があり、片方だけ更新し忘れるというミスも起こりがちでした。1つのコードで両対応できるレスポンシブデザインは、見た目の統一だけでなく、更新作業そのものの手間も削減してくれます。
03 HOW TO START Bootstrapの導入方法 CDN読み込みだけで、すぐに使い始められる
Bootstrapを使い始める最も簡単な方法は、CDN（Content Delivery Network）経由でファイルを読み込む方法です。特別なインストール作業は不要で、HTMLファイルに数行のコードを追加するだけで利用を開始できます。
📚 用語解説
CDN（Content Delivery Network）：Web上に公開されているファイルを、自分のサーバーに保存せずそのまま読み込んで使える配信の仕組み。BootstrapのようなライブラリはCDN経由で読み込むケースが多く、ダウンロード・インストールの手間なくすぐに利用を開始できます。
<!-- BootstrapのCSSをheadタグ内で読み込む -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrapが提供するJavaScript機能（ナビメニューの開閉など）を使う場合 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>Bootstrapは記事執筆時点で5系が広く使われていますが、バージョンによってクラス名や書き方が異なる部分があります。新しくサイトを作る際は、公式サイトで最新の導入コードを確認することをおすすめします。
04 GRID SYSTEM グリッドシステムの基本 Bootstrapの核となる「12分割」の考え方
Bootstrapを理解するうえで最も重要なのがグリッドシステムです。画面の横幅を12等分し、その中でコンテンツの幅を指定することで、複雑なCSSを書かなくてもレイアウトを組み立てられます。
📚 用語解説
グリッドシステム：画面の横幅を12列（12分割）の格子状に見立て、コンテンツがそのうち何列分の幅を占めるかを指定してレイアウトを組む仕組み。Bootstrapではcontainer・row・colという3つの階層のクラスを組み合わせて使います。
<div class="container">
<div class="row">
<div class="col-md-6">左側（PCでは半分の幅）</div>
<div class="col-md-6">右側（PCでは半分の幅）</div>
</div>
</div>この例では、col-md-6というクラスが「画面幅がmd（768px）以上のとき、12列中6列分の幅を使う」ことを意味します。画面幅がmdより狭い場合（スマホなど）は自動的に縦並びに切り替わります。
| ブレークポイント | 対応する画面幅の目安 | 主な対象デバイス |
|---|---|---|
| xs（指定なし） | 576px未満 | スマートフォン（縦向き） |
| sm | 576px以上 | スマートフォン（横向き） |
| md | 768px以上 | タブレット |
| lg | 992px以上 | ノートPC |
| xl | 1200px以上 | デスクトップPC |
Bootstrapには非常に多くの機能がありますが、非エンジニアが最初に理解すべきは「container・row・col」の3点セットだけで十分です。この3つだけでも、スマホ・PC対応の基本的なレイアウトは十分に組み立てられます。
4-1. containerとcontainer-fluidの違い
グリッドシステムを使う際、必ず最上位にcontainerというクラスを指定した要素で全体を囲む必要があります。このcontainerには、画面幅に応じて左右に適度な余白を作る役割があります。
<!-- 画面幅に応じて中央寄せ＋左右に余白ができる -->
<div class="container">...</div>
<!-- 画面幅いっぱいに広がる（余白なし） -->
<div class="container-fluid">...</div>containerは画面幅ごとに最大幅が決まっており、中央寄せで表示されるのに対し、container-fluidは常に画面幅いっぱいに広がります。ヘッダーやフッターのように画面端まで背景色を敷きたい部分はcontainer-fluid、本文コンテンツのように読みやすい幅に収めたい部分はcontainer、と使い分けるのが一般的です。
05 COMPONENTS よく使うコンポーネント ボタン・ナビバー・カードなど、既製の部品を組み合わせる
Bootstrapには、グリッドシステム以外にもボタン・ナビゲーションバー・カードといった、Webサイトでよく使う部品（コンポーネント）があらかじめ用意されています。
<!-- ボタンの例 -->
<button class="btn btn-primary">お問い合わせ</button>
<!-- カードの例 -->
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">サービス名</h5>
<p class="card-text">サービスの説明文がここに入ります。</p>
</div>
</div>📚 用語解説
コンポーネント：ボタン・カード・ナビゲーションメニューのように、Webサイトで繰り返し使われるパーツをあらかじめデザイン・実装済みの部品として提供する仕組み。btn btn-primaryのようにクラス名を指定するだけで、洗練された見た目のパーツをすぐに配置できます。
こうしたコンポーネントを組み合わせるだけで、デザインの専門知識がなくても、ある程度整った見た目のサイトを短時間で組み立てられます。これがBootstrapが初心者にも支持される理由の1つです。
5-1. スマホでの表示に欠かせないナビゲーションバー
企業サイトで特によく使われるのが、画面上部に固定されるナビゲーションバー（navbar）コンポーネントです。PCでは横並びのメニューとして表示され、スマートフォンなど画面が狭い場合は自動的に「ハンバーガーメニュー」と呼ばれる三本線のアイコンに切り替わります。
📚 用語解説
ハンバーガーメニュー：画面幅が狭い場合に、メニュー項目を三本線のアイコン1つに集約して表示する仕組み。タップすると項目が展開される。見た目がハンバーガーの断面に似ていることからこう呼ばれます。Bootstrapのnavbarコンポーネントには、この切り替えが標準で組み込まれています。
この「画面幅によってメニューの見た目を自動的に切り替える」処理は、自分でゼロからCSS・JavaScriptを書くと相応の手間がかかりますが、Bootstrapのnavbarコンポーネントを使えば、クラス名を指定するだけで実装できます。
06 PROS AND CONS Bootstrapのメリット・デメリット 万能ではないことも正しく理解する
| 観点 | メリット | デメリット |
|---|---|---|
| 制作スピード | 既製パーツの組み合わせで素早く形になる | 複雑な独自デザインには不向き |
| レスポンシブ対応 | 標準で組み込まれており対応が容易 | 細かい調整には追加のCSS知識が必要 |
| 見た目の均一化 | 統一感のあるデザインになりやすい | 「Bootstrapっぽい」見た目になりがち |
| 学習コスト | クラス名を覚えれば使い始められる | 本格的なカスタマイズには一定の学習が必要 |
Bootstrapの既定のデザインをそのまま使うと、多くのサイトで似たような配色・ボタンの形になりがちです。ブランドの独自性を強く出したい場合は、配色やフォントを独自にカスタマイズする一手間が必要になります。
代表菅澤
07 COMPARISON 内製・外注・ノーコード・Claude Code、どれを選ぶべきか 規模・予算・スピードから逆算する
| 選択肢 | 費用感 | 制作スピード | 非エンジニアの学習コスト |
|---|---|---|---|
| 制作会社への外注 | 高め（数十万円〜） | 遅め（数週間〜数ヶ月） | 低い（丸投げ可能） |
| ノーコードツール | 中程度（月額制が多い） | 早い | 中程度（ツールの操作習得が必要） |
| 自分でBootstrapを学ぶ | 低い（学習時間のコストのみ） | 学習後は早い | 高い（HTML/CSSの基礎理解が必要） |
| Claude Code | 低い（プラン契約費用のみ） | 早い（日本語指示のみ） | 低い（コードを書く必要がない） |
08 COMMON MISTAKES Bootstrap利用でよくあるミス 「動いたから完成」ではなく、崩れがないかまで確認する
ミス1：バージョンの異なるファイルが混在してしまう
複数のCDNリンクを異なるバージョンで読み込んでしまうと、クラス名の挙動が食い違い、レイアウトが崩れる原因になります。Bootstrapを導入する際は、CSSとJavaScriptのバージョンを必ず揃えることが重要です。
ミス2：独自CSSとの競合でデザインが崩れる
既存のCSSに、Bootstrapと同じクラス名や、優先度の高い指定が含まれていると、意図しない見た目になることがあります。特に既存サイトに後からBootstrapを追加する場合は、事前に競合の可能性を確認しておく必要があります。
ミス3：グリッドの列数が12を超えてしまう
第4章で紹介した通り、Bootstrapのグリッドは12列が基準です。col-md-6を3つ並べるなど、合計が12を超える指定をしてしまうと、意図せず折り返されて表示が崩れることがあります。
ミス4：画像を最適化しないまま大量に配置してしまう
Bootstrap自体はレイアウトを整えるツールであり、画像の読み込み速度までは面倒を見てくれません。高解像度の画像をそのまま何十枚も配置すると、レイアウトは整っていてもページの表示速度が遅くなり、結果的に離脱率の増加につながることがあります。画像は事前に適切なサイズへ圧縮してから使用することを推奨します。
ミス5：アクセシビリティを考慮しないまま公開してしまう
ボタンやリンクに適切なラベル（altテキストなど）を設定しないままサイトを公開すると、スクリーンリーダーを利用する方や検索エンジンにとって内容が伝わりにくくなります。Bootstrapのコンポーネントを使う際も、画像の代替テキストやボタンの説明文は、忘れずに個別に設定する必要があります。
バージョンの統一・独自CSSとの競合確認・グリッド列数の検算・画像の圧縮・alt属性の設定——この5点を公開前の最終チェックリストとして持っておくだけで、多くのトラブルを未然に防げます。
PCの画面だけで確認して「問題ない」と判断してしまうと、スマートフォンで見た際にレイアウトが崩れていることに気づけません。ブラウザの開発者ツールなどを使って、公開前に複数の画面幅で表示を確認することを強く推奨します。
09 CLAUDE CODE 【独自】Claude Codeに日本語で指示するだけでレスポンシブサイトが作れる Bootstrapの構文を知らなくても、同じ結果を得る
Claude Codeは、HTML・CSS・JavaScriptを読み書きできるAIエージェントです。この記事で紹介したBootstrapのグリッドシステムやコンポーネントも、Claude Codeが必要に応じて自動的に組み立ててくれます。
「会社案内のLPを作りたい。ヘッダー・サービス紹介3カード・お問い合わせフォームの構成で、スマホでもきれいに見えるようにして」——これだけで、第4章・第5章で紹介したグリッドシステムやカードコンポーネントを踏まえたページが生成されます。
特に非エンジニアの経営者にとって価値が大きいのは、「サイトを作って終わり」ではなく、公開後も継続的に自分たちで更新できるという点です。制作会社への外注では、ちょっとした文言修正にも依頼・納期待ちが発生しますが、Claude Codeであれば「この文章をこう変えて」と伝えるだけで、その場で修正が完了します。
AI鬼管理山崎
10 GENAI CASE STUDY 【独自】GENAI社内でのサイト制作実例 Max 20xプランを全社契約する会社が、実際どう使っているか
弊社（株式会社GENAI）では、Claude Max 20xプラン（月額$200・約30,000円）を全社契約し、経営・営業・広告・経理・秘書業務・記事制作まで幅広くClaude Codeを活用しています。Webサイト制作についても、この記事のテーマと直結する取り組みを行っています。
| サイト種別 | 制作・運用方法 |
|---|---|
| コーポレートサイト | Claude Codeでコーディング、レスポンシブ対応も含めて内製 |
| サービス紹介LP（AI鬼管理等） | 構成設計からコーディングまでClaude Codeで一貫して制作 |
| ブログ記事のCTAバナー・装飾 | テンプレート化した部品をClaude Codeが組み合わせて生成 |
弊社では、外部の制作会社に依頼せず、コーポレートサイト・LPともに社内でClaude Codeを活用して制作・更新しています。修正が必要になったタイミングで即座に対応できるため、外注に比べて意思決定から反映までのスピードが圧倒的に速いという実感があります。
例えば、新しいキャンペーンを実施する際にLPの訴求文言を差し替えたい場合、外注であれば依頼から反映まで数日かかることも珍しくありませんが、社内でClaude Codeを使えば、その日のうちに変更・公開まで完結させられます。この「意思決定した瞬間に反映できる」スピード感は、特に広告運用と連動したLP改善において大きな武器になっています。
サイトの目的・
構成を
日本語で伝える
Claude Codeが
レスポンシブ対応で
コーディング
表示確認・
デザイン調整を
依頼
公開後も
随時修正・
更新
代表菅澤
11 CONCLUSION まとめ ── コードを覚えるより、作りたいものを言語化する 内製の壁は、思っているより低いところにある
最も重要なメッセージをお伝えします。自社サイト制作の内製は、思っているより高いハードルではなくなっています。HTML・CSS・Bootstrapの構文を暗記する必要はなく、「どんなサイトを作りたいか」を明確に言語化できれば、Claude Codeがその通りに、レスポンシブ対応も含めて実現してくれる時代になっています。
もちろん、ブランドの世界観を強く打ち出したい旗艦サイトや、大規模なECサイトのような高度な要件では、専門のデザイナー・エンジニアの力が必要な場面も引き続きあります。重要なのは、すべてを内製かすべてを外注かという二択で考えるのではなく、サイトの性質や更新頻度に応じて、内製とプロの力を適切に使い分ける視点を持つことです。
代表菅澤
自社サイト・LP制作の内製化を、AI鬼管理が一緒に設計します
コーディングの知識がなくても、Claude Codeでレスポンシブサイトを内製できます。
弊社の実運用ノウハウをもとに、貴社に合った進め方をご提案します。
AI鬼管理山崎
ここから先の進め方は、大きく2つあります。
自社で回せるようになりたい方は、AI鬼管理でClaude Code／Codexの使い方から業務設計・社内定着まで伴走を受けながら、社内に仕組みを作る道があります。
覚えるより任せたい方は、AIBPO by AI鬼管理でこの記事のような定型業務を丸ごと預ける道があります。総額はいまの業務コストの50%が目安、月額基本料は0円です。
どちらが合うかは、業務量と社内体制次第です。無料相談・無料適合診断で、貴社の場合はどちらが向くかからご相談いただけます。
NEXT STEP
この記事の内容を、あなたのビジネスで
実践してみませんか？
よくある質問
Q. Bootstrapは無料で使えますか？
A. はい、無料で利用できます。オープンソースのライセンスで公開されており、商用サイトでも無料で使用可能です。CDN経由で読み込む場合、追加のインストール費用も発生しません。
Q. BootstrapとTailwind CSSはどちらを学ぶべきですか？
A. Bootstrapは既製のコンポーネントを組み合わせる方式で初心者にも取り組みやすく、Tailwind CSSは細かい調整の自由度が高い分、学習コストがやや高めです。初めてCSSフレームワークに触れる方はBootstrapから始めるのが一般的です。ただし、Claude Codeを活用する場合はどちらの知識も必須ではありません。
Q. HTML・CSSの知識が全くなくても、Bootstrapは使えますか？
A. 基本的なHTML・CSSの理解があった方がスムーズですが、Bootstrapの公式サンプルコードをコピーして使うだけでも、ある程度の見た目は作れます。とはいえ、非エンジニアの方が本格的にサイトを内製したい場合は、Claude Codeに任せる方法の方が現実的です。
Q. Claude Codeで作ったサイトは、Bootstrapを使っているのですか？
A. 場合によります。Claude Codeは要件に応じて最適な実装方法を選ぶため、Bootstrapを使う場合もあれば、別のCSS手法を使う場合もあります。「Bootstrapを使ってほしい」と明示的に伝えることも可能です。
Q. 既存のサイトにBootstrapを後から追加することはできますか？
A. 技術的には可能ですが、既存のCSSとの競合が起きやすいため、慎重な確認が必要です。特に大きく手を加える場合は、一部のページで試験導入してから全体に展開することをおすすめします。
Q. 自社サイトをAIで内製する場合、セキュリティ面は大丈夫ですか？
A. サイトの公開設定・個人情報の取り扱いなど、公開前に確認すべき項目はいくつかあります。特にお問い合わせフォームなど個人情報を扱う機能を実装する場合は、適切なセキュリティ対策（通信の暗号化、入力値の検証など）が組み込まれているかを確認することを推奨します。
Claude Codeで業務自動化を90日で叩き込む
経営者向けの伴走型パーソナルトレーニング
AI鬼管理／AIBPO by AI鬼管理へのお問い合わせ
この記事を読んで気になった方へ。
専門スタッフが、御社に最適な
業務自動化・業務代行プランを無料でご提案します。
- AI業務自動化サービス「AI鬼管理」を運営 — Claude Code を活用し、経営者の業務を「AIエージェントに任せる仕組み」へ転換するパーソナルトレーニングを 伴走構築 で提供。日報・採用・問い合わせ対応・経費精算・議事録・データ集計・営業リスト等の定型業務を、AIに代行させる体制を経営者と一緒に作り込む
- Claude Code 実装ノウハウを 経営者・法人クライアント に直接指導。生成AIを「便利ツール」ではなく 「業務を任せる存在」 として運用する手法を体系化
- 「やらせ切る管理」メソッドの開発者。シンゲキ株式会社（2021年設立・鬼管理専門塾運営）にて累計3,000名以上の学習者を志望校合格に導いた管理メソッドを、AI × 経営者支援 に転用
- 著書『3カ月で志望大学に合格できる鬼管理』(幻冬舎)、『親の過干渉こそ、最強の大学受験対策である。』(講談社)
- メディア出演: REAL VALUE / カンニング竹山のイチバン研究所 / ええじゃないかBiz 他
- 明治大学政治経済学部卒
