実績解除メーカー - ゲーム風の実績カードを作って共有できるツール

ゲームの「実績解除」風のカードを、誰でも自由に作れる「実績解除メーカー」を開発しました。日常のちょっとした出来事を、Steamやゲームの実績画面のようなデザインに仕立てて、SNSでネタとして共有できるツールです。

ツールを試してみる →

タイトル・説明・アイコン・取得率を入力するだけで、リアルタイムにプレビューが更新されます。完成したカードはPNG保存や画像コピー、X（旧Twitter）へのワンクリック投稿ですぐに共有できます。

主な機能

1. リアルタイムプレビュー

• 入力に合わせてcanvasのカードが即座に再描画
• 実際のゲーム実績画面に寄せたデザイン
• 日本語・英語の切り替えに対応

2. 豊富なアイコン

• 約490種類の絵文字を10カテゴリから選択（実績・人物・動物・食べ物など）
• 好きな画像をアイコンにアップロード可能
• ドラッグ&ドロップにも対応

3. レア実績の金色エフェクト

• 取得率を0.1〜100%で自由に設定
• 10%以下にすると金色の枠と輝きが付くレア演出
• 「全プレイヤーの◯%が解除」の表記も自動生成

4. 多彩な共有方法

• PNG画像としてダウンロード
• 画像をクリップボードにコピー
• X（旧Twitter）へワンクリック投稿
• 共有リンクをコピー（開くと同じカードを復元）

技術スタック

• Next.js（App Router）
• TypeScript
• Canvas API（カードのリアルタイム描画）
• next/og（共有時のOGP画像を動的生成）
• Cloudflare Workers / OpenNext（ホスティング）

使い方

1. 実績解除メーカーにアクセス
2. 実績タイトルと説明を入力
3. アイコンを絵文字パレットから選ぶ、または画像をアップロード
4. 取得率のスライダーでレア度を調整
5. 「PNGで保存」または「𝕏 にポストする」で共有

開発の背景

SNSでよく見かける「ゲームの実績風カード」を、自分でも手軽に作れるツールが欲しいと思ったのがきっかけです。日常の些細な出来事も、実績カードにするだけでちょっとした笑いに変わります。

こだわったのは「共有したときの見え方」です。絵文字アイコンの場合は、共有リンクを開くとX上でOGP画像として実績カードが自動表示されます。このOGP画像は next/og でリクエストごとに動的生成していますが、クロールが集中するデフォルトURLでは静的画像を返し、生成結果はキャッシュする仕組みにすることで、無料枠の範囲で安定して運用できるようにしています。

ツールの特徴

無料・登録不要

アカウント登録や料金は一切不要です。ブラウザでアクセスするだけで、すぐに作り始められます。

プライバシー保護

アップロードした画像はサーバーに送信されず、すべてブラウザ内で処理されます。カードの生成もローカルで完結します。

共有リンクで復元

作ったカードはURLパラメータに保存されるため、共有リンクを開けば同じ内容がそのまま復元されます（絵文字アイコンの場合）。

活用シーン

• 日常ネタ: 「二度寝に成功」「締め切り当日に着手」などをSNSで共有
• お祝い: 記念日や達成報告をゲーム風に演出
• アイスブレイク: 自己紹介やイベントのネタづくりに

今後の展開

このツールは本サイトで無料公開しており、誰でも利用できます。今後は、アイコンやテンプレートの追加、カードデザインのバリエーションなど、さらに表現の幅を広げていく予定です。