note攻略 見出し画像

noteのサムネ(見出し画像)サイズと作り方|クリック率が変わる設計

見出し画像

記事が読まれるかどうかは、本文の前に決まっている。一覧に並んだ画像の段階で、勝負はついている。

1280×670という数字の意味と、トリミングされる仕様を押さえます

📋 この記事でわかること

  • 見出し画像の推奨サイズと、その数字の理由
  • 自動でトリミングされる仕様と、切れる方向
  • 文字を入れるときの可読性の基準
  • Canvaやnote内の機能を使った作成手順
  • クリック率を上げる設計と、避けるべきパターン

noteの見出し画像(サムネイル)の推奨サイズは1280×670pxです。アスペクト比にすると約1.91:1。より高精細に見せたい場合は1920×1006pxで作ると、大きな画面でもくっきり表示されます。重要なのは、サムネイル表示の際に自動的に1280×670へトリミングされるという仕様です。横に長すぎる画像は両端が切られ、縦に長すぎる画像は下側が切られます。この記事では、サイズの仕様を押さえたうえで、クリックされる見出し画像の設計と作成手順を解説します。

見出し画像の基本仕様

  1. 推奨サイズ:1280×670px
  2. 高精細版:1920×1006px(比率は同じ)
  3. アスペクト比:約1.91 : 1
  4. トリミング:横が長ければ両端、縦が長ければ下側が切られる
  5. 枚数:1記事につき1枚

なぜ1280×670なのか

この比率には理由があります。1.91:1という数字は、SNSでリンクをシェアしたときに表示されるカード画像の一般的な比率と一致しています。つまり、この比率で作っておけば、note内でもSNS上でも、意図した通りに表示されやすくなります。

表示される場所 見え方 影響
記事ページの上部 横幅いっぱいに表示 記事の第一印象を決める
note内の記事一覧 縮小されて並ぶ クリックされるかを左右する
クリエイターページ カード状に並ぶ アカウント全体の印象
SNSでのシェア リンクカードとして表示 外部からの流入に直結
検索結果 サムネイルとして表示される場合がある 検索からの流入に影響

とくに4番目が重要です。SNSでシェアされたとき、見出し画像がリンクカードとして大きく表示されます。ここが未設定だと、テキストだけの味気ないカードになり、クリック率が下がります。

トリミングされる仕様を理解する

サムネイル表示の際、画像は自動的に1280×670の比率にトリミングされます。この挙動を知らないと、意図した部分が切れてしまいます。

  • 横に長すぎる画像——両端がカットされます。左右の端に文字やロゴを置くと消えます。
  • 縦に長すぎる画像——下側がカットされます。下部に重要な情報を置くと見えなくなります。
  • 正方形に近い画像——上下が切られるか、左右に余白が入ります。

重要な要素は中央に配置する

この仕様への対処は単純です。文字やメインの被写体を中央付近に置いてください。端に寄せたレイアウトは、環境によって切れる可能性があります。作成後、一覧表示でどう見えるかを必ず確認してください。

スマホ表示での確認が必須

PCで見ると問題なくても、スマホの一覧では画像がかなり小さく表示されます。この状態で何が読めるかを確認してください。細かい文字や複雑なデザインは、この段階でほぼ判別できません。

文字を入れるかどうかの判断

見出し画像に文字を入れるべきか、写真だけにすべきか。これはジャンルによって答えが変わります。

記事の種類 文字の有無 理由
ノウハウ・解説 入れる 内容が一目で伝わり、クリックされやすい
手順・チュートリアル 入れる 何の手順かを示せる
エッセイ・体験記 入れない or 最小限 写真の雰囲気が読後感につながる
日記 どちらでも 統一感を優先する
作品・創作 入れない 作品そのものを見せる

文字を入れるときの可読性の基準

読める文字にする5つの条件

  1. 文字数を絞る——15文字以内。タイトルの全文を入れる必要はない
  2. 大きくする——縮小表示で潰れない太さと大きさに
  3. 背景とのコントラストを取る——薄い色の重ね置きは読めない
  4. 中央付近に置く——端は切れる可能性がある
  5. フォントは1〜2種類まで——多用すると読みにくくなる

