バッジデザイナー

バッジデザイナーは、badges.ninja に組み込まれた 3 カラム構成のビジュアルなキャンバスエディターで、外部のデザインツールなしでプロフェッショナルなバッジ画像を作成できます。

概要

デザイナーは Create / Edit Badge ウィンドウの中でそのまま開きます。構成は 3 つの部分です。

• 左レール — 中央のパネルを Templates、Uploads、Elements、Text、Attributes、QR Codes、Layers の間で切り替えます。
• パネル — 選択したレールモードのツールです。
• キャンバス — ライブで編集できるバッジのプレビューです。追加したものはすべて、移動、スタイル変更、並べ替え、削除ができる、選択可能な実際のオブジェクトです。

バッジの詳細（Issuer、Name、Description、Criteria、Share Text）はキャンバスの真下にあるため、デザインとクレデンシャル情報が 1 つのウィンドウにまとまっており、別の手順はありません。

テンプレートから始める

レールの Templates をクリックすると、組み込みのデザインを閲覧できます。Recognition ファミリーでは、形状フレームと編集可能なプレースホルダーテキスト（組織名、タイトル、サブタイトル、検証シール）を組み合わせた完成度の高いバッジを、8 色のカラーパレット（Gold、Silver、Bronze、Blue、Green、Crimson、Purple、Graphite）で利用できます。Category フィルターで一覧を絞り込むか、Blank canvas で白紙から始めます。

テンプレートをクリックすると適用されます。テキストは通常の編集可能なレイヤーになり、変更も削除も自由です。固定されているものはありません。

Elements — 図形、アイコン、リボン、背景

Elements パネルでは、バッジの上にグラフィックを重ねられます。

• Lines — 水平 / 垂直の罫線。
• Shapes — 塗りつぶしおよび枠線のみの四角形、角丸四角形、円、三角形。
• Icons — 70 種類の絵文字風アイコン（award、brain、certificate、code、crown、diploma、graduation-cap、medal、rocket、shield-check、star、trophy など多数）。検索できます。
• Ribbons — 28 種類の装飾リボンのオーバーレイ。Straight / Pointed / Tails / Decorative にグループ分けされています。
• Bases — カテゴリ別（円、盾、六角形、星、メダル、シール、リース、バナー、幾何学）の 80 種類の色変更可能なベース図形。

すべてのアイコン、リボン、ベースは現在の色で挿入され、いつでも色を変更できます。

背景シェイプ

Elements → Background shapes には、68 種類の既製フレーム（形状 × パレットのライブラリ）があります。適用すると、テキストと要素をそのまま上に残してバッジの背景フレームだけが入れ替わります。構成済みのテンプレートを使わずに、特定の形状と色の組み合わせにしたい場合に便利です。

カスタム画像のアップロード

Uploads パネルで、自分のロゴ、写真、グラフィックを追加できます。PNG、JPEG、SVG を、最大 5 MB まで使用できます。画像は通常の前景オブジェクトとして挿入され、デザインの上に重なり、背景を消すことはありません。バッジの背景を変更するには、代わりにテンプレートまたは背景シェイプを選んでください。

テキストの追加とスタイル設定

Text パネルでは次のことができます。

• Add heading / subheading / normal text — サイズがあらかじめ設定されたテキストオブジェクト。
• Combinations — Certificate of Achievement、Awarded to 、Verify at のような既製の組み合わせ。各行は個別に編集できます。

任意のテキストオブジェクトを選択すると、キャンバスの上にコンテキストツールバーが表示されます。

• Font — Sans、Serif、Handwriting、Mono、System にグループ分けされた 50 種類のフォントのライブラリ。ドロップダウンから選択でき、各項目はそれぞれの書体でプレビューされます。
• + Font — ブランドの書体（TTF、WOFF、WOFF2、OTF）を現在のセッション用にアップロードします。
• Font size — − / + ステッパー（または数値の入力）で、ハンドルをドラッグせずに選択したテキストのサイズを正確に変更できます。
• Colour — 選択したテキストの塗りつぶし色（および新しい図形やアイコンの既定の挿入色）を設定します。
• Alignment — 6 つのボタンで、キャンバスを基準に選択範囲を左 / 中央 / 右、上 / 中央 / 下に揃えます。

動的属性

Attributes パネルは、動的トークン（、、、、、）をテキストオブジェクトとして挿入します。各トークンは発行時に受領者ごとに解決されるため、1 つのデザインで発行先の全員に合わせたパーソナライズができます。受領者の名前や発行日をバッジ自体に入れる方法はこれです。

QR コード

QR Codes パネルは、 に紐づくスキャン可能なコードを挿入します。発行された各クレデンシャルでは、そのクレデンシャルの公開検証ページに解決されるため、印刷されたバッジを誰でもスキャンして確認できます。

レイヤー

Layers パネルには、キャンバス上のすべてのオブジェクトが一覧表示されます。ここから各レイヤーを並べ替え（前面へ / 背面へ）、表示/非表示、選択、削除できます。背景フレームは最下部に固定され、操作できない状態のままなので、前景の要素がすべてのクリックを受け取ります。

元に戻す / やり直し（Ctrl+Z / Ctrl+Shift+Z）は直近 20 回の変更をたどれます。また、オブジェクトをキャンバスの中央付近にドラッグすると、破線のスナップガイドが表示されます。

バッジの保存

別の「エクスポート」手順はありません。デザインと詳細の準備ができたら:

• Create Badge はキャンバスを PNG として取得し、当社の画像 CDN（Amazon S3、不変のコンテンツアドレス指定 URL で配信）にアップロードして、編集可能なデザインとともにバッジを保存します。そのため、バッジを開き直すと個々のレイヤーが復元され、さらに編集できます。
• Save Draft は作業中のバッジをサーバー側に（デバイス間で）保存します。下書きは Badges 一覧に Draft マーク付きで表示され、いつでも続きから作業できます。

優れたバッジデザインのコツ

• シンプルに — 文字は明確に、余計な要素は最小限に。バッジは小さく表示されることが多くあります。
• 高いコントラストを使う — 背景に対してテキストが読みやすいようにします。
• クレデンシャルに名前を付ける — 見た人が一目で理解できるようにします。
• 正方形のフォーマット — バッジは正方形が最もきれいに表示されます。
• ブランドの一貫性 — 組織の色とフォントをすべてのバッジで再利用します。
• 再利用できるデザインを保存する — 作成したバッジはすべてアカウントテンプレートとしても保存され、次回そこから始められます（My Templates を参照）。