Thrive Architectで作ったページが増えてくると、「同じ見た目のセクションを何ページにもコピーしたせいで、色を1つ変えるのに全ページを開き直す」という状態になりがちです。これを防ぐには、色や文字の設定をグローバルな値にまとめ、繰り返し使うセクションは「連動して更新されるもの」と「コピーして使うもの」に分けて管理するのが効果的です。この記事では、その分け方と具体的な運用手順、移行やトラブルのときの注意点を解説します。
最初にお断りしておくと、「Smart Sections」という名前の機能は、Thrive Architectの正式な機能名として確認できるものではありません。この記事では、グローバルカラー、グローバルスタイル、シンボル、テンプレートといった機能を組み合わせて、セクションを賢く使い回す運用のことを指してこの言葉を使います。お使いのバージョンに同じ名前の機能がある場合は、Thrive Themesの公式ナレッジベースで内容を確認してください。Thrive製品は更新が多く、メニューの位置や表記、どの製品・プランに含まれるかは変わることがあります。以下は執筆時点（2026年10月現在）の情報です。
「連動するもの」と「コピーするもの」を分ける
デザイン管理でいちばん大事なのは、部品ごとに「変更をすべてのページに反映させたいか」を決めることです。Thrive Architectには、性質の違う再利用の仕組みが用意されています。
- グローバルカラー・グローバルグラデーション: 色に名前を付けて登録し、要素からはその名前で参照します。登録した色を変えると、参照しているすべての箇所が変わります。
- グローバルスタイル: ボタンなどの要素の見た目をスタイルとして保存し、複数の要素に適用します。スタイルを編集すると、適用先がまとめて変わります。
- シンボル: セクションや要素のまとまりを「シンボル」として保存すると、各ページに置いたものが1か所の元データを参照します。元を編集すると、置いたすべてのページに反映されます。
- テンプレート（保存したブロック）: 作ったセクションを保存しておき、別のページに挿入できます。挿入した時点でコピーになるため、後から元を変えても既存のページには反映されません。
判断の目安は次のとおりです。
- 全ページで同じでなければ困るもの（ヘッダー直下のお知らせ帯、会社概要、申し込みボタンの帯）はシンボルにする
- 形は同じでも中身がページごとに違うもの（料金表、事例紹介、FAQ）はテンプレートにして、挿入後に書き換える
- 色・ボタンの見た目のように、デザインの約束事そのものはグローバルカラーとグローバルスタイルで持つ
この区別をせずにすべてをテンプレートで済ませると、最初は速くても、ブランドカラーの変更やキャンペーン文言の差し替えのたびに大きな手間がかかります。
手順1: 色をグローバルカラーとして登録する
まず、サイトで使う色を整理します。ブランドのメインカラー、強調色、本文の文字色、薄い背景色の4〜6色程度に絞るのが扱いやすい範囲です。
Thrive Architectの色の選択画面には、グローバルカラーを追加・管理する場所があります。ここで色を登録するときは、色の見た目ではなく役割で名前を付けます。
- よい例: 「メイン」「強調」「本文」「背景・薄」
- 避けたい例: 「青」「オレンジ」
色の名前を役割にしておくと、ブランドカラーが青から緑に変わっても名前と中身がずれません。既存のページで直接指定した色が残っていると、グローバルカラーを変えても一部が古い色のまま残ります。主要なページから順に、直接指定の色をグローバルカラーに置き換えていきます。
色を決めるときには、文字と背景のコントラストも確認します。WCAG 2.2では、通常の文字は背景とのコントラスト比4.5:1以上（大きな文字は3:1以上）が達成基準AAの目安です。グローバルカラーの段階で組み合わせを確認しておけば、ページごとに確かめる手間が減ります。
手順2: ボタンと見出しの見た目をそろえる
次に、使用頻度の高い要素の見た目を固定します。とくにボタンは、ページごとに角の丸みや余白がばらつきやすい要素です。
- 基準となるボタンを1つ作り、色はグローバルカラーを使って設定します。
- そのボタンの見た目をグローバルスタイルとして保存します（「メインボタン」「サブボタン」など役割で命名）。
- 他のページのボタンには、このスタイルを適用します。
文字の大きさや書体については、Thrive Theme Builderを併用している場合はテーマ側の文字設定、Thrive Architect単体の場合は各ページやテンプレートでの設定と、管理する場所が環境によって異なります。どこで決めた値が優先されるのかを一度確認し、チーム内で「文字の設定はここで変える」と決めておくと、上書きの重なりによる混乱を避けられます。
手順3: 共通セクションをシンボルにする
全ページで同じ内容を見せたいセクションは、シンボルにします。
- 1つのページでセクションを作り込みます。色はグローバルカラー、ボタンはグローバルスタイルを使います。
- そのセクションを選び、シンボルとして保存します。名前には用途と場所がわかるものを付けます（例:「CTA帯_資料請求」「お知らせ帯_ヘッダー下」）。
- 他のページでは、要素の追加メニューからシンボルを挿入します。
シンボルを編集すると、置いたすべてのページが同時に変わります。便利な反面、1ページだけ文言を変えたいつもりで編集すると、全ページの表示が変わってしまいます。編集前には「このシンボルがどのページに置かれているか」を確認し、影響範囲が大きいものは公開前にステージング環境で確認してください。
1ページだけ違う内容にしたい場合は、シンボルの連動を解除してそのページだけ通常の要素に戻す操作ができることがあります。ただし解除したページは、以降の更新が反映されなくなります。解除したページの一覧をメモしておくと、後で「ここだけ古い」という状態を見つけやすくなります。
手順4: 中身が変わるセクションはテンプレートにする
料金表やお客様の声のように、形は同じで中身がページごとに違うセクションは、テンプレートとして保存します。
テンプレートの中でも、色はグローバルカラー、ボタンはグローバルスタイルを使っておくのがポイントです。こうしておけば、テンプレートから挿入したコピーであっても、ブランドカラーやボタンの変更はグローバル側の更新で追従します。「コピーだから連動しない」のは構造と文言だけになり、管理の負担がかなり軽くなります。
テンプレートが増えてきたら、命名規則をそろえます。たとえば「種類_用途_版」（例:「料金表_3列_v2」）のようにしておくと、古い版を誤って使うことを防げます。使わなくなったテンプレートは、すぐに消さずに名前の先頭に「旧」と付けて残し、使われていないことを確認してから整理します。
手順5: 表示速度と見え方を確認する
再利用の仕組みを整えたら、実際の表示も確認します。
- スマートフォンでの見え方: Thrive Architectは、パソコン・タブレット・スマートフォンの表示ごとに設定を変えられます。パソコンで作った設定が小さい画面に引き継がれるため、シンボルやテンプレートは保存前にスマートフォン表示でも崩れていないか確認します。
- レイアウトのずれ（CLS）: 画像に幅と高さが設定されていない、あとから読み込まれる要素の場所が確保されていない、といった状態は、表示中にレイアウトがずれる原因になります。共通セクションで直しておけば、全ページの改善になります。
- 動きの多い演出: 動きを付けたセクションは、動きを減らす設定にしている利用者への配慮が欠けやすい部分です。共通セクションには、必要最小限の演出だけを入れるのが無難です。
アクセシビリティの自動チェックツールは、コントラスト不足や代替テキストの抜けなどを見つけてくれますが、問題の一部しか検出できません。キーボードだけで操作できるか、見出しの順序が自然かといった点は、人の目でも確認してください。
移行とトラブルに備える
Thrive Architectで作ったページの内容は、Thrive独自の形式で保存されます。プラグインを停止すると、編集した内容が表示されなくなることがあります。将来ほかのビルダーやブロックエディターに移る可能性があるなら、共通セクションの文言を別の場所（社内の資料など）にも残しておくと、作り直しの負担が減ります。
更新時のトラブルを防ぐため、Thrive製品やWordPress本体の更新前にはバックアップを取り、主要なページの表示を確認してから本番に適用してください。シンボルやグローバルスタイルを大きく変える作業も、ステージング環境で試してから反映するのが安全です。
まとめ
- 部品ごとに「全ページで連動させたいか」を決め、連動はシンボル、コピーはテンプレートで管理する
- 色は役割で名前を付けたグローバルカラー、ボタンはグローバルスタイルで持ち、テンプレートの中でも使う
- シンボルの編集は全ページに反映されるため、影響範囲を確認し、連動を解除したページは記録しておく
- スマートフォン表示、CLS、コントラストは共通セクションの段階で確認すると全ページに効く
- 独自形式で保存されることを踏まえ、バックアップと移行の備えをしておく