AIとつくる。発信と、講座の現場で。

川合 卓也 ｜ KAWAI

note・セミナー掲載サムネイルから 114点
  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

記事のテーマに合わせ、文字・色・素材を変える

note掲載例 80点 ｜ 掲載元を見る ↗

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

セミナー告知は「誰が・何を学べるか」を伝える

セミナーサイト掲載例 34点 ｜ 掲載元を見る ↗

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

サムネイル生成を、実演で解説。

SHElikes

デザイナーのAI利用調査×実演レッスン

2026.02.23 公開
SHElikesで川合卓也が解説している動画の実キャプチャ

動画の実画面より引用　｜　https://x.com/kawai_design/status/2025906103482245576 ↗

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

生成から修正まで、プロンプトで解説。

NewsPicks

実践！仕事術
画像生成プロンプト

2026.01.21 公開
NewsPicksで川合卓也が解説している動画の実キャプチャ

動画の実画面より引用　｜　https://newspicks.com/movie-series/124/?movieId=6425 ↗

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

今日の3つのテーマ

01

サムネイルとは？

02

目を引くサムネイルの作り方

03

AIっぽいサムネの直し方

選ぶ。伝える。確かめる。自分のAIに渡すレシピへ。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方
01

サムネイルとは？

記事や動画を開く前に、内容を伝える見本。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方
？

サムネイルの
語源は？

英語で書くと、thumbnail。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方
thumb親指＋nail爪

親指の爪。

小さく見られる。だから、
伝えることを絞る。

KAWAIのX投稿実画面。サムネイル生成事例まとめと親指の爪の画像。
ポストを見る ↗　https://x.com/kawai_design/status/2006688225319096498語義：Dictionary.com「thumbnail」／情報を絞る、は今回の制作への応用。投稿画面は2026-10-14取得。
  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方
制作した内容を見てもらえず、机で頭を抱える男性の生成写真

中身に、どれだけこだわっても。

クリックされなければ、
見てもらえない。

まずは「開きたい」と思われる1枚に。

状況を表現した生成写真

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

クリックされて、初めて中身に届く。

サムネを見る
→
↓ここで止まりがちクリックせず、通り過ぎる
クリックする
⇢
コンテンツを見る記事・note・ブログ・動画など、
あらゆる情報

中身の良さを、クリック前に伝える。

閲覧の流れを示す概念図。離脱率などの実測値を示したものではありません。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

好調な動画の90%が、独自サムネイル。

YouTubeの好調な動画

90%

独自サムネイルを使用

「作ればヒットする確率」ではありません。

出典：YouTube公式「サムネイルとタイトルのヒント」｜2026-10-14確認

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

同じ表示回数でも、届く人数は変わる。

同じ1,000回表示なら

CTR 3%30回
CTR 6%60回

表示回数を固定した計算例。サムネイルだけによる改善実績ではありません。

出典：YouTube公式「インプレッションとクリック率」｜2026-10-14確認

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

同じ作品でも、響く見せ方は違う。

Netflixも、見る人に合わせて画像を選ぶ。

同じ架空の映画から恋愛とコメディの要素を見せ分ける概念図
恋愛が好き → 2人の関係コメディが好き → 俳優の表情

公式記事の仕組みを表す概念図。画像は架空の説明用作例。

出典：Netflix TechBlog「Artwork Personalization」（2017）｜2026-10-14確認

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

クリックの先で、期待に応える。

▧気になる画像・タイトル
→
▷開くクリック
→
◎期待どおり内容・視聴体験

約束した価値を、中身で届ける。

出典：YouTube公式：CTRだけでなく平均視聴時間・関連性も説明｜2026-10-14確認

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

目を引くかは、周囲との違いでも変わる

似た色の中
違う色の中
中央は同じ画像。周囲が変わると、目立ち方も変わる。

中央の画像は左右で同一。周囲の差を示す説明用比較で、注視の測定結果ではありません。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

どのサムネイルが目に入る？

NewsPicksの新着トピックス記事一覧。さまざまな記事のサムネイルが並ぶ、ユーザー提供の実画面。

NewsPicks「新着トピックス記事」｜ユーザー提供スクリーンショット（2026-10-14）

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

クオリティが高いデザインが
クリックされるとは限らない。

川合のnote記事一覧。さまざまな装飾や構図の中に、白地に文字だけのサムネイルが並んでいる。ユーザー提供のスクリーンショット。

