🎨

Bootstrapのクラス名で迷子になっていたので、爆速で「色見本ツール」を自作した話

に公開
Bootstrap
React
TypeScript
個人開発
color
idea

はじめに

こんにちは。普段はWeb開発の現場でPMやエンジニアをしています。

現場でBootstrap（React-Bootstrap含む）を使って開発をしていると、メンバーからよくこんな悩みを聞くことがありました。

  • 「primary と info、どっちの青が今回のデザインに合いますかね？」
  • 「warning の黄色って、文字色にすると読みにくくないですか？」
  • 「公式ドキュメントを行ったり来たりするのが地味に面倒です…」

確かにBootstrapのUtility Classは便利ですが、**「実際の色味」と「クラス名」**を脳内で一致させるのには慣れが必要です。特に経験の浅いメンバーにとっては、ドキュメントを探す時間も積もれば大きなロスになります。

そこで、**「一目で全カラーが確認できて、ワンクリックでクラス名をコピーできる自分用ツール」**を週末にサクッと作ってみました。

チーム内で共有したところ意外と好評だったので、Qiita/Zennの皆さんにも共有します。

作ったもの：Bootstrap Colors

シンプルに、Bootstrapのカラーパレットを一覧化したツールです。

🔗 Demo:
https://tools.web-society.com/tools/bootstrap-colors

こだわったポイント（機能）

機能は極限まで削ぎ落とし、**「作業中に秒で使える」**ことだけに特化させました。

  1. 視認性重視のグリッド表示

    • 背景色（bg-*）と文字色（text-*）を並べて表示し、実際の見え方をその場で確認できるようにしました。

  2. ワンクリックでコピー

    • カラーコードやクラス名を手打ちするのはミスの元です。
    • カードをクリックするだけで、bg-primary や text-success といったクラス名がクリップボードにコピーされるようにしています。

  3. 余計な情報を置かない

    • 広告や複雑なナビゲーションは排除し、開いた瞬間に目的の情報にたどり着けるようにしました。

技術スタック

今回は「とりあえず動くものを最速で提供する」ことを優先し、使い慣れたスタックで構築しています。

  • Framework: React
  • Language: TypeScript
  • UI: Bootstrap 5

なぜわざわざ作ったのか（背景）

開発リーダーやPMの役割として、**「メンバーが本質的なロジックの実装に集中できる環境を作ること」**は非常に重要だと考えています。

「色の確認」や「クラス名のtypo修正」といった些細なつまずきも、頻発すればモチベーションや集中力を削ぐ原因になります。
**「ドキュメントを調べる手間をツールでゼロにする」**ことで、少しでもチームの開発体験（DX）が良くなればと思い、実装しました。

（というのは建前で、自分自身がよく「あれ、tealってどんな色だっけ？」と忘れるので、自分用メモとして欲しかったのが本音です笑）

おわりに

もしBootstrapを使っている現場で、同じように「色味の確認が面倒だな〜」と感じている方がいれば、ぜひブックマークして使ってみてください。

🔗 Bootstrap Colors を使う

少しでも皆さんの開発効率アップに役立てば幸いです！

Discussion