バッジデザイナー

バッジデザイナーは badges.ninja に組み込まれたビジュアルキャンバスエディタで、デザインツール不要でプロ仕様のバッジ画像を作成できます。

概要

バッジを作成・編集するときに画像フィールドをクリックするとデザイナーが開きます。テンプレート、テキスト、カスタム背景を組み合わせてバッジ画像を作成できるキャンバスワークスペースを提供します。

テンプレートを選ぶ

デザイナーには 80 を超える組み込みテンプレート が用意され、2 つの軸で整理されているのですばやく探せます。

• 8 つの形状 — 円、角丸正方形、六角形、盾、八角形、ダイヤ、バナー、シール
• 8 つのカラーパレット — ゴールド、シルバー、ブロンズ、ブルー、グリーン、クリムゾン、パープル、グラファイト

選択方法:

1. デザイナーのツールバーで テンプレート をクリックします。
2. ピッカー上部の 形状 と カラー フィルターでリストを絞り込みます。右側のカウンター(例: 8 / 84)が一致するテンプレート数を示します。
3. テンプレートをクリックしてキャンバスに適用します。

生成されるテンプレートは意図的にシンプルです — 形状とパレットを選び、デザイナー上で自分のテキスト・アイコン・リボンを追加してください。

形状・リボン・アイコンの追加

テンプレート以外にも、デザイナーには任意のテンプレートの上に重ねられる 3 つのアセットライブラリが付属します。

• 形状 — 80 を超えるベクター形状(円、盾、六角形、星、メダル、シール、月桂冠、バナー、幾何形状)をカテゴリ別にグループ化
• リボン — 20 種類の装飾リボンオーバーレイ
• アイコン — 50 種類のピクトグラム(原子、アワード、脳、ブリーフケース、証明書、コード、王冠、ダイヤ、ディプロマ、角帽、電球、メダル、ロケット、チェック付き盾、星、ターゲット、トロフィー…)

いずれかのポップオーバーで 1 つ選ぶと、現在の色でキャンバスに挿入されます。各ポップオーバー内の カラーバー で、挿入 前 にアセットの色を変えられます — ツールバー既定とは違う色を使いたいときに便利です。

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

独自の画像を背景として、または上に重ねるレイヤーとしてアップロードできます。

1. デザイナーのツールバーで アップロード をクリックします。
2. PC から画像ファイルを選択します(PNG または JPG 推奨)。
3. 画像は選択可能なオブジェクトとしてキャンバスに配置されます — ドラッグ、拡大縮小、回転、他の要素の背面に送ることができます。

画像のアップロードは テンプレートを消去しません し、既存のレイヤーも消しません — 単に上に重ねるだけです。

全面背景として使う場合は、少なくとも 600×600 ピクセルの正方形画像を使用してください。

テキストの追加

1. ツールバーの テキスト ボタンをクリックします。
2. 新しいテキスト要素がキャンバスに現れます。
3. テキストをクリックして選択し、内容を入力します。
4. キャンバス上で位置を決めるためにテキスト要素をドラッグします。

タイトル、受領者、日付など、バッジの各部分用に複数のテキスト要素を追加できます。

フォントの変更

デザイナーには 11 種類のフォント(Arial、Georgia、Times New Roman、Pacifico、Roboto、Open Sans、Montserrat、Lato、Raleway、Oswald、Playfair Display)が含まれます。

1. キャンバス上のテキスト要素を選択します。
2. ツールバーの フォント ドロップダウンをクリックします。
3. 利用可能なフォントから選びます。

フォントプレビューで、選択前に各オプションの見た目を確認できます。

カラーの変更

ツールバーの カラー ピッカーは 2 つのことを同時に制御します。

• 選択中のテキスト — 選択されたテキスト要素の塗り色を選びます。
• 既定の挿入色 — 次に挿入する形状・リボン・アイコン、および選択中の SVG オブジェクト(ストロークと塗りをその場で再カラー)に適用されます。

パレットから色を選ぶか、hex コードを入力します。各形状/リボン/アイコンのポップオーバー内にも、ツールバーの既定値を変えずに一度だけ色を選ぶための小さな カラーバー があります。

要素の整列

6 ボタンの整列行は、キャンバスを基準に 選択オブジェクト に作用します。

ボタン	動作
左揃え	キャンバスの左端に固定
水平中央揃え	キャンバス X 軸の中央に配置
右揃え	キャンバスの右端に固定
上揃え	キャンバスの上端に固定
垂直中央揃え	キャンバス Y 軸の中央に配置
下揃え	キャンバスの下端に固定

キャンバス中央付近に要素をドラッグすると、紫色の破線の スナップガイド が表示され、オブジェクトが正確に整列します。

複数選択とレイヤー

• Shift を押しながらクリックして複数オブジェクトを選ぶか、キャンバス上で選択ボックスをドラッグします。
• 最背面へ / 最前面へ で Z 順序を制御します。
• Delete キーを押すか、ツールバーの 削除 ボタンで選択を削除します。
• 元に戻す / やり直す(または Ctrl+Z / Ctrl+Shift+Z)で直近 20 回の変更をたどれます。

要素の削除

1. 削除したい要素を選択します(複数の場合は Shift クリック)。
2. ツールバーの 削除 ボタンをクリック、または Delete キーを押します。

良いバッジデザインのヒント

• シンプルに保つ — テキストは明快に、ごちゃごちゃさせない。バッジは小さなサイズで表示されることが多いです。
• ハイコントラスト — テキストが背景で読めるように。
• バッジ名を含める — 受領者と閲覧者が一目で資格を理解できるように。
• 正方形フォーマット — バッジは正方形画像として最もよく表示されます。
• ブランド一貫性 — すべてのバッジで組織のカラーとフォントを使用。
• 小さいサイズでテスト — 100x100 ピクセルでプレビューして可読性を確認。

バッジ画像の保存

デザインに満足したら、デザイナーの 完了 または 保存 をクリックします。キャンバスから画像がキャプチャされ、バッジに添付されます。バッジを作成または保存する際に IPFS へアップロードされます。