# ブロックテーマとページビルダー：実際に何が変わるのか URL: https://canvaswp.com/ja/guides/block-theme-vs-page-builder/ Updated: 2026-11-03 ガイド ページビルダーは WordPress に2つ目のエディターを追加し、レイアウトをそのプラグインだけが読み取れる独自形式で保存します。ブロックテーマでは、WordPress に標準搭載されたエディターを使用し、ページは標準のブロックマークアップで保存されます。違いが表れるのはツールを変更するときです。ページビルダーから離れる場合は通常、ページごとに作り直す必要がありますが、コアブロックはどのブロックテーマでも表示され続けます。表示速度は、各ページが読み込むものによって決まります。 公開日：2026年9月5日 更新日：2026年11月3日 執筆：SemiColonWebのCanvasチーム ## パート1：WordPressページを作る2つの方法 マーケティングの言葉を取り除くと、目の前にあるのは2つのデザインです。 ### ページビルダー・プラグイン ビルダーは、独自のエディター、独自のレイアウトエンジン、独自のウィジェットライブラリをWordPressに追加します。ビルダーのキャンバス上でデザインすると、結果は独自の形式で投稿内に保存されます。その形式をページに戻して表示するため、スタイルシートとスクリプトがフロントエンドで動作します。テーマは基本的に干渉しません。 ### WordPressに標準搭載のエディターで使えるブロックテーマ ブロックエディターはWordPress本体の一部です。ブロックは構造化されたコメントで囲まれたHTMLとして保存され、テンプレートはブロックテンプレートであり、色とタイポグラフィはエディターとフロントエンドの両方が読み込むtheme.jsonファイルから取得されます。Canvasのようなブロックテーマは、そのひとつのエディターにブロック、テンプレート、設定を追加します。そのほかに並ぶものはありません。 どちらの方法でも、今日の午後にはウェブサイトが完成します。違いが表れるのは3年後です。優先事項、ホスティング業者、開発者のいずれかが変わったときに、その差が出てきます。 ## パート2：コンテンツの保存形式 これは、人が最悪のタイミングで気づいてしまう部分です。ですから、まずここから始めてください。 ### ビルダー形式 ページビルダーは、レイアウトを独自の構造で保存します。ショートコード、シリアライズされた設定データ、または投稿メタ内のJSONブロックとして保存されます。プラグインが有効な間は、美しく表示されます。しかし無効にすると、同じページには生のショートコードが表示されるか、何も表示されなくなります。その形式を読み取れるものはほかにないためです。別のシステムへ移行するには、通常、ページごとに手作業で作り直す必要があります。 ### コアフォーマット ブロックのマークアップは、コメントを含むプレーンなHTMLです。投稿をコードエディターで開くと、その内容を確認できます。別のブロックテーマに切り替えても、コアブロックは引き続き表示されます。表示を担っているのはWordPressだからです。これはマーケティング上の主張ではなく、保存形式の性質です。 Canvasでも、ブロックのレベルで同じ点に配慮しています。Canvasのすべてのブロックは、実際の設定パネルを備えた登録済みブロックタイプであり、ショートコードではありません。属性も通常のブロック属性なので、パターン、REST API、コマンドラインからも設定できます。ブロックはCanvasプラグインに含まれているため、テーマを変更しても、ページがプレーンテキストに戻ってしまうことはありません。 限界について正直に述べると、インストールしたブロックライブラリはどれも、今後依存することになるコードです。違いは、取り外したあとに残る「穴」の大きさです。ブロックライブラリを削除すると、そのブロックを使っていたセクションが表示されなくなります。ビルダーを削除すると、ページ全体が表示されなくなります。 どちらを選ぶにしても、決める前にステージング用のコピーで試してください。サイトを複製し、レイアウトツールを無効にして、3ページを確認しましょう。そこで見えるものが、乗り換える際の本当のコストです。早めに把握しておくほうが安心です。 ## パート3：実際にページで読み込まれるもの この分野で語られる速度に関する議論は、たいてい言い伝えのような思い込みに基づいています。仕組みは、順を追って考えられるほど単純です。 ページビルダーは、もう一つのレイアウトエンジンです。独自のCSSグリッドシステム、独自のアニメーションライブラリ、独自のJavaScriptを備えており、プラグインはページでどのウィジェットが使われるかを事前に把握できないため、これらは多くの場合すべてのページで読み込まれます。これはWordPressやテーマに加えて発生する固定的なコストです。 ブロックエディターには独自のランタイムがありません。コアブロックの大部分はHTMLとCSSで、よく作られたブロックテーマはそれに少ししか追加しません。Canvasは、ページに実際に含まれているブロックのCSSとJavaScriptだけを読み込み、さらに35個の最適化を追加します。これらはオン／オフを切り替えられ、その中には、販売商品のないページでWooCommerceが読み込むスクリプトを対象とした5つの最適化も含まれます。 ### 正直なところ 上手に作られたページは、優れたビルダーでも、ずさんに作られたブロックテーマのページより良い結果を出せます。レイアウトツールは、ホスティング、画像、フォント、インストールした他の11個のプラグインなどと並ぶ要素のひとつにすぎません。プラグインなどの仕組みを少なくしたい理由は、ベンチマークのスクリーンショットとは関係ありません。他のことに気を取られている日に、トラブルの種が少なくて済むからです。 [Canvasのパフォーマンス計測方法](https://canvaswp.com/ja/performance/) [開発者向けのブロックテーマとしてのCanvas](https://canvaswp.com/ja/solutions/developers/) ## 第4部：日々の編集作業の使い心地 ここはページビルダーが評判を築いてきた分野であり、その差が最も縮まった分野でもあります。 ### 編集中に実際のページを確認する 従来のブロックエディターへの不満は、ページがデザインのない白い箱として開かれることでした。Canvasはエディターにテンプレート全体をレンダリングさせるため、ヘッダー、スライダー、ページタイトル帯、コンテンツ、フッターがすべてキャンバス内に表示され、フロントエンドを描画するのと同じコードで描かれます。幅と余白は実際の値のため、全幅のセクションは全幅に見えます。 ### 設定は想定どおりの場所にあります ブロックを選択すると、そのブロックが扱えるテキスト、リンク、画像、アイコン、色、サイズ、動作を設定できるパネルが開きます。Canvasは、サイトに登録されたすべてのブロックタイプ（コアブロックを含む）に、同じ高度なパネルを追加します。入場・退場アニメーション、そのブロックだけに適用されるカスタムCSS、分析やテスト用のカスタム属性、ユーザーロールやデバイスごとの表示条件を設定できます。 ### 同じ作業を繰り返さない 2つの仕組みで繰り返しの作業を省けます。「デフォルトとして保存」は、お好みに設定したブロックを保存するので、次に挿入したブロックはその設定から始まります。「グローバルブロックスタイル」は、一連の設定をプリセットとして名前を付け、サイト全体に適用して、一度変更すれば反映されるようにします。テンプレートとテンプレートパーツは、WordPressが管理するサイトエディターに保存されており、Canvasには173件のブロックテンプレート、5件のパーツ、4件のスタイルバリエーションがあります。 **サイトエディター。**テンプレートとパーツは、当社の設定画面ではなく、WordPressが管理する場所に置かれたままです。 ## 第5部：ページビルダーが今でも優れている点 反対側に良い点が一つも見つからない比較は広告にすぎません。ここでは、今日、ビルダーが実際に先行している点をご紹介します。 - **自由な配置。**要素をどこへでもドラッグし、1ピクセル単位で微調整する操作は、成熟したビルダーの方が依然としてスムーズです。ブロックエディターは絶対配置よりも構造を重視します。これはチームにとっては利点ですが、一度きりのヒーローセクションには不向きです。 - **エコシステムの充実度。**大手ビルダーには長年の蓄積があり、サードパーティ製のアドオン、マーケットプレイス、連携機能が揃っています。特定のアドオンに依存したワークフローをお使いなら、移行前に同等のブロックがあるか確認してください。 - **チームはそれを分かっています。** チーム、クライアント、そして金曜日に依頼するフリーランサーが5年間ひとつのビルダーを使い込んできたなら、その習熟には実際に金銭的な価値があります。再教育にはコストがかかり、そのコストは次のプロジェクトにのしかかります。 - **あらゆる場所でデバイスごとの設定が可能です。**一部のビルダーは、ほぼすべてのプロパティでスマートフォンとタブレットの値を設定できます。Coreはより選択的で、ビルダーにコントロールがある場合でも、カスタムCSSフィールドを使うことが時折あります。 - **すべてが一つの製品で揃います。** ポップアップ、フォーム、テーマビルダーも同梱したビルダーなら、提供元もサポート窓口も一つにまとまります。Canvasも同じ機能を自社で提供することでこれに応えていますが、この主張は、素のブロックテーマと比べれば妥当なものです。 - **インターフェースの安定性。**ブロックエディターは、WordPressのリリースのたびに変わります。ビルダーは、提供元の判断で変わります。インターフェースが変わり続けてクライアントに支障が出る場合、それは重要な問題です。 これらはブロックテーマを避ける理由ではありません。慎重に判断するための材料であり、一方の列を有利に見せるような比較表は疑ってかかるべきだということです。 ## 第6部：乗り換えの本当のコスト ページビルダーで作られた既存のサイトがある場合、正直に言うと、移行は変換ではなく作り直しになります。その作業に向けて、予算をきちんと見込んでおきましょう。 - **コンテンツは移行できますが、レイアウトは移行できません。**テキストと画像はお客様のものであり、移行可能です。配置はページビルダー側のものだったため、作り直す必要があります。 - **ページごとに進めましょう。**まずは収益を生むページから始めます。ホームページ、主要なランディングページ、お問い合わせページです。古い投稿のアーカイブは、通常は単純なコンテンツなので最後に回します。 - **白紙からではなく、デモから始めましょう。** 完全なデモサイトをインポートすると、編集できる完成済みのデザインがすぐに手に入ります。また、考えが変わった場合は、インポート全体を元に戻せます。 - **作業が完了するまで、ビルダーはインストールしたままにしてください。**公開中のページが依存していないことを確認してから無効化し、その後、リンククローラーでサイトを確認してください。 - **必要のないリダイレクトは行わないでください。** 同じURLを維持すれば、それに伴う検索順位も維持されます。 ブロック、パターン、テンプレートのレイヤーを学ぶ間は、最初の2ページに時間がかかるものと考えてください。その後、作業のリズムが生まれます。後から節約できる時間の大半は、案件ごとにヘッダーとフッターを作り直さないことによるものです。 ## 第7部：判断の方法 5つの質問に正直に答えれば、たいてい答えは自ずと見えてきます。 - **このサイトを2年後に編集するのは誰でしょうか？** クライアント、インターン、または特定の担当者がいない場合、WordPressに標準で付属するエディターが最も見慣れたものになる可能性が高いでしょう。 - **いくつのサイトを運用していますか？** 個人サイトであれば、余分な仕組みをいくつ載せても問題ありません。クライアントのサイトを20件も抱えると、そうはいきません。余分な層がひとつ増えるごとに、起票されるのを待つサポートチケットが増えていきます。 - **デザインは型破りですか、それとも定番ですか？** 定番のページ構成は、ブロック、パターン、テンプレートが得意とする分野そのものです。レイヤーを重ね、アートディレクションを施した一点物のデザインは、それでもビルダーの方が速いこともあります。 - **移行計画はありますか？** 「移行計画はない」という答えなら、WordPress自身が読める形式を選びましょう。 - **実際に何に支払っているのでしょうか？** テーマ、ビルダー、フォームプラグイン、ポップアッププラグイン、スライダープラグインと、それぞれの更新費用の合計を、それらをまとめてカバーする1つの製品と比べてみてください。 候補にすでにページビルダーが入っている場合は、当社の比較記事2本で、これらの疑問を具体的な製品に当てはめて検討しています。プランごとに見た [Elementorの代替としてのCanvas](https://canvaswp.com/ja/compare/elementor/)と、編集のしやすさ、ロックイン、ライセンス失効時の影響について比較した [CanvasとDiviの比較](https://canvaswp.com/ja/compare/divi/)です。どちらの記事も、情報源と数値を確認した日付を記載しています。 Canvasは、そのリストに対するブロックテーマの答えです。既にお使いのインサーターに209個のブロック、183個のパターン、173個のテンプレート、ヘッダーとフッターのビルダー、フォーム、そして出発点として使える88件の完全なデモサイトを備えています。違いを読むより見て確かめたいなら、デモを開いてページ内をクリックしてみてください。 ## 出典 このガイドでCanvas以外の内容に触れる場合は、その内容を説明している公式ページを以下に掲載しています。 - [ブロックのマークアップ表現](https://developer.wordpress.org/block-editor/getting-started/fundamentals/markup-representation-block/) developer.wordpress.org · ブロックはHTMLとして保存され、各ブロックの開始と終了の位置はコメントで示されます - [theme.json入門](https://developer.wordpress.org/themes/global-settings-and-styles/introduction-to-theme-json/) developer.wordpress.org · theme.json の設定とスタイルは、フロントエンドとエディターの両方に反映されます。 - [テーマとは？](https://developer.wordpress.org/themes/getting-started/what-is-a-theme/) developer.wordpress.org · ブロックテーマはブロックテンプレートから構築され、プラグインに保存された機能はテーマを変更しても維持されます - [テンプレートの紹介](https://developer.wordpress.org/themes/templates/introduction-to-templates/) developer.wordpress.org · サイトエディターは、テンプレートとテンプレートパーツをブロックマークアップとしてデータベースに保存します 次のステップ ## 次のステップ ブロックによるアプローチを実践する2つのガイドと、その基盤となるライブラリを紹介します。 [ガイド **WordPressテーマまたはウェブサイトビルダー** ホスト型プラットフォームと、テーマを使ったWordPressの比較。そして最終的に何を所有することになるのか。](https://canvaswp.com/ja/guides/wordpress-theme-vs-website-builder/) [ガイド **プラグインを使わずにヘッダーを作る** 多くの人が、ページビルダーやヘッダー用プラグインが必要だと考える作業です。](https://canvaswp.com/ja/guides/build-a-wordpress-header-without-a-plugin/) [製品 **ブロックライブラリ** 314個のブロックを10つのグループに収録しており、すべてサイドバーから編集できます。](https://canvaswp.com/ja/blocks/) よくある質問 ## よくある質問 [FAQ全体](https://canvaswp.com/ja/faq/)で残りの疑問にお答えし、[ドキュメント](https://docs.canvaswp.com/)ですべての設定を詳しく解説しています。 **ブロックテーマはページビルダーより自動的に速いのでしょうか？** いいえ。そうでないと主張する人は、何かを売ろうとしています。表示速度を左右するのは、ページが配信する CSS、JavaScript、マークアップの量であり、ツールがどのカテゴリーに属するかではありません。ブロックテーマで得られるのは、軽いページへの近道です。レイアウトエンジンが二重になることはなく、Canvas では、ページに含まれるブロックのアセットだけが読み込まれます。さらに、残りの部分には35件の切り替えがあります。ご自身のページを、変更の前後で計測してください。確かめるまで、どちらの主張も信じないでください。 **Canvasの利用をやめたら、ページは壊れますか？** コアブロックは、どのテーマでも表示され続けます。コンテンツはWordPress自体が読み取る標準のブロックマークアップとして保存されるためです。Canvasブロックは、Canvasプラグインから提供されるため、テーマを変更しても投稿やページにそのまま残ります。プラグインも削除すると、それらのセクションは表示されなくなります。これはどのブロックライブラリでも同じです。 **Canvas上でページビルダーを使えますか？** ページビルダーはプラグインなので、インストールを妨げるものはありません。ただし、おすすめはしません。1つのサイトで2つのレイアウトシステム、2つのスタイリングシステム、2つの更新サイクルを管理することになり、Canvasの料金に含まれるテンプレート、ヘッダー・フッターなどの共通部分、ブロックが、その下で使われないまま残ってしまいます。 **ページビルダーを使わずにサイトを作るのに、コードの知識は必要ですか？** いいえ、ページビルダーを使わずにCanvasサイトを作るのにコードは不要です。Canvasのページのすべての要素は設定パネルを備えたブロックで、ヘッダー、フッター、ページタイトル領域も含まれます。詳細パネルでは、サイト内のすべてのブロックタイプにアニメーション、カスタムCSS、カスタム属性、表示条件を追加できます。カスタムCSSの欄は、必要なときに使えるように用意されているもので、製品がそれを必要としているからではありません。