READMEバッジジェネレーター

Markdown
結果

ラベル、メッセージ、色を入力すると、このジェネレーターが静的な shields.io バッジ、つまり README のタイトル下でよく見かけるあの平らな小さなラベル(build | passinglicense | MITversion | 1.4.0)を生成します。ライブプレビューを表示し、貼り付け用に Markdown と HTML の両方を提供します。Shields.io はオープンソースプロジェクトで事実上の標準となっているバッジサービスです。URL の形式はシンプルですが覚えにくいため、小さな GUI があると新しいリポジトリを立ち上げるときに数分を節約できます。

バッジの作り方

  1. 1

    ラベルとメッセージを入力する

    ラベルは左半分(グレー)、メッセージは右半分です。バッジに表示したい内容を入力します:`build` / `passing`、`coverage` / `98%`、`license` / `MIT`。

  2. 2

    色を選ぶ

    名前付きの色(brightgreen、blue、red、orange)、または `#ff0000` のような 16 進数コードを指定します。これがバッジの右半分を塗ります。

  3. 3

    スタイルを設定する

    スタイル(`flat`、`flat-square`、`for-the-badge`、`plastic`、`social`)を選び、必要に応じて simple-icons のスラッグ(github、npm、docker)でロゴを指定します。

  4. 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 はコピー用にクライアント側で生成されます。

関連ツール

このツールは他の言語でも利用できます