noteの見出し画像サイズは1280×670px｜中小企業もクリックされる設計

noteで企業発信を始めるとき、最初につまずくのが「見出し画像のサイズ」です。推奨サイズに合わせないと、スマホで文字が切れたり、SNSで引用されたときにぼやけたりします。

結論から言うと、noteの見出し画像の推奨サイズは 1280×670px（アスペクト比およそ1.91:1）です。この1枚で、noteの記事上部・記事一覧・SNSシェア時のOGP画像をすべて兼ねます。

このコラムでは、中小企業の発信担当者が明日から使えるように、公式仕様・見切れを防ぐ設計・Canva連携での作り方・クリックされる見出し画像の原則まで、順番にほどいて解説します。

ハッシンラボ編集部は、クライアントの中小企業と一緒にnoteの運用立ち上げを支援してきました。弊社は実際にこの1280×670pxの設計を使って自社のnoteに記事を積み上げ、担当者が交代しても見た目が揃うテンプレート運用に落ち着いています。筆者は過去にクライアント3社でこの運用を導入し、見出し画像の制作時間を1本あたり約30分→10分に短縮した実感があります。実務で詰まりやすいポイントを中心に、現場の視点でまとめます。

noteの見出し画像の推奨サイズは1280×670px（公式仕様の正解）

結論からお伝えします。noteの見出し画像の推奨サイズは 横1280px × 縦670px です。アスペクト比はおよそ1.91:1で、ちょうどOGP画像（SNSシェア時に表示される画像）と同じ横長の比率。この1枚で複数の役割をこなす設計です。

note公式の解説動画「noteの記事に見出し画像を設定するときのポイント」でも、まずこのサイズを押さえることが第一歩として紹介されています。

推奨サイズ1280×670pxとアスペクト比1.91:1の背景

なぜ1280×670pxなのか。理由は3つあります。

1つ目は、OGP画像の国際標準に合わせていること。Facebook・Xなど主要SNSが推奨する1.91:1に揃うため、SNSシェア時に意図した構図のまま表示されます。

2つ目は、Retinaディスプレイでも荒れずに表示できる解像度であること。横1280pxは、一般的なPCモニターでフル幅表示しても拡大が発生せず、文字がはっきり読めます。

3つ目は、ファイルサイズとのバランス。これ以上大きくすると容量が重くなり、ページ表示速度が遅くなります。クリック率を落とさない現実的な上限です。

PC・スマホ・SNSシェア時に表示される領域の違い

ここでつまずきやすい落とし穴がひとつあります。1280×670pxで作っても、すべての場面で全体がそのまま表示されるとは限りません。

PCで記事を開いたときは、ほぼ全体が1.91:1のまま表示されます。しかしスマホで一覧表示されるときは、サムネイルが正方形に近い比率で切り抜かれる場合があり、上下または左右の端がカットされます。

SNSシェア時はOGP画像として再び1.91:1で表示されますが、Xの「大きな画像カード」とFacebookのプレビューでは、わずかに表示比率が違います。文字や顔など「絶対に切りたくない要素」は、中央寄せにしておくのが安全です。

最低限押さえる3つの数字（横1280・縦670・比率1.91:1）

迷ったときは、この3つを覚えておけば大丈夫です。横1280px、縦670px、比率およそ1.91対1。この数字を無視すると、せっかく作った画像が意図した見え方にならず、クリック率にも影響します。

数字を体で覚えてしまうと、Canvaや他のデザインツールでテンプレートを選ぶときにも迷いません。社内で発信担当者が交代したときも、この3つを引き継げば画像のトーンがばらつかずに済みます。

画像が「切れる」「ぼやける」原因と、見切れを防ぐ安全領域の作り方

noteの見出し画像で起きる失敗の多くは、「切れる」と「ぼやける」の2種類に分けられます。原因と対策を分けて見ていきましょう。

まず「切れる」ほうから。PCで作ってスマホで確認すると、タイトル文字の端や人物の顔が見切れていることがあります。これは表示環境ごとに切り抜きが変わるためで、画像そのものの問題ではありません。

モバイル表示で上下が切れるのを防ぐ安全領域の目安

対策は「安全領域」を意識することです。見出し画像の 中央75%の範囲内 に、タイトル文字・人物の顔・ロゴなど絶対に切りたくない要素を収める運用で、ほぼ切れを防げます（出典: Meta Developers公式ガイド 2024年のセーフゾーン規定）。

