カルーセルのフォント、文字サイズ、コントラスト

カルーセルの文字サイズはどれくらいにすべき？

デザインはモニターではなく、スマホに合わせましょう。スマホでは、幅1080 pxのスライドが約360ポイントの幅、つまりピクセル幅の3分の1で表示されます（大きなスマホでは少し広め）。スライド上で設定したサイズは、読者が見る画面では約3分の1の大きさになるということです。

Appleのデザインガイドラインでは、iPhoneでのいちばん小さい文字を11ポイント、標準の読みやすいサイズを17ポイントとしています。これを3倍すると、幅1080 pxのスライドでの数値になります。読んでほしい文字は最低でも約33 px、快適に読める本文なら約51 pxです。aiCarouselsの無料ツールLinkedIn PDFチェッカーは、約24 px未満の文字を「スマホでは読みにくい」と判定します。これはページ番号やアカウント名のような小さなラベルの下限で、文章に使うサイズではありません。

幅1080 pxのスライドの文字サイズと、スマホでの見え方

スライドのサイズを3で割った値です。スライドを幅360ポイントで表示するスマホを想定しています。画面のポイントはAppleの単位で、1ポイントがほぼCSSの1ピクセル。WCAGは大きな文字を印刷のポイントで定めており、その18 ptは画面のポイントで約24です。最後の列は、その画面上の実寸で表示しています。Appleのサイズの出典：Human Interface Guidelines、Typography、UI Design Dos and Don’ts。

もっと大きなキャンバスで作業していますか？ 同じように換算します。幅2160 pxなら、すべての数値を2倍に。細いフォントや幅の狭いフォントは、この数値より大きくする必要があります。小さくはできません。Appleのガイドラインでも、カスタムフォントに細いウェイトがある場合は大きめにするよう勧めています。

よく使われるカルーセルのサイズはどれも幅1080 pxです（LinkedInとInstagram 4:5は1080 × 1350、Instagram 3:4は1080 × 1440、TikTokは1080 × 1920）。なので、これらのサイズはすべてのプラットフォームで使えます。各アプリの正確なサイズはプラットフォーム別のカルーセルサイズにまとめています。

カルーセルに合うフォントは？

カルーセルに最適なフォントとは、読んでいる間に意識されないフォントです。どのプラットフォームでも通用するルールをいくつか紹介します。

• フォントは2つで十分。見出し用に1つ、それ以外に1つ。それ以上の階層はサイズとウェイトで表し、3つ目のフォントは使いません。
• 個性は見出しのフォントに任せる。セリフ体、太いグロテスク、幅の狭いディスプレイ書体は、大きな数語に向いています。
• 本文のフォントはシンプルに。字形が開いていて、エックスハイト（小文字の高さ）が大きく、標準ウェイトがしっかりしたもの。すっきりしたサンセリフ体なら、たいてい当てはまります。
• 小さいサイズでは細いウェイトを避ける。AppleのガイドラインもUltralight、Thin、Lightのウェイトは、特に文字が小さいと見えにくいと注意しています。
• 筆記体やすべて大文字は数語だけに。手書き風のフォントや、すべて大文字の行は、小文字より読むのに時間がかかります。短い見出しならいいですが、段落では疲れます。
• どのスライドでも同じフォントに。どのカルーセルでもです。読者はあなたの見た目を覚えます。ブランドキットを使えば、新しいカルーセルにもフォントと色が引き継がれます。

スマホでも崩れないフォントの組み合わせ

無料のフォント組み合わせジェネレーターから選んだ組み合わせです。すべてGoogle Fontsで、商用利用も無料です。

カルーセルの文字に必要なコントラストは？

コントラストとは、文字とその背景の明るさの差のことで、1:1（差なし）から21:1（白地に黒）までの比で表します。Webアクセシビリティの標準であるWCAG 2.2は、文字に4.5:1以上、大きな文字（18ポイント、太字なら14ポイント）に3:1以上を求めています。WCAGによると、これは文字の画像にも当てはまり、カルーセルのスライドはどれも文字の画像です。例外はロゴと付随的な文字、つまり純粋な装飾の文字や、写真にたまたま写り込んだ文字だけ。スライドの見出しや本文は、どちらにも当たりません。

