noteの記事を書き終えて、最後に見出し画像を作ろうとしたら、思ったより時間がかかってしまった。せっかく入れたタイトルの文字が、公開してみたら端で切れていた。そんな経験はありませんか。
見出し画像は、記事一覧やSNSでシェアされたときに、最初に目に入る記事の顔です。ところが、表示される場所によって切り取られ方が変わるため、パソコンの編集画面できれいに見えていても、スマホで見ると文字が欠けてしまうことがあります。
この記事では、無料で使えるデザインツールのCanvaを使って、noteの見出し画像を作る手順を解説します。文字が切れない配置のルール、読みやすい文字の入れ方、毎回ゼロから作らずに済む「自分用テンプレート」の作り方まで、実際に作りながら決めたことをまとめました。
AIで画像を作るときの考え方はnoteで紹介しています。この記事では、その画像をCanvaで仕上げる工程を中心に、noteより一歩踏み込んで解説します。
※この記事はプロモーションを含みます。
noteの見出し画像で文字が切れない配置のルール
作り始める前に、サイズと配置のルールを決めておきましょう。ここを押さえておけば、デザインに自信がなくても、どこに表示されても崩れない見出し画像になります。
推奨サイズは1280×670px、比率は約1.91:1
noteの公式ヘルプ登録画像の推奨サイズ一覧では、記事の見出し画像の推奨サイズは1280×670pxと案内されています。推奨サイズと違う画像を登録すると、トリミングされて表示されます。画像の容量は最大10MBまでです。
Canvaで作るときは、最初からこのサイズでデザインを作るのが確実です。スマホで撮った写真や正方形の画像をそのまま登録すると、上下が大きく切り取られ、主役が見えなくなることがあります。
大事な要素は「中央の枠」に収める
同じ見出し画像でも、表示される場所によって見え方が変わります。公式ヘルプによると、Xなどでシェアされたとき、パソコンのブラウザでは画像全体が表示されますが、スマホのブラウザやアプリでは中央部分が切り取られて表示されることがあります。
そこで、タイトルの文字やロゴなどの大事な要素は、画像の中央にまとめるのが基本です。目安として、左右それぞれ約100px、上下それぞれ約60pxの余白をとり、その内側に文字を収めると、多くの表示で欠けにくくなります。背景の写真や模様は、端まで広げて構いません。
Canvaでは、この枠を四角形で描いておき、作業が終わったら削除するか透明にすると、毎回位置に迷わずに済みます。
文字は「1行15文字・2行まで」が読みやすい
見出し画像は、記事一覧では小さく表示されます。タイトルを全部入れると文字が小さくなり、スマホではほとんど読めません。画像に入れる文字は、記事タイトルをそのまま入れるのではなく、1行15文字程度・2行までに短くまとめましょう。
たとえば「note有料記事の値段はいくらにする？手数料の手取り早見表と価格の決め方」なら、画像には「note有料記事の値段の決め方」とだけ入れ、補足は小さな文字で1行添える程度にします。記事タイトルは画像の下に表示されるので、画像では「何の記事か」が一瞬で伝われば十分です。
写真とイラスト、どちらを使うかの判断
レシピや暮らしのアイデアなど「実物」を見たい記事では、自分で撮った写真を背景に使うのが向いています。Instagramで見覚えのある写真なら、フォロワーにも自分の記事だと気づいてもらいやすくなります。
一方、手順や考え方を解説する記事では、写真より、色の面とシンプルなアイコンで作った画像の方が、文字が読みやすく、シリーズとしての統一感も出しやすくなります。写真を使う場合は、文字の後ろに半透明の帯を敷くと、写真の明るさに関係なく文字が読めるようになります。
| 種類 | 向いている記事 | メリット | 注意点 |
|---|---|---|---|
| 自分で撮った写真 | レシピ、暮らしの工夫、体験談 | 実物が伝わり、Instagramとつながる | 文字が埋もれやすいので帯を敷く |
| 色面＋アイコン | 手順、解説、比較 | 文字が読みやすく統一感が出る | 記事ごとに色やアイコンを変える |
| AIで作った画像 | イメージを伝えたい記事 | 撮れない場面も表現できる | 実物と誤解されない使い方に限る |
Canvaでnoteの見出し画像を作る手順
ここからは、Canvaで実際に見出し画像を作る流れです。初回は30分ほどかかりますが、手順5の「自分用テンプレート」を作っておけば、2回目からは5〜10分で仕上がります。
手順1 カスタムサイズ1280×670pxで新しいデザインを作る
Canvaのホーム画面で「デザインを作成」を選び、「カスタムサイズ」に幅1280、高さ670、単位はpxと入力します。無料プランでもカスタムサイズは使えます。
「ブログバナー」などの既存のテンプレートを使うと、サイズが少し違うことがあり、noteに登録したときに端が切れる原因になります。テンプレートのデザインを参考にしたい場合も、まずカスタムサイズで新しいデザインを作り、そこに要素をコピーして使いましょう。
手順2 セーフエリアの枠を置いてから背景を決める
最初に、前の見出しで説明した中央の枠を四角形で配置します。枠線だけの四角形を、左右100px・上下60pxの余白をとって置いておくと、文字を置ける範囲がひと目で分かります。
次に背景です。写真を使う場合は、アップロードした写真を背景にドラッグすると、画像全体に広がります。色面で作る場合は、記事のテーマに合わせた2色程度に絞ると、すっきりまとまります。
手順3 タイトル文字を入れて読みやすく整える
テキストを追加し、短くまとめたタイトルを入れます。文字の大きさは、1280pxの横幅に対して60〜80px程度が目安です。太めのゴシック体を選ぶと、小さく表示されたときにもつぶれにくくなります。
写真の上に文字を置くときは、文字の後ろに半透明の四角形を敷くか、文字に影を付けます。強調したい言葉だけ色を変えると、伝えたいことが一瞬で伝わります。ただし、色を変えるのは1か所までにしておくと、まとまりが崩れません。
文字の読みやすさを確かめる方法
Canvaの表示倍率を25%程度まで下げて、画面から少し離れて見てみましょう。記事一覧で表示される大きさに近くなり、文字が読めるかどうかを確認できます。読めない場合は、文字数を減らすか、文字を大きくします。
手順4 書き出してnoteに登録し、表示を確認する
セーフエリアの枠を削除したら、「共有」から「ダウンロード」を選び、PNGまたはJPGで書き出します。写真が中心ならJPG、文字や色面が中心ならPNGが向いています。
noteの記事編集画面で見出し画像を登録したら、公開前にプレビューで確認し、公開後はスマホのアプリとブラウザの両方で、記事一覧での見え方も確かめましょう。思ったより文字が小さく見える場合は、次の記事から文字数を減らすなど、テンプレートに反映していきます。
手順5 「自分用テンプレート」を作って使い回す
1枚目が完成したら、そのデザインを「自分用テンプレート」として残しておきます。Canvaでデザインのコピーを作り、名前を「note見出し画像_テンプレート」などに変えておけば、次からはコピーを開いて文字と写真を差し替えるだけで済みます。
テンプレートには、文字の位置、フォント、文字の大きさ、色、ロゴの位置を固定しておきます。記事ごとに変えるのは、タイトル文字と背景の写真、アクセントの色だけにすると、記事一覧に並んだときにシリーズとしての統一感が出て、読者に「この人の記事だ」と気づいてもらいやすくなります。
同じテンプレートの考え方は、note記事をInstagramのカルーセル投稿にするときにも使えます。
Instagramのハイライトのカバーも、同じようにテンプレートでそろえると統一感が出ます。
Canvaの使い方を学べる入門書
テンプレートの選び方から文字の配置、色の組み合わせまで、Canvaでのデザインの基本を画面つきで解説する入門書。デザインが初めての人が、基本の考え方を身につけるのに役立ちます。
見出し画像に使う写真の撮り方と選び方
背景に使う写真は、横長で撮っておくと見出し画像に使いやすくなります。Instagram用に正方形や縦長で撮った写真は、1280×670pxにすると上下が大きく切れるため、主役が画面の中央に小さめに写っている写真を選ぶと、トリミングしても収まります。
Instagramに投稿するときの画像サイズや比率は、種類ごとに一覧で整理しています。
料理の写真なら、斜め45度から撮った完成写真が見出し画像に向いています。光や角度の基本は、工程写真の撮り方をまとめた記事で詳しく解説しています。
AIで背景画像を作ってからCanvaで文字を重ねる方法や、AI画像を使うときの権利の注意点は、noteで紹介しています。
見出し画像のほかに、記事の中の見出しと目次を整えると、さらに読みやすくなります。
Canvaは、企業案件で使うメディアキット（媒体資料）づくりにも使えます。載せる項目と作り方は、次の記事で解説しています。
よくある質問
見出し画像を作り始めた人からよく聞かれる疑問にお答えします。
Canvaの無料プランだけで見出し画像は作れますか？
作れます。カスタムサイズでのデザイン作成、写真のアップロード、文字の追加、PNGやJPGでの書き出しは無料プランで使えます。素材の一部は有料プラン向けなので、使う前に表示を確認しましょう。
見出し画像は記事ごとに変えた方がいいですか？
記事ごとに変えるのがおすすめです。同じ画像だと、記事一覧で違う記事だと気づかれにくくなります。テンプレートを使い、文字と写真だけを変えれば手間はかかりません。
画像に文字を入れないのはだめですか？
だめではありません。写真だけで内容が伝わる記事なら、文字なしの方が印象に残ることもあります。ただし、解説記事では文字があった方が、一覧で内容が伝わりやすくなります。
クリエイターページのヘッダー画像も同じサイズで作れますか？
1280×670pxでも登録できますが、公式ヘルプでは、よりきれいに表示するために1920×1006pxがすすめられています。中央部分が切り取られて表示されるため、大事な要素は中央に置きましょう。
見出し画像を後から変更すると何か影響はありますか？
公開後も変更できます。ただし、すでにSNSでシェアされた投稿の画像は、すぐには新しい画像に切り替わらないことがあります。公開前に仕上げておくのが安心です。
まとめ｜サイズと中央の枠を決めれば、見出し画像は崩れない
noteの見出し画像は1280×670pxで作り、文字やロゴは中央の枠の中に収めるのが基本です。画像に入れる文字は1行15文字・2行までに短くし、写真の上に置くときは半透明の帯を敷くと読みやすくなります。
Canvaではカスタムサイズで作成し、セーフエリアの枠を置いてから背景と文字を配置します。1枚目が完成したらコピーして自分用テンプレートにし、2回目からは文字と写真の差し替えだけで仕上げましょう。
まずは次に公開する記事で、Canvaのカスタムサイズ1280×670pxのデザインを1つ作り、中央の枠を置くところから始めてみてください。
この記事を書いた人
くらしノート編集部。Instagramで見つけた暮らしのアイデアを、noteとこのブログで記事にまとめています。noteの見出し画像はCanvaのテンプレートで統一し、スマホとパソコンの両方で表示を確かめながら改善しています。
コメント