GitHubで「mono-color-skill」という面白そうなものを見つけました。
リソグラフ風・ハーフトーンの単色/二色印刷物(ポスターやパッケージ、書籍の表紙など)を生成してくれるClaude Code用のスキルです。
試しに使ってみようとしたら、思わぬところでつまずきました。今日はその顛末です。
画像生成AIが無料枠で弾かれた
このスキルは、実際に画像を生成するところまでがセットになっています。
これまで使っていたGemini APIの画像生成モデルで試したところ、429 RESOURCE_EXHAUSTEDというエラーが返ってきました。
エラーメッセージには「27秒後にリトライしてください」と書かれていたのですが、よく見ると上限(limit)が0になっています。
つまり一時的な枯渇ではなく、この画像生成モデル自体が無料枠の対象外だったということです。
待っても解決しないやつだ、と気づいて一旦立ち止まりました。
発想を変えて、CSS/SVGフィルターで代用できないか考えた
有料プランに切り替えるかどうか迷ったのですが、その前に「そもそも画像生成AIが必須なのか」を考え直してみました。
デュオトーン(二色刷り)やハーフトーン(網点)の質感自体は、実は写真加工の古典的な技術で、CSSやSVGのフィルターだけでも再現できるはずです。
一から絵を描かせたいわけではなく、手元にある実写素材を加工したいだけなら、画像生成AIを使わなくても済むんじゃないか、という発想の転換です。
SVGのfeColorMatrixとfeComponentTransferで色を作る
Claude Codeに実装してもらった手順はこんな感じです。
まずfeColorMatrixで写真をグレースケールに変換します。
次にfeComponentTransferのfeFuncR/feFuncG/feFuncBにtype="table"でtableValuesを指定し、影の部分(0)を1色目、ハイライトの部分(1)を2色目にマッピングします。
これだけで、白黒だった写真が「暗部は色A、明部は色B」というデュオトーンに変わります。
ハーフトーンの網点感は、radial-gradientで小さいドットパターンを作り、mix-blend-mode: multiplyで写真の上に重ねることで表現しました。
実際にブランドカラーで試したら、いい感じだった
まず一般的な配色(ミントグリーン+チャコール)で試作して、ちゃんとデュオトーン+ハーフトーンの質感が出ることを確認しました。
その後、うちのブランドカラーであるダーク(#201c18)と水色(#00bbdd)に色を差し替えてみたところ、これが想像以上に馴染みました。
今のYouTube動画は実写のストック素材に暗いスクリムを重ねているだけなので、この加工に差し替えたら写真とブランドの一体感がもっと出せそうです。
まだ実装には移していませんが、良さそうな候補ができました。
まとめ
画像生成AIが無料枠で使えなかった、というだけなら「じゃあ課金しよう」で終わっていたかもしれません。
でも一旦立ち止まって「本当にAIが必要な作業か」を考え直したら、CSSとSVGだけで十分実現できる範囲だと気づけました。
新しいツールが使えないと分かったとき、すぐに別のツールを探すんじゃなくて、今あるものでできないかを先に考える、というのは今後も意識していきたい癖だなと思いました。
この記事が参考になったら、応援クリックをお願いします
