見出し画像

【必ずチェック!】 note見出し画像の見え方

 前回、Canvaを使って作るnote見出し画像を紹介しました。

しかし、実際アップロードしてみると、スマホ、iPad、デスクトップなど、見え方がそれぞれ違い、自分のアイコンで、見出し画像が隠れてしまう、ということがあります。

せっかく作った画像や写真も、自分のアイコンで隠れてしまうのは寂しいですよね!

そこで、デバイスごとの見え方と対応方法、隠れない画像を作るための用テンプレートをご紹介します。

デバイスごとの見え方比較

iPhone、iPad、デスクトップで比較しました。

比較

1:note アプリ(iPhone)
2:note アプリ(iPad)
3:ブラウザ(iPhone Safari)
4:ブラウザ(デスクトップ Google Chrome)

左がオリジナルサイズ。アイコンを意識せず、noteが推奨している1280x670(中央部分1280x216)に合わせて作ったもの。
noteアプリで見ると、アイコンが画像左側を隠してしまいます。
noteをブラウザで見る分には問題なさそうです。

【推奨画像サイズのみで作成】
メリット:

・幅いっぱいに画像や文字、写真を表示できる
・アイコンがかぶらないデバイスで見ると、バランスいい画像を作りやすい
デメリット:
・デバイスにより、アイコンで情報が隠れる

一方、右側が調整後画像。
noteが推奨している1280x670(中央部分1280x216)に合わせて作ったものですが、アイコンを意識して文字を小さく、少しセンターに寄せています。
noteをブラウザで見ても、アプリで見ても、情報が隠れていません。

【推奨画像サイズ+アイコンを意識して作成】
メリット:

・どのデバイスでも全ての情報が表示できる
・よりシンプルな画像を意識して作りやすい
デメリット:
・デバイスによって、画像の空白(バランス)が気になる場合がある

結論から言うと、やはりアイコンを意識して作成するのがいいかと思います。文字はできる限り中央に。写真のみだと、比較的簡単に調整しやすいかもしれませんね!

アイコンを意識した見出し画像テンプレート

note公式の「ヘッダー画像のサンプル」だとアイコンの位置がわかりづらかったので、アイコン位置がわかるテンプレートを用意してみました。

マガジン・クリエイターページのテンプレートです。ご自由にお使いください!

まとめ

・画像を作成、投稿したら、まずnoteアプリで見え方を確認しましょう!
・アイコンで見出し画像の一部(左下)が隠れることを意識し、レイアウトや写真を選んでみましょう
・何度も作り直しを防ぐため、掲載のテンプレートを是非参考にお使いください!

この記事が気に入ったらサポートをしてみませんか?