端末別のタイトル省略：文字数ではなくピクセル幅

省略の本当の仕組み

ウェブやアプリのレイアウトは、タイトルに固定幅の枠と最大行数を与えます。文字は語ごとに並べられ、最終行を超えると残りは隠されて省略記号（…）が描かれます。ウェブでは text-overflow や line-clamp などの CSS プロパティで実現され、入力した文字数ではなく描画された幅に基づいて動作します。

アップロードフォームは最大100文字を受け付けるかもしれませんが、それは保存の上限であって表示の上限ではありません。視聴者に見える量は、フォント、文字サイズ、画面上のカードの幅、タイトルの言語によって決まります。

“CSS の text-overflow プロパティは、あふれて非表示になったコンテンツをユーザーにどう示すかを設定します。切り取る、省略記号（'…'）を表示する、独自の文字列を表示する、のいずれかが可能です。”

text-overflow — MDN Web Docs · 引用は英語原文からの翻訳

なぜ文字数は間違った単位なのか

プロポーショナルフォントでは文字ごとに幅が違います。大文字の W は小文字の i の3倍の幅になることもあります。すべて大文字のタイトルは同じ語の通常表記より 25% 多く場所を取り、数字は通常すべて同じ幅で、平均的な文字より広めです。

同じ30文字の簡単な例を挙げます。「Illicit little lilies in Lille」は細く、「WWW MAKEOVER: MOM’S NEW HOME」は幅広です。前者はサイドバーの1行に楽に収まり、後者は18文字で折り返すかもしれません。だから ThumbProof は文字を数えるのではなく、実際のフォント描画で各タイトルを測ります。

4ステップでタイトルの省略を確認

1. 01

   タイトル案を2〜3個書く

   同じアイデアで長い版と短い版を作り、フックの位置を変えます。

2. 02

   ツールに貼り付ける

   各案のスロットに専用のタイトル欄があるので、タイトルと画像を一緒にテストできます。

3. 03

   切れメーターを読む

   メーターがデスクトップ、モバイル、検索、サイドバーで、どこでタイトルが切れるかをピクセル単位で示します。

4. 04

   フックを前に移す

   どこかのレイアウトで重要なフレーズが切れるなら、すべてで省略記号の前に収まるまで書き直します。

他の言語や文字のタイトル

複数の言語で公開するなら、翻訳ごとに確認しましょう。ドイツ語、オランダ語、フィンランド語の複合語は途中で改行できず、1つの長い語が行全体を押し下げて1行目が半分空くことがあります。フランス語やスペイン語のタイトルは英語の原文より 15〜25% 長くなることが多く、フックが切れる位置の後ろに押し出されます。

中国語、日本語、韓国語のタイトルはほぼどの文字の間でも改行できるので行は均等に埋まりますが、1文字ごとの幅が広いです。30字の日本語タイトルはサイドバーで既に2行を埋めます。CJK 文字とラテン語や数字が混ざったタイトルは特に注意が必要で、ラテン部分は細いため、ブランド名や型番の途中で改行されることがあります。

アクセシビリティと検索スニペット

タイトル全文はスクリーンリーダーで読み上げられ、再生ページ、検索エンジン、リンクプレビューでは全部表示されるので、隠れた部分も無駄ではありません。話数、型番、年など、判断の助けになる文脈に使いましょう。ただし見える部分が単独で成り立つようにしてください。

検索結果ページはフィードより多くのタイトルを表示し、90文字以上になることもよくあり、検索語に一致する語を太字にすることもあります。だから冒頭近くの明確なキーワードは二重に役立ちます。狭いフィードで見え、検索でも見つけやすいのです。

実例：フックを前に移す

元のタイトル：「The Complete Beginner’s Guide to Cooking Restaurant-Quality Ramen at Home in Ten Minutes」（88文字）。デスクトップでは「at H…」の後で、サイドバーでは「Restaurant-…」の後で切れます。一番面白い部分——10分——は一度も表示されません。

書き直し：「10-Minute Ramen That Beats Takeout」（34文字）。デスクトップとモバイルでは1行に、サイドバーでは2行に収まり、数字が画像とも呼応します。

タイトル省略のよくある間違い