この記事でわかること

Claude DesignでX告知カード（1200×675px）を作った実測記録。

  • 第1回バナーとのトークン消費・時間・修正回数の比較
  • 透過PNGを使わないとキャラ周りのデザイン指示が効かない理由
  • 「できること」と「素直に諦めたこと」の整理

結論を先に言うと、X告知カードも普通に作れる。ただし画像素材の準備が必要。

目次

記事概要図

プロンプト設計 キャラ画像込み Claude Design で生成（2分） CSS修正が効かない 画像内の円は消せない 透過PNG化 remove.bgで解決 完成 ✅

第2回チャレンジの概要

第1回でブログバナーを1分・トークン6%で作った。

あれが想像以上に楽だったので、第2回はX投稿用の告知カードを作ることにした。サイズは1200×675px。バナー（1200×630px）とほぼ同じだが、「SNSで映える」という用途の違いがある。

今回のポイントはキャラクター画像の組み込み。キャラなしのテキスト系デザインより一段難しいはずで、そこを試したかった。

実際にやってみた

プロンプトと初回生成

投げたプロンプトはこれ：

X（Twitter）告知カード（1200×675px）を作ってください。

【内容】
- メインタイトル：「Claude Designで バナーも告知カードも 作れる話」
- シリーズバッジ：「Claude Design チャレンジ」
- サブテキスト：第02回 | バナー比較 | トークン消費実測
- ブログ名：techlog-ai.com

【レイアウト】
- 左側：テキストブロック
- 右側：添付のキャラクター画像（円形そのまま配置）

【カラー】
- ダークネイビー × スカイブルー × ホワイト

キャラ画像（JPEG）も一緒にアップロードした。

初回生成は約2分、トークン消費8%。仕上がりはほぼ想定通りで、レイアウト・テキスト・カラーが一発で決まった。

ハマったポイント：透過PNGの壁

ここで一個ハマった。

「キャラの白い円形フレームを外して、背景をダークネイビーに統一したい」と指示したら、Claudeは「CSS修正しました」と言うのに見た目が変わらない。

原因はすぐわかった。元画像（JPEG）に円と水色背景が描き込まれていた。CSS側でborder-radiusを消しても、画像ファイル自体に入っている円は消えない。当たり前の話だ。

解決策と最終結果

remove.bg で30秒かけて背景を透過PNG化。それをClaude Designに再アップロードして再生成した。

透過PNG版でも白い円形フレームはClaude Designが再度追加した（CSS側でオーバーライドされた）。ここは「もう一回CSS修正して」で対応できるが、全体のデザインクオリティとしては十分だったのでここで終了にした。

第1回バナーとの比較（実測データ）

項目第1回（バナー）第2回（X告知カード）
サイズ1200×630px1200×675px
生成時間約1分約2分
トークン消費6%8%
修正回数1回（ドメイン名）3回以上（円形削除に苦戦）
キャラ素材なしあり（透過PNG要）
完成度ほぼ一発テキスト部分は一発・素材処理が追加作業

キャラ画像ありの分、消費量と時間が増えた。ただ絶対量としては**2分・8%**なので、引き続き実用圏内だと思う。

Claude Designでできること・できないこと

今回わかった範囲で整理する。

できること

  • テキスト・カラー・レイアウト指定は精度が高い
  • 透過PNG素材をそのまま組み込む
  • サイズ指定（1200×675px）通りに出力
  • 修正指示への反応は速い

素直に諦めた方がいいこと

  • JPEGに描き込まれた要素をCSSで消す（元画像を修正する方が早い）
  • ピクセル単位の細かい位置調整（HTMLなので限界がある）
  • アニメーション・GIF出力（静止画のみ）

やってみてわかったこと

素材の準備が仕上がりを左右する。

Claude Designのプロンプト力・レイアウト生成の精度は高い。ただ、「組み込む素材がどんな状態か」で後工程の手間が変わる。今回は透過PNGを用意してから渡した方が結果的に早かった。

作業順序の教訓としては、

  1. キャラ・ロゴ等の素材は透過PNG化してからClaude Designに渡す
  2. テキストやカラーの修正は会話で十分対応できる
  3. 「できないこと」は無理に粘らず早期撤退が正解

デザイン知識ゼロでここまで作れるのは、普通に便利だと思う。第3回も続ける。

まとめ

  • Claude DesignでX告知カードは2分・8%トークンで作れる
  • キャラ画像を使うなら透過PNG化が先決（JPEGのまま渡すと修正が効かない）
  • 第1回バナーより少し手間はかかるが、実用的なクオリティには十分届く

Claude を使った副業・ツール活用をもっと学びたいなら、Udemyのセール期間を狙うのがおすすめ。

Udemyで講座を探す（セール時が狙い目）

関連記事