ツール

シェアされる引用カードのデザイン:タイポグラフィ、レイアウト、サイズ

POMODIARY チーム · · 8 分で読めます

引用カードは、グラフィックデザインの中でもいちばんシンプルなもののひとつです。背景の上に言葉を置くだけ。だからこそ、出来の悪いカードがあふれています。使える要素が文字と余白しかないので、小さな判断のひとつひとつが目立ちますし、ほとんどの人は1秒もかけずにカードをスクロールして通り過ぎていきます。

このガイドでは、POMODIARYチームがテキストカードをデザインするときに守っているルールをまとめました。どれもデザインソフトは必要なく、ほとんどはSNSの流行ではなく、昔から受け継がれてきたタイポグラフィの考え方に基づいています。

まずは言葉から

どんなに優れたタイポグラフィでも、長すぎる文章は救えません。フォントや色に手をつける前に、文章を編集しましょう。

  • ひとつのアイデアに絞る。 カードがうまく機能するのは、最初に読んだ瞬間に伝わるひとつの考えを載せているときです。
  • 短くする。 おおよその目安として、英文なら30語程度までならスマートフォンでも楽に読めます。50語を超えるなら、そもそもカードという形式が適切かどうかを考え直しましょう。
  • 縮めるのではなく、削る。 文章が収まらないときの答えは、文字を小さくすることではなく、言葉を減らすことです。
  • 原文を尊重する。 誰かの言葉を引用するなら、意味が変わるような削り方はしないでください。省略した箇所は省略記号(…)で示し、意味が損なわれない場合にだけ使いましょう。

1行の長さと改行

本文のテキストについて、タイポグラファーはよく1行あたりおよそ45〜75文字を推奨しています。カードは事情が異なります。文字が大きく、ひと目で読まれるため、20〜40文字程度の短めの行のほうがたいていうまくいきます。

カードでは、ほかのどんな媒体よりも改行が重要です。1行1行がほぼひとまとまりとして読まれるからです。

  • 自然な区切りで改行する。 読点のあと、節の終わり、語句と語句の間で行を終え、語句の途中では切らないようにします。
  • 孤立した語を避ける。 最後の行に短い語がひとつだけぽつんと残ると、ミスのように見えます。行のバランスを調整するか、言い回しを変えましょう。
  • 文字のかたまりの形を整える。 長さのそろった行は落ち着いて見えます。意図的に長・短のリズムをつけると強調になります。行の長さがばらばらすぎると、偶然そうなったように見えてしまいます。

同じ文を2通りに改行した例を比べてみましょう。

始めるのに最適な時は昨日だった。次に 最適な時は今日だ。

始めるのに最適な時は昨日だった。 次に最適な時は今日だ。

2つ目は、それぞれの考えが1行ずつに収まっていて、すぐに読めます。

情報の階層:最初に目に入るもの

カードには通常、2〜3段階の情報があります。引用文、出典、そして場合によっては小さなブランドマークやアカウント名です。その順序が見間違えようのないものにしましょう。

要素一般的な扱い
引用文最も大きく、最もコントラストが高く、視覚的な中心
出典はっきり小さく(引用文の半分程度が多い)、細めのウェイトか控えめな色
ブランドやアカウント名最も小さく、端や隅に配置し、引用文と張り合わない

役立つテクニックを紹介します。

  • サイズの差ははっきりつける。 2つの要素がほぼ同じ大きさだと、どちらが重要か目が判断できません。差は決定的にしましょう。
  • 書体はひとつ、多くても2つまで。 ひとつのファミリーでウェイトを変えるだけで、たいてい十分です。引用文にセリフ体、出典にサンセリフ体という組み合わせは定番です。
  • 文字に余白を与える。 左右それぞれカード幅の8〜12パーセント程度のゆったりした余白をとると、文字が意図的に配置されたように見え、各プラットフォームのインターフェースが重なる部分も避けられます。
  • 行間に気を配る。 大きな見出し用の文字は、本文よりやや詰めた行間、だいたい文字サイズの1.1〜1.3倍がきれいに見えることが多いです。広すぎると行がばらばらに離れて見えます。
  • 強調は控えめに。 1語だけ色やウェイトで目立たせるのは効果的ですが、5語も目立たせると効果が打ち消されます。

コントラストとアクセシビリティ

読みにくいカードは、見る人の大半を失います。ロービジョンの人や、日差しの下でスマートフォンを見ている人も含めてです。

  • コントラスト比を確認する。 Web Content Accessibility Guidelines(WCAG)では、通常の文字で4.5:1以上、大きな文字で3:1以上のコントラスト比を推奨しています。カードの文字はたいてい大きいものの、4.5:1以上を目指しておけば、画像の圧縮や明るい画面でも余裕を持てます。無料のコントラストチェッカーを使えば、2色からコントラスト比を計算できます。
  • 写真の上では注意する。 ごちゃごちゃした写真の上に文字を置くと、部分的にコントラストが足りなくなりがちです。暗い、または明るいオーバーレイを重ねる、背景をぼかす、落ち着いた部分に文字を置く、といった工夫をしましょう。
  • 色だけに頼らない。 強調を色の変化だけで示すと、気づかない読者もいます。色とウェイトを組み合わせましょう。
  • 小さいサイズで細いウェイトを使わない。 極細のフォントは、プラットフォームが画像を圧縮すると消えてしまいます。
  • 代替テキストを書く。 投稿するときは、引用文と出典を含むテキストの説明を添えましょう。スクリーンリーダーの利用者にも、画像が読み込めなかった人にも内容が届きます。

