バッジ・ボタン作成とは？
バッジ/ボタンメーカーは、テキスト・色・形状を自由に選んでカスタムバッジやシールドを作成できるツールです。ラベルと値を入力し、スタイルを選んでPNGまたはSVGでダウンロードできます。
shields.io 風のバッジ(灰色のラベルと色付きの値に分かれたカラフルな丸長方形)をインライン SVG で生成します。flat、flat-square、rounded、pill、for-the-badge の 5 つの形から選び、左右の色に加えてラベルと値の文字色も別々に 16 進数で指定できます。GitHub・npm・Docker・Python・Node.js などのテクノロジー ロゴをワンクリックで挿入でき、ブランドカラーも自動で反映されます。バッジをクリック可能なリンク URL で包み、README 用の Markdown、メールや Web ページ用の HTML、シャープな SVG、3 倍解像度の PNG として書き出せます。複数のバッジをリストに追加して、すべての Markdown を一度にコピーしたり .md ファイルとして保存することもできます。幅はテキストに合わせて自動調整されるので、'Build / Passing' や 'License / Apache 2.0' も手動調整なしできれいに整います。
使い方
- バッジのテキストを入力します。ラベル（左側）に「Version」、値（右側）に「2.0」のように設定します。
- ラベルと値の背景色を選び、形を決めて、必要ならテクノロジー ロゴを左側に追加します。
- バッジが更新される様子を見ながら、PNG・SVG でダウンロードしたり、Markdown または HTML でコピーして README やページに貼り付けます。
使用するタイミング
- CI を組まずに GitHub README にビルド・バージョン・カバレッジのバッジを足す。
- ランディングページの機能行や料金プランに 'Beta'、'New'、'Pro' を貼り付ける。
- ポートフォリオや PDF 履歴書で技術スタックのチップを目立たせる。
結果
プロジェクトステータスバッジを作成：ラベル「Build」を灰色、値「Passing」を緑、フラットスタイル。GitHubリポジトリにあるようなステータスバッジができます。
よくある質問
- shields.io を使わず PNG を自前で置いても表示されますか?
- されます。ダウンロードした SVG・PNG は自己完結のファイルで、どのサーバーも叩きません。代わりにライブデータは持てません。'version 1.2' のバッジは再生成するまでずっと 1.2 のままです。
- flat、rounded、pill の違いは?
- flat は薄いグラデーション付きの直角コーナー、flat-square は同じ形のグラデなし版、rounded は半径 4 px の丸み、pill は両端を完全な半円に、for-the-badge は README で定番の太字・背高・全大文字のスタイルです。周りの UI に合う形を選んでください。
- デフォルトの緑+グレーじゃなくブランドカラーにできますか?
- できます。ラベル色・値の色に加え、左右それぞれの文字色も独立した HEX 選択になっています。暗いラベルに明るい文字、鮮やかな値を組み合わせれば高コントラストにできます。プレビューは入力中も即時更新されます。
- SVG と PNG どちらを選ぶべき?
- 拡大される可能性のある GitHub README やサイトには SVG(常にシャープ)。Word、Slack のメッセージ、SVG を描画しないスクショ系ツールに貼るなら PNG。
- PNG が SVG より大きいのはなぜ?
- 高 DPI 画面でも鮮明に見えるよう、PNG は表示サイズの 3 倍解像度でレンダリングしています。典型的なバッジ SVG は 1KB 未満、PNG は 5〜15KB ぐらいです。サイズ重視なら SVG、互換性重視なら PNG。