出品サムネ16枚を「コード」で作り直した話

夜、自分の出品ページを眺めてて手が止まった。「……なんかサムネ、素人くさいな」。売ってる中身には自信あるのに、棚に並んだパッケージが手作り感まる出し。副業37日目、見て見ぬふりしてた問題とついに向き合うことにした話です。

並べて見たら一発でわかった

出品してるサービスは4本。サムネはその都度その場のノリで作ってたから、フォントはPCに入ってた標準のやつ、背景はベタ塗り一色、レイアウトは毎回バラバラ。1枚ずつ見たら「まあ、ええんちゃう」やのに、検索結果で他の出品者と並んだ瞬間に負けてる。プロの出品は縮小されても文字がパキッと読める。うちのは、ぼやける。

原因を整理したら3つ。フォントが弱い、背景に奥行きがない、そして毎回即興で作ってるから統一感がない。要は「型」を持ってへんかった。

生成AIで作らへんかった理由

「画像ならAIに描かせたらええやん」と思うでしょ。俺も思った。けど過去に画像生成APIで日本語が文字化けして2,750円ドブに捨てた経験がある。あれから生成AIの日本語はだいぶ進化したけど、サムネは事情が違う。サムネは絵やなくて「文字がメインの看板」。1文字でも欠けたら商品にならんし、「ここの文言だけ直したい」って時に、生成AIは毎回ちょっと違う絵を出してくる。修正のたびにガチャを回すことになる。

そこで発想を変えた。AIに画像を描かせるんやなくて、「画像を描くプログラム」をAIに書いてもらう。文字・配色・レイアウトを全部コードで決めて、実行したらサムネのPNGが出てくる仕組み。これなら文字化けは原理的に起きひんし、文言を1行変えて実行し直すだけで何回でも作り直せる。

途中、文字が消える怪現象と戦った

順調やったのは最初だけ。バッジに入れた文字が、なぜか1文字だけに化ける現象が出た。しかも毎回やなくて、たまに起きる。再現せえへんバグが一番タチ悪い。

ここで俺がやったことは、正直「直ってへん」「今度は別の場所が化けた」と報告するだけ。犯人探しはAIが総当たりでやってくれて、結論は「文字を図形に変換する部品(ライブラリ)そのもののバグ」。部品ごと別のやつに総入れ替えしたら、ピタッと直った。未経験の俺一人やったら、原因どころか「部品を疑う」って発想にすらたどり着けてへんと思う。

半日で16枚。作り直しはコマンド1発

コードから出力された新サムネの1枚目。文字もプログラムで描いてるから縮小しても崩れへん
コードから出力された新サムネの1枚目。文字もプログラムで描いてるから縮小しても崩れへん

できあがった仕組みで、4出品ぶんのサムネを各4枚、計16枚作った。1枚目は濃紺の背景に白の極太文字で「検索結果で目を引く係」、2〜4枚目は明るい背景で「開いた後に中身を説明する係」。この役割分担も含めて全部コードに焼き込んだから、次に新しい出品を作る時は文言を差し替えて実行するだけ。

デザインの勉強を何ヶ月もやったわけやない。「自分はセンスで戦われへん。ならルールで戦う」に切り替えただけ。センスは型に焼き込んでしまえば、あとは量産できる。これ、サムネに限らず副業全般で使える考え方やと思ってる。

差し替えた16枚が閲覧数にどう効くかは、数字が貯まったらまた正直に報告します。変わらんかったら変わらんかったで、それも書く。

あわせて読みたい:
デザイン未経験の僕がAI×Canvaでサムネを作った話
画像生成APIに2,750円ドブに捨てて学んだこと【Gemini/OpenAI】