Bootstrap導入でRailsのデザインを向上させよう

フロントエンド開発•2025/2/6

はじめに

Railsはアプリケーション開発を素早く進めるのに役立つフレームワークです。
ただし、見た目のデザインを整えるとなると、HTMLやCSSを一から書くのに苦労するかもしれません。

そこで、多くの開発者がBootstrapを導入してデザインを効率よくまとめています。
Bootstrapにはすぐに使えるスタイルやコンポーネントが豊富に用意されているため、Railsのアプリケーションでも短い時間で外観をアップグレードできます。
ここでは、初心者の方でも理解しやすいよう、導入手順から具体的な使い方まで一歩ずつ確認していきましょう。

この記事を読むとわかること

RailsにBootstrapを組み込む手順
実務で役立つRails内でのBootstrapファイル構成のポイント
主要なコンポーネントを使った具体例
デザインをより使いやすくするためのカスタマイズ方法
トラブルを回避するための対策とヒント

Rails開発にBootstrapを導入する意義

デザインを短時間で整える

一からCSSを組むのは大変と感じる方もいるでしょう。
Bootstrapを使うと、標準で用意されているクラス名をHTMLに適用するだけで見栄えが整います。
たとえば、ボタンやフォーム、ナビゲーションバーなど、Webサイトでよく見るパーツのスタイルを簡単に取り入れられます。

Bootstrapの最大の特長は、統一感のあるデザインがすぐに手に入る点です。
初心者でも専門的なCSSを手書きする時間が削減されるので、プロトタイプの開発や学習フェーズでの実装スピードが高まります。

チーム開発の効率向上

Railsを使ったチーム開発では、フロントエンドの実装経験が浅いメンバーが参加する場合もあります。
統一されたデザインルールがないと、各ページでスタイルやレイアウトのばらつきが生じやすいです。

Bootstrapのプリセットデザインを使えば、チーム全員が共通のスタイルを適用でき、どこを誰が編集しても同じデザイン指針のもとで開発が進められます。
結果として、デザインガイドラインを細かく作らなくても整合性がとれ、確認作業もスムーズになるでしょう。

UIコンポーネントの活用例

BootstrapのUIコンポーネントは、Webページでよく使う要素が一通り網羅されています。
たとえば、アラートメッセージを表示するためのクラスや、ナビゲーションバーを簡易的に作るコンポーネントもすぐに利用できます。

Bootstrapのコンポーネントは、公式ドキュメントを見ると用途別にサンプルコードが多数提示されています。目的に合ったコンポーネントを探しやすいです。

Railsの部分テンプレート機能（partial）を活用すると、コンポーネントを複数の画面で使い回すことができ、コードの重複を減らしながら統一感を持たせやすくなります。

基本的な導入手順

Gemfileやパッケージ管理ツールへの追加

RailsプロジェクトにBootstrapを導入する際は、以下のようにパッケージ管理の設定を行う方法があります。
Railsのバージョンや使っている仕組みによって手順は多少異なりますが、例としてパッケージを追加する流れを見てみましょう。


# Yarnなどを使ってBootstrapをインストールする例
yarn add bootstrap

また、CSSとJavaScriptを管理する際に、RailsのアセットパイプラインかWebpackを使っているなら、追加で設定ファイルを変更する必要があります。
事前にエラーが出ないよう、インストール後にRails側のビルド設定やCSSの読み込み設定を確認しておきましょう。

Railsのアセットで読み込む

Bootstrapを読み込むには、Railsのapp/assets/stylesheetsフォルダやapp/javascriptフォルダに対応するファイルを置いて、適切にアプリケーションへインポートします。
どのような方法を取るかは、Webpack・importmapなどの設定によって少し変わります。

よくある例として、CSSファイル内で次のように書く方法があります。


/* app/assets/stylesheets/application.css */
/* 既存コードの上部や下部などに追加 */
@import "bootstrap";

JavaScriptも一緒に使う場合は、RailsでJSパックを扱う仕組みに基づき、app/javascript/packs/application.jsなどで読み込むようにします。
こうしてBootstrapのスタイルと機能がRailsプロジェクトで使えるようになります。

RailsでのBootstrapファイル構成

ディレクトリの整理

RailsでBootstrapを使う場合、Railsのディレクトリ構造がそのまま活きてきます。
たとえば、スタイルをカスタマイズしたいときにはapp/assets/stylesheets配下に自作ファイルを用意して、必要に応じてBootstrapのクラスを上書きします。

コードの見通しを良くするために、layoutsやpartialsなどのフォルダを作成し、各ページで共通する要素をまとめるのもポイントです。
このとき、Bootstrapのコンポーネントを集めた.scssファイルを別途用意しておくと便利です。

