Claude CodeでSWELLの固定ページを作る方法｜ブロック生成の実例

2026年10月2日2026年10月16日

SWELLで固定ページを作成する場合、見出しや画像、カラムなどのブロックを編集画面から1つずつ配置していきます。ページが長くなるほど、同じ設定やレイアウトを繰り返す作業も増えていきます。

Claude Codeを使うと、ページの構成や文章をもとに、WordPressのブロック形式で固定ページを作成できます。SWELLのブロックとして生成しておけば、作成後も通常のブロックエディターから文章や画像を修正できます。

この記事では、架空のカメラ「ORIHA Yoake」の製品紹介ページを例に、Claude CodeへSWELLブロックの見本を渡し、固定ページを作成する流れを紹介します。SWELLの標準ブロックだけでは再現しにくい独自の動きには、カスタムHTMLとページ単位のCSS・JavaScriptを使用しました。

※作例の文章と写真はすべて独自に用意しています。Appleの製品ページは、ページ構成や見せ方を考える際の参考にしています。

※WordPressやSWELLの仕様は変わることがあります。本記事は2026年9月時点の内容です。

この記事でわかること

Claude CodeでSWELLの固定ページを作成する流れ
作成後も編集できるSWELLブロックとして生成する方法
Claude Codeへ渡すブロックの見本と依頼文
カスタムHTML・CSS・JavaScriptを使い分ける考え方
編集画面と公開画面で確認するポイント

Claude Codeで作成したSWELLの固定ページ

作例は、架空のカメラ「ORIHA Yoake」の製品紹介ページです。Appleの製品ページのように、大きな写真と短い文章で1節ずつ見せていく構成を参考にしました。

作成した固定ページは、22のセクションで構成しています。SWELLのフルワイドブロックで1セクションずつ積み重ねているため、リストビューを開くと、セクションごとの並びを確認できます。

WordPressのブロックエディタでリストビューを開き、SWELLのフルワイドブロックが節ごとに縦に並んでいる画面 — リストビューを開いた状態。22のセクションを、SWELLのフルワイドブロックで1セクションずつ積み重ねています

見出しや文章、画像など、あとから変更する可能性がある部分は、できるだけWordPress標準ブロックまたはSWELLブロックで作成しました。

ページ全体では422個のブロックを使用していますが、そのうち411個は、WordPress標準ブロックまたはSWELLブロックです。文章の書き換えや画像の差し替えは、普段の記事と同じようにブロックエディターから行えます。残りの部分は、SWELLの標準ブロックだけでは再現しにくい動きのため、カスタムHTMLで補っています。

固定ページを作成するまでの流れ

固定ページは、次の流れで作成します。各手順は、このあとのSTEPで説明します。

固定ページの構成を決める（STEP 1）
使用するSWELLブロックを、WordPressで作成する（STEP 2）
コードエディターから、ブロックの記述を見本として保存する（STEP 3）
Claude Codeへ、構成と見本を渡す（STEP 4）
Claude Codeで、ブロック形式の本文を生成する（STEP 4）
WordPressへ下書きとして保存する（STEP 5）
CSS・JavaScriptを追加する
編集画面とプレビューで確認する

ポイントは、SWELLブロックの記述をAIに推測させず、自分のWordPressで作成した見本を渡すことです。「SWELLのブロックで作って」とだけ依頼すると、一般的なHTMLをもとに、存在しない記述が生成されることがあります。

用意するもの

SWELLを使用しているWordPressサイト
Claude Code
固定ページに掲載する文章と画像
ブロックの見本を保存する作業用フォルダ
WordPressへ直接送る場合は、アプリケーションパスワード

STEP 1｜ページの構成を決める

最初に、ページ全体の構成を決めます。Claude Codeへ依頼する前に、次の3点を整理しておくと、生成された結果の確認がしやすくなります。

セクションの順番（例：ファーストビュー、特長の紹介、仕様、よくある質問）
各セクションで伝える内容と、使用する写真
各セクションで使いたいブロック（見出し、画像、カラム、タブ、ボタンなど）

