メインコンテンツへスキップ
Awesome Toolkit
バッジ作成・無料

バッジを作成する

READMEやWebサイト用の「ラベル｜メッセージ」形式のバッジをデザイン。明るい背景と暗い背景で見え方を確認して、貼り付けるコードをコピーできます。

あなたのバッジ

files: processed locally
貼り付けるコード
![files: processed locally](https://awesometoolkit.com/api/badge?label=files&message=processed+locally&color=44cc11&labelColor=555555)

内容

既製のバッジ

外観

メッセージの色
ラベルの色

リンク

クリックすると、バッジを入力済みの状態でこのジェネレーターが開きます。ほかの人も同じようなバッジを作れます。読む人を別の場所に案内したいなら「自分のリンク」を選んでください。

くわしく知る

バッジのすべて

READMEのバッジの役割

バッジは、READMEの先頭に並ぶ小さな「ラベル｜メッセージ」型のパーツです。ライセンス、ビルドの状態、バージョン、コントリビューションの方法など、プロジェクトの概要を、どの開発者にも伝わる形でまとめます。

MarkdownとHTML、どちらにする？

GitHub、GitLab、多くのパッケージレジストリのREADMEで読み込まれるのはMarkdownです。Webサイトや、READMEでサイズを指定したりバッジを1行に揃えたりしたいときはHTMLを使いましょう。

使い方

バッジを作る方法

  1. 文字を書く

    既製のバッジから始めるか、ラベルとメッセージを入力します。

  2. 色を付ける

    色とスタイルを選びます。プレビューでは、GitHubの2つのテーマのように、明るいページと暗いページでの見え方を確認できます。

  3. 貼り付ける

    README用にはMarkdown、Webサイト用にはHTMLをコピーするか、SVGをダウンロードします。

活用ガイド

コツとガイド

読む人の役に立つバッジ

READMEの先頭にいくつかバッジを置けば、ライセンス、状態、コントリビューションを歓迎しているかなど、最初の疑問にひと目で答えられます。

短く、数は少なめに（3〜5個）。それぞれのバッジから、答えのある場所（ライセンスファイル、ドキュメント）にリンクしましょう。

プロのコツ

登録不要

アカウントもトラッキングもありません。バッジの画像は、表示されるたびにアドレスから生成されます。

外部に依存したくないなら、SVGをダウンロードしてプロジェクトと一緒にホスティングしましょう。

プライバシー
よくある質問

よくある質問

バッジについて知っておきたいこと