サムネイルの文字数｜スマホで読める一言に絞って作る

金曜の夜、来月の講座の告知をnoteに書き終えて、Canvaで見出し画像を作ったところ。講座名、日付と時間、会場、講師名、「初心者歓迎」まで入れたら画面の半分が文字になり、知り合いに見せると「スマホだと文字が多くて、何の講座か分からない」と言われた。講座の要点を短くまとめた動画もYouTubeに上げはじめたところで、サムネイルには何文字までなら入れてよいのかを調べている。

サムネイルの文字数は、決まった字数を覚えるより、スマホの一覧と同じ大きさに縮めたときに一目で読めるかで決めると迷いにくくなります。残すのは、見た人が「自分に関係がある」と分かる一言で、日時や会場は題名と説明文、本文の最初へ回します。この記事では、文字数を決めるときの物差しと、残す一言の選び方、外した言葉の置き場所、削る3つの手順を順に書きます。

書いているのは、商工会議所や自治体の講座で登壇し、YouTubeやnoteのサムネイル、講演のスライドの制作もお引き受けしている会社です。このブログの記事に付けている画像も、ここに書く手順で文字を決めています。

サムネイルの文字数は、スマホに縮めて読める量で決める

サムネイルを作っているあいだは、パソコンの画面いっぱいに大きく表示されていますが、読む人が目にするのは、スマホの一覧に並んだ小さな1枚です。YouTubeのヘルプは、ふつうの動画のサムネイルは縦横比16:9、ショート動画は9:16で、どちらも幅は640ピクセル以上で上げるよう案内しています（YouTubeヘルプ「YouTube でカスタム サムネイルを追加する」）。noteのヘルプは、記事の見出し画像の推奨サイズを1280×670ピクセルとし、推奨と違う大きさの画像はトリミングされて表示されると書いています（noteヘルプセンター「登録画像の推奨サイズ一覧」）。どの形でも、作る画面と読まれる画面の大きさがまるで違うことを、作りはじめる前に頭に入れておきます。

noteのヘルプ「見出し画像のポイント」では、見出し画像はタイムラインやページ一覧で目を留めてもらうためのもので、細かすぎる画像はかえって目に留まらず、流し読みでも目を引く大きな造形や色面のある画像がおすすめだと説明されています（noteヘルプセンター「見出し画像のポイント」）。文字も同じように考えられて、短い言葉をいくつも並べるほど1字ずつが小さくなり、一覧の大きさでは読めない細かな模様になっていきます。

当社は「3行まで、幅300ピクセルで読めるか」で決めている

字数の目安が欲しいときのために、私たちが自社のブログの画像で使っている決まりを書いておきます。記事に付ける画像の文字は3行までにしていて、作ったあとは、記事の一覧に並ぶときの大きさの目安として幅300ピクセルに縮めた画像を作り、いちばん大きく書いた言葉が読めるかを見てから使っています。はじめは3行までで作ってみて、縮めて読めなければ言葉を短くして字を大きくする、と決めておくと、毎回その場で悩まずに済みます。

残すのは、誰が何を持ち帰れるかが分かる一言

サムネイルに残す一言は、一覧を流し見している人が「これは自分のための講座だ」と気づける言葉にします。Canvaでチラシを作る講座なら、講座名の「はじめてのCanvaチラシ講座」をそのまま大きく書くより、講座で手を動かすことを短く言った「チラシを自分で作る」を大きく書き、「Canva講座」は小さく添える形を試してみてください。一覧の中で、講座で何をするのかが先に目に入ります。講座名は題名にも入るので、サムネイルでは、読む人が持ち帰れることのほうを大きく見せます。

この考え方は、映すスライドを直すときと同じです。文字が多いスライドは、言いたいことを一文の見出しにすると載せるものが自然に決まり、背景や経緯のように口で話せる部分は消していけます。縮小して机から1メートル離れても読めるかを確かめる方法も含めて、1枚ずつの直し方は文字が多いスライドを見やすくするに書いています。

日時と会場は、題名と説明文へ回す

サムネイルから外した日時や会場は、捨てずに置く場所を変えます。noteなら記事の題名に講座名と誰に向けた講座かを入れ、本文の最初の数行に日時・会場・申し込み方法をまとめます。YouTubeなら動画のタイトルに講座名を、説明欄の最初に日時と申し込み先を書いておけば、サムネイルの一言で気になった人が、そのまま次に確かめたいことへたどり着けます。

講師名をサムネイルに入れるかどうかは、名前で選ばれているかで決めます。前の講座に来てくれた人に向けた告知なら、名前や顔があると「あの人の講座だ」と気づいてもらえますが、はじめての人に向けた告知なら、名前を知らない人にも伝わる、持ち帰れることの一言のほうを大きくしておきます。

削るときは、書き出す・1つ選ぶ・縮めて見るの順で

すでに作った1枚から文字を減らすときは、画像の上で1語ずつ消していくより、言葉をいったん外に出してから選び直すと、どれを残すかを並べて比べられます。次の3つの順番で進めます。

1. 入れたい言葉を全部書き出す
   サムネイルに載せたかった講座名・日時・会場・講師名・「初心者歓迎」などを、スマホのメモに1行ずつ書き出します。最後の1行には、講座を受けた人が帰ってから自分でできるようになることを、「チラシを自分で作る」のように短く足しておきます。
2. 持ち帰れることを1つ選ぶ
   書き出した中から、受けた人が持ち帰れることを1つだけ選んでサムネイルに残し、残りの言葉の横には「題名」か「説明文」と書いて行き先を決めます。行き先が決まると、外すことへの迷いが小さくなります。
3. 小さく並べて読めるか見る
   作り直した画像をスマホに送り、noteやYouTubeの一覧を開いて、そこに並んでいるサムネイルと同じくらいの大きさに縮めて見比べます。いちばん大きい言葉がすぐに読めなければ、言葉をもう少し短くして、その分だけ字を大きくします。

3つの手順で文字を減らしても読みにくいときは、最後に色の数を見直します。スライドと同じように、色は背景・文字・強調の3つの役目に1色ずつ割り当て、強調の色は1枚に1か所、いちばん見てほしい語にだけ使うと、一覧の中でもどこを読めばよいかが伝わります。明るい黄色や水色は白い背景との差が小さいので、文字には濃い色を使います。3色の決め方とCanvaでのそろえ方はスライドの配色は3色でにまとめました。

次に上げる1枚を、一言にして作り直す

今夜は、作ったばかりの見出し画像の言葉をスマホのメモに書き出し、持ち帰れることを1つ選んで、残りの言葉の行き先を「題名」と「説明文」に分けるところまで進めてみてください。Canvaのデザインは複製してから直すと、全部入れた1枚も手元に残るので、2枚を並べて縮めて見比べられます。作り直した1枚が一覧と同じ大きさで読めることを確かめたら、noteの記事を公開し、次にYouTubeへ上げる動画のサムネイルも同じ順番で作ります。

YouTube・Voicy・noteなどのサムネイルや講演のスライドは、スライド／デザイン制作でもお引き受けしています。用途や届けたい相手、雰囲気を伺ってから初稿を作り、画像やCanvaのデータなど、使い方に合わせた形でお渡しします。