表示条件を調べる。参考を探す。3ステップで見直して、次の1枚を作る。

01止める02伝える03クリックさせる

その1枚に、ひらめきを。

探す。つくる。磨く。

PRESS START

使い方・確認・出典

使い方

  1. 新しく作る人:媒体の表で使用条件を決め、参考を3つ選び、「制作の依頼文」を使う。
  2. 手元の画像を直す人:3ステップのチェックから始め、「診断」「修正」の依頼文を使う。
  3. 投稿する前:画像単体だけでなく、実際の一覧・スマートフォン・遷移先を確認する。

準備するのは、本文または企画書、画像を見せたい相手、使う場所、使ってよい素材。参考画像をAIへ渡す場合は、利用・共有してよいものを選んでください。

公開前に

  • 日付、金額、名前、申込条件は企画の正本と同じか。
  • 画像のファイル寸法・形式・容量が媒体の条件を満たすか。
  • 画像に含む人物・ロゴ・素材の利用条件を確認したか。
  • PCとスマートフォンの表示で、切れ・重なり・読みにくさがないか。
  • リンク先を開き、画像で約束した内容があることを確認したか。

迷う項目があれば、確認できるまで公開を保留します。見た目の採点が高くても、この確認の代わりにはなりません。

出典

媒体仕様の根拠は表内のS1〜S5です。参考先のリンクは「03」にまとめています。数値を変更するときは、公式ページと実際の投稿画面を読み直し、確認日も更新してください。

3ステップ、依頼文、参考の見方は本参考帳の実務用整理です。公式が定めた共通の評価基準ではありません。教材中の見出し例・比較例は説明用です。

媒体を選ぶ

仕様確認:2026.10.02

条件の読み方

確認日:2026年10月2日(日本時間)。比率は「横:縦」。「公式」は参照先の記載、「制作例」は本教材の提案です。推奨サイズは、文字が切れないことの保証ではありません。媒体・端末・配置で変わる表示は、投稿前のプレビューで確認してください。

note 記事1.91 : 1+

note 記事の見出し画像

公式:1280×670px。計算上の比率は約1.91:1

切れ・重なり

公式は推奨サイズ以外のトリミングと、アプリ・ブラウザの表示差を案内。記事見出しの全画面共通の安全領域は数値未公表

制作時の確認

主見出しを端へ寄せず、記事一覧と記事ページで確認。note公式 S1/2026-10-02

note ヘッダー1.91 : 1+

note クリエイター・マガジンヘッダー

公式:1.91:1、1280×670px。高精細用1920×1006px

切れ・重なり

中央部分が切り取られて表示される。表示幅・端末で範囲が異なる。記事の見出し画像と同じ切れ方とは限らない

制作時の確認

左右端だけに重要情報を置かない。中央に顔・主役を置き、PC・スマホ両方で確認。note公式 S1/2026-10-02

YouTube 動画16 : 9+

YouTube 通常動画のサムネイル

公式:16:9、3840×2160px推奨、最小幅640px。JPG・PNG等

切れ・重なり

一律の安全領域の数値は出典に記載なし。縦動画に設定した16:9画像は、一部の表示面で自動生成の4:5画像へ置き換わる

制作時の確認

通常動画と縦動画を分けて確認。時間表示等と重要文字が競合しないか実画面で見る。容量上限はPCアップロード50MB、モバイル動画サムネイル2MB。YouTube公式 S2/2026-10-02

YouTube Shorts9 : 16+

YouTube Shorts のカスタムサムネイル

公式:9:16、2160×3840px推奨、最小高さ640px

切れ・重なり

表示面別の固定トリミング範囲は出典に記載なし。投稿枠と各一覧での見え方を確認

制作時の確認

PCのYouTube Studioで追加する案内。アカウント確認が必要。通常動画用の横画像をそのまま流用しない。YouTube公式 S2/2026-10-02

X 画像1枚2:1 〜 3:4+

X 通常投稿・画像1枚

公式:2:1〜3:4の標準比率は全体表示の案内。制作例:横1600×900px/縦1200×1600px

切れ・重なり

1枚投稿の説明。複数枚投稿、リンクカード、プロフィールのメディア一覧まで同じとは限らない

制作時の確認

投稿作成画面とタイムラインを確認。複数枚の固定切り取り数値は本表で断定しない。X公式 S3/2026-10-02

Peatix カバー2.04 : 1+

Peatix イベントカバー

公式:1840×900px。計算上の比率は約2.04:1。JPEG・PNG・GIF

切れ・重なり

1840×900pxへ自動配置。元画像の比率により上下または左右を調整。スマートフォン向けに最適化されるが、共通の安全領域の数値は記載なし

制作時の確認

16:9画像の文字を端に置いたまま流用しない。イベント編集画面で位置を確認。カバーと詳細画像を合わせて1回の保存あたり5MBまで。Peatix公式 S4/2026-10-02

Google 広告横・正方形・縦+

Google レスポンシブディスプレイ広告・画像アセット

公式ガイド:横1.91:1=1200×628px、正方形1:1=1200×1200px、縦9:16=900×1600px

