人気テーマ「Lightning」の開発元である株式会社ベクトルがリリースした次世代型の無料テーマについて、役立つポイントをまとめました。

X-T9の主な特徴

X-T9の最大の特徴は、「コードを書かずに、サイトのすべてを直感的にデザインできる」という点にあります。

1. フルサイト編集（FSE）への完全対応

従来のテーマ（クラシックテーマ）では、ヘッダーやフッター、サイドバーの編集には専用のカスタマイザーやPHPの知識が必要でした。X-T9は「ブロックテーマ」なので、投稿画面と同じ感覚でヘッダーやフッターもブロックを並べて作ることができます。

2. 軽量・高速なパフォーマンス

余計な装飾コードを極限まで削ぎ落としているため、非常に動作が軽快です。Googleの推奨する「Core Web Vitals」などの表示速度指標でも高いスコアを出しやすく、SEO（検索エンジン最適化）に有利な土台を作れます。

3. 「VK Blocks」との強力な連携

開発元が同じプラグイン「VK Blocks」を併用することで、ビジネスサイトやブログに欠かせない「スライダー」「ステップ」「アコーディオン」などの高度なパーツを、ブロックを置くだけで配置できます。

4. 豊富なデザインパターン

「VK パターンライブラリ」から、プロが作ったデザインの雛形（パターン）をコピー＆ペーストするだけで、一瞬でオシャレなセクションが完成します。

初中級者が知っておくべき使用上の注意点

自由度が高い反面、これまでのWordPressの使い方とは少し異なるルールがあるため、以下の点に注意が必要です。

学習コストがやや高い（フルサイト編集の壁）

これまでの「外観 ＞ カスタマイズ」という操作に慣れている人ほど、最初は戸惑います。

X-T9は「外観 ＞ エディター」からサイト全体を編集するため、この「サイトエディター」の操作を覚える時間が必要です。

デザインの「余白」管理が難しい

ブロックごとに自由に余白（マージンやパディング）を設定できるため、ルールを決めずに触りすぎると、スマホで見た時にレイアウトが崩れたり、ガタガタに見えたりすることがあります。「あらかじめ用意されたパターンを使う」のが、綺麗に仕上げるコツです。

クイックスタートのデータインポートに注意

X-T9にはデモサイトを再現する「クイックスタート」機能があります。

既存のサイトにインポートすると、今までの設定や投稿が上書き・消去されるリスクがあります。必ず「新規サイト」か「テスト環境」で試すよう注意喚起が必要です。

推奨プラグインの導入が前提

X-T9単体では非常にシンプル（素の状態）です。その真価を発揮するには、以下のプラグインの導入が推奨されます（他にもプラグインはありますが、以下の3つは必須級となります）。

• VK Blocks: 装飾ブロックの追加
• VK Block Patterns：ブロックパターンに関する便利な機能を追加
• VK All in One Expansion Unit (ExUnit): SEO設定やSNS連携

これらをセットで使うことで、初めて「使いやすいテーマ」になります。

クラシックテーマ「Lightning」との違い

同じ開発元（株式会社ベクトル）が手掛ける「Lightning」と「X-T9」は、一見似ていますが、中身の仕組み（設計思想）が根本から異なります。

初中級者の方が一番迷う「結局どっちがいいの？」という疑問に答えるために、主要な違いをまとめています。

根本的な違い：クラシックか、ブロックか

一言で言うと、「設定画面で組み立てる Lightning」か、「キャンバスに描く X-T9」かという違いです。

3つの決定的な違い

① ヘッダー・フッターの編集方法

• Lightning: ロゴの配置やメニューの形は、専用の設定画面（カスタマイザー）で選択肢から選びます。初心者でも迷いませんが、「ここをあと5px右に」といった微調整にはCSS（コード）が必要です。
• X-T9: ヘッダーそのものがブロックでできています。ボタンを置いたり、検索窓を混ぜたり、マウス操作だけで完全にオリジナルのヘッダーが作れます。

② 「テンプレート」という概念

