アイキャッチが「しょぼい」の正体は3つだけ｜非エンジニアがAIで半自動化した記録

こんにちは、ヨウカンラボのヨウカンです😃

自分で作ったアイキャッチが、なぜか「しょぼい」。この記事は、その正体がセンスではなく3つの型を踏んでいないだけだと突き止めて、さらにその作業を非エンジニアのボクがAIで半自動化するまでの記録です。

しょぼく見える原因は「背景がベタ塗り」「文字が全部同じ大きさ」「差し色がない」の3つだけでした。この3つは、Canvaでも、コードでも、同じように直せます。まずその診断を渡して、そのあとにボクがどう仕組みにしたかを書きます。

しょぼいアイキャッチの正体は、この3つだけです

自作のアイキャッチがプロっぽく見えないのは、才能の差ではありません。次の3つを踏んでいないだけです。逆に言うと、この3つを直すだけで見違えます。

3つ目が、一番効きます。人はアイキャッチを見た瞬間、一番目立つ数文字しか読みません。だから「どこを目立たせるか」を決めるだけで、伝わり方が変わります。逆にここを決めないと、全部の文字が同じ強さで並んで、結果として何も残りません。

ボクが実際に踏んだ、ビフォーアフター

言葉だけだと伝わりにくいので、ボクの失敗を出します。最初に作ったのがこれです。

ぱっと見て「しょぼい」と思いました。理由が最初は分からなかったのですが、診断3つに当てはめると全部そろっていました。背景はベタ塗り、文字は同じ大きさ、差し色なし。3チェック全滅です。

そこで、3つを直したのがこちらです。

やったことは診断そのままです。背景を自分の実機写真に差し替え、暗い幕を左半分にかけて文字を読めるようにし、文字を「小さいタグ・大きいメイン・中くらいのサブ」の3段にし、『どれを買う？』だけオレンジにした。それだけです。イラストの才能は1ミリも使っていません。

ここで大事なのは、背景がボクの実機写真だという点です。フリー素材のきれいな写真より、実際に自分が持っている機材のほうが「この人は本当に使っている」が伝わります。これは、あとで半自動化するときの軸にもなりました。

この3つを、毎回手作業でやりたくなかった

診断は分かった。直し方も分かった。でも、記事を書くたびにこの3ステップを手でやるのは面倒です。ボクがこれまで挫折してきた道具は、だいたい「始めるまでが面倒」で止まってきました。アイキャッチ作りも、同じ運命をたどりそうでした。

そこで、AI（ボクはClaude Codeという、文章で指示するとパソコンの作業をやってくれる道具を使っています）に任せられないか試しました。やってみたら、できました。しかも、絵を描く力はいっさい要りませんでした。

仕組みはこうです。ボクが「何を目立たせるか」を数行の指示で渡すと、AIが決まった型（3段の文字・差し色・写真背景）に流し込んで画像を作る。実際に渡すのは、たとえば「背景はこの写真、メインは『アイキャッチがしょぼい理由は3つ』、『しょぼい』だけオレンジで」という程度の言葉です。ボクは出てきた画像を見て、OKなら記事に入れる。決めるのは中身だけ、並べるのはAIという分担です。

1〜2が人の仕事、3〜4はほぼ自動です。慣れると1枚あたり数分で、しかも毎回ブランドの色が同じになります。記事一覧に並べたとき、統一感が出るのはこれが理由です。

最初の1回は、見事に失敗しました

最初の自動生成は、見事に失敗しました。タイトルが長すぎて、AIが機械的に文字を折り返した結果、「う？」の2文字だけが2行目に落ちるという間の抜けた画像が出てきました。

ここで学んだのが、改行位置は人が決めるということです。文字数で機械に折らせると事故ります。「1行目はここまで、2行目はここから」と人が指定する形に変えたら、二度と起きなくなりました。半自動化は「全部おまかせ」ではなく、事故る一点だけ手綱を握るのが正解でした。

