シンプルなブログプラットフォームとして誕生したWordPressは、今やウェブの大部分を動かす堅牢なコンテンツ管理システム（CMS）へと成長を遂げています。特に大きな進歩が見られるのは、サイトデザインの構築機能にあります。WordPressのフルサイト編集（FSE）は、高度な機能を誰でも利用できるようにするための画期的な手段です。
今回は、WordPressのフルサイト編集の歴史と機能に迫ります。プロのデザイナーさながらにデザインを構築できるよう、フルサイト編集の使い方を詳しく見ていきます。
WordPressにおけるデザインとレイアウト作成の歴史
フルサイト編集の重要性を知るには、WordPressにおけるサイトとレイアウトのデザインの進化を理解することが欠かせません。最近までWordPressの中心的ツールとなっていたのが、クラシックエディターです。
もちろん、このツールは常に「クラシック（定番）」だったわけではなく、WordPressの初期から2018年頃までは、TinyMCEエディターが実質的に標準でした。シンプルなWYSIWYG（What You See Is What You Get、見たままが得られる）テキストエディターで、コンテンツと基本的なHTMLを記述でき、いくつかの書式スタイルもありました。ちなみに、TinyMCEは商用ツールのため今でも利用可能です。
TinyMCEの大きな欠点はフロントエンドのプレビュー機能がないことで、その意味では柔軟性に欠けていました。この代替手段となったのがテーマフレームワークです。StudioPressのGenesis Frameworkや、Thesisなどいくつかの種類があります。
テキスト編集から視覚的なデザインに移行する様子を確認しながら、WordPressのバックエンドからフロントエンドの側面を変更することができました。さらに、フックやフィルター、テンプレートのサポートなど、細部までカスタマイズできる基本的な機能も組み込まれています。
しかし一般ユーザーには扱いづらいという点から、ページビルダープラグインが普及し始めました。TinyMCEとクラシックエディターを組み合わせて、ドラッグ＆ドロップでサイトデザインを編集できるように。ページビルダーには2011年頃から現在まで大きな変化はなく、Elementor、Divi、Beever Builderなどが主要ページビルダーとして使用されています。
そして、このTinyMCEとページビルダープラグインに代わる存在となるのがフルサイト編集です。
ブロックエディターとフルサイト編集
WordPressは最も使用されているCMSですが、その地位を守り続ける努力が必要でした。他にも多くの類似プラットフォームが存在し、競争は激化していました。
Squarespace、Wix、Mediumなど、多くのプラットフォームが、WordPressと同じユーザーをターゲットとしており、ブロックエディターが登場するまでは、いずれもはるかに優れた編集体験を提供していました。
当時はこれらのプラットフォームの方が注目されており、WordPressにとって大きな懸念点でした。競合ツールはまた、シンプルなレイアウト制御においても、おしゃれで視覚的、なおかつパフォーマンスの高いインターフェースを提供していました。
ブロックエディターは、サイトの投稿と固定ページを構築するモジュール式の手段ですが、これにも欠点があります。範囲が限られていることから、細かな変更を加えるにはページビルダープラグインが必要になる可能性が高く、完全なサイトを構築するには開発知識が求められます。しかし、これについては解決策が用意されています。
WordPressのフルサイト編集（FSE）とは
WordPressのフルサイト編集はサイト開発における最新技術と言えます。個々の投稿や固定ページだけでなく、サイト全体をブロックを使ってデザインすることができます。統一された直感的なインターフェースで、WordPressサイトのデザインのあらゆる側面を管理可能です。
現在WordPressでは、これがサイトを編集する一般的な方法とされており、以下のような側面を管理できます。
- ナビゲーション編集：従来は「外観」＞「メニュー」で編集していた設定がサイトエディターに組み込まれている。
- グローバルスタイル：色、フォント、余白など、サイト全体のルック＆フィールをより柔軟に制御できる。
- テンプレート編集：以前はPHP、HTML、CSSなどの開発・コーディングスキルが求められたが、コードを書かずにサイトのあらゆる部分のテンプレートを作成、変更することができる。
- ブロックパターン：レイアウトに挿入可能なブロックのコレクションで、再利用可能なデザイン要素。
またエディターの進化に伴い、非推奨となった機能もあります。例えば、ウィジェットエリアなど（ブロックエディター非対応のテーマでは旧機能として現在でもウィジェットエリアをサポート）。
WordPressのフルサイト編集で実現可能なことについては、後ほど詳しくご紹介します。
WordPressにフルサイト編集が導入された経緯
WordPressがフルサイト編集を導入した理由はいくつかあります。技術的な考慮事項としては、例えばブロックエディターではサイトの編集に限界がありました。
クラシックエディター、フレームワーク、ページビルダープラグイン、ブロックエディターとこれまで進化を遂げてきたものの、コーディングなしでテンプレートスタイルを編集することはできませんでした。フルサイト編集では、デフォルトでこれが可能になっています。
これにより、WordPressの編集機能が簡単に統一され、WordPressの内部チームが直接管理できるように。これは、ユーザーの習得難易度が下がることも意味します。コンテンツ、レイアウト、デザインと、すべての画面で慣れ親しんだデザインが利用できます。
また、WordPressのフルサイト編集が廃止されることはなく、今後は時間の経過とともに機能が改善されていくのみです。WordPressのコア開発チームが構築する機能や変更にも適応できる基盤になっています。
このツールの影響は、開発者からエンドユーザーにまで及び、WordPressのフルサイト編集は、開発者や複雑なカスタマイズ、コーディング知識に頼ることなく、誰もが理想のデザインを自由に作り上げることを可能にします。
WordPressフルサイト編集の代替ソリューション
WordPressのフルサイト編集は、現在はもちろん今後も中心となるツールですが、これを使用するには互換性のあるテーマが必要です（詳しくは後ほど）。また、他のWordPress関連の企業、特に競合ツールを提供する企業の同意が得られるとは限りません。
例えば、WordPressのウェブ開発者がテーマのデザイン開発は専門知識を持つプロに任せるというのは健全であると主張するのは一般的です。複雑な要件があり、予算と時間に限りがある場合はなおさらです。
もちろん、コンテンツ作成やカスタマイズの大部分は、ブロックエディターでも可能です。フルサイト編集と大きな差はなく、すでに多くの人が利用しています。
一般的には、ブロックエディターで大部分の作業を行った後、別のソリューションを使用します。ページビルダープラグインを追加することで、ブロックエディターの機能を補完することができます。Divi、Elementor、Beever Builder、Brizyなどの多くのプラグインは優れた機能を持っており、より深いカスタマイズや開発が可能です。
なお、WordPressのフルサイト編集とは正反対とも言える、シンプルで従来のCMS体験を求めるのであれば、ClassicPressを使用することもできます。
このソリューションの哲学は、ブロックエディターとフルサイト編集を除いた、WordPressの成長に焦点を当てることにあります。そのため両ツールはClassicPressのフォークに含まれておらず、クラシックエディターやTinyMCEエディターを使用してサイトを作成します。
これは十分に成熟していなかったブロックエディターの初回リリースに対する解決策として生まれ、当時は理にかなっていました。しかしながら、現在のWordPressの編集環境を考えれば、ClassicPressをあえて選ぶ理由はほぼありません。
WordPressフルサイト編集の仕組み
一言で言うなら、WordPressのフルサイト編集は、ブロックエディターの機能をサイト全体に拡張したツールです。使用するには、フルサイト編集をサポートするブロックテーマまたはフルサイト編集テーマが必要です（これについては後ほど）。
フルサイト編集の仕組みは、以下のように要約できます。
- ブロックの採用─現在のWordPressエディター同様、サイト全体が各コンポーネントにブロックを使用。個々のコンテンツ要素とより大きな構造要素（ヘッダーやフッターなど）の両方をブロックで作成できる。
- WordPress内で編集可能なページテンプレート─テンプレートファイルの編集にPHPの知識が不要。サイトエディターから作成・編集できる。
- サイト全体に使えるデザインツール─グローバルスタイルパネル（後述）でサイト全体に影響を与えるデザイン要素を制御できるため、基本的にはカスタムCSSが必要ない。
- ブロックパターンで高速構築─ブロックエディター同様、一般的なサイトセクションのレイアウトが用意されているため、制限なく挿入・カスタマイズが可能。
- theme.jsonファイル─theme.jsonファイルでテーマの基本的なスタイルと設定を定義。サイトをさらにカスタマイズするための出発点となり、開発の「ハブ」にもなる中心的な存在。
なお、もしWordPress 5.9以下のバージョンを使用している場合、フルサイト編集を利用するには更新が必要です。
適切なフルサイト編集テーマ選び
ブロックテーマの選択には、他の種類のテーマと同等に慎重に行いましょう。強力なソリューションを確実に利用するためには、以下のような客観的な側面を考慮してください。
- テーマのコードベースが定期的に更新されているか
- 利用者による評価やレビュー
- 開発者が求めているサポートを提供しているか
WordPressのフルサイト編集は比較的新しいツールのため、対応しているテーマはそこまで多くありません。とはいえ、多くの大手企業がブロック/フルサイト編集テーマに独自の工夫を凝らしています。ThemeIsleのフルサイト編集テーマ「Neve」がその一つです。
このテーマのクラシックバージョンでは、「外観」画面にある旧カスタマイザーをサポートしていますが、このバージョンはフルサイト編集に完全に対応しており、パフォーマンスも向上しています。
また、Portfolio WPやMugistoreのようなブロックテーマもありますが、特におすすめしたいのはOllieです。
このテーマもフルサイト編集に完全対応しており、有料版にはパターンライブラリ要素やテンプレートが多数揃っています。
他にも、デフォルトテーマのTwenty Twenty-Fourも有効です。
サイトエディターの優れた機能により、これまで多くのコードやリソースが必要だったテーマのカスタマイズや拡張が簡単になります。これにより、フルサイト編集を入り口として、一般ユーザーもテーマ作成や開発の機会を手にすることができます。
フルサイト編集のインターフェース
フルサイト編集を行うには、WordPress管理画面の「外見」＞「エディター」に移動します。
「エディター」をクリックすると、トップページのサイトエディターインターフェースが開きます。左側には、特定の作業用の編集ページへのリンクがあります（後ほど詳しくご説明します）。
なお、サイトエディターを終了するには、画面左上のWordPressのロゴをクリックするか、メインとなる「デザイン」画面の戻る矢印をクリックしてください。
WordPressフルサイト編集の使用方法（5つの画面）
ここからはサイトエディターの各画面の使用方法をご紹介していきます。
1. ナビゲーション
「ナビゲーション」画面は、従来の「外観」＞「メニュー」に代わる画面で、選択するとサイトの投稿と固定ページ一覧が表示されます。
立ち上げたばかりのサイトの場合は、ここにすべての投稿と固定ページが表示されます。「ナビゲーション」の文字の近くにある3つの点をクリックすると、メニューの編集、名前の変更、削除、複製を行うことができます。
「編集」をクリックすると、メニューがナビゲーションブロックとして含まれるブロックエディターが開きます。
左サイドバーでは、各エントリを上下に移動して並び替えたり、メニューから削除したり、サブメニューを作成したりすることができます。
メニューの各エントリは、固定ページリンクブロックを使用します。サイドバーのスタイル設定とともに、インライン形式の微調整も可能です。
インライン画像やサブメニューなどを追加可能で、従来の方法よりも柔軟性があります。メニューに項目を追加するには、「+」をクリックし、投稿または固定ページを選択します。
変更を保存すると、ナビゲーションに変更が適用されます。さらにメニューを追加するには、ナビゲーション画面の3つの点をクリックし、「複製」を選択してください。
2. スタイル
「スタイル」画面では、サイト全体の外観を制御します。左サイドバーに表示される複数のパレットおよびフォントの組み合わせから、好きなものを選択できます。
いずれかを選択すると、右側のプレビューにデザインが反映されます。「デザイン」の文字の横にある編集（鉛筆）アイコンをクリックすると、変更を加えることができます。
右側にあるパネルでは、色、レイアウト、タイポグラフィ、影などの設定が可能です。例えば、サイト全体で使用するフォントを選択し、さまざまな要素に適用できます。
さらに、余白や色なども設定可能で、「レイアウト」セクションでは、メインコンテンツエリアのサイズや余白、ブロック間隔をカスタマイズできます。
サイトをブラウジングせずに変更を確認するには、「スタイルブック」（目のアイコン）を開くと、視覚的に外観を確認することができます。
また、今回は取り上げませんが、各ブロックの見た目をサイトに合わせて編集することができ、例えば段落ブロックのグローバルスタイルをベースにすることも。変更を保存すると、サイトに変更が適用されます。
WordPressのフルサイト編集でtheme.jsonファイルを使用する
次のフルサイト編集画面をご紹介する前に、theme.jsonファイルについて触れておきます。言うなれば、このファイルは開発者向けの「スタイル」画面です。
サイトとそのブロックのデフォルトスタイルを定義することができ、設定ファイルとして使用します。JSON形式を採用しているため、比較的コード記述の負担が少ないのが特徴です。
theme.jsonファイルで実現可能なことは、サイトエディターでも実現可能であるということは覚えておいてください。
3. 固定ページ
「固定ページ」画面は、WordPress管理画面の「投稿」と「固定ページ」を複製したものです。例えば、固定ページを以下のように「公開済み」「予約済み」「下書き」などでフィルタリングして表示することができます。
各固定ページにカーソルを合わせると、「編集」「表示」「名前の変更」「削除」などの操作を行うことができます。また、一覧上部にある「新規固定ページを追加」をクリックして、新規固定ページを作成することも可能です。
すでにブロックエディターを使用している場合は、この画面は扱いやすいはずです。ブロックエディターの機能との大差はないものの、サイトエディターにはサイト構築に役立つテーマブロックがいくつか搭載されており、サイトロゴの追加、ナビゲーション、投稿者、コメントなどに利用することができます。
例えば、クエリーループブロックはPHPが必要なタスクを実行するのに役立ちます。特定のパラメータに基づいて投稿を表示できるため、最新の投稿を表示したり、ポートフォリオを構築したりするのに便利です。ただし、これは以下にご紹介する最後の2つの画面での操作が必要になります。
4. テンプレート
テンプレートは、WordPress開発の基本となる要素です。再利用可能なレイアウトで、サイトのあらゆる部分の構造を定義するのに役立ちます。通常はPHPの知識が求められますが、サイトエディターではコードを書かずにカスタマイズ（および新規作成）を行うことができます。
テンプレートの編集は、投稿や固定ページと同じ方法になります。サイトエディターでテンプレートにブロックを追加し、変更を保存し、そのテンプレートを使用しているすべてのページに変更が適用されるという仕組みです。
新規テンプレートを作成するには、「新規テンプレートを追加」をクリックします。
表示されるウィザードで、テンプレートの種類とそれに適したブロックパターンが選択されます。
5. パターン
ブロックパターンは、サイト上で特定の役割を果たすブロックのコレクションで、例えば、ロゴ、ナビゲーション、サイトタイトルを含むヘッダーパターンを組み込むことができます。
本来、このようなブロックパターンはPHPで追加する必要がありますが、サイトエディターでは「パターン」画面で実行できます。
左サイドバーには、利用できるすべてのパターンがフォルダに分類されています。これらを利用することでサイトデザインを素早く構築することができ、また見栄えが美しくそのまま使用できそうなパターンも多数あります。
「新規パターンを追加」をクリックすると、エディターで独自のパターンを作ることも可能です。作成したものはもちろん再利用可能で、長期的なサイト開発と管理に有用です。
WordPressフルサイト編集を利用したデザイン構築のヒント
WordPressのフルサイト編集に関しては、他にも掘り下げるべき側面が多数あり、この記事だけでは語り尽くせませんが、最後にフルサイト編集を最大限に活用するためのヒントもご紹介します。
まずは、テンプレートやスタイルをエクスポートして他のサイトでも再利用することができるということ。これを行うには、投稿または固定ページのサイトエディターを開き、上部ツールバーの3つの点をクリックして、ドロップダウンから「エクスポート」を選択します。
これによりテーマのZIPファイルの生成とダウンロードが可能です。インポートするには、WordPress Importerプラグインを使用してみてください。
また、サイトエディターの検索（虫眼鏡）アイコンや、ブロックエディターのツールバーにある検索バーから、WordPressコマンドパレットやコマンドセンターを開くことができます。コンテキスト検索クエリでサイトエディターのほぼすべての場所に移動でき、さらにコマンドを実行することもできます。
これを活用することで、開発作業を高速化し、キーボードやマウス操作の回数を減らすことができます。様々なビューを切り替えたり、パターンを操作したりするだけでなく、サイト要素を追加、削除、編集することも可能です。
まとめ
WordPressのフルサイト編集は、コーディングなしでサイトデザインを構築する可能性を象徴しています。従来のコンテンツ編集から大きく進化し、包括的な機能により自由度が増しています。
誰でもコードに触れずにサイトエディターを使ってサイトデザインを編集できる一方で、開発者はもちろんtheme.jsonファイルで作業を行うことも可能です。いずれにしても、WordPressサイト構築の可能性はこれまで以上に広がっています。
コメントを残す