【必ずチェック！】 note見出し画像の見え方
前回、Canvaを使って作るnote見出し画像を紹介しました。
しかし、実際アップロードしてみると、スマホ、iPad、デスクトップなど、見え方がそれぞれ違い、自分のアイコンで、見出し画像が隠れてしまう、ということがあります。
せっかく作った画像や写真も、自分のアイコンで隠れてしまうのは寂しいですよね！
そこで、デバイスごとの見え方と対応方法、隠れない画像を作るための用テンプレートをご紹介します。
デバイスごとの見え方比較
iPhone、iPad、デスクトップで比較しました。
１：note アプリ（iPhone)
２：note アプリ（iPad)
３：ブラウザ（iPhone Safari)
４：ブラウザ（デスクトップ Google Chrome）
左がオリジナルサイズ。アイコンを意識せず、noteが推奨している1280x670（中央部分1280x216)に合わせて作ったもの。
noteアプリで見ると、アイコンが画像左側を隠してしまいます。
noteをブラウザで見る分には問題なさそうです。
【推奨画像サイズのみで作成】
メリット：
・幅いっぱいに画像や文字、写真を表示できる
・アイコンがかぶらないデバイスで見ると、バランスいい画像を作りやすい
デメリット：
・デバイスにより、アイコンで情報が隠れる
一方、右側が調整後画像。
noteが推奨している1280x670（中央部分1280x216)に合わせて作ったものですが、アイコンを意識して文字を小さく、少しセンターに寄せています。
noteをブラウザで見ても、アプリで見ても、情報が隠れていません。
【推奨画像サイズ＋アイコンを意識して作成】
メリット：
・どのデバイスでも全ての情報が表示できる
・よりシンプルな画像を意識して作りやすい
デメリット：
・デバイスによって、画像の空白（バランス）が気になる場合がある
結論から言うと、やはりアイコンを意識して作成するのがいいかと思います。文字はできる限り中央に。写真のみだと、比較的簡単に調整しやすいかもしれませんね！
アイコンを意識した見出し画像テンプレート
note公式の「ヘッダー画像のサンプル」だとアイコンの位置がわかりづらかったので、アイコン位置がわかるテンプレートを用意してみました。
マガジン・クリエイターページのテンプレートです。ご自由にお使いください！
まとめ
・画像を作成、投稿したら、まずnoteアプリで見え方を確認しましょう！
・アイコンで見出し画像の一部（左下）が隠れることを意識し、レイアウトや写真を選んでみましょう
・何度も作り直しを防ぐため、掲載のテンプレートを是非参考にお使いください！