noteサムネイルをGeminiで作る。3スタイル×プロンプト全公開【15枚実例】
noteのサムネイルをGeminiで作る——3スタイル×プロンプト全公開、15枚の実例つき
はじめに
noteの記事、中身より先に見られるのはサムネイルです。
フィードでスクロールされる0.5秒の勝負。
そこで「なんか気になる」と思わせられるかどうかで、
クリック率が大きく変わります。
ciraf.jpのnoteでは、サムネイルをすべて
Gemini Imageで生成しています。
デザインツールは使わず、プロンプトを入れるだけ。
それで15枚以上のサムネイルを作ってきました。
この記事では、実際に使っているプロンプトテンプレートを3スタイル分、15枚の実例とあわせて全公開します。
サムネイルは「3スタイル」で使い分ける
記事の内容によってサムネイルのスタイルを変えています。
毎回ゼロから考えるのではなく、
まずこの3分類に当てはめる。
それだけで迷いがなくなります。
ダーク系
技術・AI開発・サービス紹介系の記事に使います。
濃紺または黒の背景に白テキスト、オレンジまたはレッドのアクセント1色。 フィードの中で圧倒的に目立ちます。
ライト系
解説・入門・仕事論系の記事に使います。
オフホワイトまたはライトグレーの背景に濃紺テキスト。 線画イラストと組み合わせると親しみやすい印象になります。
グラデーション系
体験・世界観・情緒的な記事に使います。
自然なグラデーション背景に白テキスト。 「核になる1語を異常に大きく」するレイアウトが特徴です。
判断に迷ったら： 技術・AI → ダーク系 ／ 解説・入門 → ライト系 ／ 体験・世界観 → グラデーション系
実例ギャラリー
ダーク系の実例
天職占い（Claude Code × FAL.ai）
左テキスト×右に手相ビジュアル。「天職占い」を圧倒的に大きく、オレンジ帯で「AIと1日で作った」を強調。占い系のモチーフとして手相を選んだのが正解でした。
スプレッドシート（Menu Card）
「スプレッドシート」を大きく、オレンジ帯で「それだけでサイトが動く」。右にスプレッドシート→メニューページへの変換を示すアイコン。内容が一目で伝わります。
Drop Your Bars vol.1
ラッパーのシルエット×タイトルロゴ。青帯でシリーズ感を統一。ロゴをGeminiに直接生成させると崩れるため、ビジュアル素材だけGeminiで作ってCanvaでロゴ（Photoshopで作っています。）を乗せ直しています。
AI画像生成 意図通りに作る
「意図通り」を圧倒的に大きく、レッド帯でTIPSの内容を補足。右に複数の画像フレームが浮かぶ抽象ビジュアル。
ライト系の実例
Claude Code 環境構築ガイド
「Claude Code」を大きく、青いアンダーライン帯で「ノンエンジニアでも1日でできる」を強調。背景に薄くClaude Codeロゴを敷いて、フラットイラストの人物3人を配置。
チームが全て（プロデューサーの仕事論）
「チームが全て」を大きく、テラコッタ帯で「プロデューサーの仕事論」。右に線画のチームイラスト。仕事論・ヒューマン系の記事にライト系は特に相性がいいです。
Google Tag Manager #3
GTMシリーズは番号バッジ（青丸）でシリーズ感を統一。下半分に薄い「GTM」の巨大文字、その上にフラットイラストのキャラクター。シリーズものはこのパターンで固定すると覚えてもらいやすいです。
脱なんとなく（非エンジニア向けTIPS）
「脱なんとなく」を大きく、オレンジ帯で「AIをちゃんと使える」。右にPC・スマホを操作する線画イラスト。非エンジニア向けの記事らしい親しみやすさが出ました。
グラデーション系の実例
AIで実験記録（マガジン表紙）
濃いグリーングラデーションに「実験記録」を大きく。右に試験管とモニターのアイコン。グラデーション系の中でもダーク寄りの配色で、マガジン表紙として存在感があります。
WORKS なぜそう作ったか
ブルー→ティールのグラデーションに「WORKS」を圧倒的に大きく。クライアントワークの事例紹介記事で、制作物の雰囲気を色で表現しました。
OGASAWARA という問い
写真そのものをグラデーション的に使った特殊ケース。自然の写真が持つグラデーションと白テキストの組み合わせは、グラデーション系のコンセプトと同じです。
歩行診断（花王 ヘルスウォーク）
水色系グラデーションに「歩行診断」を大きく。右に足跡×データのビジュアル。ヘルスケア系の記事に水色→ミントグリーンのグラデーションは鉄板です。
プロンプトテンプレート全文公開
毎回このテンプレートに【大】【中】【小】のテキストとビジュアルの指定だけ変えて使っています。コピペしてそのまま使ってください。
ダーク系テンプレート
以下の条件でnoteの見出し画像（サムネイル）を生成してください。
■ サイズ
1280×670px（横長16:9）
■ メッセージ
画像全体で伝えるメッセージは1つだけ。
テキストは3〜5語以内に厳密に絞る（8語以上は絶対NG）。
■ テキスト構成（サイズの3階層を必ず守る）
【大】「○○」：画面の中で圧倒的に大きく。他の要素の2倍以上のサイズ。文字色は白。
【中】「○○」：【大】の半分以下のサイズ。
→ アクセントカラーの帯（色ブロック）を背景に敷いて目立たせる。
【小】「○○」：【中】の半分以下。白文字で小さく添える。
→ 中間サイズを絶対に作らない。差を極端につけること。
■ 配色
ダーク系（黒 #0a0a0a または濃紺 #0D1B2A）の背景。
アクセントカラーは1色だけ（オレンジ #E8821A またはレッド #CC2200 推奨）。
テキストはすべて白（#FFFFFF）。
蛍光色・ネオン系は絶対に使わない。
配色比率は 背景60：メイン30：アクセント10。
■ ビジュアル（構成パターンから1つ選ぶ）
A：左テキスト × 右に人物写真
B：左テキスト × 右に抽象ビジュアル1点
C：テキストどーん × 背景にビジュアルを薄く敷く
（ここでどのパターンを使うか・ビジュアルの内容を指定する）
■ 余白
画像全体の25〜40%は余白にすること。
■ 必須要素
右下に小さく「ciraf inc.」のテキストを入れる。
■ 禁止事項
蛍光色・ネオン系を使わない。
ビジュアルを複数詰め込まない。
テキストを4行以上にしない。
中間サイズのテキストを作らない。
サイバー・回路系ビジュアルを使わない。ライト系テンプレート
以下の条件でnoteの見出し画像（サムネイル）を生成してください。
■ サイズ
1280×670px（横長16:9）
■ テキスト構成（サイズの3階層を必ず守る）
【大】「○○」：圧倒的に大きく。文字色は濃紺 #1A2B4A。
【中】「○○」：【大】の半分以下。
→ アクセントカラーの帯を背景に敷く。文字色は白。
【小】「○○」：【中】の半分以下。濃紺文字で小さく。
→ 中間サイズを絶対に作らない。
■ 配色
背景：オフホワイト #F8F5F0 / ライトグレー #EFEFEF / 淡い水色 #EAF4FB から選ぶ。
メインカラー：濃紺 #1A2B4A。
アクセント：オレンジ #E8821A またはテラコッタ #C0552A を1箇所だけ。
蛍光色・ネオン系は絶対に使わない。
■ ビジュアル
左テキスト × 右に線画イラスト1点。
アウトライン＋淡い塗りのフラットタッチ。親しみやすく柔らかく。
リアルな人物写真・サイバー系は使わない。
（ここでビジュアルの内容を指定する）
■ 必須要素
右下に小さく「ciraf inc.」のテキストを入れる。
■ 禁止事項
黒・ダーク系の背景にしない。
蛍光色・ネオン系を使わない。
リアルな人物写真を使わない。
テキストを4行以上にしない。
中間サイズのテキストを作らない。グラデーション系テンプレート
以下の条件でnoteの見出し画像（サムネイル）を生成してください。
■ サイズ
1280×670px（横長16:9）
■ テキスト構成（核ワード散らしレイアウト）
【核・超大】「○○」：画面を支配するくらい圧倒的に大きく。他の3倍以上。文字色は白。必ず1行で。
【上・小】「○○」：核ワードの上に小さく。核の3分の1以下。
【横・中】「○○」：核ワードの右に中くらい。核の半分以下。
【帯・小】「○○」：最下部に白いブロック帯を敷いて配置。文字色はテーマカラー。
→ 均等に並べない。サイズ差を極端につけること。
■ 背景
自然のグラデーションを1方向（上→下）のみで使う。
・空・天気系 → 空色 #87CEEB → オレンジ #FDB97D
・ヘルスケア系 → 水色 #EAF4FB → ミントグリーン #B2DFDB
・夜・音楽系 → 濃紺 #1A1830 → 紫 #2E2C52
黒・単色ダーク背景にしない。
ドロップシャドウ・テキストオーバーレイは使わない。
■ ビジュアル
右側に記事テーマを一目で表すビジュアルを1つだけ。
フラットデザイン・シンプルなアイコンタッチ。
（ここでビジュアルの内容を指定する）
■ 必須要素
右下に小さく「ciraf inc.」のテキストを入れる。
■ 禁止事項
【核】テキストを2行に折り返さない。
背景を左右2色に分けない。
ドロップシャドウ・テキストオーバーレイを使わない。
蛍光色・ネオン系を使わない。
サイバー・回路系ビジュアルを使わない。
ビジュアルを複数詰め込まない。失敗談とコツ
サイバー・回路系が毎回出てくる
Geminiはデフォルトでサイバーっぽいビジュアルを生成しやすいです。 禁止事項に「サイバー・回路系ビジュアルを使わない」を必ず明記することで回避できます。
テキストが2行に折り返される
【核】や【大】のテキストが長いと自動で折り返されます。 「必ず1行で。絶対に改行しない。」を指示欄と禁止事項の両方に書くと改善されます。 核ワードは5文字以内に絞るのが確実です。
前回の会話を引きずって違う画像が出る
Geminiは同じチャットを続けて使うと過去の文脈を引きずります。 サムネイル1枚ごとに必ず新しいチャットセッションで投入してください。
ロゴを画像に入れてもらうと崩れる
ロゴや特定のデザインをGeminiに生成させると精度が低くテキストが崩れます。 Geminiはビジュアル素材の生成だけに使い、ロゴ・テキストはCanvaで後から乗せるのが確実です。
まとめ
サムネイルはダーク系・ライト系・グラデーション系の3分類で迷わない
テキストは3階層のサイズ差を極端につける
禁止事項を必ずプロンプトに書く
Geminiは毎回新しいチャットセッションで
ロゴはCanvaで後乗せが確実
プロンプトはコピペして、【大】【中】【小】のテキストとビジュアルの指定だけ変えれば使えます。 ぜひ試してみてください。
このプロンプトをさらに省力化する
thumbnail-DESIGN.mdの作り方は次の記事で解説します。
ciraf.jpのコンテンツも見てみてください
この記事で紹介したサムネイルに対応する記事・コンテンツはすべてciraf.jpとnote.com/ciraf_incで公開しています。
天職占い → https://ciraf.jp/tenshoku/
Weather Music → https://ciraf.jp/weathermusic/
Drop Your Bars → https://ciraf.jp/dyb/
Menu Card → https://ciraf.jp/menucard/
このマガジンでは引き続きAIを使ったコンテンツ制作の実録を公開していきます。 フォローしてもらえると更新をお届けできます。
