【WordPress】フルサイト編集とtheme.jsonでタイポグラフィを極める方法

メディアがどれほど普及しても、テキストコンテンツは依然としてインターネットの中核と言えます。サイトで使用するフォントは、レイアウトやデザインを大きく左右します。

WordPressのタイポグラフィは、雰囲気を出したり、ブランドイメージを強化したりすることができます。WordPressユーザーはフルサイト編集（FSEとも）でタイポグラフィを調整でき、開発者はtheme.jsonファイルを活用してタイポグラフィにこだわったWordPressテーマを開発することができます。

そこで今回は、フルサイト編集とtheme.jsonのそれぞれでタイポグラフィを扱う方法をご紹介します。また、使用する技術は技術的な注意事項、デザインにおけるフォントの使用方法の変遷など、重要な文脈にも触れていきます。

ウェブにおけるタイポグラフィ（略歴）

初期のウェブデザインを振り返ると、そのレイアウトの多様性にもかかわらず、フォントの使い方には一貫したものがありました。これには、当時は現在のような技術がなく、ウェブで使用可能なものはコンピュータ上で表示できるフォントに制限されていたという必然的な理由もあります。

フォントの知識があり、90年代半ばから後半にかけて「ネットサーフィン」していた人なら、Times New Roman、Arial、Helvetica、Georgia、Verdanaには馴染みがあるはず。GeorgiaとVerdanaは、Mircosoftの委託事業で開発されたもので、時代を問わずウェブでうまくレンダリングされる定番フォントです。

この定番とも言えるフォントは一貫性があり信頼はできるものの、柔軟性には欠けます。Google FontsやAdobe Fontsのようなサービスを利用すると、WOFFファイル形式で数千ものフォントにアクセスすることができ、埋め込みも簡単です。

この豊富な選択肢により、コンテンツの可読性を改善したり、ユニークなデザインを作り上げたり、サイトのユーザーエクスペリエンス（UX）を調整したりなどの可能性が広がります。ただし、パフォーマンスが低下する可能性があること（コンテンツのレイアウトがずれるなど）、重要な要素であるテキストを表示するのにサードパーティのサービスに依存することになること、プライバシーに関する懸念などの注意点があります。

このような理由から、多くのウェブデザイナーはフォントライブラリの使用を見直し、システムフォントの使用を再検討しています。標準インストールされているフォントを優先し、フォールバックオプションを設定する「システムフォントスタック」を採用することで、より高速な処理とコントロールが可能になります。

WordPressとタイポグラフィ

WordPressでは、魅力的で読みやすいコンテンツの提供を考慮し、タイポグラフィが重視されています。その歴史を通じて、WordPressのデフォルトテーマには、美しさと機能性のバランスを取ったフォントが使用されています。

現在のデフォルトテーマにはシステムフォントスタックが使用されており、クリーンかつおしゃれでパフォーマンスに優れたサイトを作り上げることができます。少し前のデフォルトテーマでは、Noto SansとNoto Serif（Twenty Fifteen用）、MontserratとMerriweather（Twenty Sixteen用）などの組み合わせが使用されています。

例えば、Twenty Sixteenでは、フォールバックフォントにHelveticaとGeorgiaが使用され、Twenty Tenでは、Helvetica、Arial、Georgiaが使用されています。

WordPressテーマの選択は、サイト全体のデザインの方向性を決定づける重要なステップですが、フォントやその使用方法に気を配ることも大切です。そしてタイポグラフィの調整に一役買ってくれるのが、フルサイト編集機能です。

フルサイト編集とtheme.jsonの概要

フルサイト編集とtheme.jsonは、WordPressでタイポグラフィを管理する主要な手段になります。それぞれを十分に理解しておきましょう。前者はブロックエディターを活用し、機能を追加することでサイト全体を編集できるサイトエディターです。

フルサイト編集には、以下のようなメリットがあります。

• コンテンツだけでなく、サイト全体をブロックで直感的に編集できる
• テンプレートライブラリも設定の一部になるため、コンテンツと同じツールを使用して編集できる
• サイト全体のスタイル設定をサイトエディター内で一元管理できる
• ノーコードでスタイル設定や機能の追加を行うことができる（開発者と一般ユーザーの障壁が取り除かれる）

theme.jsonは、開発者向けのフルサイト編集機能と言えます。全体のスタイルと設定を管理する中核となる設定ファイルであり、このファイルを扱うには、JavaScript Object Notation（JSON）の簡単な知識が必要になります（といってもほとんどのサイト所有者が理解できる程度）。

各設定にはoption:valueのキーと値のペアを使用し、以下のような方法で実装可能です。