作例では、ページを22のセクションに分けました。1セクションを1つのフルワイドブロックにしておくと、あとから特定のセクションだけを修正したり、並び替えたりしやすくなります。

文章や構成の叩き台は、Claude Codeに相談しながら決めることもできます。そのときも、使用するブロックの種類は、この段階で決めておきます。

STEP 2｜使用するSWELLブロックの見本を作成する

固定ページで使用するSWELLブロックを、WordPressの編集画面で1種類ずつ作成します。作例では、フルワイド、リッチカラム、タブの3種類です。

見本の内容は、「見出し」「本文」などの仮の文章で構いません。大切なのは、実際に使いたい設定（背景色、カラム数、タブの数など）にしておくことです。設定を変えると、ブロックの属性やclass名が変わります。

見本の作成とコードエディターでの確認は、Markdown原稿をAIでSWELLブロックに変換して投稿する方法でも紹介しています。

STEP 3｜コードエディターから記述を保存する

作成した見本のブロックを、WordPressのコードエディターに切り替えて、記述を確認します。コードエディターに表示された記述から、目的のブロックの開始コメントと終了コメントを含めてコピーします。

コピーした記述は、Claude Codeが読み込めるフォルダに、ブロックの種類ごとのファイルとして保存します。

samples/swell-fullwide.html
samples/swell-rich-columns.html
samples/swell-tabs.html

このファイルが、Claude CodeへSWELLブロックの正しい書き方を伝える見本になります。

STEP 4｜Claude Codeへ固定ページの作成を依頼する

Claude Codeへ、ページの構成と、STEP 3で保存した見本を渡します。見本を読み込ませる依頼文は、次のような形です。

samples/swell-fullwide.html
samples/swell-rich-columns.html
samples/swell-tabs.html
を読み込んでください。

これらは、自分のWordPressで作成したSWELLブロックを、
コードエディターからコピーした見本です。

SWELLブロックの記述は推測せず、
見本と同じブロック名・属性・HTML構造・class名で生成してください。

続けて、固定ページを作成する依頼文の例です。ページ構成は、例として6つのセクションにしています。

読み込んだSWELLブロックの見本を使って、
次の構成で固定ページの本文を作成してください。

要件：
- 1セクションを1つのフルワイドブロックにする
- 見出し・段落・画像はWordPress標準ブロックを使う
- 複数列の部分はリッチカラムを使う
- 切り替えて表示する部分はタブブロックを使う
- SWELLブロックの記述は、読み込んだ見本に合わせる
- 存在しない属性やclass名を推測で追加しない
- カスタムHTMLが必要な箇所は、勝手に作成せず先に知らせる
- ブロックの開始と終了が対応しているか検査する
- 生成結果は fixed-page-content.html に保存する
- WordPressへはまだ送信しない

ページ構成：
1. ファーストビュー
2. 製品の特長
3. 撮影例
4. 機種の比較
5. 仕様
6. よくある質問

実際の依頼では、ページ構成の部分をSTEP 1で決めた構成に置き換え、文章と使用する写真もあわせて渡します。1セクションを1つのフルワイドブロックにする、のように、構成と対応づけて指示します。

写真の高さや余白など、表示を確認してから直したい部分も、Claude Codeへの指示で調整できます。作例でも、写真の高さや余白は、表示を確認したうえでClaude Codeへ調整を依頼しました。

STEP 5｜WordPressへ下書き保存する

生成した本文は、公開状態にせず、下書きとしてWordPressへ保存します。

作例では、生成したブロックの記述をWordPress REST APIで固定ページへ送り、draftを指定して下書き保存しました。WordPressのコードエディターへ手動で貼り付ける方法でも確認できます。REST APIを使った保存方法とアプリケーションパスワードの設定は、別の記事で詳しく説明しています。

すでに公開している固定ページへ上書きするときは、元の内容を控えてから行います。編集画面を開いたまま別の方法で更新すると、あとから保存した内容で巻き戻ることがあるためです。

下書きを保存できたら、WordPressの編集画面で開き、見出しや段落が個別に選択できる状態になっているかを確認します。