• Lightning: 「投稿ページ」「固定ページ」「アーカイブページ」のデザインは、テーマ側で固定されています。
• X-T9: 「投稿のタイトルを一番下に持ってくる」「アーカイブページにだけ特別なバナーを出す」といったページの構造そのもの（テンプレート）を、管理画面から自作・修正できます。

③ 拡張性の持たせ方

• Lightning: 「Lightning G3 Pro Unit」などの有料プラグインを追加することで、高機能なプロ仕様にアップグレードしていく形式です。
• X-T9: 基本機能は無料版でも非常に強力です。その代わり、自分ですべてを配置する必要があるため、デザインセンスや「VKパターンライブラリ」の活用が鍵となります。

メリット・デメリットの比較

Lightning の良さと弱点

• メリット: 導入してすぐに「まともなサイト」の形になる。解説記事や本が圧倒的に多い。
• 弱点: 仕組みが古い（今後WordPressの主流から外れていく可能性がある）。デザインの「Lightningっぽさ」を消すのが大変。

X-T9 の良さと弱点

• メリット: サイト全体を一貫したブロック操作で作れる。表示速度が爆速。WordPressの最新機能（FSE）を100%享受できる。
• 弱点: 「自由すぎて何をしていいか分からない」状態になりやすい。操作に慣れるまで時間がかかる。

初中級者はどちらを選ぶべき？

Lightning を勧めるべき人

• 「デザインよりも、まずは記事を書くことに集中したい」
• 「難しい設定は苦手。定番のやり方でサクッと終わらせたい」
• 「仕事でクライアントのサイトを安定して運用したい」

X-T9 を勧めるべき人

• 「WordPressの最新トレンドに触れておきたい」
• 「1ピクセル単位でレイアウトをいじりたい」
• 「プラグインを減らして、とにかく表示速度を極めたい」

まとめ：どんな人におすすめ？

この記事では、これからFSEを触ってみたい方、すでに少し使ってみたけれど全体像がまだつかめていない方に向けて、やさしい言葉でポイントをまとめてみました。

はじめに

従来のWordPressテーマは「PHPファイルを編集して」「デザインを組み立てる」スタイルでした。

しかし、FSEテーマではサイト全体を「ブロック」単位で編集できます。プログラミングの知識があまりなくても、画面上で直感的にレイアウトやデザインを調整できるのが大きな特徴です。

※当ブログもFSEテーマを使用して作成しています。

FSEテーマ（ブロックテーマ）とは？

• Full Site Editing（FSE）：サイト全体をブロック¹で編集できる仕組み
• 導入バージョン：WordPress 5.9以降
• 主な変更点
  • ヘッダーやフッターもブロックで管理
  • 投稿テンプレート（single.php 等）をブロックとして編集
  • メニューやウィジェットも「パターン」や「パーツ」として扱う

FSEを学ぶ意味・価値

1. 今後のWordPress標準に対応
   • 公式でも「FSEが主流になる」と発表済みです。
   • 早めに慣れておくと、将来のテーマ切り替えや新機能にも柔軟に対応できるようになります。
2. デザイン自由度の向上
   • コードを書かずに、ブロックをドラッグ＆ドロップで配置できます。
   • 画面を見ながら試行錯誤できるので、初心者でも安心です。
3. 案件・自分のサイト運営で有利
   • クライアントワークではFSE対応を求められる機会が増えることが予想されます。
   • 自分のブログやポートフォリオのアップデートも容易になりそうです（ただし、好みは人によりけりでしょうが）。

FSE導入の背景

FSEが導入された背景には、以下のような理由があります。

• ノーコード編集への需要増加
  • 例えば、競合サービス「Wix」や「Squarespace」ではドラッグ＆ドロップなどで直感的にサイト作成が可能です。
  • WordPressでも同様の操作感を提供し、幅広いユーザー層を取り込む狙いがありました。
• 競合サービスへの対応
  • これまでWordPressはテーマ編集にPHPやHTMLの知識が必要でしたが、Wixは非開発者でも高品質なサイト構築を実現。
  • FSEの導入により、コードに詳しくないユーザーでも柔軟にデザインをカスタマイズ可能になりました。