プラットフォームごとのサイズ

画像の切り抜き方や表示のされ方はプラットフォームごとに異なり、推奨サイズも時とともに変わります。以下の数値はよく使われる出発点として扱い、大きなキャンペーンの前には各プラットフォームの最新のガイドを確認してください。

用途アスペクト比よく使われるサイズ(ピクセル)
正方形のフィード投稿1:11080 x 1080
縦長のフィード投稿4:51080 x 1350
ストーリーズや縦型動画のカバー9:161080 x 1920
横長の投稿やリンク画像16:91200 x 675 または 1920 x 1080
横長のリンクプレビュー約1.91:11200 x 630

実践的なポイントです。

  • 縦長のほうがフィードで場所をとりやすい。 4:5のカードは正方形よりスマートフォンの画面を広く占めるので、目に留まりやすくなります。
  • 縦型フォーマットではセーフゾーンに注意する。 9:16のストーリーズでは、上下にインターフェースの要素が重なります。文字は中央の領域に十分収めましょう。
  • 小さくではなく、大きく書き出す。 プラットフォームは画像を再圧縮します。高解像度で鮮明なPNGから始めれば、文字の輪郭がくっきり保たれます。
  • サムネイルを想定してデザインする。 投稿前に、小さなサイズでどう見えるか確認しましょう。サムネイルの大きさで引用文が読めないなら、長すぎるか小さすぎます。

サイズごとに手作業で作るのが面倒なら、Text2Card を使えば、テキストを貼り付けていくつかのテーマから1つを選び、正方形・縦長・横長のフォーマットを選ぶだけで、ブラウザ上で高解像度のPNGをダウンロードできます。アカウントは不要です。

出典の表記と著作権

引用カードは思っている以上に遠くまで広がります。だからこそ、出典を正しく示すことが大切です。

出典を正確に示す

ネット上では、発言者を取り違えた引用が非常によく見られます。有名人の名前には、本人が言ってもいない言葉が集まりがちです。カードに名前を載せる前に、次の点を確認しましょう。

  • 元の出典を探しましょう。本、スピーチ、インタビュー、手紙など、できれば日付も含めて確認します。
  • 出典が示されないまま名言サイトやSNSにしか載っていない引用は疑ってかかりましょう。
  • 出典を確認できない場合は、出典を「不明」とするか、別の引用を選びましょう。
  • できるときは、著者名だけでなく書名などの出典のタイトルも入れましょう。

著作権の基本を理解する

著作権が保護するのは文章の独創的な表現であり、アイデアではありません。短い引用は広く使われていますが、「この語数までなら自動的に安全」という基準はなく、法律も国によって異なります。実践的な指針をいくつか挙げます。

  • パブリックドメインの作品がいちばん安全です。 米国では、2026年時点で1931年より前に出版された作品は、一般にパブリックドメインになっています。翻訳は別の著作物です。古い文章でも現代の翻訳はまだ著作権が残っている場合があるので、古い翻訳を使うか、自分で訳しましょう。
  • 歌詞、詩、ごく短い作品には慎重に。 短い作品では、数行でも作品の重要な部分にあたることがあります。また、音楽出版社は歌詞の権利を積極的に行使しています。
  • 抜粋は短くし、出典を明記する。 出典をはっきり示した1文と、文章をまるごと投稿したり、1章分を再現するような連続カードを作ったりするのとでは、まったく違います。
  • 商用利用ではリスクが高まる。 多くの法域では、製品の宣伝に引用を使うことは個人的なシェアとは異なる扱いを受けます。商用キャンペーンでは、専門家に相談するか許可を得ましょう。
  • 自分の言葉なら常に安全です。 効果的なカードの中には、ブランド自身の文章、許可を得たお客様の言葉、投稿者本人の言葉を引用しているものも多くあります。

ここに書いたのは一般的な情報であり、法的助言ではありません。特定の引用に頼るプロジェクトであれば、資格のある専門家に相談してください。

投稿前のクイックチェックリスト

  • 文章はひとつのアイデアで、数秒で読める。
  • 改行が自然な区切りにあり、孤立した語がない。
  • 引用文がはっきりと最も目立つ要素になっている。
  • 写真の上も含め、コントラスト比が4.5:1以上ある。
  • カードのサイズがプラットフォームに合っていて、文字がセーフゾーン内に収まっている。
  • 出典が確認済みで、可能な限り出典のタイトルも入っている。
  • 代替テキストに引用文の全文と出典が含まれている。

一度これを通して確認するだけで、カードは考え抜かれた見た目になり、すっきり読めて、シェアされても見劣りしません。

あわせて読みたい