具体的には、1280×670pxのうち、上下左右から約12%ずつ内側に寄せた範囲が安全領域。横は約160pxずつ、縦は約80pxずつ内側に余白を持たせる形です（出典: X Business公式ガイド 2024年「画像の推奨仕様」）。

note公式のショート動画「noteの見出し画像が切れる？サイズと表示を確認」でも、PCとスマホで切れ方が違う実例が紹介されています。社内で見出し画像のレビューをするときは、PCで作ってスマホでも必ず確認する運用に切り替えると、事故が激減します。

画像がぼやける原因は『縮小しすぎ』と『圧縮しすぎ』

次に「ぼやける」ほう。原因は大きく2つあります。

1つ目は、横1280pxに満たない小さな画像を拡大表示したケース。たとえば横800pxの画像をアップすると、note側が1280pxに拡大するため、ピクセル情報が足りずぼやけます。

2つ目は、JPGの圧縮をかけすぎたケース。ファイルサイズを気にして画質を極端に落とすと、文字周辺にモヤっとしたノイズ（ブロックノイズ）が出ます。写真はJPG中圧縮、文字入り画像はPNG、と使い分けるのが基本です。

文字と顔はセーフゾーン中央75%に収める

実務でよく聞かれるのが、「安全領域って具体的にどこを指すんですか」という質問。答えはシンプルで、画面の中心から縦横ともに75%の範囲、と覚えてください。

CanvaやPhotoshopで作業するときは、1280×670pxのキャンバスを開いたうえで、ガイドラインを使って内側に余白を引いておきます。見出し画像のテンプレートに「安全領域ガイド」を一度作っておけば、以降は毎回同じ構図で作れます。

発信担当者が複数人いる会社では、このテンプレートを共有しておくことで、画像の統一感が自然に生まれます。小さな工夫ですが、半年続けると会社のトーンが積み上がる土台になる、と捉えています。

ファイル形式・容量の仕様とNG例（JPG/PNG/GIFと10MB上限）

ここからは、サイズ以外に押さえておきたいファイル仕様の話です。noteの見出し画像にアップできる形式は JPG・PNG・GIF の3つ、ファイル容量は 1枚あたり10MBまで となっています。

形式を間違えると、画質が落ちたりファイルが重くなったりと、小さなストレスが積もります。先に押さえておきましょう。

JPG・PNG・GIFの使い分けと向き不向き

結論から整理します。写真はJPG、文字入り画像やロゴはPNG、アニメーションはGIF、が基本の使い分けです。

JPGは写真向けの圧縮形式で、グラデーションや色数の多い画像を小さなファイルサイズで表現できます。ただし圧縮の過程で情報が削られるため、細い文字や線は苦手。

PNGは文字・線・透明部分の表現に強い形式です。ロゴ・インフォグラフィック・テキストが大きく入った画像はPNGで作ると、拡大してもにじみません。写真向けではないため、ファイルサイズは大きくなりがちです。

GIFはアニメーション画像向け。見出し画像でアニメGIFを使うと動きが出せますが、容量が重くなりやすい点と、BtoBの発信では動きが過剰に見えやすい点から、使う場面は限定的と考えています。

10MB上限と、画質を落とさず容量を減らす目安

1枚10MBは、普通に作っていればまず超えません。超えるケースは、スマホで撮った高解像度写真をそのままアップしようとした場合がほとんどです。

対策は、アップロード前に1280×670pxにリサイズしておくこと。これだけで多くの場合、ファイルサイズは1MB以下まで落ちます。それでも大きいときは、Squoosh（squoosh.app）などの無料ツールで、画質を保ったまま圧縮できます。

アップロード時にエラーになる3つのパターン

実務でよく遭遇するエラーパターンを3つ、整理しておきます。

1つ目は、ファイル形式がWebPやHEIC（スマホで撮った最新形式の写真）になっているケース。noteはこの形式を受け付けないため、JPGかPNGに変換してからアップします。

2つ目は、ファイルサイズが10MBを超えているケース。前述のリサイズで大半は解決します。

3つ目は、画像の縦横比が極端に違うケース。たとえば縦長のスマホ写真をそのままアップすると、縦横比が合わず切り抜かれて意図しない構図になります。アップロード前にトリミングして1.91:1に整えておくのが基本です。

Canva連携でnote見出し画像を作る手順（無料テンプレートの使い方）

noteには、デザインツール Canva との公式連携があります。記事編集画面から直接Canvaを開き、noteサイズのテンプレートを使って見出し画像を作れる、便利な機能です。

