ホーム/デザインコラム/プロっぽいテロップにする小技
テロップ(NG)
文字組み調整
テロップ(OK)

Typography

デザイン基礎2025-06-26約 8 min

【初心者向け】プロっぽいテロップにする小技
|クオリティを上げる文字組み

初心者がやりがちな「素人っぽさ」の原因は、エフェクトの技術不足ではなく、基礎中の基礎である「文字組み」ができていないことにあります。 地味だけど、ここを直すだけでテロップのクオリティは一段上がります。

エフェクトや色より先に、文字組みを直してください。これだけでテロップの印象は別物になります。

1

字間(文字と文字の間)は5〜10%開ける

字間 / トラッキング

窮屈すぎ
テロップ
5〜10%の余白
テロップ

文字がくっつきすぎていると圧倒的に読みにくくなります。スムーズに文字を読ませるための適切な字間の目安は、フォントサイズの5%〜10%程度の空間を開けることです。毎回厳密にパーセンテージを計算する必要はありませんが、「窮屈な文字」と「適度に空間がある文字」を普段から比較して見ておくことで、自然と違和感に気づけるようになります。

意図的に字間を大きく開けて高級感やゆったりとした余韻を出すロゴデザインなどは例外です。
2

行間はフォントサイズの70%開ける

行間 / ラインスペーシング

詰まりすぎ
1行目のテロップ 2行目のテロップ
70%の行間
1行目のテロップ 2行目のテロップ

行間が狭すぎると息苦しい印象を与え、逆に100%以上開けすぎると行同士の関連性が薄れて間延びして見えます。読みやすく、かつデザインとして綺麗に見える行間の目安は「文字サイズの70%程度」です。使用するフォントやデバイスによって多少の前後はありますが、ある程度の空間(余白)が確保されている状態が正解です。

3

全角・半角を必ず統一する

全角 / 半角 / 統一

全角・半角が混在
6月12日(全角混じり)
半角に統一
6月12日(半角統一)

全角と半角が混ざると、文字の大きさや前後の空間が不揃いになり、全体のバランスが崩れて非常に素人くさく見えます。日付(例:6月12日)などを記載する際は、すべてを「半角」に統一するだけで、一気にデザインが引き締まりプロっぽくなります。まずは「全角と半角を混ぜない」ということを徹底してください。

4

句読点や記号の後ろは「詰める」

カーニング / 句読点

詰めなし(隙間が目立つ)
『私は、Web』
手動でカーニング調整済み
『私は、Web』

「、」「。」といった句読点や括弧記号を入力した際、そのままにしておくと記号の前後に不自然な空白が空いてしまいます。PhotoshopやPremiere Proなどのソフトでは、ショートカットキー(Alt/Option + 左右矢印キー)を使って、不自然な空白を意識的に詰めるようにしてください。この一手間で見た目の美しさが格段に変わります。

5

ひらがな・カタカナの間は「詰める」

カーニング / ひらがな / カタカナ

打ちっぱなし(スカスカ)
仕事がたのしい
ひらがなを詰めて調整
仕事がたのしい

漢字に対してひらがな・カタカナはバウンディングボックス内の余白の取り方が異なるため、そのまま入力すると文字間が空いて見えてしまいます。空間が空いて見える「ひらがな・カタカナ」の間は少し詰め、逆に詰まって見える「漢字」の間は少し開けるといった微調整(カーニング)ができるようになると、いよいよプロのクオリティに到達します。

まとめ:チェックリスト化して目を鍛える

1字間は5〜10%開ける
2行間は70%開ける
3全角・半角は統一する
4句読点や記号の前後は詰める
5ひらがな・カタカナの間は詰める

最初は違和感に気づかなくて当然です。プロが「なんか文字が窮屈そうだな」「間抜けな空間があるな」と反射的に感じられるのは、何百回も修正してきた結果です。

「たかが字間、されど字間」。この細かな文字組みの調整ができるようになると、他のデザイン素材やレイアウトの違和感にも気づけるようになり、クリエイターとしてのレベルが一段階上がります。騙されたと思って、次の作業から必ず実践してみてください。