最近、Charli XCXのアルバム『BRAT』のビジュアルスタイルを模した画像を簡単に生成できるツール「Brat Generator」が公開されていたので、技術面を中心に紹介します。
🔧 概要
Brat Generatorは、入力テキストに応じてリアルタイムで「BRAT」風のタイポグラフィ画像を生成できるウェブアプリです。
フォント、カラー、レイアウトが忠実に再現されており、SNS投稿用の画像を簡単に作成できます。
🧩 主な機能
- テキスト入力によるリアルタイム画像生成
- 最大450文字まで対応（テーマによる）
- テーマ変更機能（
green,black,white,strike,blue） - スクリーンショット保存対応（html2canvas準備済み）
- レスポンシブUI設計
🛠 使用技術
| 項目 | 技術内容 |
|---|---|
| フレームワーク | バニラJavaScript, jQuery |
| スタイリング | Tailwind CSS（テーマ切替によるクラス制御） |
| レンダリング | HTML5 Canvas, textFit.js
|
| フォント | Compacta Black, Arial Narrow |
| ホスティング | Cloudflare Pages |
| 画像保存 |
html2canvas（ダウンロード準備） |
💡 利用シーン
- SNS投稿用の画像作成（特にX・Instagram）
- 音楽イベントやDJセットリストのビジュアル化
- タイポグラフィの研究や再現
- ミーム生成やデザインネタとしての活用
🔍 技術的ポイント
-
textFitによりテキストのサイズが自動調整され、長文でも視認性を保てる -
div#textOverlayによる中央配置とテーマごとのクラスで動的表現を実装 - Canvasベースの画像合成ではなく、DOM + CSS + Webフォントで高速レンダリング
- jQueryによる簡易な状態管理とイベントハンドリング
📝 補足
このツールはあくまでフロントエンドで完結する構成で、画像やテキストの保存・送信などは一切行われていません。
そのため、プライバシーやセキュリティ面での懸念が少なく、すぐに利用できます。
✅ まとめ
Brat Text Generator は、Charli XCXの「BRAT」アルバムにインスパイアされたデザインをWebで再現するツールです。
クライアントサイド完結型でありながら、テーマ切替やフォント最適化などの工夫が多く、技術的にも面白い内容となっています。