ユーザー提供のnote一覧｜表示されているスキ数は、クリック数・クリック率ではありません。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

サムネイルは、開く前に内容の価値を伝える

note記事の入口
デザインは言葉から始まるKuseで15秒CMを作る
YouTube動画の入口
AIスライド なぜ伝わらない？新しいNano Banana 2.1
セミナー参加する理由
あなたがいいと言われる方法アプリのUIデザインを直す60分
広告商品に興味を持つ入口
NEW FORM／自主制作の広告見本DENIM EDIT／自主制作の広告見本
教材学べることを見せる
AIサムネ完全攻略／教材記事の表紙AI研修を仕事にする／教材記事の表紙
特典受け取る価値を見せる
サムネイル参考帳／既存の紹介用キービジュアルサムネイル完全ガイド／サイト実画面

川合の既存制作物から抜粋。広告＝自主制作の見本 ／ 教材＝教材記事の表紙 ／ 特典＝紹介ビジュアル・サイト実画面

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

スーパーのお菓子も、同じ。

開ける前に、
「おいしそう」を
伝える。

スーパーの棚に並ぶ、さまざまなお菓子のパッケージ。ユーザー提供写真

サムネイルも、中身を見る前の「選ぶ理由」をつくる。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

画像と説明の見せ方を変え、売上が増えた事例

変更前：画像＋説明文
Wingify公開事例のControl画面
変更後：画像拡大＋説明はホバー時
Wingify公開事例のVariation 2画面
Mall.czの公開事例

売上

+9.46%

画像の大きさと
説明の表示を変更

引用：Wingify / Optimics「Mall.cz」掲載画像（変更前・Variation 2）
https://wingify.com/success-stories/optimics/
画像内容だけの変更ではない。利益増や、noteでの効果を示す数字ではありません。
  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

クリック率が上がっても、売上増とは限らない

楽天・健康食品の商品A｜記事に掲載された比較表

Proteinum記事の比較表。四角バッジ期間と丸バッジ期間のCTR、CVR、売上額、ROAS

クリックの先で、売上につながったかも見る。

引用：Proteinum「丸形vs四角形の検証結果」商品Aの表
https://proteinum.co.jp/blog/rakuten-ctr-casestudy1-3/
時期・広告費が異なる期間比較。画像単独の因果は不明。公表値は係数処理・丸め処理済み。
  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方
02

目を引くサムネイルの作り方

文字・素材・背景・配置を、
具体的に指定する。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

良い点を残し、改善点を1つの指示に変える

残す：最初に伝わる、良いところ。

直す：「どこを・どう変えるか」を1つ。

応募作品を開く ↗

出典：MIRAICHI サムネイル作品集。作品画像は当日noteで表示。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

サムネイルは「注目・内容・期待」で確かめる

注目：一覧で気づく？

内容：何の情報かわかる？

期待：自分に役立ちそう？

教材用作例。クリック率などの効果測定ではありません。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方
  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

8要素を埋めれば、生成プロンプトになる。

オンライン講座の告知サムネイルを16:9で生成。書体はZen Kaku Gothic。指定の文言だけを使う。
ロゴ：なし。架空のロゴは追加しない。
メインコピー：「サムネイル実践講座」を2行で最大に。
サブコピー：「自分の告知を1枚つくる」を小さく直下に。
補足情報：「オンライン開催」を下部に小さく。
アイキャッチ：右側に、サムネイルを並べたノートPC。
背景：深紫。文字の背後に模様や強い光を置かない。
配色：深紫をベース、文字は白。ライムは強調語だけ。
レイアウト：左に文字、右にPC。左端をそろえ、四辺に余白。
  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

最初に読ませたい言葉を、一番大きくする

実生成したサムネイル実践講座の教材用告知作例
メインコピーサムネイル
実践講座

何の講座かを、
最初に伝える。

同じ実生成作例で、文字の役割を確認。枠は解説用の追記。画像内の日時は教材用です。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

サブコピーは、得られることを小さく補う

実生成したサムネイル実践講座の教材用告知作例
サブコピー自分の告知を
1枚つくる

参加して得られることを、
小さく補う。

同じ実生成作例で、文字の役割を確認。枠は解説用の追記。画像内の日時は教材用です。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

文字のサイズ差で、読む順と印象が変わる

メイン : サブ : 補足　｜　メインを1に固定　｜　クリックで拡大／次で比較候補