• グローバルカラーパレットの定義
• フォントファミリーとサイズの定義
• ブロック固有のスタイルの定義
• 間隔とレイアウトの管理

theme.jsonを活用すれば、カスタムCSSを使用せず（もちろん使うことも可能）、一貫性のあるカスタマイズ可能なテーマを開発することができます。theme.jsonの適応性と柔軟性は、WordPressテーマ開発において大きな役割を果たします。テーマ編集にはフルサイト編集とtheme.jsonを併用するのがベストな方法で、これはタイポグラフィにも当てはまります。

WordPressサイトエディターのタイポグラフィ設定

ブロックエディターに馴染みがあれば、おそらくサイトエディターも問題なく使用できます。WordPress管理画面の「外観 」＞「 エディター」をクリックすると、サイトエディターのホーム画面が表示されます。

左側メニューから「スタイル」を選択すると、タイポグラフィの変更を含むデザインを選択することができます。

この画面でタイポグラフィをさまざまな側面を個別に設定することをおすすめします。「スタイル」というタイトルの右側に「スタイル編集」の鉛筆アイコンと「スタイルブック」の目のアイコンがあります。

さらに、要素やブロックごとに組版設定を行うことも可能です。

フォントライブラリ

「スタイル編集」のアイコンをクリックするか、右側のサイトプレビューをクリックして、右側のパネルで「タイポグラフィ」を選択すると、「フォント」一覧が表示されます。このエリアでは、以下のようなことを実行することができます。

• カスタム書体をアップロードして管理
• WordPress内でGoogle Fontsを使用
• PHPを使ってフォントコレクションを作成

「タイポグラフィ」パネルからフォントライブラリを開くには、「フォントの管理」アイコンをクリックします。

「ライブラリ」タブに現在登録されているフォントが表示され、現在どのフォントが有効になっているかを確認できます。

特定のフォントを選択すると、特定のバリアント（太字や斜体など）を有効にしたり無効にしたりすることができます。

「アップロード」タブでは、ドラッグ＆ドロップ（または「フォントをアップロード」をクリック）でTTF、WOFF、WOFF2、およびOTF形式のフォントをインストールすることができます。

「フォントをインストール」タブでは、Google Fontsに接続して、Google Fonts内のフォントをテーマで使用することができます（注：この場合はGoogle CDNではなく、サイトからフォントをダウンロードして提供する）。

フォント一覧からインストールしたいフォントを選択し、「インストール」をクリックします。インストールしたフォントは、「ライブラリ」タブに表示されます。

これで、他のフォントと同じようにサイト内でフォントを使用できるようになります。あとは好みに応じてカスタマイズしていきましょう。

スタイルブック

書体を選択して設定する際の注意点は、配色やレイアウト、他のフォントとの組み合わせでどのように見えるかがわからないことです。スタイルブックでは、さまざまな要素でタイポグラフィの設定をプレビューすることができます。

スタイルブックは、目のアイコンをクリックすると開くことができます。スタイルブックには以下5つのタブがあります。

• テキスト：段落、見出し、リストなどの主要な要素を管理
• メディア：画像、動画、音声の表示方法を管理
• デザイン：カラム、区切り、ボタンなどの構造的な要素を管理
• ウィジェット：アーカイブやコメント一覧のような動的な要素、検索バー、ソーシャルアイコン、タグクラウドも管理
• テーマ：タイトル、キャッチフレーズ、ナビゲーション、ロゴなど、サイトのヘッダー要素を管理

スタイルブックでいずれかの要素を選択すると、右側のパネルにさまざまな設定オプションが表示されます。このパネルでは、各ブロックのタイポグラフィ設定を扱うことができます。

サイトエディターのホーム画面から「スタイル」＞「ブロック」に移動しても同じ画面にアクセスできます。いずれの方法でも、各ブロックのタイポグラフィの設定を細かく調整可能です。

サイトエディターのタイポグラフィ設定

続いて、右側パネル内の各設定について見ていきます。すべてのブロックと要素に同じコア設定を使用することができます。

フォントの種類とサイズ

「フォント」ドロップダウンメニューをクリックすると、特定の要素やブロックに適用したいフォントを選択することができます。

「サイズ」の項目は最もシンプルな設定で、S（Small）からXXL（Extra Extra Large）からサイズを選択します。

theme.jsondで各サイズの値を調整することができますが、サイトエディターからは変更できません。「カスタムサイズを設定」アイコンをクリックすると、サイズ設定単位を選択して独自のサイズを設定できます。

サイトエディターでタイポグラフィの設定を調整する方法は他にもあり、一般的にはCSSを使用します。

外観、行の高さ、文字間隔