切れ・重なり

配置に合わせて表示サイズが変わる。全配置共通の切り取り量・安全領域は出典に記載なし

制作時の確認

完成バナーと画像アセットは別物。画像への文字の重ね入れや、押せるように見えるボタンは避け、広告プレビューで確認。Google公式 S5/2026-10-02

表にない媒体を使うとき

Instagram・Facebook広告などは、フィード、プロフィール一覧、ストーリーズ、広告配置で条件が異なります。今回は公式本文を十分に取得できなかったため、未確認のサイズや安全領域を転記していません。Instagramの画像解像度ヘルプ、Meta広告ガイドと、利用する投稿・広告画面で確認してください。確認試行日:2026-10-02。

記録する4点:「媒体と表示場所/公式URL/記載された比率と切れの条件/確認日」。他サイトの一覧表から、投稿と広告の仕様を混ぜて転記しないことが重要です。

「端を空ける」と「切れない」は別

端の余白は読みやすさのための設計です。全媒体で安全な「上下○%」は、この教材では設定しません。中央に置いてもUIに隠れることがあるため、最後は実際の表示を見ます。

次のツールは、画像を別の比率へ中央トリミングしたときの計算上の見え方を確認するものです。各サービスの画面を再現するものではありません。画像は外部へ送信しません。

比率を変えたときの切れ方を確認

画像を選ぶと、中央で切り取ったプレビューを表示します。

中央切り取りの計算例。実際の投稿UI・端末ごとの切れを保証するものではありません。画像は端末内で処理し、保存・送信しません。

参考を探す

使いたい表現から、次の1枚のヒントを。

BANNER LIBRARYのトップページ
ギャラリー

BANNER LIBRARY

バナーの引き出しを増やす

見るポイント

色・業種・表現で探し、見出し、写真、日付の優先順位を見る。元記事の掲載先。

Bannnner.comのトップページ
ギャラリー

Bannnner.com

構図と文字量を比べる

見るポイント

文字が多い例と少ない例を比べ、削れる情報を見つける。元記事の掲載先。

SAMUNEのトップページ
ギャラリー

SAMUNE

動画のサムネを探す

見るポイント

カテゴリー・テイスト・色から探し、顔と見出しの比率を見る。元記事の掲載先。

Peatixのトップページ
メディア

Peatix

イベントの伝え方を見る

見るポイント

同じ参加者を対象にするイベントで、価値・登壇者・日時の優先順位を比べる。元記事の掲載先。

AIsmileyのトップページ
メディア

AIsmiley

AIの用途を伝える

見るポイント

AIサービスやイベントの紹介から、対象者と業務の具体的な表現を観察する。元記事の掲載先。

NewsPicks Brand Designのトップページ
メディア

NewsPicks Brand Design

ビジネスの告知を読む

見るポイント

イベント紹介で、テーマ・登壇者・参加する価値がどうまとめられているかを見る。元記事の掲載先。

SANKOU!のトップページ
ギャラリー

SANKOU!

余白と写真を学ぶ

見るポイント

Webの最初の画面から、主役と見出しの関係を学ぶ。小文字はそのままサムネへ移さない。

noteのトップページ
メディア

note

記事と画像をつなぐ

見るポイント

自分のテーマで検索し、画像と記事タイトルの役割分担を比べる。

川合卓也のnoteのトップページ
メディア

川合卓也のnote

著者の制作例を見る

見るポイント

記事の価値を画像でどう圧縮しているかを見る。

Adobe Colorのトップページ
制作ツール

Adobe Color

補色の組み合わせを探す

見るポイント

主色と補色を選び、背景・文字・強調へ役割を割り当てる。最後に実物の読みやすさを確認する。今回の補足。

Google Fontsのトップページ
制作ツール

Google Fonts

見出しの書体を探す

見るポイント

必要な言語・文字の収録と利用条件を確認し、実際の見出しで太さと読みやすさを比べる。今回の補足。

各リンク先のトップ画面より抜粋。撮影:2026.10.03

作り方も読む
元記事・参考先の扱い

【0.3秒で目を引く】バナー・サムネイル参考サイト集(川合卓也、2025-02-23)をもとに再整理。元記事の6サイト・関連記事2本を収録し、配色と書体の参考先を補いました。著者のローカル保存本文と公開ページを照合。参考先の確認日:2026-10-03。媒体仕様の確認日は2026-10-02のままです。

ギャラリーへの掲載は素材の再利用許可を意味しません。画像・人物・ロゴを使う場合は、配布元と利用条件を確認してください。掲載例のクリック率・売上は評価していません。2025年の記事で扱うモデル・操作は、現在の提供条件とは区別してください。

参考をAIへ渡す依頼文

Codexへの依頼文
依頼文を読む
添付した参考画像から、今回の制作に使える設計原則を抽出してください。
今回の媒体:[媒体と表示場所]
対象者:[誰が見るか]
伝える内容:[本文が約束する価値]

