ランディングページのタイポグラフィと色：読みを支えるもの

要点

ランディングページのタイポグラフィと色は、人がオファーを読むか、ポスターを見るだけで終わるかを決めます。書体は二つ、サイズは少なく、アクションカラーは一つで、キャンペーンページの大半は足ります。残りはコントラスト、行の幅、そして人が諦める前にフォントが出ることです。WCAGが最低を決めます。通常の文字は4.5:1、大きい文字は3:1、見分けられるボタンは3:1です。文字を拡大しても、間隔を広げても、ページ全体は動きます。80文字の幅はAAAレベルの読みの上限であり、自動の罰則ではありません。行が終わりなく続くと疲れるので、私はこの上限を使います。色と余白は、ブラウザが変えられるようにしておきます。下には、私が組む段階、色がすること、ウェブフォントが最初の文を遅らせてはいけないやり方を置きます。

1. 書体は二つ、段階は短く

ランディングに、ブランドのファミリー全部は要りません。見出しに一つ、本文には同じものか、もう一つを選びます。見出しは個性のあるファミリー、本文は中立なファミリーです。同じ最初の画面に三つのファミリーがあると競合し、ファイルが一つ増えるごとにダウンロードも増えます。

オファーのページに収まる段階は短いです。見出し、小見出し、本文、注記（期限、フッター、補足）で、サイズは一つずつです。本文はレギュラー。太字は、人がもう一度見つける必要があるものだけです。価格、プラン名、ボタンの言葉。全部が太字なら、太字はどこにもありません。

イタリックは外来語か商品名に残し、段落全体には使いません。オールキャップスは短いラベル（「新着」「クラス」）に残し、長い見出しには使いません。長い文のオールキャップスは読みを遅らせ、小さい文字だと、知覚されるコントラストもさらに悪くなります。

ページの順番も、同じ段階に従います。見出しはオファーが何かを言い、小見出しは誰向けかを言います。本文は少ない段落で証明します。ボタンはオファーの動詞を繰り返します（「提案を依頼する」「クラスを見る」）。汎用の「詳しく見る」にはしません。見出しがスマホで三行必要なら、長すぎます。文を切ります。本文の大きさになるまで文字を縮めません。

ブランドのアイデンティティ、ロゴとパレットは、このページより先に来ます。サイトより先のビジュアルアイデンティティの記事が、その順番を説明します。ここでの話は、すでにあるタイポグラフィと色を、ランディングがどう使うかです。ページが店の商品を売るなら、次は写真とバリエーションのある商品ページです。ランディングは、それを置き換えません。

プロジェクトがサイト全体、または店全体なら、このページが単体ではなく一式に入る場所はECとサイトです。

2. コントラスト：数字と、ロゴの例外

通常の文字と、文字である画像には、背景とのコントラストが少なくとも4.5:1必要です。大きい文字は3:1で足ります。WCAGの解説ページでの大きい文字の定義は、18ポイント、または太字の14ポイントです。ヒーローの見出しは、たいていこの範囲を超えます。フッターの注記は、ほとんど超えません。小さい文字のグレーを隠すために、大きい文字の緩い上限は使いません。

例外はあります。ロゴの一部、またはブランド名の文字は、要件に入りません。純粋な装飾も入りません。コントラストを避けるために、価格をロゴの中へ書いてよいことにはなりません。価格はオファーの文字です。4.5:1に入ります。

入力欄の境界やボタンのようなインターフェース部品には、別の数字があります。達成基準1.4.11で、隣の色に対して3:1です。人が、クリックできるものと状態（アクティブ、フォーカス、エラー）を見分けるためです。クリームの背景に淡い黄色のボタンは、「送信」が太字でも、たいてい失敗します。組を分けて、一つずつ試します。背景の上の文字、ボタンの色の上のボタンの文字、ページ背景の上の入力欄の境界です。

色だけが合図ではありません。赤だけのエラーは、アイコンも文もなければ、赤を区別しない人には消えます。コントラストの基準が扱うのは輝度であり、「赤はエラー」という意味ではありません。色の横に「メールを確認してください」と書きます。

出典：WCAG 2.2と、コントラスト最小値の解説ページ。閲覧は2026-10-16。

見出しの後ろに写真があるのが、この表をいちばん壊すケースです。写真は文の途中でトーンが変わります。言葉の後ろに、ベタの帯か、均一なマスクを置きます。空、顔、商品の上に直接置いた文字は、ある区間では読めず、別の区間では読めます。マスクはデザインの一部であり、継ぎ当てではありません。

3. 幅、行間、人が拡大したときに起きること

行が長すぎると、人は次の行の先頭を見失います。達成基準1.4.8、レベルAAAは、幅を最大80文字（CJKの書き方では40）、両端を揃えず、行間を少なくとも一スペース半にすることを述べています。注記1は明確です。ページは、最初からその値で生まれる義務はありません。要件は、変える手段があることです。ブラウザがその手段で構いません。