「外観」ドロップダウンメニューでは、フォントの太さを選択することができます。ただし、各項目に該当するバリアントがインストールされていない可能性もあります。

独自にテストした結果、利用可能なフォントとバリアントをフィルタリングして、実際に使用できる太さだけが表示されるというわけではないようです。選択した太さに一致するバリアントがない場合は、最も近いバリアントが適用されます。例えば、Kinstaのサイトでは、Cardo Normal、Cardo Bold、Cardo Bold Italicを使用しており、「セミボールド」「ボールド」「エクストラボールド」「ブラック」にはいずれもCardo Boldが適用されます。

「行の高さ」はフォントの選択、外観、サイズのバランスを決定します。この値を変更すると、各行の間隔を広げたり狭めたりすることができます。例えば、テキストが詰まっているように見える場合は、値を上げて調整可能です。

「文字間隔」では、読みやすさを考慮しながら文字と文字の間隔を調整することができます。

フォントサイズのように、「px」をクリックすると、文字間隔でも任意の単位を選択することができます。基本的には、emやremなどの相対値を選択することが推奨され、WordPressではCSSのデフォルト値「normal」に設定されています。この設定は、ブラウザが適切な文字間隔を自動的に選択してくれるためおすすめです。

また、正の値（多くの場合は、0.12rem/em以下）を使用し、負の値は使用しないのが一般的です。

最後の項目「大文字小文字」は、日本語には影響しませんが、英文の大文字と小文字表示を選択することができます。すべて大文字に統一したりすることも可能です。コンテンツの作成時に大文字小文字を使い分ける必要がなくなるため、設定しておくと便利かもしれません。

theme.jsonを使用してWordPressテーマのタイポグラフィを定義する方法

サイトエディターは一般ユーザーが使用するのに理想的ですが、開発者はtheme.jsonを使ってユーザーがサイトをカスタマイズするのに必要なものを提供することができます。theme.jsonは、テーマ開発のベースとなる設定ファイルです。

今回はtheme.json全体の構造と形式については掘り下げず、タイポグラフィを定義、設定、適用する方法を見ていきます。

theme.jsonの構造とグローバル設定の定義

theme.jsonではJSONを使用してすべての要素を定義します。これにはタイポグラフィも含まれます。typography要素は、ファイル内のsettingsオブジェクトの下にネストします。そこからさらに要素、プロパティ、オブジェクトをネストすることで、サイトのタイポグラフィを構築していきます。

{
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif",
          "slug": "system-font",
          "name": "System Font"
        }
      ],
      "fontSizes": [
        {
          "slug": "small",
          "size": "13px",
          "name": "Small"
        },
        {
          "slug": "medium",
          "size": "20px",
          "name": "Medium"
        }
      ]
    }
  }
}

これらの要素はすべて似たようなパターンに従います。デフォルトかつ最も理解しやすいのは、グローバル設定です。シンプルな方法でネストされますが、個々のブロックに対してそれぞれタイポグラフィ設定を定義することもできます。

"styles": {
  "blocks": {
    "core/paragraph": {
      "typography": {
        "fontFamily": "var(--wp--preset--font-family--primary)",
        "fontSize": "var(--wp--preset--font-size--medium)",
        "lineHeight": "1.5"
      }
    },
    "core/heading": {
      "typography": {
        "fontFamily": "var(--wp--preset--font-family--secondary)",
        "fontWeight": "700"
      }
    }
  }
}

上のコードは、blocksプロパティを使用して対象とするブロックごとに名前空間を指定します。これにより入れ子が2つ増えることになりますが、多くのプロパティを操作できるようになります。

フォントの登録

theme.jsonにおけるタイポグラフィのカスタマイズは、サイトエディターのインターフェースと同等、あるいはそれ以上に優れています。基本的な方法としては、フォントスタックをfontFamiliesプロパティにネストし、スラッグと名前をつけます。

• fontFamily：CSSのfont-family値にマッピングされ、テーマで使用するフォントのスタック
• name：サイトエディターでフォントを選択する際に表示される名前
• slug：カスタムCSSプロパティに追加して使用

システムフォントの場合は簡単です。