この「AIに任せるところと、人が握るところを分ける」考え方は、ボクがブログ運営のほかの作業でも使っているものです。記事の検品を仕組みにした話は非エンジニアがブログの自己検品を仕組みにした記事に、繰り返す作業を仕組みにする考え方はClaude Codeのスキル化の記事に書きました。

半自動化しても「これだけは人が決める」1か所

仕組みができても、絶対にAIに丸投げしない一点があります。「何を目立たせるか」です。

アイキャッチの差し色は、記事の中で一番言いたいことに乗せます。ここを間違えると、いくら型がきれいでも刺さりません。たとえば折りたたみスマホの記事なら、「Fold8」でも「2026年」でもなく、読者が一番知りたい「どれを買う？」に色を乗せる。この判断は、記事を書いた本人にしかできません。

これはアイキャッチに限らず、AIに仕事を任せるとき全部に共通する線引きだと思っています。ここを渡すと、速いけれど的外れなものが量産されます。

Canvaを使っている人も、明日から3つだけ直せます

「AIで半自動化」と聞くと難しそうですが、診断3つはCanvaでもそのまま使えます。ツールは関係ありません。今のアイキャッチを開いて、3つだけ直してみてください。

チェック	Canvaでの直し方
背景がベタ塗り	自分で撮った写真を1枚敷き、その上に半透明の暗い四角を重ねて文字を読みやすくする
文字が全部同じ大きさ	更新日やタグは小さく、一番言いたい言葉はうんと大きく、補足は中くらいに。3段に分ける
差し色がない	一番読ませたい数文字だけ、他と違う1色にする。使う色は1つだけに絞る

この3つだけで、ボクの改善前・改善後と同じ変化が起きます。特別なツールも、デザインの勉強も要りません。型を知っているかどうかの差でしかなかった、というのが今回の一番の学びでした。

よくある質問

デザインのセンスがなくても大丈夫ですか？

大丈夫です。今回やったことは、絵を描くことでも色をひらめくことでもなく、「背景に写真を敷く」「文字を3段に分ける」「1か所だけ色を変える」という決まった作業だけです。ボクは絵心がありませんが、それでも改善前後の差を出せました。センスではなく型の問題です。

背景写真は、フリー素材ではだめですか？

だめではありませんが、自分で撮った写真のほうが効果は上です。特にレビューや体験談の記事では、実際に自分が持っている物が写っているだけで「この人は本当に使っている」が伝わります。フリー素材のきれいな写真は、逆に「どこかで見た感じ」になりやすいです。手元にある物を撮るところから始めるのがおすすめです。

AIでの半自動化は、プログラミングができないと無理ですか？

ボク自身が非エンジニアです。プログラムは書けません。やっているのは「文章でAIに指示を出す」ことだけで、細かい部分はAIが組み立ててくれます。ただ、いきなり半自動化を目指す必要はありません。まずは診断3つを手作業で直すだけで十分に効果があります。半自動化は、同じ作業を何度も繰り返すようになってからで遅くありません。

まとめ｜しょぼさは、才能ではなく型の問題でした

もう一度だけ。アイキャッチがしょぼく見える原因は、背景がベタ塗り・文字が同じ大きさ・差し色なしの3つだけです。この3つを直せば、Canvaでもコードでも同じように見違えます。

ボクはさらにその作業をAIに任せて半自動化しましたが、そこで握り続けたのは「何を目立たせるか」の1点だけでした。手を動かすのはAI、頭を使うのは人。この線引きは、ブログ運営のほかの作業にもそのまま効きます。

まずは今のアイキャッチを開いて、診断3つを当ててみてください。全部そろっていたら、直せばそのまま伸びしろです。

次の一歩

ブログの作業を「AIに任せるところ」と「人が握るところ」に分ける考え方は、アイキャッチ以外にも使えます。ボクが実際に仕組みにしたものはこちらです。

ボクは40代の再起を、試したことも失敗も含めてX（@youkan0302）で毎日書いています。ブログをAIで運営していく過程も、そこでぽつぽつ残しています。

AIに任せた物を公開前に止める仕組みは、手順とスクリプトまで含めて8月9日からnoteに置いていきます。