X用のサムネイル、Claudeに画像生成させてFigmaで整えて、最後は自分で作り直した話

「テスラの補助金申請、Claudeに任せたら『面倒だから後でやる』が消えた。」

このブログのサムネイル、実はけっこう遠回りして完成させている。せっかくなので、Claudeに画像を作らせるところから、Figmaファイル化、フォント調整、そして最終的に自分で作り直すまでの一部始終を残しておく。

1. まずClaudeに画像そのものを作ってもらう

最初はシンプルに、記事のテーマを伝えてClaudeにサムネイル画像を生成してもらった。「AI×補助金申請」というタグ、キャッチコピー——構成要素を指定して、いくつか案を出してもらう。

出てくるのはPNG。デザインの方向性を掴むには十分だし、ラフとしての精度もかなり高い。ただ、これをそのまま使うにはもう一段の調整が必要だった。

2. PNGだと編集できない。「Figmaのファイルにして」

PNGのままだと、コピーを変えたり配色を微調整したりが全部やり直しになる。それでは実用に耐えないので、Claudeに「Figmaのファイルにして」と頼んだ。

すると、テキストレイヤー・背景のグラデーション・タグのバッジまで分解された状態でFigmaファイルが出てくる。レイヤー構造になっているおかげで、コピーだけ差し替えたり色味を試したりが自由にできるようになった。ここまでは狙い通り。

3. 全角カッコがズレる問題と、Noto Sansのプロポーショナルオルタネート

ただ、実際に文字を組んでみると気になる箇所が出てきた。「面倒だから後でやる」の丸カッコが全角のままだと、前後の文字との間に余計な空白ができて間延びして見える。

これはNoto Sansの機能で解決した。プロポーショナルオルタネート（プロポーショナルメトリクス）をオンにすると、全角カッコの左右の余白を字面に合わせて詰めてくれる。カッコまわりのアキがタイトになるだけで、見出し全体の締まりがかなり変わる。地味だけど効くタイプの調整だった。

4. それでも納得できず、結局下のバージョンは自分で作った

フォントの調整までやってもなお、しっくりこなかった。Claude製のバージョンは情報設計としては正しいのに、どこか「AIが作った感」が抜けきらない。色の温度感、余白の呼吸、タイポグラフィのウェイトバランス——このあたりは結局、自分の手を動かして詰めないと納得のいく着地にならなかった。

そこで「Claude in Chrome」の告知用に、下のバージョンは一から自分でレイアウトを組み直した。大きくタイトルを置いて、写真を主役にする構成に変えている。

5. テスラの写真はUnsplashから

背景に使っているテスラの写真は、Unsplashから持ってきたもの。夕暮れの草原に停まった車体という、記事のトーンに合う一枚を選んで組み合わせた。

まとめ

Claudeに画像そのものを作らせるところから、Figmaファイル化、フォント調整、そして最終的な自作まで。AIに全部任せて終わり、ではなく「どこまでAIに任せて、どこから自分で仕上げるか」の線引きを都度探る作業だった気がする。効率化はできても、最後の「納得感」だけは自分の手でしか作れない。そのくらいの距離感で使うのが、今のところちょうどいい。