READMEバッジジェネレーター
ラベル、メッセージ、色を入力すると、このジェネレーターが静的な shields.io バッジ、つまり README のタイトル下でよく見かけるあの平らな小さなラベル(build | passing、license | MIT、version | 1.4.0)を生成します。ライブプレビューを表示し、貼り付け用に Markdown と HTML の両方を提供します。Shields.io はオープンソースプロジェクトで事実上の標準となっているバッジサービスです。URL の形式はシンプルですが覚えにくいため、小さな GUI があると新しいリポジトリを立ち上げるときに数分を節約できます。
バッジの作り方
-
1
ラベルとメッセージを入力する
ラベルは左半分(グレー)、メッセージは右半分です。バッジに表示したい内容を入力します:`build` / `passing`、`coverage` / `98%`、`license` / `MIT`。
-
2
色を選ぶ
名前付きの色(brightgreen、blue、red、orange)、または `#ff0000` のような 16 進数コードを指定します。これがバッジの右半分を塗ります。
-
3
スタイルを設定する
スタイル(`flat`、`flat-square`、`for-the-badge`、`plastic`、`social`)を選び、必要に応じて simple-icons のスラッグ(github、npm、docker)でロゴを指定します。
-
4
Markdown または HTML をコピーする
README に貼り付けます。任意のリンク URL を追加すると、バッジをクリック可能にできます。Shields.io はリクエストに応じて SVG をレンダリングします。
よく使うバッジのレシピ
このツールは静的な badge/label-message-color 形式を生成します。ライブデータを表示するバッジ(ビルド状況、バージョン、ダウンロード数)が必要な場合は、下記の shields.io URL パターンのいずれかをコピーして、そのまま README に貼り付けてください。
| 目的 | shields.io の URL パターン |
|---|---|
| npm バージョン | https://img.shields.io/npm/v/{package} |
| npm ダウンロード数 | https://img.shields.io/npm/dm/{package} |
| GitHub スター数 | https://img.shields.io/github/stars/{owner}/{repo} |
| GitHub の最終コミット | https://img.shields.io/github/last-commit/{owner}/{repo} |
| GitHub のワークフロー状況 | https://img.shields.io/github/actions/workflow/status/{owner}/{repo}/{workflow.yml} |
| ライセンス | https://img.shields.io/github/license/{owner}/{repo} |
| PyPI バージョン | https://img.shields.io/pypi/v/{package} |
| Docker プル数 | https://img.shields.io/docker/pulls/{org}/{image} |
| Codecov のカバレッジ | https://img.shields.io/codecov/c/github/{owner}/{repo} |
| 静的ラベル | https://img.shields.io/badge/{label}-{message}-{color} |
バッジスタイルの比較
- flat、クラシックな角丸の長方形。デフォルトです。
- flat-square、角が鋭く、やや現代的なデザイン。
- for-the-badge、すべて大文字のブロック体で、最大限に目を引きます。
- plastic、グラデーションと内側の影で、昔ながらの雰囲気。
- social、丸い角と落ち着いた色合いで、GitHub 自身のスター/フォークボタンになじみます。
バッジを使うべきとき
- ビルド + カバレッジ、プロジェクトが実際にメンテナンスされていることを訪問者に示します。
- バージョン + ダウンロード数、使われていることを示します。
- ライセンス、貢献や利用を検討する人に向けた法的なシグナルです。
- ドキュメントリンク、外部のドキュメントサイトや rustdoc.rs。
- チャット/サポート、Discord、Matrix、GitHub Discussions へのリンク。
バッジを使わないほうがよいとき
- 決して更新されない見栄えだけの指標。 スター 0 のリポジトリに「スター」バッジを付けると、プロジェクトが死んでいるように見えます。
- 考えられるあらゆる指標。 バッジ 5 つは物語を語りますが、15 個では何も伝わりません。
- 重複した情報。 ライセンスと「MIT」を二度書く、あるいはバージョンをバッジと本文の最初の行の両方に表示する。
- 使っていないサービスのバッジ。 カバレッジレポートを設定していないなら Codecov を追加しないでください。壊れたバッジは、バッジがないより悪いです。
キャッシュと信頼性
Shields.io はリクエストを積極的にキャッシュします。更新が遅いバッジは、たいていキャッシュのクリア(?v=2 を追加)か数分待つだけで済みます。shields.io がダウンしている場合、GitHub は画像なしで「shields」という文字を表示しますが、すぐに復旧します。
よくある質問
いいえ。Shields.io は無料で、寄付によって運営されています。利用量が非常に多いユーザーには、セルフホストまたはプロジェクトへの支援をお願いしています。
はい。Shields はオープンソースで、自分のドメインで動かせます。ただし、ほとんどのプロジェクトではその必要はありません。無料サービスで十分に信頼できます。
キャッシュです。?cacheSeconds=60 または ?v=anything を追加して更新を強制してください。反映まで数分かかることがあります。
はい。?logo=github(または任意の simple-icons スラッグ)を追加してください。アイコンの色は ?logoColor=white で調整できます。
いいえ。すべてブラウザ内で実行され、URL はコピー用にクライアント側で生成されます。
関連ツール
ASCII表リファレンス
0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。
HTML文字参照
HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。
キーボードショートカット一覧
macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。
JavaScript圧縮ツール
変数名のリネーム、空白の削除、デッドコードの除去、定数畳み込みでJavaScriptを圧縮し、より小さなバンドルを作成します。
EditorConfig ジェネレーター
インデント、改行コード、文字コードのルールから .editorconfig を作成し、リポジトリで使っている言語ごとに正しいセクションを追加します。Python、Go、YAML、Makefile などに対応。
メールアドレス検証ツール
メールアドレスを検証します。RFC 5322構文チェック、MXレコードのライブ確認に加え、ローカル部、ドメイン、長さの詳細を表示します。メールは送信されません。
このツールは他の言語でも利用できます
- Generator odznak README [PL]
- เครื่องสร้างแบดจ์ README [TH]
- مولد شارات README [AR]
- Gerador de Distintivos README [PT]
- Generador de Insignias README [ES]
- README-Badge-Generator [DE]
- Bộ tạo huy hiệu README [VI]
- README-badgegenerator [SV]
- README-badgegenerator [NL]
- Générateur de badge README [FR]
- Generator Badge README [ID]
- README 배지 생성기 [KO]
- README Badge Generator [EN]
- Generatore di Badge README [IT]
- Генератор бейджей README [RU]
- README Rozet Üreteci [TR]
- README 徽章生成器 [ZH]