主役、読む順番、文字量、余白、色の役割を短く整理してください。
そのうち今回に適する原則を2つだけ選び、理由を説明してください。
参考の固有のコピー、ロゴ、キャラクター、特徴的な絵柄を複製せず、
提供した自分の内容と素材で別の構図を提案してください。
参考と今回で条件が違う点も示してください。まだ画像は生成しません。

1枚を見直す

1つずつチェックしてください。確認できなければ未確認のままにします。 このチェックは見え方の診断です。クリック率が上がることを判定するものではありません。

STEP 1 止める|一覧で見つかるか

修正のヒント

直すなら:周囲が文字だらけなら、まず文字を減らす。周囲が淡い色なら、主役と背景の明暗差を見直す。派手な要素を全部足す前に、一番効きそうな差を1つ選びます。

STEP 2 伝える|誰向けの、何の話か

修正のヒント

直すなら:「AI活用の未来」から「サムネ、どこを直す?」のように、本文にある具体的な問題へ寄せる。文字を大きくする前に、要らない言葉を削ります。

STEP 3 クリックさせる|続きを見る理由があるか

修正のヒント

直すなら:「知らないと損!」だけで終えず、「文字が読めない原因を診断」のように、内容の価値を見せる。答えをすべて載せる必要はありませんが、何の話かは隠しません。

今日直すのは、この1点

Codexへの依頼文
依頼文を読む
使う場所:
対象者:
最初に詰まる段階:止める/伝える/クリックさせる
確認できた問題:
直す場所:
直す理由:
変更内容:
維持するもの:

依頼文を選ぶ

コピーして、[ ]を自分の情報に。

準備と利用環境

[ ]を自分の情報で埋め、使わない項目は「なし」と書きます。本文・画像・参考は、添付するか、Codexから読めるファイルを指定してください。特定の個人用スキルの導入は前提にしません。

画像生成・画像の確認・ファイル保存は、利用環境の機能と権限によります。できない場合は「できない工程と代替」を返す指示を入れています。モデルやプランが違っても同じ結果になる保証はありません。

P1 新しいサムネイルを作る

Codexへの依頼文
依頼文を読む
次の情報からサムネイルを作ってください。

媒体と表示場所:[例:noteの記事一覧・記事ページ]
サイズ:[例:1280×670px]
対象者:[例:AIでサムネを作ったが、修正で迷っている発信者]
本文・企画の正本:[本文を貼る/ファイルを指定]
見た人にしてほしいこと:[例:記事で診断の順番を読む]
必須文字:[正式名称・日付など。なければ「なし」]
使用可能な素材:[添付画像の説明。なければ「なし」]
ブランドの条件:[色・フォント等。なければ「指定なし」]

まず本文の価値を1文にし、見出しと構図の組み合わせを3案出してください。
各案に、最初に見るもの、次に読むもの、採用理由を書いてください。
本文にない数字・実績・効果は足さないでください。
制作を左右する不足だけ確認し、私が選ぶまで生成を待ってください。

選択後、画像生成で1枚制作してください。
正確な日本語・日付・ロゴは必ず原文と照合し、
生成で崩れる場合は背景と分け、正しい文字・素材を配置する方法を提案してください。
指定サイズで出力できない場合は、実寸と仕上げ方法を報告してください。
完成後は縮小時の読みやすさ、文字の欠け、本文との一致を確認してください。
使えない機能や見られない画像は、実行・確認済みと書かないでください。

P2 作った1枚を診断する

Codexへの依頼文
依頼文を読む
添付サムネイル・本文・一覧表示の画像を見て、次の順番で診断してください。
1. 止める:一覧の中で主役が埋もれていないか
2. 伝える:実際の小さい表示で、誰向けの何の話かが分かるか
3. クリックさせる:続きを見る価値があり、本文でその約束を回収できるか

各項目を「確認できたこと/問題/修正案」で短く示してください。
一覧画像や実際の表示サイズがなければ、その確認は未実施としてください。
読者の感想やクリック率を推測の事実として書かないでください。
最初に直す点を1つだけ選び、理由を説明してください。まだ画像は変更しません。

P3 選んだ1点を修正する

Codexへの依頼文
依頼文を読む
添付の元画像を参照し、次の1点を修正してください。
修正箇所:[例:見出しの背後の模様]
理由:[例:縮小時に文字と背景が重なり、読みにくいため]
変更内容:[例:文字の背後だけ模様を減らし、明暗差をつける]
維持するもの:[例:文言・人物・主な配色・構図]

元画像は残し、別名で修正版を作ってください。
指定外に変わった部分があれば報告してください。
元画像と修正版を同じ大きさで見せ、
読みやすさ、必須文字との一致、切れ、本文との一致を再確認してください。
修正を繰り返す前に、残る問題と次の1手を提示してください。
画像編集を利用できない場合は、その旨と代替手順を伝えてください。

すぐ試すなら、この一文から

「このサムネイルを小さく表示したとき、最初に直すべき場所を1つ教えて。理由と、変えずに残す部分も説明して。」

画像と本文を添えて送ってください。次に、提案を自分の目で確かめてからP3へ進みます。