それでも私は、本文のカラムをこの上限のあたりに制限します。広い画面で、ウィンドウの端から端までの段落は疲れます。ランディングには余白が要ります。見出しは段落より広くて構いません。段落は、それより広くしません。

両端揃えは、行の途中に空間の川を開けます。ポルトガル語は語が長く、とくにそうです。私は左揃えにします。

達成基準1.4.12は、こちらはレベルAAで、あの余白のまますでに公開せよとは言いません。人が同時に、行の高さをフォントサイズの1.5倍、段落の後の余白をフォントサイズの2倍、字間をフォントの0.12倍、語間をフォントの0.16倍にしたとき、ページが壊れないことを求めます。文字が切れたボタン、はみ出すカード、重なるメニューは不合格です。ピクセルに文字を嵌めず、余裕を持って描きます。

拡大もAAです。達成基準1.4.4は、キャプションと文字画像を除き、文字が200%まで届いても内容も機能も失わないことを求めます。1.4.10は、320 pixels CSSに相当する幅で、ページが一つの軸だけにスクロールすることを求めます。ピクセルで幅を固定した本文カラムに、折り返しを禁じた見出しを足すと、両方が壊れます。文字とともに大きくなる単位を使い、見出しは折り返します。

画像の中の文字は、まともに拡大しません。ヒーローのアートに描いたスローガンは、1.4.4の外です。本当の文はHTMLに置き、アートの上か横に出します。アートは図です。文は読まれます。

キャンペーンページがファイルではきれいで、電話では窮屈なら、URLかファイルを送ってください。まだないShopifyストアの一部なら、作る前にご相談ください。ストアは開発ストアとして立ち上げ、完成した状態で構築してから、あなたの名義に移管します。

プロジェクトを相談

4. アクションカラーは一つ

ランディングのパレットは、背景、文字、支えの色一つ、アクションカラー一つです。アクションカラーは主ボタンを塗り、ほかはほぼ塗りません。リンク、バッジ、お客様の声の背景、ボタンが同じ緑だと、目はどこをクリックすればよいかわかりません。

支えの色は、帯の背景か、単純な図に使います。ボタンとは競いません。ブランドに強い色が一つしかないなら、ボタンがそれを持ち、残りは中立にします。黒、白、4.5:1を通るグレーです。

ボタンの状態は、本当に変えます。デスクトップのホバーは、暗くするか下線を引きます。スマホにホバーはありません。指の下で大事な状態はフォーカスと押下で、周囲に対してやはり3:1です。無効なボタンは、非アクティブな部品の要件の外に置けます。主ボタンを、何が足りないか（「メールを入力してください」）を言わずに、無効のままにはしません。

Shopifyはチェックアウトで同じ原則です。ヘルプは、高いコントラストの色と単純なページを求めます。人が配送と支払いを入力しているからです。そこでは、見出しのフォントと本文のフォントを、閉じた一覧からエディタで替えます。ランディングでは、フォントの自由がもっとあります。規律は同じです。クリックを支配するのは一つの色です。残りは叫びません。

本文中のリンクは、色だけでなく下線を残します。色だけでは見失います。下線は白黒でも機能します。

5. フォントは現れなければならない

遅いウェブフォントは、最初の文を見えなくします。web.devは初期の動作を記録しています。ChromeとFirefoxは、代替フォントを出すまで最大3秒待ちます。Safariは、不定の時間、文字の描画を止めることがあります。ランディングでの3秒は、人がすでに検索へ戻った時間です。

font-displayがこれを変えます。swapは代替をすぐに出し、フォントが着いたら替えます。リスクはレイアウトの飛びで、代替が別のサイズを占めるときに起きます。optionalは最大100 ms待ちます。フォントが着いていなければ代替のままで、遅い入れ替えはありません。ランディングの本文では、文字が早く見える方を選びます。強く描かれたブランドの見出しでは、代替の幅が近ければ、swapはまだ有効です。

フォントは、ページが使うときだけダウンロードされます。ファミリーを十個宣言して二つしか適用しないのは無駄ですが、どのスタイルも要求しなければ、残りの八つのファイルは来ません。重さになるのは、CSSが実際に呼ぶウェイトです。レギュラー、太字、イタリック。段階が使うウェイトを公開します。カタログは公開しません。

本文のsystem-uiは、端末のフォントを使います。ダウンロードはありません。短いランディングで、読むことを急ぐなら、これは正直な選択です。個性は見出しに、ファイル一つに残します。

WOFF2は、web.devが現代のフォントに勧める形式です。WOFFより約30%よく圧縮します。ラテン文字のフォントは、100から1000グリフの範囲に収まります。ページがポルトガル語なら、ページが使わない書記体系のセットを埋め込む必要はありません。ファイルを、本文が使うものへ切ると、ダウンロードは小さくなります。フォントのライセンスが、その切り出しを許す必要があります。先に確認します。

