SWELLは日本のWordPress市場で圧倒的なシェアを持つテーマですが、WordPress本体がFSE（フルサイト編集）へと進化する中で、ブロックテーマへの移行を検討する制作者が増えています。本記事では、SWELLからブロックテーマに移行する際の具体的な手順、theme.jsonの活用方法、そして移行時に注意すべきポイントを解説します。
FSE（フルサイト編集）とは何か
FSEはWordPress 5.9以降で導入された、サイト全体をブロックエディタで編集する仕組みです。従来のクラシックテーマではPHPテンプレートとカスタマイザーでサイトのレイアウトを制御していましたが、FSE対応のブロックテーマではヘッダー、フッター、サイドバー、アーカイブ一覧など、サイトの全パーツをブロックエディタ上で視覚的に編集できます。
ブロックテーマの核となるのがtheme.jsonファイルです。色、フォント、余白、レイアウト幅などのデザイントークンをJSON形式で一元管理し、エディタとフロントエンドの両方に自動適用します。PHPを書かなくてもデザインの大部分を制御できるため、テーマ開発のハードルが大幅に下がります。
SWELLからの移行を検討すべきケース
すべてのSWELLユーザーがブロックテーマに移行すべきではありません。以下のケースに該当する場合に移行を検討する価値があります。
- サイトのデザインを完全にコントロールしたい：SWELLのカスタマイザーでは実現できない独自のレイアウトやデザインが必要な場合、ブロックテーマのほうが自由度が高くなります。
- パフォーマンスを極限まで最適化したい：SWELLは多機能な分、使わない機能のCSS/JSも読み込まれます。ブロックテーマでは必要な機能だけを実装するため、ページサイズを大幅に削減できます。
- WordPress本体のロードマップに追従したい：FSEはWordPressの将来の方向性そのものです。早期に移行しておくことで、今後のアップデートの恩恵を直接受けられます。
- テーマの年額コストを削減したい：自社でブロックテーマを開発すればライセンス費用が不要になります。ただし開発・保守のコストとトレードオフです。
逆に、SWELLの装飾機能（ステップブロック、アコーディオン、バナーリンクなど）を多用しているサイトでは、移行の工数が膨大になるため慎重に判断してください。
移行の具体的な手順
移行は段階的に進めます。一気に切り替えるのではなく、以下のステップで安全に移行します。
第1段階はコンテンツの棚卸しです。SWELLの独自ブロック（ステップ、タブ、アコーディオン、評価スターなど）を使用しているページを洗い出します。WP-CLIのwp post listとgrepを組み合わせて、SWELL固有のブロックマークアップ（swell/step、swell/tab等）を含む投稿を一覧化できます。これらのコンテンツは移行時に手動で変換が必要なため、工数見積もりの材料になります。
第2段階はtheme.jsonの設計です。SWELLのカスタマイザーで設定している値をtheme.jsonに移植します。メインカラー、サブカラー、テキスト色、背景色をsettings.color.paletteに定義し、フォントサイズをsettings.typography.fontSizesに定義します。SWELLのデフォルト値を参考にしつつ、サイトの現在のカスタマイズ値を正確に反映させます。
第3段階はテンプレートの作成です。ブロックテーマの/templatesディレクトリにindex.html、single.html、page.html、archive.html、404.htmlなどのHTMLテンプレートを作成します。SWELLのレイアウト（サイドバーの有無、記事幅、余白）を再現するように、ブロックマークアップで構成します。テンプレートパーツ（/parts/header.html、/parts/footer.html）も合わせて作成します。
theme.jsonの活用ポイント
theme.jsonはブロックテーマの心臓部です。効果的に活用するためのポイントを解説します。
settings.layoutでコンテンツ幅とワイド幅を定義します。SWELLのデフォルトはコンテンツ幅が900px前後ですが、ブロックテーマではcontentSizeとwideSizeとして明示的に設定します。これにより、エディタ上でもフロントエンドと同じ幅でプレビューされます。
settings.spacingでは余白のスケールを定義します。spacingScaleを使ってt-shirt sizing（S/M/L/XL）の余白値を設定すると、エディタのブロック間余白ドロップダウンに選択肢として表示されます。サイト全体の余白ルールを統一するために、この設定は必ず行ってください。
styles.blocksで個別ブロックのデフォルトスタイルを定義できます。たとえばcore/headingブロックのフォントサイズやマージン、core/buttonブロックのborder-radiusやホバー色を設定します。SWELLの見出しデザインを再現する際に、この設定が活躍します。
移行時の注意点とリスク対策
SWELLからの移行で最も注意すべき点をまとめます。
- SWELL独自ブロックのデータ損失：SWELLの独自ブロック（ステップ、タブ、FAQなど）はテーマ切り替え時にHTMLコメントとして残りますが、表示が崩れます。移行前にこれらのブロックをコアブロックの組み合わせに置き換えておく必要があります。
- ショートコードの互換性：SWELLのショートコード（広告タグ、ブログカードなど）はテーマ切り替え後に機能しなくなります。使用箇所を事前にリストアップし、代替手段を用意してから移行してください。
- カスタムCSSの移植：SWELLのカスタマイザーで追加したCSSはテーマ固有のため、移行先テーマのstyle.cssまたはtheme.jsonのcustom設定に移植します。
- SEO設定の引き継ぎ：SWELLのSEO設定（メタディスクリプション、OGP設定など）はSWELLが管理しているため、移行前にSEOプラグイン（Yoast、SEO SIMPLE PACKなど）に移行しておきます。
リスク対策として、移行作業は必ずステージング環境で行います。DockerやLocal by Flywheelで本番のクローンを作成し、そこで移行を試行してから本番に適用します。移行前の完全バックアップ（ファイル＋データベース）も必須です。
SWELLからブロックテーマへの移行は容易ではありませんが、FSEの可能性を最大限に活用するためには避けて通れない道です。まずは新規案件でブロックテーマを試し、知見を蓄えてから既存サイトの移行に取り組むのが現実的なアプローチです。