最後まで読まれるストーリーズ：テキストデザイン 10 のルールと実例

ストーリーズは 1 秒でスワイプされるため、テキストはひと目で読める必要があります。ストーリーズの文字デザイン 10 のルールを改善前・改善後の例とともに紹介し、ボタンやプロフィール名で大事な部分が隠れないための Meta のセーフゾーンも解説します。

なぜストーリーズは最後まで読まれないのか？

ストーリーズが見られるのは数秒だけで、文字がすぐ読めなければ次へ進まれます。原因は内容よりデザインにあることがほとんどです。小さすぎる文字、ごちゃごちゃした背景の上の文字、ひとかたまりの長文。直すべき点と仕上がりを見ていきましょう。

実例付き 10 のルール

1. コントラストをつける

明るい背景には暗い文字、暗い背景には明るい文字。背景が騒がしいときは、文字の下に半透明の帯を敷きます。通常のテキストについて、アクセシビリティ基準 WCAG はコントラスト比 4.5:1 以上を推奨しています。

2. 文字を大きく

スマートフォンの小さな文字は読み飛ばされます。見出しは大きく、補足ははっきり小さく。

3. 文章を分ける

ストーリーズで長い段落は読まれません。見出しと 2〜3 行の短い文だけ残し、残りは次のストーリーズへ。

4. 文字をそろえる

左から右へ読むため、右揃えは読みにくくなります。左揃えがいちばん楽で、中央揃えは短い言葉向きです。

5. ブロック同士をそろえる

ラベル、見出し、補足がばらばらの端にあると視線が飛びます。すべてのブロックを 1 本の線にそろえましょう。

6. アクセントを作る

すべて同じだと何も目立ちません。数字やメリットなど一番大事な点をサイズか色で強調します。

7. 余白を活かす

写真にはたいてい空や霧、水面など静かな部分があります。文字は細部の上ではなく、そこに置きましょう。

8. 余計なものを省く

写真のノイズが少ないほど文字は読みやすく、メッセージは強くなります。別の写真を選ぶほうがよい場合もあります。

9. スタイルをシンプルに

フォントは 1〜2 種類、アクセントカラーは 1 色。1 枚に 3 種類のフォントと 3 色は散らかって見えます。

10. 読みやすいフォントを選ぶ

1 秒見て読めるかどうかで確かめます。読めなければ装飾フォントを替えましょう。

セーフゾーン：ボタンで隠れる場所

ストーリーズ広告について、Meta は 9:16（推奨 1440 × 2560）を推奨し、上部約 14%、下部約 35%、左右各約 6% にはテキストやロゴを置かないよう勧めています。そこにはプロフィールアイコン、行動ボタン、返信欄が表示されます。

Metriverra では、どのキャンペーンや広告が売上につながったかが分かるので、ストーリーズの新しいデザインに効果があったかを簡単に確かめられます。

まとめ

• まずはコントラストと大きな文字。これがないと他は効きません。
• 文字は短いブロックで、1 本の線にそろえる。
• アクセントは 1 つ、フォントは 1〜2 種類。
• 文字は写真の静かな部分に置き、余計なものは省く。
• 広告では上 14%、下 35%、左右 6% を空けておく。

出典: Meta Ads Guide — Instagram Stories · W3C — WCAG 2.2: Contrast (Minimum)