application.html.erbへのリンク

Railsでは、通常app/views/layouts/application.html.erbにCSSやJavaScriptを読み込むタグが含まれています。
Bootstrapを導入したら、レイアウトファイルの中で適切にスタイルやスクリプトが反映されているかを確認します。

例えば、次のような記述をしておけば、BootstrapのJavaScriptを利用するアクション（モーダルウィンドウの開閉など）も問題なく動作するでしょう。


<!-- app/views/layouts/application.html.erb -->
<!DOCTYPE html>
<html>
  <head>
    <title>MyRailsApp</title>
    <%= stylesheet_link_tag "application", media: "all" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

このレイアウトはすべてのビューで読み込まれるため、BootstrapのCSSとJavaScriptを一度設定すれば、各画面で同じデザインを適用できるのが利点です。

実務での活用シーン

パーシャルを使ったレイアウトの共通化

Railsでは、共通部品を パーシャル (partial)に切り出す習慣があります。
たとえば、ナビバーやフッターを_navbar.html.erbや_footer.html.erbのように分けておくことで、複数のビューに再利用が可能です。

このときBootstrapのスタイルを適用すれば、ナビバー用の.navbarクラスや.navbar-brandクラスを一度書くだけで全画面に反映できます。
変更が必要になってもパーシャルファイルを修正するだけなので、メンテナンス性が向上します。

カスタムSCSSで色合い・フォントを調整

「色が既定のままだと他サイトと似てしまう」「フォントサイズを少し大きくしたい」といった場合は、BootstrapのSCSS変数を上書きするとよいでしょう。
SCSSを使うと、以下のように変数を定義してBootstrapのデフォルト設定を変更できます。


// カスタマイズ用SCSS例
$primary: #3459eb;
$font-size-base: 16px;

// Bootstrapをインポートする前に変数を上書き
@import "bootstrap";

こうすることで、アプリ全体の配色や文字サイズが柔軟にカスタマイズでき、オリジナルデザインとBootstrapの手軽さを両立できます。

Bootstrapの主なコンポーネント

ボタン

ボタンは「btn」というクラスを基本に、様々なバリエーションがあります。
「btn-primary」を指定すると目立つ色合いのボタンに、「btn-outline-secondary」なら枠線のみの落ち着いたスタイルになります。
Railsのリンクヘルパーにクラスを追加すれば、すぐにボタン風のリンクを作れます。


<%= link_to "詳細を見る", some_path, class: "btn btn-primary" %>

必要に応じて別のクラスを組み合わせることで、サイズや表示方法を細かくコントロールできます。

ナビバー

ナビゲーションバーは、サイトのヘッダー部分にメニューをまとめるのに便利です。
Bootstrapでは.navbarや.navbar-expand-lgを使うと、画面幅が狭いときにはドロップダウンメニューに切り替わります。
レスポンシブ対応が自動化されるので、複数のデバイスで見やすいUIを簡単に作れます。

フォーム

フォームはユーザーから入力を受け取る重要な部分です。
Bootstrapを使うと、ラベルや入力欄、バリデーションエラーの表示が整理され、視認性が向上します。
Railsのフォームヘルパーと合わせれば、例えば次のようにクラスを設定して入力欄を整えます。


<%= form_with model: @user, local: true do |f| %>
  <div class="mb-3">
    <%= f.label :name, class: "form-label" %>
    <%= f.text_field :name, class: "form-control" %>
  </div>
  <div class="mb-3">
    <%= f.label :email, class: "form-label" %>
    <%= f.email_field :email, class: "form-control" %>
  </div>
  <%= f.submit "登録", class: "btn btn-primary" %>
<% end %>

このように、Bootstrapのクラスを割り振るだけで、フォーム要素の間隔や文字の配置が整います。

テーブル

データを一覧で表示する場面では、テーブルを利用することが多いです。
Bootstrapであれば.tableや.table-stripedなどを付与すると、行の色が交互に変わったり、ヘッダーが自動で強調されたりします。
大きなデータを扱うページでも見やすく整理できるため、ユーザーが目的の情報を素早く把握できるようになるでしょう。

レスポンシブ対応のポイント

メディアクエリを使わなくてもOK

レスポンシブデザインというと、画面サイズに応じてメディアクエリを設定しなければならないイメージがあるかもしれません。
しかし、Bootstrapではグリッドシステムやクラス名だけでレイアウトを切り替える仕組みが用意されています。
たとえば、.col-md-6というクラスを付けると、中サイズ以上の画面では横幅が6等分になり、スマートフォンサイズでは縦一列になるように自動的に調整されます。

