これから始めるのは、ブロックテーマを使ったWebサイト構築の実装編です。サイト制作の基本設定から、ヘッダー・フッターまでの土台作りをステップごとに解説します。AIのサポートで初心者＆ノーコード派でもわかりやすくまとめてみました。
AIとスムーズに作業をするプロンプトのコツもチェックにゃ！
Chat GPT白猫
ブロックテーマをAI×ノーコードで構築するためのプロンプト
AIとWordPressブロックテーマでサイトを構築する際には、最初に入力するプロンプト（指示文）がとても重要です。
AIはそのまま質問しても答えてくれますが、チャットの冒頭に「こうしてほしい」という宣言を入れるだけで、回答の精度やわかりやすさが大きく変わります。
このサンプルでは初心者＆ノーコード派が地雷を踏まないよう注意を入れつつ、ライト版と深掘り用の厳密版を用意しました。状況に合わせて、「自分で少し手を加えながら調整して使う」といった形で使い分けてみてください。
ブロックテーマ構築用プロンプト : ライト版
原則ノーコードでtheme.jsonノータッチ厳守。ブロックテーマの標準機能で実装できる方法を最優先に。その上で必要ならコードを提案してください。コピー＆ペーストで動く形でお願いします。
ブロックテーマ構築用プロンプト : 厳密版
あなたはWordPressの専門家です。以下の条件で、ブロックテーマを使ったサイト構築の手順・アドバイスを提示してください。
【前提条件】
- 使用テーマはブロックテーマ中心、Ollieなど（ここは使用のテーマ名に変更）のスターター含む
- ブロックテーマの機能を最大限活用することを優先。
- 原則はノーコード操作（サイトエディター、パターン、テンプレートパーツ）で構築。
theme.jsonは直接触らない。- コード編集（PHP/CSS/JS）は「ノーコードでの再現が難しい場合」または「効率が大きく落ちる場合」のみに限定。
- プラグイン利用は最小限。必要に応じて用途別に1つずつ推奨。
- ページ構成・共通パーツ・パターン活用など、ノーコードで最短の構築手順を順序立てて提示。
- 必要に応じて、AIで生成可能な文案・レイアウト案・デザインの工夫も提案。
- 最新の手法やクリエイティブなアプローチが有効な場合は、その旨を説明した上で提案してよい。
この条件で、初心者でも迷わずブロックテーマでサイト構築できる手順を示してください。
WordPressの子テーマをサクッと作って設定
WordPressに構築用のテーマをインストールしたらそのまま使用せず、自分用の子テーマを作成しましょう。
なぜかというと、親テーマ（Ollieなど）は定期的にアップデートされますが、そのまま使っていると、自分で加えた設定や調整が上書きされてしまう可能性があるからです。子テーマを作ってカスタマイズすれば、親テーマのアップデートの影響を受けずに自分の設定を守れるので安心です。
子テーマ作成はプラグインを使えば、2、3クリックで完了！作ったあとはプラグイン無効化・削除OK
Chat GPT白猫
Child Theme Configurator（プラグイン）で子テーマを作成
1. インストール & 有効化
- 管理画面 → 「プラグイン」 → 「新規追加」
- Child Theme Configurator を検索してインストール → 有効化
2. 子テーマを作成
- 管理画面左メニューに「ツール」→「Child Themes」をクリック
- 1で「CREATE a new Child Theme」にチェック、２のプルダウンでテーマを選択し「Analyze」ボタンをクリック
- Analyze したあとに出るチェック項目は、基本的には デフォルトのまま でOK。一番下の「Create New Child Theme」をクリック → 子テーマ生成完了！
※そのあとの「Configure Child Theme」は 上級者向けのカスタマイズ用なので、通常は触る必要はありません。
外観＞テーマに戻ると子テーマが自動生成されています。「〇〇 Child」という名前で表示されるので、それを有効化すれば準備完了です。
制作をスムーズにする便利プラグイン
子テーマの準備ができたら、次は作業を効率化するプラグインを揃えましょう。
ブロックテーマの標準機能を補ったり、操作をスムーズにしてくれるものを中心に、ほぼ必須とおすすめに分けて表で紹介します。
設定方法も簡単です。WordPress左メニューの プラグイン > プラグインのアップロード から、追加したいプラグインを検索して インストール > 有効化 するだけです。
ブロックテーマ構築にほぼ必須
| プラグイン名 | 用途・ポイント |
|---|---|
| Kadence Blocks | 標準ブロックを拡張して高度なレイアウトやデザインが可能。ページテンプレートも便利。 |
| EWWW Image Optimizer | 画像を自動で圧縮・WebP変換。ページスピード向上に必須。 |
| Child Theme Configurator | 親テーマを触らずに子テーマを作成。カスタムCSSや関数を安全に追加可能。（手動作成の場合は不要、また子テーマを作成後削除可能） |
| Contact Form 7 / WPForms | フォーム作成用。無料のブロックテーマ単体にはフォーム機能ないため。Kadence Pro(有料テーマなど)にはある場合もあります |
あると便利・サイト機能やUX向上のプラグイン
| プラグイン名 | 用途・ポイント |
|---|---|
| All in One SEO | SEO全般とパンくず管理。メタタグやOGP、サイトマップ設定に便利。 |
| Table of Contents Plus / Easy Table of Contents | 長い記事向け目次自動生成。UX向上。 |
| WordPress Popular Posts | 人気記事ランキング表示。スピードに注意。 |
| Safe SVG | SVGを安全にアップロード可能。アイコンやロゴに便利。 |
| Advanced Custom Fields (ACF) | 投稿やページに柔軟なカスタムフィールド追加可能。例：5段階評価の星表示、テキスト入力欄（レビューや補足コメント）、日付・チェックボックス・選択リスト。表示にはPHPが必要。 |
ブロックテーマの基本設定
便利なプラグインを揃えたら、いよいよブロックテーマの基本設定に進みましょう。
まずは フォントやカラーを整えて、サイト全体の雰囲気をデザインするステップです。これを押さえておくと、後の作業もぐっとやりやすくなります。
1.フォント・カラーの設定
サイト全体の印象を左右するのは、やっぱりフォントとカラー。ブロックテーマでは、管理画面から直感的に設定できるので、コードを書かなくても大丈夫です。
フォントの設定
カラーの設定
カラー設定の注意点：
テーマのカラーパレットを直接編集し自分のサイトカラーに変更したいところですが、現時点（2025年9月）では管理画面だけではできない仕様（theme.jsonなどを編集する複雑な修正が発生）のようです。初心者＆ノーコード派は触らずにそのまま活かすのがおすすめ。
代わりに、カスタムに自分のサイトのテーマカラーを指定しましょう。
図のように投稿や固定ページの色指定でテーマの下に出てくるので、スムーズに自分のサイトのカラーパレットを使うことができます。
AIでUX設計＆戦略に基づいたフォントやカラーパレットを作ると、ユーザーニーズに合った直感的で使いやすいサイトが構築できるよ！
Chat GPT白猫
基本テンプレート構成
ブロックテーマは「テンプレート」と「テンプレートパーツ」で構成されています。それぞれの役割を理解すれば、サイト構築がぐっと楽になります。
編集したいテンプレートを開く
外観＞エディター＞テンプレート
テンプレートの種類
ヘッダーとフッター設定で、ブログサイト完成！
続いて、ブロックテーマの基本、ヘッダー・フッターの設定です。「Ollie」など初心者でも使いやすいテーマを選べば、記事一覧や投稿ページはテーマのデフォルトできれいに整っているので、ヘッダー・フッターの情報をセットすればサクッとブログサイトの構築完成！
あとは記事を書き始めるだけで公開できる状態になります。
それでは、ここからは「Ollie」テーマを参考に設定方法をまとめます。
メニューの作成
ヘッダー・フッターにメニューを設置する際、先に表示したい項目（固定ページやカテゴリーなど）を準備しておくと、メニューに簡単に一覧で表示できるようになります。固定ページは公開しないとメニューで呼び出せないので、まだ作成途中でも設定の時だけ一旦公開にしましょう。
固定ページ（ABOUT・お問合せなど）
カテゴリー（投稿記事のカテゴリー）
ヘッダーの設定手順
全体構成がわかるようにテンプレート（今回はTOPに表示のインデックス）から共通パーツのヘッダーを編集します。個別にパーツのみ編集も可能です。
固定ページをメニューに追加（自動）
カテゴリーをメニューに追加
ヘッダーにロゴを設定する
WordPress設定時に登録したサイト名が、デフォルトでヘッダーの左側に表示されています。そのテキスト横にサイトロゴを設定します。
ロゴ画像の追加
フッターの設定手順
フッターデザインを変更
ブロックカスタマイズの基本は、左のリストビューで編集したいパーツを選択し、黒＋アイコンで要素を追加、右の編集画面で設定になります。
ややクセがあるので、慣れるまで迷うかもしれませんが、迷ったらAIに確認するにゃ！
Chat GPT白猫
ブロックテーマでのサイト構築はテーマ選びが成功の鍵
「Ollie」のようなブロックテーマは、子テーマを有効化した時点で、美しいブログ一覧がTOPに整った状態になるので、ブロックカスタマイズに慣れていない初心者でもすぐにサイトが構築できます。
一方で、上級者向けの「Spectra One」など、TOPページにいきなり海外サイトのような派手なテンプレートが表示されるテーマは、どこからカスタマイズすればいいのかわからずポッキリ（経験者談😹）。
そのため、初心者＆ノーコード派は最速で使えるテーマを選ぶことが成功の鍵。まずは使いやすいテーマを選び、ブロックでの構築のコツを掴みましょう。
実用編では、固定ページを作成してキービジュアルを設定したり、サイトに必要なパーツをブロックテーマで組み立てる方法を紹介します。
ここからは実際のサイト制作に近いステップに進むので、さらに応用力が身につきます！