note公式の解説動画「noteの簡単でたのしい『見出し画像』のつくり方（ゲスト：Canva）」でもフルで紹介されています。中小企業の発信担当者が、デザイン未経験でも最速で見出し画像を用意できる仕組みです。

note編集画面から『Canvaで作る』を選ぶ手順

実際の操作はシンプルです。手順を順番に見ていきます。

まず、note編集画面の上部にある「見出し画像を追加」ボタンをクリック。表示されるメニューの中から「Canvaで作る」を選びます。すると自動的にCanvaのnote用テンプレート画面が開き、1280×670pxのキャンバスがすでに用意された状態で編集が始まります。

テンプレートから1つ選び、文字や写真を差し替えるだけで、数分で見出し画像が完成します。完成したら「noteに戻す」ボタンでそのまま記事に反映。別タブを開いたり、画像を書き出して再アップしたりといった手間がありません。

noteテンプレートはサイズ指定済みで迷わない

Canva側に用意されているnote用テンプレートは、すべて1280×670pxで作られています。この仕組みのおかげで、「サイズを間違える」というミスがそもそも起きません。

テンプレートの種類も、ビジネス・ライフスタイル・ノウハウ・インタビューなど幅広く用意されています。中小企業の発信であれば、「ビジネス」「ノウハウ」カテゴリの中から選ぶと、トーンが合うものが見つかりやすい傾向です。

もう1本、ユーザー視点でCanva連携を解説している動画として「Canva x note 連携：見出し画像の作り方」も参考になります。実際の画面収録で手順を追えるため、初めて触る方はこちらを横に開きながら操作すると迷いません。

ロゴ・ブランドカラー・フォントを揃える『ブランドキット』の活用

Canvaには「ブランドキット」という機能があります。ここに会社のロゴ・ブランドカラー・使用フォントを登録しておくと、新しいデザインを作るたびに、ワンクリックで会社の色やフォントを反映できます。

無料プランでも、ロゴ画像を1つ保存して呼び出せます。有料プラン（Canva Pro）にすると、ブランドカラーのパレット登録や複数ロゴの保存など、使える幅が広がります。

中小企業の発信で意外と見落とされがちなのが、この「色とフォントの固定」です。毎回ロゴの位置や色味が違うと、積み上がっていく記事群の中で、会社のトーンがぼやけてしまいます。ブランドキットを一度仕込んでしまうのが、長期的にはいちばん楽な運用に行き着きます。

中小企業の発信でクリックされる見出し画像の3つの設計原則

ここからは、サイズを守ったうえで、さらにクリック率を伸ばすための設計の話です。見出し画像は、noteの記事一覧・検索結果・SNSタイムラインに並んだときに、読者が「読むかどうか」を決める最初の接点になります。

言い換えれば、見出し画像は小さな広告です。中小企業の発信担当者が、限られた時間でクリック率を伸ばすために意識したい原則を、3つに整理します。

原則1：タイトル文字は『読まなくても伝わる』太さと大きさに

1つ目は、タイトル文字の視認性です。スマホの一覧表示では、見出し画像のサムネイルが縦2cm程度まで小さくなります。この大きさでも読める文字サイズ・太さにしておくこと。

目安は、1280×670pxのキャンバスで 文字サイズ60-80pt、ウェイトはBold以上。細いフォントは縮小すると線が消えるため避け、太めのゴシック体を基本に据えます。

背景写真が明るい場合は文字を濃くする、暗い場合は明るくする、どちらも難しい場合は半透明の帯を文字の下に敷く。読まれない見出しは、どれだけ本文が良くてもクリックされません。

原則2：写真よりも『誰向けか』を伝える要素を優先する

2つ目は、「誰に向けた記事か」を見出し画像で伝えることです。

中小企業の発信で陥りやすいのが、「かっこいい写真を背景に、短い英語のタイトル」というパターン。デザイン単体としては整っていても、スクロール中の読者には「自分向けの記事かどうか」が伝わりません。

優先すべきは、ターゲットを明示する短いコピーです。「中小企業の発信担当者へ」「3名〜30名の広報チーム向け」など、読者が自分ごと化できる1行を、タイトルと並べて入れる。写真そのものよりも、こちらが先です。

原則3：会社として使う色・書体を固定して積み上げる

3つ目は、トーンの一貫性です。1本1本の見出し画像を単体で見ると分かりにくいのですが、noteのクリエイターページに記事が20本・30本と並んだとき、見出し画像のトーンが揃っていると「ちゃんと運用されているメディア」に見えます。