WCAGでは、印刷の18ポイントは画面上で約24 px、上の表の画面の24ポイントにあたります。スマホで3分の1の大きさで表示されるスライドでは、約72 px（太字なら約56 px）です。つまり、それだけ大きな見出しなら3:1で構いません。本文を含め、それより小さい文字はすべて4.5:1が必要です。

カルーセルの配色でのコントラストの例

比は、これらの色そのものでWCAGの計算式を使って算出しています。オレンジの例はよくある解決法です。色はそのままに、その上の文字を変えます。

• 写真の上の文字は、1文字ごとにコントラストが変わります。文字は無地のパネルに載せるか、背景の写真を暗くして、文字の背後でいちばん明るい部分を確認しましょう。
• ブランドカラーは、文字色には向かないことがよくあります。背景、図形、強調する1語に使い、文字は暗いか明るい無彩色にしましょう。
• 余裕を持たせる。4.5:1は、よい画面での最低ラインです。カルーセルは日差しの下で、画面を暗くして読まれることもあります。比を高くしても損はありません。

カルーセル1枚にどれくらいの文字を載せるべき？

思っているより少なめに。上のサイズで収まらないなら、そのスライドは詰め込みすぎです。

• 1枚に1つのアイデア。要点を言う見出しと、それを支える1〜2行。
• 表紙は短く。aiCarouselsの投稿の準備はできましたか？のチェックは、1枚目の目安を12語以内としています。
• 小さくせずに分ける。スライドが段落のようになったら、2枚に分けましょう。たいていのプラットフォームには余裕があり、Instagramは最大20枚まで投稿できます。
• リストは短く。1枚に数項目、それぞれ1行で。

aiCarouselsでは、書き始める前にこれを設定できます。その他のオプション › スライドあたりの文字量には、自動、簡潔に（いちばん少ない）、バランス、詳しくがあります。編集中、読めるサイズで収まらない文字は、小さくなる代わりに赤いこのボックスには長すぎますのタグが付き、収まるように短くするを押せば、あなたの文体のまま短くなります。これがテキスト自動調整です。または、スライドを余裕のあるレイアウトに切り替えれば、文章もそのまま移ります。

Unicodeの太字はスクリーンリーダーに悪い？

太字がどこにあるかによります。

• スライド上なら：太字はフォント本来の太字のウェイトで、画像の一部として描かれます。見える人には誰にでも同じように見えるので、問題ありません。
• キャプションでは：文字装飾ツールから貼り付けた「太字」は、実は太字ではありません。数学用に作られた別の文字セット、Mathematical Alphanumeric Symbols（U+1D400〜U+1D7FF）です。Unicodeは、本来の書式の代わりに使わないよう勧めています。障害者支援団体のScopeが説明しているとおり、スクリーンリーダーはこれを読み飛ばしたり、「mathematical sans-serif script t」のように読み上げたりすることがあります。

装飾した文字は数語だけにし、名前、ハッシュタグ、読者が必ず理解すべき文には使わないこと。アプリごとのやり方は、LinkedInで太字にする方法とインスタの太字変換ツールで紹介しています。

LinkedIn、Instagram、TikTokでフォントや文字サイズは変わる？

上のサイズはどこでも通用します。スライドはどれも幅1080 pxだからです。変わるのは、スライドの上に重なるものです。

• TikTokと9:16のスライド：アプリのボタンとキャプションがスライドの端を覆います。文字はそこから離しましょう。aiCarouselsでは、セーフゾーンを表示をオンにするとこの範囲が表示されます。
• Instagram：右上に枚数のカウンター、画像の下にドットが表示されます。端に余白を残し、スライドごとに代替テキストを書きましょう。
• LinkedIn：カルーセルはPDFドキュメントです。ページサイズ、表紙、PDFそのものについてはLinkedInカルーセルのデザインのコツと仕様で解説しています。

例：このルールで作ったカルーセル

4:5のスライドが6枚。大きな見出しに本文は各1行、明るい背景に暗い文字で、表紙から最後まで1つのフォントの組み合わせです。

aiCarouselsでフォント、文字サイズ、コントラストを設定する方法