実績システムにはどんなバッジが必要?

1つの実績につき1枚の絵では足りません。プレイヤーは獲得する前のバッジ(ロック中)を目にしますし、それが何なのか分からない状態(シークレット)で見ることもあり、レベル分け(ブロンズ、シルバー、ゴールド)されていることもよくあります。さらにプラットフォームごとに必要なサイズと形式が違います。すべての状態を手で描くと、作業は5倍になります。バッジメーカーは各実績を1回だけ描き、ほかの状態はその絵から作ります。

「初ラン」から「7日連続」、レベル1〜9までの、ネイビーとオレンジのランニング実績バッジ9個。その下に、同じ9個がグレーで南京錠付きのロック状態になったもの

ランニングクラブのセットの例:1つのリストから作った9個のバッジ。獲得済み(上)とロック中(下)です。ロック版は同じ絵から作ったもので、描き直してはいません。

バッジセットの作り方は?

AIロゴ作成を開き、バッジを選んでからセットを選びます。

  1. 実績を並べます。 1つにつき1チップで、初ラン、5km、10km、ハーフマラソン、マラソン、早起きのように入力します。セットは36個まで増やせます。
  2. 下段を選びます。 なし、リスト順にレベル1、2、3…、またはすべてのバッジに共通の文言(クラブ名や年など)から選びます。実績の名前は上段に入ります。
  3. 見た目を選びます。 ボールド、ライン、レトロから選び、300文字までのスタイルの説明と、最大3色を加えられます。例:「力強く、スポーティに、ネイビーとオレンジ」。
  4. 送信します。 新しいセットの料金は、先にボタンに表示されます。

バッジ1個だけ、クラブの紋章、「Est. 2024」の記章などを作る場合は、バッジ1個を選び、中央、上段、下段を自分で入力します。

文字は入力したとおりのつづりになる?

文字は絵の一部として描かれ、入力したとおりに描くよう指示されます。それでも1文字だけ違って描かれることがあるので、ダウンロードの前にすべてのバッジを確認してください。短いほど読みやすくなります。上段は40文字、下段は30文字まで入りますが、文よりも2〜3語のほうがずっときれいにカーブに収まります。文字が違っていたら、そのバッジだけをラウンドでメモ(「top line: HALF MARATHON HERO」)を付けてやり直せば、セットのほかのバッジはそのまま残ります。他社のロゴや商標を求める言葉は、描く前に断られ、料金はかかりません。「認定」や「返金保証」のような自分のビジネスについての主張は、事実かどうかを確認するために表示されます。

各バッジのどんなバージョンが手に入る?

バージョン 見た目 主な使い道
獲得済み 描いたままのバッジ 解除した実績
ブロンズ、シルバー、ゴールド、プラチナ リングと文字を金属の色に塗り替えたもの(フラットまたは軽い光沢) 1つの実績のレベル
ロック中 リングに南京錠が付いた、色を抑えたグレー版 まだ獲得していない実績
シークレット 大きなはてなマークの下で薄くなったグレーのバッジ 隠し実績

ランク版は、リングの図形を役割(外側のリング、縁、帯、文字)ごとにまるごと塗り替え、帯の上の文字が読みやすいように保ちます。中央の絵は元の色のままなので、どの実績かがひと目で分かります。

プラットフォームごとにどんなファイルが手に入る?

ダウンロード ファイル
Web・アプリ バッジとバージョンごとのSVG、64・128・256・512pxのPNG、sprite.svg、すべてのファイルと文言を一覧にしたbadges.json
Steam Steamworksの指定どおり、achieved/とunachieved/(ロック版)に入った256×256のJPG
Game Center 1,024×1,024のPNG
Google Play 1MB未満の512×512のPNG(ロック中の実績のグレー表示はGoogle側で行われます)
Twitch 18・36・72pxのサブスクバッジ、各25KB未満
Discord 256KB未満の64×64のロールアイコン
Open Badges 資格証明用の、600px以上で256KB未満の正方形PNG
印刷 300 DPIのPNGと、ミリメートル単位のSVG(直径2〜10cm)

各ダウンロードはそのプラットフォームのサイズと形式で作られ、PNGはプラットフォームのファイルサイズ上限に収まるよう圧縮されます。プラットフォームのルールは変わることがあります。この表は、このガイドの執筆時点で確認した内容です。

アプリでの表示方法は?

Web用ダウンロードに入っているbadges.jsonを対応表として使ってください。各項目に実績の名前、上段と下段の文言、各バージョンのファイルが書かれています。プレイヤーが獲得していれば獲得済みのSVGを、そうでなければロック版を表示します。SVGはどの画面密度でもくっきりしたままです。エンジンやストアがビットマップを求める場合はPNGを使ってください。リングの文字は128px以上なら読みやすく、それより小さいと絵と色で見分けることになります。中央はシンプルにし、セット内のバッジはそれぞれ違うモチーフにしてください。