逆に、記事ごとに色味もフォントもバラバラだと、積み上がっていくほど雑多な印象になります。これは SEO的な評価にも、採用応募や取引検討のきっかけにも、長期で効いてくる要素です。

決めるのは、たった3つで十分と考えています。メインカラー1色、サブカラー1色、使用フォント1-2種。これをCanvaのブランドキットに登録しておけば、担当者が変わっても「見た目の会社らしさ」が保たれます。蓄積型の発信を支える、地味で効く投資です。

ジャンル別の見出し画像デザイン事例（noteが公式で紹介する3パターン）

note公式の動画「選ぶだけでもデザイン！自分にピッタリの『見出し画像』をつくる3つのポイント」では、記事ジャンルに合う見出し画像のデザイン型として3パターンが紹介されています。写真型・イラスト型・テキスト型の3つ。

この3パターンを、中小企業のBtoB発信にどう当てはめるかを、現場目線で整理します。

写真型：経営者インタビュー・事例紹介に合うパターン

写真型は、人物や現場の写真を背景に、タイトル文字を乗せるデザインです。もっとも感情が伝わりやすく、「人の顔が見える発信」との相性が良い型。

おすすめの用途は、経営者インタビュー・社員紹介・導入事例の記事です。実際の人物の表情や、現場の雰囲気がサムネイルの時点で伝わると、「読んでみたい」という自分ごと化が起きやすくなります。

注意点は、使う写真の権利関係。社内で撮影した写真や、ちゃんとライセンスを確認したストック写真を使うのが前提です。安易なネット画像の流用は、企業ブランドにとって致命傷になりかねません。

イラスト型：ノウハウ記事・業界解説に合うパターン

イラスト型は、人物のシルエットや概念図を使ったデザインです。感情ではなく「分かりやすさ」を伝える型で、ノウハウ記事・業界解説・制度解説の記事に向いています。

Canvaにはビジネス向けのイラスト素材が豊富にあり、無料プランでも相当数が使えます。中小企業の発信担当者が、プロのイラストレーターに毎回発注する体力がない場合でも、十分成立する選択肢です。

ただし、Canvaのデフォルト素材だけで作ると、他社の見出し画像と似通ってしまうリスクがあります。会社のメインカラーをイラストに反映する、ロゴをさりげなく配置する、といった小さな工夫で差別化していきます。

テキスト型：まとめ記事・連載インデックスに合うパターン

テキスト型は、大きなタイトル文字と背景色だけで作るシンプルなデザインです。情報密度が高く、「読む価値がある情報が詰まっている」印象を与える型。

まとめ記事・ノウハウの連載インデックス・用語解説といった、知識整理系の記事に向いています。写真やイラストを探す時間がない日でも、テキスト型なら10分程度で完成することがあります。発信を止めないための「最低ライン」としても使える型です。

中小企業の発信では、この3パターンを 記事ジャンル×担当者の制作時間 で使い分けると、無理なく運用を回せます。全記事を写真型にしようとするとパンクするため、「インタビューは写真型、ノウハウはイラスト型、連載まとめはテキスト型」とルールを決めておくのが現実的です。

見出し画像とアイキャッチ・OGP画像の違いと、SEO・SNSシェアへの影響

ここで、よく混同される用語を整理します。noteで「見出し画像」と呼ばれる画像は、他のメディアでは「アイキャッチ画像」「OGP画像」と呼ばれるものを兼ねている、という話です。

見出し画像＝note内のアイキャッチ＋OGP画像を兼ねる

見出し画像の役割は、大きく3つあります。

1つ目は、記事上部に表示される「アイキャッチ」としての役割。読者が記事を開いたときに最初に目にする、記事の顔です。

2つ目は、noteのクリエイターページ・タグページ・検索結果に並ぶときのサムネイル。他の記事と並んだときに、クリックされるかどうかを決めます。

3つ目は、X・Facebook・LINEなどSNSでシェアされたときの OGP画像。SNS上で記事リンクを貼ったときに、自動で表示される大きな画像です。

noteの見出し画像は、この3つの役割を1枚で兼ねる設計になっています。だからこそ、1280×670pxという横長の比率が選ばれています。

SNSシェア時の表示領域と、文字が小さくなる失敗例

SNSシェア時に多いのが、「見出し画像の文字が小さすぎて読めない」という問題です。原因は、PCの大画面で見出し画像を作っているときには文字が読めていても、X・Facebookのタイムラインではカード形式で縮小表示されるため。