…
  "typography": {
    "fontFamilies": [
    {
      "name": "Primary",
      "slug": "primary",
      "fontFamily": "Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"
    },
    {
      "name": "Secondary",
      "slug": "secondary",
      "fontFamily": "system-ui, sans-serif"
      }

独自のウェブフォントを登録するには、fontFaceプロパティを使用して、いくつかの属性を定義する必要があります。

…
"name": "Secondary",
"slug": "secondary",
"fontFamily": "'Open Sans', sans-serif",
  "fontFace": [
    {
      "fontFamily": "Open Sans",
      "fontWeight": "300 800", // フォントの太さの値の範囲
      "fontStyle": "normal", // 有効なCSS font-style値
      "fontStretch": "normal", // 有効なCSS font-stretch値
      "src": [ "file:./assets/fonts/open-sans.woff2" ] // カスタムフォントのURLの配列（複数の形式をサポート）
    },
…

フォントを登録すると、サイトエディター内のさまざまなドロップダウンメニューからフォントを選択します。

テーマにフォントを登録する方法は、サイトエディターのフォントライブラリ、通常のPHPエンキュー、Create Block Themeプラグインなどいくつかあります。

これは構築するテーマのひな形となりますが、タイポグラフィの登録や定義も行うことができます。いずれかの方法（フォントライブラリがおすすめ）でフォントを登録したら、サイズ設定を行います。

theme.jsonでフォントサイズとプリセット設定を定義

タイポグラフィのカスタマイズにおけるもう一つの重要なステップは、フォントサイズの設定です。これにはfontSizesプロパティを使用して、サイトエディター用のプリセット設定を定義します。

"settings": {
  "typography": {
    "fontSizes": [
      {
        "slug": "small",
        "size": "12px",
        "name": "Small"
      },
      {
        "slug": "x-large",
        "size": "32px",
        "name": "Extra Large"
      }
    ]
  }
}

他の設定と同様、WordPressは指定したスラッグを使って各プリセット設定のカスタムCSSプロパティを生成します。

body {
--wp--preset--font-size--small: 12px;
--wp--preset--font-size--x-large: 32px;
}

WordPressのデフォルトでは、流動的なタイポグラフィ（Fluid Typography）が無効になっていますが、boolean型を使ってサイト全体で有効にすることができます。

{
  "version": 2,
    "settings": {
      "typography": {
        "fluid": true
      }
    }
}

あるいは、定義したプリセット設定とサイズごとに適用することも可能です。

{
  "name": "Medium",
  "size": "1.25rem",
  "slug": "md",
  "fluid": {
    "min": "1rem",
    "max": "1.5rem"
  }
},

minとmaxの値で、定義したFluid Typographyのフォントサイズに対する拡張範囲を指定できます。

高度なタイポグラフィ機能の実装

theme.jsonでは、サイトエディターと同等の設定を行うことができ、テーマに適した一連のデフォルト設定に基づいて、サイトのタイポグラフィを調整できます。

"styles": {
  "typography": {
    "letterSpacing": "0.02em",
    "textTransform": "uppercase",
    "textDecoration": "underline",
    "lineHeight": "1.55rem",
    "fontStyle": "normal"
  }
}

各設定は、必要に応じて有効または無効にすることができます。各設定はboolean型を取るため、以下のようなサイトエディターの一部機能をカスタマイズすることができます。

• customFontSize： 独自のフォントサイズを入力する（デフォルトで有効）
• dropCap： 段落ブロックの頭文字を大きく表示する（デフォルトでは無効）
• textColumns： ブロック内の任意のテキストに対して段組を設定する（デフォルトでは無効）
• writingMode：テキストの向き（横書きか縦書き）を変更する

テーマ開発において、theme.jsonは、テーマ開発においてまず最初に作業したいファイルです。サイトエディターの機能を使用することで、開発者そして一般ユーザーのどちらもWordPressのタイポグラフィの設定を微調整することができます。

theme.jsonを使ってタイポグラフィを実装する方法（実例）

フルサイト編集の登場により、WordPressサイトのデザイン開発はかつてないほど簡素化されています。さらにフォントの選択や実装のような一部プロセスも簡単になっています。これは最近のデザイントレンドによる影響もありますが、グラフィックデザインの知識を持たないユーザーが活用できるツールも存在します。

以下、theme.jsonを使ってタイポグラフィを実装する方法を実例とともにご紹介していきます。まずは核となるフォントの選定から始めましょう。

1. バランスを見てフォントを組み合わせる

フォントの選び方に関する記事やリソースは多数存在しているのは、それほど難しい作業だからです。サイトのブランディングや目標、伝えたいメッセージを考慮して慎重に選択しなければなりません。

しかし、最近のデザイントレンドのおかげで、この作業はある程度楽なものになっています。というのも、本文にはシステムフォント、具体的には主要オペレーティングシステム（OS）に組み込まれているフォントを使用することができるためです。したがって、ゼロからフォントを選ぶのではなく、このフォントと併用するフォントを選択すればOKです。

以下のヒントを参考にしてみてください。

• 本文用のOSフォントは通常、サンセリフ体。日本語フォントの場合も、ヒラギノ各ゴシック、游ゴシックなど、サンセリフ体とも言えるゴシック体が一般的。組み合わせるフォントには、あえて明朝体を使用したり、別のゴシック体を使用することで、区別したい要素を際立てることができる。
• シンプルを極めて、デザインの邪魔にならないフォントを採用したい場合は、OSフォントだけを使うという手もある。
• 相性のいいフォントを見つけるには、さまざまな組み合わせを試してみること。

例えば、Google Fontsのセリフ体であるPlayfair Displayは、システムフォントスタックと相性の良いフォントです。

また、ページ上の各フォントのサイズだけでなく、フォント同士のサイズのバランスも考慮する必要があります。

2. 適切な絶対サイズと相対サイズを見つける

適切でない絶対値はUX/UIを台無しにしてしまうため、フォントサイズの選択も非常に重要です。デフォルトのサイズをそのまま採用するのも良いですが、それぞれのフォントには特有の間隔や余白があるため、組み合わせをテストしてみることをおすすめします。

Typescaleは、WordPressサイトに適したタイポグラフィを設定するのに役立つツールです。

このツールのスケールを選択できる機能は画期的で、バランスの取れたサイズを自動的に提案してくれます。例えば、標準サイズは16pxで、1.2倍の「Major Third」スケールを選択してみます。

中央のパネルに各見出しと段落のサイズが表示され、好きな単位を選択できます。またTypescaleでは、theme.jsonで調整可能な文字間隔、行の高さ、フォントの太さなどの設定もすべて変更できます。

3. theme.jsonでデフォルトの設定を定義

適切なフォントとサイズを決定したら、theme.jsonで定義します。theme.jsonファイルは以下のようになります。

{
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif",
          "slug": "ubuntu-sans",
          "name": "Ubuntu Sans"
        },
        {
          "fontFamily": ""Playfair Display", serif",
          "slug": "playfair",
          "name": "Playfair Display"
        }
      ],
      "fontSizes": [
        {
          "slug": "small",
          "size": "13px",
          "name": "Small"
        },
        {
          "slug": "medium",
          "size": "16px",
          "name": "Medium"
        },
        {
          "slug": "large",
          "size": "20px",
          "name": "Large"
        },
        {
          "slug": "x-large",
          "size": "25px",
          "name": "Extra Large"
        },
        {
          "slug": "huge",
          "size": "31px",
          "name": "Huge"
        }
      ]
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--system)",
      "fontSize": "var(--wp--preset--font-size--medium)",
      "lineHeight": "1.8"
    },
    "blocks": {
      "core/paragraph": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--medium)"
        }
      },
      "core/heading": {
        "typography": {
          "fontFamily": "var(--wp--preset--font-family--playfair)",
          "fontWeight": "700"
        }
      },
      "core/post-title": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--huge)"
        }
      }
    }
  }
}