• 開発効率と保守性の向上
  • ブロックベースの構造によって、テンプレートパーツを再利用しやすく一括管理が可能に。
  • 大規模サイトでも更新作業を効率化し、メンテナンス負担を軽減できます。

FSEのメリット

• コーディング不要：ヘッダー／フッターもブロック操作だけでOK
• 統一デザイン管理：theme.json² による色・フォント・余白の一元管理
• 自由な配置：ブロック単位でメニューやウィジェットを好きな位置に調整できる
• レスポンシブ対応：モバイル表示も同じ画面でプレビューしながら微調整が可能
• 再利用しやすい：一度作ったパターンやテンプレートパーツを他のページでも簡単に使い回せる

FSEのデメリット・注意点

• 管理が複雑に見える：テンプレートやパーツの階層（テンプレート、テンプレートパーツなど）が多く、一度戸惑うことも
• 微調整はCSS必須：ブロックだけでは解決できない細かいレイアウト調整にCSS知識が必要な場合がある
• プラグイン対応：古いプラグインと相性が悪いケースがあり、動作確認が必要
• 子テーマ作成が特殊：従来の子テーマと違い、theme.jsonやブロックテンプレートのコピーが基本になる

初心者～中級者へのおすすめステップ

1. 公式テーマを触ってみる
   • Twenty Twenty-Five／X-T9など、FSE対応テーマをインストール
   • ブロックエディタでヘッダー・フッターを編集
2. theme.jsonを読む
   • 色やフォント設定の記述方法を実際に開いて確認
   • 少しずつ数値を変えて、サイトデザインへの影響を試す
3. テンプレートパーツを作成
   • 繰り返し使う「カード」や「CTA（Call To Action）³」などをパーツ化してみる
   • 自分のブログで共通部分として使い回してみる
4. 子テーマからカスタマイズ
   • シンプルな子テーマを作り、必要な部分だけオーバーライド
   • block-templatesフォルダにテンプレートをコピーして編集

FSEテーマ（ブロックテーマ）の例

• Twenty Twenty-Five（WordPress公式テーマ。無料でご利用いただけます）
• X-T9（著名テーマ Lightning と同じ株式会社ベクトルによるテーマ。無料でご利用いただけます）
• Hakoniwa（著名テーマ Nishiki Pro と同じく 株式会社AnimaGate が手がけたもの。無料でご利用いただけます）
• unitone（著名テーマ Snow Monkey と同じく株式会社モンキーレンチが開発。無料版は一部機能に制限あり）

まとめ

FSEテーマは、「コードが苦手…」という方でも直感的に全体をデザインできる強力な仕組みです。一方で、管理構造が従来と変わるため最初は戸惑うこともあります。

しかし、将来のWordPress運用に備え、早めに学んでおいて損はありません。まずは公式のFSE対応テーマをインストールし、ブロック編集を体験してみましょう。その上で、theme.jsonやテンプレートパーツの作り方に挑戦すると、あなたのサイト制作スキルが一段とアップします。

参考資料

• Site Editor – Documentation – WordPress.org : サイト全体をブロックで編集できる公式ガイド
• ロードマップ – WordPress.org 日本語 : FSEがWordPressの今後の標準となることが示されている公式ロードマップ（ロードマップ原文：Roadmap – WordPress.org）
• A Complete Beginner’s Guide to WordPress Full Site Editing – WPBeginner : 初心者向けの解説記事
• What Is WordPress Full-Site Editing? – Smashing Magazine : FSEの概要とデザインへの影響についての詳細解説

脚注

1. WordPressの新しい編集単位。文章や画像、ボタンなどを「ブロック」として追加・配置できる。 ↩︎
2. テーマのデザイン設定をまとめるJSON形式のファイル。色や文字サイズなどを一括管理できる。 ↩︎
3. ユーザーにアクションを促すボタンやリンクのこと。「お問い合わせはこちら」など。 ↩︎