「WordPressの見た目を整えたいけど、デザインの知識がない……」「SWELLが人気らしいけど、有料テーマを買って本当に使いこなせるの？」
ブログを始めると、記事の中身と同じくらい気になるのが見た目ですよね。
結論から言うと、デザインに自信がない人ほど、SWELLを入れてしまうのが近道です。見出しや囲み枠、吹き出しなどの装飾が最初からそろっていて、Claude Codeにも「この囲みを使って」と指示しやすいからです。この記事では、購入から導入、初期設定、Claude Codeと組み合わせて使うコツまでを解説します。
- SWELLを購入して、WordPressに導入できる
- 子テーマの役割と、導入後にやっておきたい設定が分かる
- Claude CodeにSWELLの装飾を使ってもらうコツが分かる
17,600円って、始めたばかりのブログにはちょっと勇気がいる金額なんですよね……。
分かります。ただ、SWELLは買い切りで、自分のブログなら複数サイトで使えます。このサイトもSWELLで作っていて、この記事の囲みや吹き出しもSWELLの機能です。Claude Codeとの相性も良いので、そのあたりも含めて紹介しますね。
- 国立大学卒のサラリーマン
- 新卒でJTCに入社するも、新入社員研修中にFIREを決意。副業ブログを始めるが、収益が伸びず挫折。いつしかブログは放置。
- Claude codeと出会い、放置していたブログを久々に動かしてみると、できることの多さに驚く。収益も面白いほど増加。
- Claude codeで副業ブログを動かすノウハウを発信することで、さらに良い使い方が見えてくるのではないかと思い、本ブログを開始。
SWELLとは・おすすめする理由
SWELLは、WordPressの見た目や機能をまとめて整えてくれる、有料のデザインテーマです。
WordPressのデザインや機能をまとめた「着せ替えセット」のようなものです。テーマを変えるだけで、同じ記事でも見た目や使える装飾が大きく変わります。
SWELLをおすすめする理由は、次のとおりです。
- ブロックエディターに完全対応している：WordPress標準の編集画面（ブロックエディター）で、囲み枠や吹き出しなどの装飾をそのまま使える
- 買い切りで、複数サイトに使える：価格は17,600円（税込、2026年9月時点・SWELL公式サイトより）。月額や年額の費用はなく、アップデートも無料
- デザインの知識がなくても整う：目次の自動生成や、読みやすい見出しデザインが最初から用意されている
- Claude Codeに指示しやすい：装飾がブロックとして決まった形で用意されているので、「このブロックを使って」と伝えやすい
» SWELL
SWELLの購入〜ダウンロードの流れ
SWELLは、公式サイトから購入します。支払いはクレジットカード（VISA・Mastercard・AMEX・JCB）のみで、銀行振込には対応していません。
- 公式サイトの購入ページを開く：利用規約を確認して同意し、決済ページに進む
- 決済する：メールアドレスとカード情報を入力して支払う。購入完了のメールが届く
- 会員サイト「SWELLERS’」に登録する：購入時と同じメールアドレスで会員登録する
- マイページからダウンロードする：「SWELL製品ダウンロード」から、SWELL本体（親テーマ）と子テーマの2つのファイルをダウンロードする
ダウンロードしたファイルはzip形式のままで使います。解凍（展開）しないように注意してください。MacのSafariでは、ダウンロード後に自動で解凍される設定になっていることがあるので、その場合はSafariの設定を確認しましょう。
SWELLの子テーマとは？
SWELLを導入するときは、親テーマと一緒に「子テーマ」も入れて、子テーマの方を有効にするのが基本です。
親テーマ（SWELL本体）の機能やデザインをそのまま受け継ぎつつ、自分用の追加の設定やカスタマイズを書き込んでおくための「上着」のようなテーマです。親テーマがアップデートされても、子テーマに書いた内容は消えません。
親テーマに直接カスタマイズを書き込むと、アップデートのたびにその内容が上書きされて消えてしまいます。今はカスタマイズの予定がなくても、あとから「ここだけ見た目を変えたい」と思ったときに困らないよう、最初から子テーマを有効にしておくのがおすすめです。子テーマはSWELLの公式が配布しているので、自分で作る必要はありません。
SWELLをWordPressへ適用する手順（親テーマ＋子テーマ）
ダウンロードした2つのファイルを、WordPressにアップロードします。親テーマ→子テーマの順番で進めてください。
- WordPressの管理画面で「外観」→「テーマ」を開き、「新規追加」（「テーマを追加」と表示される場合もあります）をクリックする
- 「テーマのアップロード」をクリックし、親テーマ（SWELL本体）のzipファイルを選んで「今すぐインストール」をクリックする
- インストールが終わったら、有効化はせずにテーマの画面に戻る
- 同じ手順で、子テーマのzipファイルをアップロードしてインストールする
- 子テーマの方を「有効化」する
テーマの一覧で、有効になっているのが子テーマ（名前に「CHILD」などが付いている方）になっていれば成功です。親テーマは有効化しなくても、子テーマが親テーマの機能を読み込んで動いてくれます。親テーマは削除しないでください。
SWELLの初期設定でやっておきたいこと
1. ユーザー認証（アクティベート）を済ませる
SWELLを入れたら、まず「ユーザー認証」を済ませましょう。認証していないと、SWELL本体のアップデートを管理画面から行えなくなります。
- 会員サイト「SWELLERS’」にログインした状態で、WordPressの管理画面を開く
- 「SWELL設定」→「アクティベート」を開く
- 「ユーザー認証」の欄に、SWELLERS’に登録したメールアドレスを入力し、「認証リクエストを送信」をクリックする
- 届いたメールの認証用URLを、30分以内に開く
2. サイト全体の見た目を決める
「外観」→「カスタマイズ」から、サイトのメインカラーやロゴなど、全体の見た目を設定します。最初から細かく作り込む必要はありません。メインカラーを1色決めるだけでも、ブログらしい統一感が出ます。
3. 機能が重なるプラグインを入れない
SWELLには、目次の自動生成など、ブログに必要な機能が多く備わっています。同じ機能のプラグインを重ねて入れると、表示が崩れたり動作が重くなったりする原因になります。SWELLの公式サイトでは、一緒に使うのをおすすめしないプラグインも案内されているので、プラグインを入れる前に確認しておきましょう。
4. よく使うパーツを登録しておく
吹き出しで使うアイコンと名前は「吹き出しセット」として、プロフィールカードのように何度も使う部品は「ブログパーツ」として登録しておくと便利です。登録した部品には番号（ID）が付くので、あとでClaude Codeに「この番号の部品を使って」と指定できます。
SWELLとClaude Codeの連携（SWELL独自ブロックを使ってもらうコツ）
SWELLとClaude Codeを直接つなぐ特別な設定はありません。Claude CodeがWordPressに投稿する記事の本文に、SWELLのブロックを正しい形で書き込んでもらう、というのが「連携」の中身です。WordPressとClaude Codeのつなぎ方は、WordPressの記事で解説しています。
このサイトを運営するなかで、うまくいったコツと、実際につまずいたポイントを紹介します。
コツ1：まず自分で1記事作り、その形をお手本にしてもらう
SWELLのブロックは、記事の本文の中に決まった形の「目印」として保存されています。この形をClaude Codeに推測で書かせると、うまく表示されないことがあります。
おすすめは、使いたいブロック（囲み枠、吹き出し、ブログパーツなど）を入れた記事を、まず自分でブロックエディターから1つ作って下書き保存することです。そのうえでClaude Codeに「この下書きの本文を取得して、SWELLのブロックの書き方をCLAUDE.mdにまとめて」とお願いします。実際に保存された形をお手本にできるので、次からはその形どおりに書いてくれます。
コツ2：部品は番号（ID）で指定する
吹き出しセットやブログパーツは、登録した番号で呼び出せます。このサイトでも、CLAUDE.mdに「読者側の吹き出しはこの番号、筆者側はこの番号」「自己紹介カードはこの番号のブログパーツを、最初の見出しの直前に置く」と書いています。番号で指定しておくと、記事ごとに見た目がブレません。
コツ3：ブロックの中身に独自の装飾を足させない
私が実際につまずいたのがここです。囲み枠の色を変えようとして、ブロックのHTMLに独自の指定を書き足したところ、編集画面で「このブロックには、想定されていないか無効なコンテンツが含まれています」というエラーが出てしまいました。
SWELLのブロックは、保存された形が決まったルールと一致しているかを編集画面がチェックしています。色などを変えたいときは、まず編集画面の設定パネルで自分で変更してみて、そのとき保存された形をClaude Codeに確認させてから真似してもらうのが安全です。
「推測で書かせない、実物を見せる」。これがSWELLとClaude Codeを組み合わせるときの一番のコツだと感じています。
SWELLに関するよくある疑問
Q. 無料テーマではダメですか？
A. 無料テーマでもブログは始められます。ただ、SWELLは装飾ブロックがそろっていて、デザインを整える手間が大きく減ります。Claude Codeに装飾を指定しやすい点も含めて、非エンジニアの方には特におすすめです。
Q. 複数のブログで使えますか？
A. 使えます。SWELLは一度購入すれば、複数のサイトで利用できると公式に案内されています。
Q. 子テーマは本当に必要ですか？
A. カスタマイズを一切しないなら、なくても動きます。ただ、あとからカスタマイズしたくなったときに備えて、最初から子テーマを有効にしておくのがおすすめです。子テーマは公式から無料でダウンロードできます。
Q. 動作環境の条件はありますか？
A. 2026年9月時点のSWELL公式サイトでは、WordPress 5.9以上（推奨は6.1以上）、PHP 7.3以上が推奨されています。エックスサーバーで新しくWordPressを始めた場合は、通常この条件を満たしています。
Q. インストールに失敗します
A. アップロードしたファイルが解凍（展開）されたフォルダになっていないか確認してください。zipファイルのままアップロードする必要があります。また、子テーマは親テーマがないと動かないので、必ず親テーマもインストールしておきましょう。
SWELL、まとめ
この記事では、SWELLの購入から導入、初期設定、Claude Codeと組み合わせて使うコツまでを解説しました。ポイントを振り返っておきます。
- SWELLは17,600円（税込、2026年9月時点）の買い切りで、複数サイトに使えるデザインテーマ
- 親テーマと子テーマをアップロードし、子テーマを有効化する
- 導入後は、ユーザー認証を忘れずに済ませる
- Claude Codeには、自分で作ったお手本の記事からブロックの書き方を学んでもらう
ブログの見た目が整ったら、次は記事のネタとなるキーワードを調べる準備です。
このカテゴリ（ロードマップ・準備編）の記事一覧は、準備編のまとめ記事で紹介しています。