もっとも多い失敗は、タイトルをそのまま画像に入れてしまうことです。30文字のタイトルを画像に入れると、一覧では読めません。伝えたい要素を10〜15文字に絞ってください。

作成方法1:デザインツールで作る

Canvaなどのデザインツールには、noteの見出し画像サイズ(1280×670px)に対応したテンプレートが100種類以上用意されています。デザインの知識がなくても、テンプレートを選んで文字を差し替えるだけで完成します。

  • 新規デザインを作成する——検索欄に「note」と入力し、記事見出し画像のテンプレートを選びます。
  • テンプレートを選ぶ——自分の発信テーマの雰囲気に合うものを選択します。
  • 文字を差し替える——15文字以内を目安に、記事の要点を入れます。
  • 色を調整する——自分のアカウントで使う色を決めておくと統一感が出ます。
  • PNG形式でダウンロードする——文字がにじまない形式です。

noteの編集画面から直接作れる

noteの記事編集画面には、デザインツールと連携するボタンが用意されています。ここから作成すると、完成した画像をそのまま見出し画像として設定できるため、ダウンロードと再アップロードの手間が省けます。作業を短縮したい場合はこちらを使ってください。

作成方法2:写真を使う

自分で撮影した写真や、フリー素材を使う方法です。エッセイや体験記に向いています。

写真の入手元 利点 注意点
自分で撮影 完全にオリジナル。独自性が出る 写り込みの確認が必要
フリー素材サイト 質が高く、すぐ使える 他の人と被る。商用利用の可否を確認
note内の共有画像 note内で使う前提で提供されている 利用条件を確認する
生成AIで作成 イメージに合うものを作れる 既存作品への酷似に注意

note内には、クリエイターが提供した画像を見出し画像として使える仕組みも用意されています。使用すると提供者に通知が届く形になっており、探す手間なく設定できるのが利点です。利用条件は必ず確認してください。

クリック率を上げる設計

見出し画像の役割は「美しく見せること」ではなく「クリックさせること」です。この目的から逆算すると、やるべきことが変わります。

設計要素 効果が高い 効果が低い
一覧で目立つ配色 淡い色だけで構成
文字 15文字以内で要点 タイトル全文
情報量 1つのメッセージに絞る 要素を詰め込む
統一感 アカウント内で色調を揃える 毎回まったく違うデザイン
被写体 記事の内容と関係がある 無関係なイメージ写真

統一感が生む効果

アカウント内で色調やフォントを揃えると、一覧に並んだときに「この人の記事だ」と認識されるようになります。読者が過去に良い記事を読んでいれば、この認識がそのままクリックにつながります。逆に毎回まったく違うデザインだと、この蓄積が起きません。

統一のための3つのルール

  1. 使う色を2〜3色に決める(メイン、サブ、文字色)
  2. フォントを1〜2種類に固定する
  3. 文字の位置を毎回そろえる(中央・左上など)

▶ 記事内に貼る画像は、見出し画像とは推奨サイズが違います。
表示幅620px・推奨1240px以上の仕様はこちらです。

記事内画像の最適サイズを見る

見出し画像でよくある失敗

  • 1
    未設定のまま投稿する——一覧で他の記事に埋もれます。仮のものでも設定すべきです。
  • 2
    タイトルを全部入れる——縮小表示で読めません。要点だけに絞ります。
  • 3
    端に重要な要素を置く——トリミングで切れます。中央に配置してください。
  • 4
    毎回デザインが変わる——アカウントとしての認識が積み上がりません。
  • 5
    本文と無関係な画像——クリックされても、期待とのズレで離脱されます。
  • 6
    権利の確認をしていない——検索で見つけた画像の無断使用は著作権侵害です。

「凝る」より「設定する」が先

デザインに時間をかけすぎて投稿が遅れるのは本末転倒です。完成度が60点でも設定されている記事のほうが、未設定の記事より確実に読まれます。まずテンプレートで作って設定し、余裕ができたら質を上げる。この順番が実務的です。