差がない〜小さい同じ強さに見えやすい
差をつけ始める主役が見え始める
主従を明確に主役→説明の順に
差を大きくしすぎる補足の読みにくさに注意

重要度を大・中・小で示し、掲載サイズで読めるか確かめる。

根拠：AIGA：情報の階層 ／ NN/g：大・中・小 ／ デジタル庁：可読性
原稿・背景・素材・色・書体・位置は固定。各比率は比較用で、出典が推奨する最適値ではありません。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

文字の比率は、「どこで見るか」でも変わる。

西八王子駅前きぬた歯科の屋外広告。医院名、インプラント、所在地が大きな文字。 横浜きぬた歯科のスマートフォンサイト。見出しと説明に文字の大小がある。

AIには「掲載場所・表示サイズ・見る距離」も伝える。

引用：MarkeZine｜markezine.jp/article/detail/43908 ／ 横浜きぬた歯科｜perfect-implant.jp ｜ 左：西八王子／右：横浜。文字設計の見立て。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

3Bは、目を止める素材を考える経験則。

目を引くことと、内容が伝わることは、分けて考える。

Beauty

美しい人物など

Baby

赤ちゃん

Beast

動物

今回は「どんな改善を学べるか」も伝えたい。
3Bの実務での使用例：DLPO
広告で知られる経験則。協会の公式基準や、クリック・売上の効果保証としては扱いません。
  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

アイキャッチで、学べる内容まで伝える。

自分の告知を直したい人に、何を学べるか伝わるのは？｜次で候補と理由。

候補：修正前後｜どこが変わるかを示し、学べる内容を具体化できる。

サムネを改善AIに伝わる修正指示オンライン講座参加無料
生成した架空の成人女性・3BのBeautyの例
Beauty｜美しい人物
サムネを改善AIに伝わる修正指示オンライン講座参加無料
生成した赤ちゃん・3BのBabyの例
Baby｜赤ちゃん
サムネを改善AIに伝わる修正指示オンライン講座参加無料
生成した猫
Beast｜動物
サムネを改善AIに伝わる修正指示オンライン講座参加無料
講師・川合卓也
登壇者
サムネを改善AIに伝わる修正指示オンライン講座参加無料
完成サムネイルの教材用作例
サムネ単体
サムネを改善AIに伝わる修正指示オンライン講座参加無料
修正前修正前の教材用作例
修正後修正後の教材用作例
修正前後
AIGA：見る順をつくる ／ NN/g：内容に関係する画像を選ぶ
出典：AIGA：情報の階層 ／ NN/g：視線計測に基づく画像の指針
教材用比較。素材内の色・文字は異なる。候補は今回の目的に対する判断で、クリック率の検証結果ではありません。
  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

背景は、文字の背後の模様と光を弱める

架空のサムネイル実践講座の告知。左側に大きな文字、右側に光と立体素材があり、文字の背後は静かな深紫。

文字の背後
模様・強い光を抑える

素材の周り
光・奥行きは残す

AIへの指示：「文字の背後だけ静かに。素材・文言・配色は維持」

実際にAI生成した架空講座の教材用作例。画像内の日時は本イベントの開催案内ではありません。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

文字と背景の明るさの差で、読みやすさが変わる

少し離れて、すっと読めるのはどれ？｜文字色だけ変更。次で候補と理由。

候補：白文字｜6案で最も明暗差が大きい。掲載サイズで読めるか確認する。

共通の制作物のアイキャッチ
サムネの作り方AIで1枚つくる10/15｜無料
2.23 : 14.5未満　文字 #555555
共通の制作物のアイキャッチ
サムネの作り方AIで1枚つくる10/15｜無料
3.71 : 14.5未満　文字 #777777
共通の制作物のアイキャッチ
サムネの作り方AIで1枚つくる10/15｜無料
5.84 : 14.5以上　文字 #999999
共通の制作物のアイキャッチ
サムネの作り方AIで1枚つくる10/15｜無料
8.66 : 14.5以上　文字 #BBBBBB
共通の制作物のアイキャッチ
サムネの作り方AIで1枚つくる10/15｜無料
12.24 : 14.5以上　文字 #DDDDDD
共通の制作物のアイキャッチ
サムネの作り方AIで1枚つくる10/15｜無料
16.63 : 14.5以上　文字 #FFFFFF
通常文字は4.5 : 1以上がAA基準。目立ちやすさや売上の保証ではない。