バリアブルフォントは、複数のウェイトを一つのファイルにまとめます。ファイルは、単独のウェイトより大きくなりがちです。ページが本当に複数のウェイトを使うときに値打ちがあります。レギュラーと太字だけのランディングでは、細いファイル二つが、たいてい軽いです。

CSSに残す短い例です。ターミナルのコマンドはありません。

@font-face {
  font-family: "あなたのフォント";
  src: url("/fonts/your-font.woff2") format("woff2");
  font-display: swap;
}

ファイルのパスは、あなたのページのものです。テーマがすでに何を読み込んでいるかを見ずに、このブロックを店のテーマへは貼りません。ブランドのフォントをすでに持っているテーマに、二部目は要りません。

6. ページの見直しで印を付けるところ

ランディングを、スマホで、小さな声で、見出しからボタンまで読みます。注記を読むために端末を近づける必要があるなら、本文が小さいです。お客様の声が三画面続いたあとでしかボタンが出ないなら、アクションカラーの到着が遅いです。

表の四つの組を確認します。本文、見出し、ボタン、入力欄です。文字の後ろの写真には、ベタの帯を付けます。ロゴは、ブランドのままにできます。価格は、ロゴの例外に隠れません。

ブラウザで文字を倍まで拡大します。横棒が出る、またはボタンが画面の外へ消えるなら、1.4.4と1.4.10は満たされていません。狭い幅、320 pixels CSS相当では、ページは下へだけスクロールします。

ブラウザで行の間隔を広げます。カードが最終行を切るなら、1.4.12は失敗です。直しは、部品に余裕を持たせることです。文字の高さを固定することではありません。

最後に読み込みを見ます。五つのウェイトをダウンロードしているあいだ、最初の文を空白のままにはできません。見出しは一つ、本文は一つです。Googleはいまも、スマホとデスクトップで同じ明確な見出しを求め、主要な内容が存在するためにジェスチャーへ依存しないことを求めます。よくある質問のアコーディオンは畳めます。オファーの見出しは畳みません。

この通過は、ページの話です。アイデンティティの代わりにはなりません。コントラストが正しく、フォントが汎用でも、ブランドの顔がないページはあり得ます。二つの仕事はここで会います。ブランドが色を選び、ランディングがその色のコントラストに従います。ブランドの色が小さい文字で4.5:1を通らないなら、大きい見出しか帯に残し、本文は通る中立色へ移します。

よくある質問

ランディングに必要なコントラストはどれか

通常の文字は、背景と4.5:1です。大きい文字は、18ポイントから、または太字の14ポイントから、3:1です。ボタンと入力欄の境界は、隣の色に対して3:1です。ロゴである文字は外です。価格、ボタン、段落は計算に入ります。

行を80文字に制限する必要があるか

この数字は達成基準1.4.8、レベルAAAにあります。WCAG自身が、ページはその値を最初から使う義務はないと言っています。変える手段があればよく、ブラウザがそれを務めます。私はそれでも制限します。広い画面で端から端までの行は、追いにくいからです。両端揃えは使いません。

カタログのどのフォントでも使えるか

ライセンスがウェブでの使用を許すなら、使えます。WOFF2で、CSSが使うウェイトだけを公開し、文字が見えないままにならないようfont-displayを付けます。ChromeとFirefoxは、初期の動作で最大3秒待つことがあります。本文のsystem-uiはダウンロードを避け、個性を見出しに残します。

暗い背景に白い文字は通るか

通常の文字で組が4.5:1に達すれば通ります。失敗しやすい組は、グレーの上のグレーです。「明るく見える」という印象は、計算の代わりになりません。白い文字の後ろの写真は、安定したマスクがあるときだけ有効です。

同じ規則は店のチェックアウトでも当てはまるか

原則は当てはまります。高いコントラストと、単純なページです。Shopifyはチェックアウトのヘルプにそう書いています。そこのフォントは、エディタの一覧から出ます。見出しと本文です。ランディングのフォントはあなたのもので、コントラストとボタンの上限は同じです。

結論

ランディングページのタイポグラフィと色が読みを支えるのは、見出しが短く、本文が一つのカラムに収まり、小さい文字でコントラストが通り、ボタンを指す色が一つだけのときです。フォントは早く現れ、WOFF2で、ウェイトのカタログはありません。文字を拡大しても、間隔を広げても、ページは壊れてはいけません。キャンペーンページがファイルではきれいで、電話では読めないなら、道はECとサイトのプロジェクトです。ページのURLか、ファイルを送ってください。ページが、まだないShopifyストアの一部なら、ストアを作る前にご相談ください。ストアは開発ストアとして立ち上げ、完成した状態で構築してから、あなたの名義に移管します。

プロジェクトを相談