作成にかける時間の目安

見出し画像に何分かけるべきか。記事の性質によって変わります。

記事の種類 かける時間 方法
日常の投稿・日記 3分 手持ちの写真か共有画像を選ぶだけ
通常のノウハウ記事 10分 テンプレートに文字を入れる
力を入れた記事 20〜30分 デザインを調整し、複数案を比較
有料記事 30分 購入判断に影響するため丁寧に

テンプレートを一度自分用にカスタマイズして保存しておけば、次回以降は文字を差し替えるだけで済みます。初回に30分かけて型を作り、以降は5分。これが効率的な運用です。

見出し画像とタイトルの役割分担

一覧では、見出し画像とタイトルがセットで表示されます。同じ情報を重複させるのは無駄なので、役割を分けてください。

要素 担う役割 入れるべき情報
タイトル 検索と内容の説明 検索される言葉、具体的な数字
見出し画像 視線を止める、雰囲気を伝える 要点を短く、または情景

タイトルに「未経験から3ヶ月で月10万円に到達した手順」と書いてあるなら、画像には「未経験→月10万」程度で十分です。同じ文章を繰り返す必要はありません。

テンプレートを作って使い回す

毎回ゼロからデザインすると、それだけで投稿のハードルが上がります。自分用のテンプレートを1つ作っておけば、以降は5分で済みます。

決めておく要素 内容 効果
背景の色または画像 2〜3パターン用意する 記事の種類で使い分けられる
文字の位置 中央または左寄せに固定 一覧に並んだときの統一感
フォント 見出し用と補足用の2種類 迷う時間がなくなる
文字色 背景とのコントラストが取れる色 可読性が安定する
ロゴやアイコン 隅に小さく入れる(任意) 誰の記事か認識されやすい

テンプレート運用の手順

  1. 初回に30分かけて、納得できるデザインを1つ作る
  2. そのデザインを複製して保存する
  3. 次回以降は複製を開き、文字だけ差し替える
  4. 背景のバリエーションを2〜3種類作っておく
  5. 半年に一度、飽きたら全体を刷新する

この運用にすると、記事ごとの作業は文字の差し替えだけになります。5分で終わるなら、忙しい日でも見出し画像を設定できます。「時間がないから未設定」という状態を防ぐのが、テンプレート化の本当の目的です。

まとめ:1280×670、中央配置、統一感

見出し画像は、記事が読まれるかどうかを本文の前に決めてしまう要素です。推奨サイズは1280×670px、より高精細にするなら1920×1006px。トリミングされる仕様があるため、重要な要素は中央に置いてください。

この記事の要点

  1. 推奨サイズは1280×670px(比率1.91:1)
  2. サムネイル表示時に自動トリミングされる。端は切れる
  3. 文字を入れるなら15文字以内、中央付近に大きく
  4. デザインツールのテンプレートを使えば10分で作れる
  5. アカウント内で色調を揃えると認識が積み上がる
  6. 未設定は機会損失。完成度より設定を優先する
  7. 権利の確認は必須。検索で見つけた画像は使えない

凝ったデザインは必要ありません。適切なサイズで、読める文字で、統一感のある画像を毎回設定する。それだけで、一覧での存在感は明確に変わります。

▼ RECOMMENDATION ▼

アイキャッチ設計は、ブログでも同じように効く

一覧で目立つ画像を作る技術は、noteでもブログでも共通して使えます。アメブロでもアイキャッチは記事のクリック率を左右し、加えてASPアフィリエイトによる収益化も可能です。アメプレスProは、そのアメブロの集客(いいね・フォロー・アクセス獲得)を自動化するツール。月額2,980円、365日LINEサポート付きです。

✦ 365日LINEサポート ✦ Zoomサポート ✦ 複数ブログ対応 ✦ SNS連携機能
アメプレスPro 公式ページを確認する →

※ 当サイトはアフィリエイト広告を含みます。

FAQ|noteの見出し画像についてよくある質問

Q. 見出し画像のサイズは何pxですか?