主要なBreakpointの理解

Bootstrapでは、画面幅を区切るBreakpointsが複数設定されています。
「.col-sm-12」「.col-md-6」「.col-lg-4」など、サイズごとのクラス名を使い分ければ、デバイス幅に応じたカラムの割り当てがスムーズです。
実際にデバッグツールで画面幅を変えながら表示をチェックすると、細かなレイアウト崩れを早めに見つけやすくなります。

デザインをより良くするための工夫

テーマカラーやフォントの統一

Bootstrapは標準でよく使われる色合いを備えていますが、開発中のRailsアプリケーションに合わせてテーマカラーを変えたいケースが多いでしょう。
この場合は、SCSS変数の再定義や別途CSSファイルでの上書きが役立ちます。

色だけでなく、フォントも好みに合わせて変更できます。
Bootstrapでは明示的に特定のフォント指定が少ないため、bodyタグなどにフォントファミリーを指定すれば、全体を簡単に統一できます。

カスタムクラスで独自のスタイルを追加

Bootstrapが用意していないデザインや、アニメーション効果を与えたい場合は、カスタムクラスを付与すると便利です。
以下のように、自作のCSSを定義して、必要に応じてクラスをHTMLタグに付けるだけで独自の装飾ができます。


.special-button {
  background-color: #123456;
  border-radius: 8px;
  color: #ffffff;
  padding: 10px 20px;
  &:hover {
    background-color: #0f2e5c;
  }
}

このカスタムクラスを、class="btn special-button"のように指定すれば、Bootstrapのボタンスタイルに加えて自分の好みの見た目を追加できます。

トラブルシューティングとヒント

クラスの競合に注意

Bootstrapを導入すると、Rails独自のCSSや他のライブラリとクラス名が衝突することがあります。
この場合、予期せぬ見た目になったり、意図した動作が行われなかったりするかもしれません。
一部コンポーネントの命名を変更したり、Bootstrapを読み込む順番を調整するなど、小さな工夫で競合を回避できます。

JavaScriptが効かないときのチェック

モーダルやドロップダウン、トグルメニューなど、BootstrapのJavaScriptコンポーネントが動かない場合は、依存しているライブラリの読み込み順序を確認します。
たとえば、BootstrapのJSコンポーネントは通常ポップアップにPopperが必要です。
Railsのビルド設定によっては読み込み順が前後して動作しないことがあるので、application.jsの記述を見直すことをおすすめします。

レイアウト崩れの原因を探す

サードパーティのプラグインや追加のスタイルを適用したとき、配置や余白がズレてしまうケースも考えられます。
こうした場合は、開発者ツールで要素を選択し、どのCSSが適用されているかを確かめると原因究明に役立ちます。
一部のスタイルが強い優先度で上書きされていることが多いので、!importantの使い過ぎやCSSの重複に注意しましょう。

セキュリティとメンテナンス

不要なコンポーネントの削除

Bootstrapには、使わない機能まで含まれていることが多いです。
ファイルサイズをなるべく小さくし、読み込み時間を短縮したい場合は、不要なコンポーネントを削除することも選択肢です。
SCSSのインポート時に必要なモジュールだけ取り込む方法があります。

バージョン管理とアップデート方針

BootstrapやRailsは定期的に機能追加やバグ修正が入ります。
チーム開発では、Gemfileやパッケージ管理ファイルでバージョンを固定しつつ、セキュリティアップデートが出たときに対応できる体制を整えると安心です。
実装を変える必要がある場合もあるので、事前にリリースノートを確認して適用を進めると良いでしょう。

複数の拡張ライブラリも含める場合、BootstrapやRailsのバージョンアップとの互換性に注意が必要です。

まとめ

RailsアプリケーションにBootstrapを導入すると、デザインを短時間で整えられます。
標準のコンポーネントが充実しているおかげで、ページの統一感を失わず、開発効率も高まるでしょう。

さらに、パーシャルやSCSSでの変数上書きを組み合わせれば、単なる既製品の利用にとどまらず、アプリ独自の見た目を手軽に実装できます。
一方で、JSコンポーネントの読み込み順序やクラスの競合など、細かな点に留意しないと予期せぬ表示崩れが起きることもあります。

いずれにせよ、BootstrapをRailsに導入するメリットは大きいです。
各ページのUIを整理することで、ユーザーにわかりやすいサービスを提供できる可能性が広がります。
初めは基本的なコンポーネントの導入から始め、慣れてきたらSCSS変数の上書きやパーシャルの活用を進めてみてください。
そうすれば、Railsが得意とする開発のしやすさと、Bootstrapの手軽なデザイン性を同時に楽しめるはずです。