💡 Brat Generatorとは？
「Brat Generator」は、以下のような“Bratっぽい”画像をブラウザ上で生成できる無料ツールです：
- グリーン背景にホワイト文字の怒りっぽいレイアウト
- 文字サイズ・行間・配置（左寄せ、中央、右寄せ）のカスタマイズ
- 背景色や文字色を自由に変更可能
- 解像度の指定（正方形・Twitter用・ストーリーズサイズなど）
- 青背景×赤文字、黒×ネオングリーンなど複数テーマをプリセット
🧪 実際に使ってみた
- テキストを入力（例：「I AM THE DRAMA」など）
- 背景色や文字色を選択
- 文字の配置・フォントサイズを調整
- ボタン一つで画像を生成
- 「画像を保存」で即ダウンロード可能！
スマホでも動作が軽快で、SNS投稿・プロフィール画像・ミーム作成などに最適です。
🔧 技術的な実装概要
| モジュール | 技術構成 |
|---|---|
| レンダリング | HTML Canvas API |
| フレームワーク | Next.js（App Router） |
| スタイル | Tailwind CSS + DaisyUI |
| 画像出力 | html-to-image による PNG ダウンロード |
| 状態管理 | useRef + useState（React Hooks） |
文字列を複数行に分割 → Canvas API で中央配置 → DataURL で画像化 → a.download で保存、という構成です。完全にクライアントサイドで完結します。
🕹 活用シーン
- Charli XCX ファンアート・アルバム風カバー制作
- Twitter・Instagram・Threadsなどのヘッダー画像
- 自作ミーム・プロフィール画像（PFP）
- ショート動画のサムネイル・文字入り表紙
🌐 改良版はこちら
今回紹介した拡張機能付きの Brat Generator 改良版は以下のリンクから試せます：
→ Brat Text Generator
📝 まとめ
Brat Generator は、デザインスキルがなくても「怒りっぽくて最高にクール」な画像を誰でも作れる素晴らしいジェネレーターです。
Web技術だけでここまで表現できるのはとても面白く、学習にも最適です。
最近の Web 表現に興味がある方、Charli XCX ファン、美学としての BRAT スタイルにハマっている方、
ぜひ触ってみてください！