tsukurun-Lab

🖼️ Blogを書いたのに、サムネ作りで毎回止まるので仕組みにしてみた

前の記事を書き終わった時点では、自分の中ではもう「ほぼ公開できる」と思っていました。

🌱 Astro × NotionのBlogを、もう少しちゃんと使っていきたい

でも、最後にFeaturedImageだけが残りました。。

ここでまた手が止まりました。

これ、毎回かなり苦手です。

記事を書くところまで進んでも、Blog一覧やOGPに出す画像をどうしようか考え始めると止まってしまう。

今回も結局、いったんFeaturedImageなしで公開してしまいました。

さすがに毎回これだと続かないので、サムネを「頑張って作るもの」から「ある程度同じルールで作れるもの」に変えてみることにしました。

1本目と2本目も、画像でかなり時間がかかっていました

このBlogの最初の2本にもFeaturedImageがあります。

🌱 止まっていたBlogを、Codexと動かし直した話(Astro × Notion)

📑 Blogページに追従目次とNotionブロック、グラフ表示を足していく

この2枚も、自分でゼロからデザインしたわけではありません。

サイトのイメージ画像や、Notionテンプレートのデザインを担当してくださっているほろみさんに作っていただいた既存のサムネなどをAIへ渡して、記事の内容に合うものを作ってもらいました。

今もその2枚をFeaturedImageとして使っていますが、そこまで持っていくのが本当に大変でした。。

「もう少し淡く」

「中央のモチーフを小さく」

「サイトの雰囲気に合わせて」

「文字はいらない」

みたいな調整を何度も繰り返していて、たしか1枚決めるだけでもかなり時間を使っていました。

記事自体はもうできているのに、最後の画像だけでこんなに止まってしまうのはさすがにつらいなと。。

2枚を並べてみたら、もう型はできていました

今回あらためて1本目と2本目を並べて見てみると、共通している部分がかなりありました。

  • 1200×630の横長
  • 白〜アイボリーの明るい背景
  • 四隅に黄・ピンク・紫・ミント系の淡い水彩
  • 細い植物や小花の線画
  • 中央に小さな手描き風のモチーフ
  • タイトル文字は入れない
  • とにかく余白が広い

サイト本体も見返してみると、白を広く使って、淡い色をアクセントにする感じは共通しています。

ということは、毎回「今回はどんなサムネにしよう?」から始めなくてもよさそうです。

背景や画風は固定して、中央だけ記事に合わせて変える。

これくらいで十分なのかもしれません。

中央には、記事を読み終わったあとに残る変化だけ

前の記事では、Blogの仕組みを作ることばかりやっていた自分が、ようやく「ちゃんと記事を書く側でも使っていきたい」と書きました。

なので今回の画像も、その気持ちだけが伝わればいいかなと思って、中央のモチーフをかなり絞りました。

左にNotionっぽいページ。

右にBlogのブラウザ画面。

その間を小さな矢印でつなぐ。

周りの水彩や植物は、これまでの2枚と同じ雰囲気にします。

記事の中にAstro、AI、SEO、AdSenseなどいろいろな話は出てきますが、全部を画像へ入れようとするとまた迷いそうなので。。

記事を読み終わったときに残る変化を1つだけ絵にする くらいが、ちょうどよさそうです。

そして、1200×630でも一度詰まりました。。

今回は画像自体は比較的すぐ方向性が決まりました。

ただ、「1200×630で」と指定して生成したはずなのに、ダウンロードして確認すると別のサイズになっていました。

最初は気づかず、そのまま使えたと思っていたのですが、、実ファイルを確認すると1367×768。

結局、

  1. 元画像の中心をなるべく残しながら、1200×630に合うように余分なところを切る
  2. 1200×630へリサイズ
  3. PNGとして保存
  4. 保存したファイルをもう一度開いて、実際のピクセル数を確認

という工程を追加しました。

ここは自分でも完全に見落としていました。。

画像生成側にサイズを書いただけで安心せず、最後の実ファイルまで確認する。

今回これで一度やり直したので、次からはここまでをセットにしておきます。

Skillに残すのは、毎回迷うところだけ

文章の書き方と同じで、画像も毎回チャットで全部説明するのをやめることにしました。

Notionに FeaturedImage Maker|tsukurun-Lab Blog というSkillを作って、

  • シリーズ共通の色と構図
  • 中央モチーフの決め方
  • 既存FeaturedImageを参考にすること
  • 文字を大きく入れないこと
  • 候補を大量に作らないこと
  • 最後に1200×630の実ファイルを確認すること

までまとめています。

次から自分がやることは、

「この記事は何がどう変わる話なのか」

「中央に何を描くか」

「何を入れたくないか」

この3つを決めるくらいにしました。

これなら、次からはかなりラクになる…はずです。

サムネのために公開を止めないようにしたい

FeaturedImageも、どうせならBlogの雰囲気に合うものにしたいです。

でも自分の場合、そこに時間をかけすぎるとBlogの記事がいつまでも出せません。。

サムネはBlogの雰囲気を作る大事なものなので適当にはしたくない。

一方で、1枚の画像だけで何日も止まるのも違うなと思っています。

今回作ったSkillも、完璧な画像を自動で作るためというより、 迷う場所を減らして、ちゃんと公開まで進むためのルール に近いです。

たぶん、これから何本か作れば「ここはもう少し変えたいな」と思うところはまた出てくると思います。

でも、毎回ゼロから悩む状態からは一歩抜けられた気がします。

記事を書き終わったあとに、FeaturedImageだけで止まらない。

まずはそこまで持っていけたら、自分には十分かなと思っています。

同じカテゴリの記事

Blog一覧へ戻る