出典：W3C WCAG 2.2・1.4.3 ／ デジタル庁：画像内文字も4.5 : 1以上

単色背景 #24124B と文字色の指定値から算出。背景が写真の場合は、文字の背後で最も低い箇所を確認。
  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

アクセント色は、行動してほしい場所へ。

見出しと「参加無料」の両方に気づけるのは？｜次で候補と理由。

候補：10%｜CTAの余白を確保し、主役の見出しとのバランスを狙う。

共通の制作物のアイキャッチ
サムネの作り方AIで1枚つくる10/15 開催
参加無料
CTA色面 5%全体の面積に対して
共通の制作物のアイキャッチ
サムネの作り方AIで1枚つくる10/15 開催
参加無料
CTA色面 10%全体の面積に対して
共通の制作物のアイキャッチ
サムネの作り方AIで1枚つくる10/15 開催
参加無料
CTA色面 15%全体の面積に対して
共通の制作物のアイキャッチ
サムネの作り方AIで1枚つくる10/15 開催
参加無料
CTA色面 20%全体の面積に対して
強調したい言葉やCTAへ集約。大きくするほどよい、とは限らない。

出典：デジタル庁：アクセント色の役割と多用への注意 ／ 配色比率の参考：CAERT教材 p.8

％＝CTA矩形の設計面積÷サムネイル面積。文字の重なりは差し引かない。4案は比較例で、推奨値ではありません。
  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方
  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

用途に合う作例を選び、自分の原稿に替える

見た目を選ぶ → 原稿・日時・素材を自分用に替える

完全ガイドの実画面。作例は仕上がりの参考。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

文字の大小と配置を、具体的に指定する

実行したレシピの要点

メイン：最大

サブ：メインの約1/3

文字：左　素材：右

実行済み依頼文の要約＋生成結果。約1/3は出発点の目安。文字が読めるかは実画像で確認。全文は付属プロンプトに収録。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

生成した画像は、原稿と見せ方を照合する

原稿・日時は正しい？

主役が先に読める？

背景が邪魔しない？

ズレを見つけたら、その箇所だけを修正指示にする。実生成例を使用。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方
03

AIっぽいサムネの直し方

直す場所と残す条件を分けて、AIへ伝える。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方
  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

主役を大きく、説明を小さくして読む順をつくる

修正前
修正後
「メインを最大に。サブは小さく。文言と配色は維持。」

実生成の修正例。角度・字形も変化しており、厳密な単一変数比較ではありません。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

文字の左端と四辺の余白をそろえる

修正前
修正後
「左端をそろえ、四辺に余白を。文字の大小は維持。」

実生成の修正例。指定寸法の完全一致ではありません。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

文字の背後だけ、模様と強い光を弱める

修正前
修正後
「文字の背後の模様と光を弱める。文言・配置は維持。」

実生成の修正例。文章・色・配置など、残す指定も同時に渡す。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

もっと「AIっぽい」を直したい方へ。

川合のX投稿

AIっぽさを避ける
24の禁止プロンプト

文字の装飾・変形・飾り線など。
次に直したい1か所の参考に。

投稿を見る ↗
川合の24の禁止プロンプト投稿を開くQRコードスマホからはこちら

x.com/kawai_design/status/2107808470993105128

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

縮小・一覧・本文との一致を、公開前に確認する

一覧：周囲に埋もれない？

縮小：主役の文字が読める？

本文：画像の約束と合う？

日時・ロゴも原稿と照合。見た目の改善はクリック・申込増の証明ではありません。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方
  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

無料参考帳で、参考探し・依頼・見直しができる

無料参考帳の使い方動画の画面

参考を探す → 指示をコピー → 見直す

無料配布：リアルタイム参加＋アンケート回答。補助レシピも同梱。

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

次の1枚をつくる、完全ガイド。

応援チケット限定｜作例を選ぶ → 内容を入力 → AIに渡す → 修正・確認

  1. 01　サムネイルとは？
  2. 02　目を引くサムネイルの作り方
  3. 03　AIっぽいサムネの直し方

用途別の制作・修正に、完全ガイドを使う

応援チケット

2,000円

アーカイブ・スライド
サムネイル完全ガイド
配置見本40 ＋ コピー用指示集

10/16（金）22:30まで

Peatixで申し込む ↗

購入済みなら追加不要。参考帳も同梱。無料参加の参考帳はリアルタイム参加・アンケート回答が条件。

一覧