v0 でクラウド認定バッジ整列ツールを作って Vercel にデプロイしてみた
こんにちは！製造ビジネステクノロジー部の石井です。
LTで登壇するとき、自己紹介スライドにクラウドの認定バッジがズラッと並んでるとちょっとカッコいいですよね。
ただ、バッジ画像を1枚ずつダウンロードして手動で配置するのはけっこう面倒です。
実はこの問題を解決するツールは過去にもありました。
- もともとこちらの記事で紹介されていたバッジ整列サイトがあったのですが、残念ながらサイトが閉鎖
- それを引き継いでこちらの方がReact + Amplifyで新たに作り直してくれています（GitHubでソースも公開されています）
今回はそのまま使わせていただく手もあったんですが、せっかくなら v0 で遊んでみたいなと思い、自分でもイチから作ってみることにしました。
v0 にUIも実装もまるっとお任せしつつ、Vercelにデプロイするまでの流れを紹介していきます。
完成イメージ
こんな感じで、バッジをアップロードして並べ替えて、リアルタイムプレビューを見ながらPNGでダウンロードできるツールです。ハニカム配置でバッジ同士がちょっと重なる密集感がポイントですね。
デプロイ先: https://v0-cloud-badge-aligner.vercel.app/
リポジトリ: https://github.com/yuta-ishii-cm/cloud-badge-aligner
使った技術
| 技術 | 用途 |
|---|---|
| v0 | プロジェクト生成・UI実装 |
| Next.js (App Router) | フレームワーク |
| React | UI |
| shadcn/ui + Tailwind CSS | コンポーネント・スタイリング |
| Canvas API | 画像合成・PNG生成 |
| IndexedDB | バッジ画像のブラウザ内永続化 |
| Vercel | ホスティング |
画像合成はブラウザ側で完結、CredlyからのバッジURL取得にのみAPI Routeを使っています。VercelのHobbyプラン（無料）で動きます。
手順ざっくり
やることは大きく分けて4つです。
-
v0でプロジェクトを生成
-
使ってみて追加機能をv0に依頼
-
GitHub連携 & Vercelにデプロイ
-
Claude Codeで機能を追加
v0で土台を作り、Claude Codeで育てていく流れです。
Step 1: v0でプロジェクトを生成
v0はVercelが提供しているAI UIジェネレーターで、プロンプトを渡すとNext.js + shadcn/ui + Tailwind CSSのプロジェクトをまるごと生成してくれます。
プロンプトを投げるだけでプロジェクトのセットアップからUIの実装まで一気にやってくれるので、かなり楽ですね。
では実際にやっていきましょう。
- v0にアクセスして、プロジェクト一覧画面の右上にある「+ Project」をクリック
- 「Blank Project」を選択
- Project Nameに「cloud-badge-aligner」と入力して「Create Project」をクリック
- 数秒待つと、左にチャット・右にプレビューの画面が開きます
- 左下のチャット欄にプロンプトを貼り付けて送信
Claudeと要件を整理しました。
技術スタックはv0側である程度型にはめてくれるので、技術的な内容は最低限にしてやりたいことが伝わるようなプロンプトにしてます。
クラウド認定資格（AWS、Google Cloud、Azureなど）のバッジ画像を整列・合成するWebツール「Cloud Badge Aligner」を作ってください。
LTスライドの自己紹介に使うバッジ画像を、いい感じに並べて1枚のPNGとしてダウンロードできるツールです。
## 完成イメージの参考
AWSの六角形バッジが2段にハニカム配置（偶数行が半分横にオフセット）されていて、バッジ同士が少し重なっている画像をイメージしてください。
## 機能
- バッジ画像を複数アップロードできる（ドラッグ&ドロップ対応、20枚以上にも対応、PNG/JPEG/WEBPのみ受け付ける）
- アップロードしたバッジをドラッグ&ドロップで並べ替えられる
- レイアウトを2種類から選べる
- ハニカム配置: 偶数行が半分ズレて、バッジ同士が少し重なる（デフォルト）
- グリッド配置: 通常の格子状に並べる
- 1行あたりの列数を選べる（3〜6列程度）
- 端数行（最後の行がバッジ数に満たない場合）は中央寄せにする
- 背景色を選べる（透過 / 白 / 黒）
- アップロードや設定変更のたびにリアルタイムでプレビューが更新される（「画像を生成」ボタンは不要）
- 「PNGをダウンロード」ボタンで合成画像をダウンロードできる（透過選択時はアルファ付きPNG）
- バッジの個別削除ボタンと、全バッジを一括クリアするボタンがある
- バッジ画像は正方形にリサイズして統一する
- アップロードしたバッジ画像はIndexedDBに保存し、次回サイト訪問時にも復元される（毎回アップロードし直す必要がない）
- 画像の合成・ダウンロードはすべてブラウザ内で完結させる（サーバーへのアップロードなし）
## 画面構成
- 左カラム: アップロード・並べ替え・設定の操作パネル
- 右カラム: リアルタイムプレビュー（透過背景の場合は市松模様で表現）
- PC専用でOK（モバイル対応不要）
- v0が動き出します。プロンプトを読み取って、計画を立てて、実装を始めてくれます。
- しばらく待つと実装計画が提案されました。内容を確認して問題なければ「Build」をクリック。修正したい場合は「Request Changes」で指示を出せます。
- v0が実装計画に沿ってコードを生成してくれます。プロンプト送信からここまで約5分。右側のプレビューで動作確認できます
微調整はv0のチャットでもできますが、GitHubと連携してからClaude Codeでローカル編集するほうが個人的には楽なので、ここではプレビューでざっくり確認できればOKです。
Step 2: 使ってみて追加機能を依頼
Step 1で生成されたものをプレビューで触ってみると、バッジ画像を毎回Credlyからダウンロードしてアップロードするのが面倒なことに気づきました。CredlyのバッジURLを貼るだけで画像を取得できたら楽ですよね。
v0ではチャットで追加の指示を出すだけで、既存のプロジェクトに機能を追加してくれます。こんな感じで依頼してみました。
バッジ画像をCredlyからいちいちダウンロードしてアップロードするのが面倒なので、CredlyのバッジURLを貼り付けたら画像を自動取得できるようにしてください。
- URLの入力欄を追加する（例: https://www.credly.com/badges/xxxxx/public_url）
- Next.jsのAPI Route（/api/fetch-badge）を作成し、CredlyのページHTMLからog:imageの画像URLを抽出して、画像をプロキシして返す
- 取得した画像は手動アップロードしたバッジと同じように扱う（並べ替え、削除、IndexedDB保存など）
Credlyのページにはブラウザから直接アクセスするとCORS（クロスオリジン制約）で弾かれてしまうので、サーバー側でページを取得してog:imageのURLを抽出し、画像をプロキシする必要があります。
こういう技術的な背景はプロンプトに含めておくとv0が適切に実装してくれます。
なんかちっちゃい…笑
個人的には、微調整はClaude Codeでやるほうが楽なので基盤がだいたいできたらGitHubに移行しちゃいます！
Step 3: GitHub連携 & Vercelにデプロイ
GitHub連携
- v0のプロジェクト画面右上の「デプロイ」をクリック
- 「Publish to the Web」パネルが開くので、「Create Repository」をクリック
- Repository Nameを入力して「Create Repository」をクリック。リポジトリはprivateで作成されます。v0でチャットするたびにこのリポジトリに変更がpushされるようになります
Vercelにデプロイ
GitHubリポジトリを作成するとVercelプロジェクトも自動で作られますが、初回のProduction Deploymentは自動では走りませんでした。Vercelのダッシュボードから手動でデプロイします。
- 右上の「Create PR」横のドロップダウンから「Vercel Project」をクリックしてVercelダッシュボードを開く
- Deploymentsタブから「Create Deployment」をクリック
- 「Commit or Branch Reference」に
mainと入力して「Create Deployment」をクリック
- デプロイが走り出します
- デプロイが完了したら、Vercelが発行したURLでサイトにアクセスできます
補足: デフォルトだとDeployment Protectionが有効になっていて、アクセス時にVercelのログインを求められます。不特定多数に公開したい場合は、Vercelダッシュボードの「Settings」→「Deployment Protection」からProductionデプロイの保護をオフにしておきましょう。
公開できました！URLはこちらです。
以降はmainブランチにpushするたびに自動デプロイされます。
ローカルで開発を続けたい場合は、リポジトリをcloneしてくればOKです。
git clone https://github.com/yuta-ishii-cm/cloud-badge-aligner.git
cd cloud-badge-aligner
npm install
npm run dev
Step 4: Claude Codeで機能を追加
v0で土台ができたので、リポジトリをcloneしてClaude Codeでガシガシ機能を追加していきました。
追加した機能はこんな感じです。
- CredlyプロフィールURL一括取得 — バッジURLを1つずつ貼るのではなく、プロフィールURLから全バッジをまとめて取得できるAPI Route + フロント対応
- 列数の自由入力 — セレクトボックスから数値入力（1〜20）に変更
- ハニカムレイアウト修正 — キャンバス幅の見切れ修正、六角形クリッピング、不完全行のセンタリング削除
- バッジ一覧のグリッドD&D — 縦リストからグリッド配置のドラッグ&ドロップに変更
- バッジサイズ調整 — スライダーでバッジの大きさを変更可能に
- 出力サイズ調整 — 横・縦を個別にスケール（%スライダー）+ 用途別プリセット（コンパクト、GitHub README、ブログOGP、Xヘッダー、スライド16:9）
- ヘルプダイアログ — 「バッジを追加」と「レイアウト設定」にそれぞれ画像付き/テキストのガイドDialogを追加
なお、今回はAWSの認定バッジでしか動作確認していないので、Google CloudやAzureのバッジだとレイアウトが崩れるかもしれません。気づいたら直していきます。
生成した画像
実際にLTの自己紹介スライドに載せた画像がこちらです。
なかなかいい感じですね！
まとめ
v0でプロジェクトを生成して、GitHub連携して、Vercelにデプロイする、という流れでクラウド認定バッジ整列ツールを作ってみました。
v0はプロンプトを投げて約5分でUI・ロジック・API Routeまで一気に生成してくれました。追加機能もチャットで依頼するだけで対応してくれるので、PoCやMVPをさくっと作るには最高ですね。公式ドキュメントでも、プロトタイピングやMVPの素早いリリースが主な想定用途として紹介されています。
今回は単純にClaude Codeを使い慣れていたのでそっちに切り替えましたが、Claude Codeで機能設計やセキュリティの相談をしたり、GitHub ActionsでCIを回したりと、開発フロー全体を整えていくこともできます。
v0で素早く動くものを作る → GitHubに移行してClaude Codeで育てていく、という流れはなかなかおすすめです。
ちなみに、Vercel/v0はクラスメソッドでも取り扱っています。
ツールは随時アップデートしていく予定なので、よかったら使ってみてください！
おまけ
2026年3月26日（木）に、クラスメソッド名古屋オフィス（伏見駅徒歩5分）で 「なごやクラメソゆる勉強会」 を開催します！
第1回のテーマは「最近やってみたこと」のLT大会です。どんな内容になるかはこちらの記事をチェックしてみてください。
途中退出OK、LTを聞くだけでもOK。LT後には交流タイムもあるので、LTで気になったことを登壇者に聞いてみたり、「最近これ気になってるんですけど...」みたいな雑談をしたり、なんでも気軽に話せます。
今後も定期的にイベントを開催していく予定で、こちらで随時更新していく予定です！ご興味ある方はぜひ！