推奨は1280×670pxです。アスペクト比にすると約1.91:1になります。より高精細に見せたい場合は、同じ比率で1920×1006pxにすると大きな画面でもくっきり表示されます。この比率はSNSでシェアされたときのリンクカードとも一致するため、外部からの流入を考えても適した設定です。

Q. サイズが違う画像を使うとどうなりますか?

サムネイル表示の際、自動的に1280×670の比率にトリミングされます。横に長すぎる画像は両端が切られ、縦に長すぎる画像は下側が切られます。したがって、文字やメインの被写体は中央付近に配置してください。端に寄せたレイアウトは、環境によって意図せず切れる可能性があります。

Q. 文字は入れたほうがいいですか?

記事の種類によります。ノウハウや手順の記事では、内容が一目で伝わるため文字を入れたほうがクリックされやすくなります。一方、エッセイや体験記では、写真の雰囲気そのものが読後感につながるため、文字を入れないか最小限にとどめるほうが効果的です。作品や創作を扱う場合は、作品そのものを見せてください。

Q. 文字は何文字まで入れられますか?

技術的な制限はありませんが、実用上は15文字以内を目安にしてください。一覧表示では画像が小さくなるため、それ以上の文字数だと読めません。もっとも多い失敗が、タイトルをそのまま画像に入れることです。30文字のタイトルを画像に入れても判別できないので、伝えたい要素を10〜15文字に絞ってください。

Q. どうやって作ればいいですか?

デザインツールを使うのが早道です。Canvaなどには、noteの見出し画像サイズに対応したテンプレートが100種類以上用意されており、選んで文字を差し替えるだけで完成します。noteの記事編集画面から直接デザインツールへ移動できるボタンもあり、そこから作ればダウンロードと再アップロードの手間も省けます。

Q. 見出し画像を設定しないとどうなりますか?

一覧に並んだときに他の記事に埋もれ、クリックされにくくなります。またSNSでシェアされたとき、リンクカードが味気ないものになり、外部からの流入も落ちます。完成度が高くなくても、設定されている記事のほうが確実に読まれます。まずテンプレートで作って設定し、余裕ができたら質を上げるという順番がおすすめです。

Q. デザインは毎回変えたほうがいいですか?

逆です。アカウント内で色調やフォントを揃えると、一覧に並んだときに「この人の記事だ」と認識されるようになります。過去に良い記事を読んだ経験があれば、その認識がそのままクリックにつながります。使う色を2〜3色に決め、フォントを1〜2種類に固定し、文字の位置をそろえる。この3つで統一感が生まれます。

Q. フリー素材の写真を使ってもいいですか?

使えますが、素材ごとの利用規約を確認してください。商用利用の可否、加工の可否、クレジット表記の要否といった条件は素材によって異なります。とくに有料記事を販売している場合は商用利用にあたるため、条件を満たす素材を選ぶ必要があります。検索で見つけた画像やSNSから保存した画像の無断使用は、著作権侵害にあたります。

Q. 作成にどのくらい時間をかけるべきですか?

記事の性質によります。日記なら3分(手持ちの写真を選ぶだけ)、通常のノウハウ記事なら10分(テンプレートに文字を入れる)、有料記事なら30分程度が目安です。テンプレートを一度自分用にカスタマイズして保存しておけば、次回以降は文字の差し替えだけで5分程度に短縮できます。

Q. タイトルと同じ文言を画像に入れるべきですか?

不要です。一覧ではタイトルと画像がセットで表示されるため、同じ情報を重複させるのは無駄になります。タイトルは検索される言葉と具体的な数字を担い、画像は視線を止める役割を担う——この分担で考えてください。タイトルが「未経験から3ヶ月で月10万円に到達した手順」なら、画像は「未経験→月10万」程度で十分です。

アメプレスラボ編集部

AMEPRESS LAB EDITORIAL TEAM

アメブロ・note・WordPressを実際に運営し、それぞれの収益構造を数字で検証しているチーム。プラットフォームごとの得意・不得意を踏まえた、宣伝色に偏らない実践情報の発信を続けています。