上記で定義したフォントは、すべてのブロックに適用でき、各見出しに独自のスタイリングを行うことも可能です。一貫性のある階層的なWordPressタイポグラフィシステムを構築し、テーマ開発の基盤にすることで、サイト全体にまとまりのある外観を実現し、ユーザーを考慮してサイトエディターにより柔軟性とカスタマイズ性をもたらすことができます。

WordPressテーマ開発のワークフローを支えるKinstaツール

Kinstaの高性能ホスティングは、効率的でスピーディーなサイトの運営を支援していますが、他にもDockerコンテナ上で動作するローカル開発環境DevKinstaをはじめとする、開発者向けの堅牢なツールも提供しています。

WordPressサイトの本稼働前には、タイポグラフィが正しく動作するかを確認しなければなりません。Kinstaのステージング環境は、このような確認とテストに有用で、さらに選択的プッシュ機能で、特定のファイルやフォルダなど、必要なアセットだけを本番環境に反映することができます。

theme.jsonのような特定のファイルだけを反映することで、特定のデザインだけを慎重に調整することができます。変更が必要のないデザイン要素が壊れるリスクを最小限に抑え、サイトのタイポグラフィをより頻繁かつ少しずつ更新可能です。

まとめ

フルサイト編集が徐々に普及し始め、theme.jsonがWordPressの編集プロセス全体の中心になりつつあります。タイポグラフィはサイトデザインの重要な要素であり、これまではCSSやPHPの専門知識が求められた機能も、現在ではかつてないほど簡単に使用することができるようになっています。

サイトエディターの直感的なインターフェースとtheme.jsonの適応性を活用することで、洗練されたデザインを実現し、ブランドにマッチしたタイポグラフィを作成できます。これにより、全体的なユーザー体験の向上にもつながります。