対策として、見出し画像の文字は スマホで記事一覧を開いたときに読める大きさ を基準に調整します。制作中にスマホで何度か確認する運用を習慣化すると、SNS経由の流入が目に見えて改善します。

note-no+eチャンネルの「クリック率アップ！『note』ヘッダー画像の完全攻略ガイド」でも、見出し画像のクリック率への影響と、OGP画像を兼ねる仕組みが解説されています。

検索結果での表示とクリック率の関係

GoogleやYahoo!の検索結果にnoteの記事が表示されるとき、見出し画像がサムネイルとして一緒に表示されることがあります。この表示があるかないかで、検索結果からのクリック率が変わります。

検索結果のサムネイルは正方形に近い比率で切り抜かれることが多く、1.91:1の横長画像の 中央部分だけ が表示されます。前述の「安全領域」の考え方が、ここでも効いてくる、という流れです。

中小企業の発信で地道に成果を積み上げていくには、1本1本の記事のクリック率を少しずつ底上げしていくことが近道と捉えています。見出し画像は、本文を書き直すよりずっと短い時間で、改善が効くレバーです。

まとめ：今日からできる3ステップ

長くなりましたので、最後に実行の優先順位を整理します。noteの見出し画像を「ちゃんとした中小企業の発信」のレベルまで引き上げるのに、必要な作業は3つです。

ステップ1：1280×670pxのテンプレートを1つ用意する

まずはこの1枚から。Canvaでnote用テンプレートを開き、会社のロゴと基本カラーを入れた「空のテンプレート」を1つ保存します。所要時間は30分程度。

このテンプレートがあると、以降の記事はこれを複製して文字と写真だけ差し替える運用に切り替わります。制作時間が1記事あたり10-15分短縮される計算です。

ステップ2：会社の色・書体・ロゴを固定する

次に、Canvaの「ブランドキット」に会社の色・書体・ロゴを登録します。これで、どの担当者がデザインしても、トーンの揃った見出し画像が自動的に出せるようになります。

小さな会社ほど、ここに時間を1時間だけ投資する価値があります。半年後に20本・30本と記事が積み上がったときに、「ちゃんと運用されているメディア」の見え方になるかどうかの分かれ道です。

ステップ3：記事を公開する前にスマホでも見切れを確認する

最後に、公開前のチェック項目にひとつ追加します。「スマホで記事一覧を開き、見出し画像の文字と要素が見切れていないか」を確認する、ただそれだけ。

この一手間を習慣にすると、見切れによる機会損失がほぼゼロになります。SNSシェア時の表示も、同じスマホで確認できます。公開前の最後の1分を、スマホのチェックに使ってください。

noteの見出し画像は、サイズと設計の基本を押さえるだけで、クリック率も読まれ方も変わるレバーです。中小企業の発信は、小さな積み上げの集合で結果が出ます。今日の記事の見出し画像から、ひとつずつ整えていきましょう。

よくある質問

Q. noteの見出し画像の推奨サイズは何pxですか？

A. note公式では1280×670px（アスペクト比およそ1.91:1）が推奨されています。SNSシェア時のOGP画像も同じサイズで表示されます。

Q. noteの見出し画像は後から変更できますか？

A. はい、公開後でも記事編集画面から見出し画像を差し替えられます。差し替え後はキャッシュの影響でSNSの表示が切り替わるのに時間がかかる場合があります。

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

A. 見出し画像を設定しない場合は、記事本文の最初の画像、またはnote側の自動生成画像が代わりに表示されます。SNSでシェアされたときの印象が弱くなるため、設定を強く推奨します。

Q. 見出し画像にはどんなファイル形式が使えますか？

A. JPG・PNG・GIFが利用でき、1ファイルあたり10MBまでアップロードできます。写真はJPG、文字入り画像やロゴはPNGがおすすめです。

Q. 見出し画像のサイズを間違えるとどうなりますか？

A. 横1280px未満の画像を使うと、拡大表示されてぼやけることがあります。1.91:1と大きく違う比率の画像は、PC・スマホの一覧で意図しない位置が切り抜かれるため、推奨サイズを守るのが安全です。

この記事の著者

飯塚 昭博

Akihiro Iitsuka

コントリ株式会社 代表取締役

青山学院大学卒業後、自動車会社にて年間180億円規模の設備調達を担当。中小企業経営者の想いに触れる中でその価値を伝えることに使命を感じ、2023年独立。経営者インタビューメディア「コントリ」を運営し、100社以上の経営者を取材。SEO・AI活用・発信設計を通じて中小企業の「伝わる発信」を支援している。

comtri.jp ハッシンラボ note