Notionのカバー画像のサイズを検証してみた

デザインと効率化が大好きなオンライン秘書＆デザイナー渋皮マロンです。

子どもを保育園に預けたい一心で（笑）、長年の専業主婦から個人事業主になりました💦

リベシティで出会ったNotionにどハマりし、

仕事の案件管理から、日々の献立・旅行計画・家計簿・学校プリントの整理まで、家族と自分の「やること全部」Notionで見える化！

忙しいママこそ、Notionは味方になります✨

この記事では“機能性”と“わくわく”を両立するページ作りのヒントをお届け。

NotionとCanvaを使って、あなただけのワークスペースをデザインしてみませんか？

Notionのカバー画像のサイズを検証してみた

Notionでページをおしゃれにカスタマイズする際、「カバー画像」を設定する方は多いですよね。

標準で搭載されているUnsplashのおしゃれ写真でも良いですが、自分の好みの画像だとNotionを開く機会が増えてより活用したくなりませんか？✨️

でも、いざ作ってみると「スマホだと見切れてる…」「文字が隠れちゃった」など、意外とサイズ調整が難しいのがカバー画像。

いろいろとWeb記事を探してみたけど、納得のいく記事が見つからない…

クライアントより「Notionのカバー画像を作ってほしい。」と頼まれたけど納品したら「思ってた見え方と違う！」とトラブルになった経験をお持ちの方もいらっしゃるのではないでしょうか？

そこで今回は、Notionのカバー画像の推奨サイズや表示のされ方を徹底(?)検証してみました！

カバー画像のサイズを知りたい

Notion公式から明確なカバー画像サイズの仕様は発表されていませんが、一般的には下記のサイズが推奨されています。

1500px ✕ 600px

このサイズでCanvaで作成すれば、大きく崩れることはありません。

ただし、同じブラウザで表示しても左右の幅によって見える領域が異なります💦

スマホとブラウザで表示されるサイズが異なる

ここがややこしいポイント。

同じカバー画像でも、表示される「見え方」はデバイスによって変わります。

PC（ブラウザ）：画像の横幅に合わせて上下をトリミングして表示
スマホ（アプリ）：画像の縦横比によってトリミングして中央を表示

つまり、適切な場所に重要な情報（特に文字）を入れないと、見切れてしまいます。

全デバイスで表示されるサイズは、1170px✕242pt？

よく言われている「1170px × 242px」というサイズですが、このまま使っても上下が見切れることがあります。

▼左右は全部見えているものの、上下が見切れている。

検証してみた

以下のようなカバー画像をCanvaで作成し、PC・スマホで検証してみました。

画像サイズ：1500px × 600px
1170px × 242pxの枠の中に
縦・横 各20pxごとに線幅10pxの線を引く
→10pxごとに交互に線が並びます

PCブラウザ：Google Chrome
スマホ：Notionアプリ
でどのように見えるかを検証

PCでの見え方

💡ブラウザの横幅を限界まで縮めた場合

ブラウザのサイズはスマホと同じような幅です。
縦は全部表示されていますが、横は左右5本ずつラインが隠れています💦
表示される領域は 横 1070px ✕ 縦 600px
左右両端が 215px ずつトリミングされています。

💡ブラウザの縦幅を限界まで縮めた場合

こんな極端な使い方をする人はいません😂
検証ですのでお付き合いください🙏

横は全部表示されています。縦のラインが6本と上下半分ずつ表示されているようです。
表示される領域は 横 1500px ✕ 縦 約70px
上下が 265px ずつトリミングされています。

スマホでの見え方

表示されるサイズは 横 1170px ✕ 縦 600px
左右が 165px ずつトリミングされています。

1500px ✕ 600px のカバー画像で検証の結果

・PC（ブラウザ）：ブラウザの幅によって上下のトリミング位置は異なる
　→横幅を基準に表示されるが、幅が狭い場合は横幅がトリミングされる

・スマホ（アプリ）：左右各165pxがトリミングされる
　→画像の縦横比によって見える位置に影響がある。

文字情報は1070px ✕ 70pxの中におさめるのがオススメ

文字やロゴなど「確実に見せたい情報」は、

キャンバスサイズは1500px × 600px
中央部分1070px × 70px以内 におさめるのがベスト！

このサイズで作成すれば、PCでもスマホでも、文字が見切れる心配がありません。

▼ Canvaなどでガイド線をつくっておくと安心です。

表示位置が動かせない

スマホでは、以下のような特徴があります。

Notionアプリは上下左右に大きくトリミングされる💦

画像の中心部分しか表示されない背景として使う場合は問題なし
文字や顔写真は中央寄せ＆小さめ推奨

スマホアプリではブラウザ版と異なり
「表示位置を変更」がないため、画像の表示位置を動かすことができません。

横長のバナーをカバー画像に設定すると、左右が大幅に見切れます。

スマホで撮った縦長の写真は上下が均等にトリミングされて中央部分みの表示されます。

正方形で作成した画像の場合、上下25%程度の画像がトリミングされます。

💡縦 1500px ✕ 横 1500px の正方形カバー画像 の場合

▼スマホではこのように見えます。

まとめ

💡Notionのカバー画像サイズ

✅ カバー画像を作成する際のキャンバスサイズは「1500px × 600px」
✅ どのデバイスでも表示される推奨サイズは「1170px × 242px」
✅ 安定して見える「領域」は「1070px × 70px」
✅ スマホではブラウザ版よりトリミングされる
✅ 文字やロゴは中央寄せ＆小さめが安心
✅ Canvaでガイド機能を使って作成すると便利！

Notionのカバー画像は、ちょっとした工夫でぐっと印象がアップします。

ぜひこの記事を参考に、わくわくするNotionページを作ってみてくださいね✨

Notion・Canvaに関するギモン・お悩みがありましたら
↓コメント欄で教えていただけますと、私が泣いて喜びます😂

次の検証にもつながりますのでぜひぜひお寄せください🙏