バッジデザイナー

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

概要

デザイナーは バッジの作成 / 編集 ウィンドウの中でそのまま開きます。3 つの部分で構成されています。

• 左レール — 中央のパネルを テンプレート、アップロード、要素、テキスト、属性、QRコード、レイヤー の各モードに切り替えます。
• パネル — 選択中のレールモードに対応するツール。
• キャンバス — バッジのライブで編集可能なプレビュー。追加したものはすべて、移動・再スタイル・並べ替え・削除できる実際の選択可能なオブジェクトです。

バッジ詳細(発行者、名称、説明、基準、共有テキスト)はキャンバスの真下に配置されており、デザインと資格情報が 1 つのウィンドウ内にまとまっています — 別々のステップはありません。

テンプレートから始める

レールの テンプレート をクリックすると、組み込みのデザインを閲覧できます。Recognition ファミリーは、完全に構成されたプロ仕様のバッジ — 形どられたフレームに加え、編集可能なプレースホルダーテキスト(組織名、タイトル、サブタイトル、認証シール)— を 8 つのカラーパレット(ゴールド、シルバー、ブロンズ、ブルー、グリーン、クリムゾン、パープル、グラファイト)で提供します。カテゴリ フィルターでリストを絞り込むか、空のキャンバス で一から始めることもできます。

テンプレートをクリックすると適用されます。そのテキストは通常の編集可能なレイヤーになり、変更や削除が可能です — 何も固定的に埋め込まれていません。

要素 — 形状・アイコン・リボン・背景

要素 パネルは、バッジの上にグラフィックを重ねます。

• 線 — 水平 / 垂直の罫線。
• 形状 — 塗りつぶし・輪郭の長方形、角丸長方形、円、三角形。
• アイコン — 70 種類のピクトグラムアイコン(アワード、脳、証明書、コード、王冠、ディプロマ、角帽、メダル、ロケット、チェック付き盾、星、トロフィーなど多数)、検索可能。
• リボン — 28 種類の装飾リボンオーバーレイ。ストレート / ポインテッド / テール / デコラティブにグループ分けされています。
• ベース — 80 種類の再カラー可能なベース形状(円、盾、六角形、星、メダル、シール、月桂冠、バナー、幾何形状の各カテゴリ)。

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

背景形状

要素 → 背景形状 には、68 種類の既製フレーム(形状 × パレットのライブラリ)があります。適用すると、テキストや要素は上に残したまま バッジの背景フレームだけを差し替えます — 構成済みテンプレートを使わずに、特定の形状 / カラーの組み合わせを使いたいときに便利です。

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

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

テキストの追加とスタイリング

テキスト パネルでは次のことができます。

• 見出し / 小見出し / 標準テキストの追加 — サイズが事前設定されたテキストオブジェクト。
• 組み合わせ — Certificate of Achievement、Awarded to 、Verify at のような既製のスタック — 各行は個別に編集可能なままです。

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

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

動的属性

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

QRコード

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

レイヤー

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

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

バッジの保存

別途「エクスポート」ステップはありません。デザインと詳細が整ったら次を行います。

• バッジを作成 は、キャンバスを PNG としてキャプチャし、IPFS へアップロードして、編集可能なデザインとともにバッジを保存します — バッジを再度開くと個々のレイヤーが復元され、さらに編集できます。
• ドラフトを保存 は、作成途中のバッジをサーバー側に保存します(デバイス間で共有)。ドラフトはバッジ一覧に ドラフト マーク付きで表示され、いつでも作業を再開できます。

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

• シンプルに保つ — テキストは明快に、ごちゃごちゃさせない。バッジは小さなサイズで表示されることが多いです。
• ハイコントラストにする — テキストが背景で読めるように。
• 資格に名前を付ける — 閲覧者が一目で理解できるように。
• 正方形フォーマット — バッジは正方形で最もよく表示されます。
• ブランドの一貫性 — 組織のカラーとフォントをすべてのバッジで再利用。
• 再利用可能なデザインを保存 — 作成したすべてのバッジは、次回の出発点として使えるアカウントテンプレートとしても保存されます(マイテンプレート を参照)。