勉強会のバナーを自分で作ってみようと思い立ち、Claude Designを使って作ってみました。
公開してるのでぜひ使ってみてください
できたもの
中身は、素のhtml + canvasでできています。
画像の出力はもちろんのこと、JSONファイルでのインポート/エクスポートやUndo機能も備えてますし、背景の種類やテキストの色/大きさ/フォントなど、きめ細かに設定できて大変満足しています。
単一ファイルなので中身はクソコードの予感がしてますが、まあ動いてるので良しとします。これ以上機能を載せたら多分不具合がポロポロ出てくる気がする
どうやって作った？
Claude Designで以下のプロンプト投げて
エンジニア向けの社外勉強会を開催する際に使う横長のバナー画像を簡単に作成できるサイトを作って。
背景は、canvasを使ってグラデーションやアクセントありのおしゃれな背景になるようにし、その上に以下内容が文字で入ってるイメージ
勉強会のタイトル(大きめ)
日時(中くらい)
場所(中くらい)
また、会社のロゴ画像や勉強会のテーマのロゴ画像(例えばreactのアイコンやclaudeのアイコン)も自由に配置できるように。
それぞれのスタイルや場所の配置を簡単に変えれるようにもしておいて
その後、質問がいくつか飛んできたので答えました。
Questions answered:
- vibe: カラフル&ポップ(明るく親しみやすい)
- aspect: connpass / Doorkeeper 用 (横長 16:9 くらい)
- output: PNG画像としてダウンロード, 高解像度(2x)で書き出し
- logos: 自分で画像をアップロードして配置, ドラッグで位置・サイズを自由に調整
- controls: 背景グラデーションの色・種類, 文字色・サイズ・揃え(左/中央), テキストやロゴの配置(ドラッグ移動), アクセント装飾(図形・パターン・グリッド線など)
- font_pref: ゴシック系でモダンに(Noto Sans JP など)
- sample: Claude Code開発事例大公開スペシャル by ******
2026/7/3
大阪オフィス(淀屋橋)
あとは2機能追加依頼しただけです
これ、設定値をJSONでインポートエクスポートできない？
10個前までの操作に戻る機能機能ってつけれられる？
思ったこと
- 待ち時間はおおよそ5分、バグなしで一発で動くものができて本当に驚きです。
- 改めて、1,2年前じゃ考えられないような身の回りの作業の爆発的な効率化が進んでるなと感じました
- ぜひ使ってみてください