SWELLで作るメディア型サイト、Claude Codeを相棒にする基本ライン

WordPress のテーマ「SWELL」と、AI コーディング相棒「Claude Code」。この組み合わせをメディア型サイトの運用に取り入れる動きが、ここ数ヶ月で一気に広がっています。ただ、AI に任せる範囲を曖昧にしたまま走り出すと、サイトの一貫性が崩れたり、テーマカスタマイズが影響範囲不明のまま膨らんだりと、運用が逆に重くなることもあります。

FinLabo では SWELL と Claude Code を組み合わせたメディア運用を続ける中で、「設計判断のうちどこを人間が握り、どこを AI に任せて良いのか」を都度言語化してきました。今回はその基本ラインを、設計・カスタマイズ・公開前確認の 3 つの軸で整理します。

1. 設計の前提条件を、AI に「言語で」渡す

SWELL は素のままでもメディア型サイトに使える完成度を備えていますが、長く運用するほど、サイトのトーンや構造的な約束事が増えていきます。読者層の年代、想定する読了体験、避けたい言い回し、CTA の置き場所、内部リンクの設計思想——これらは「サイトを運営している本人の頭の中」にあるだけだと、AI に手伝ってもらうたびに毎回伝え直す羽目になります。

そこで効くのが、サイト運営の前提条件を一枚のドキュメントにまとめておくことです。Claude Code は与えた前提を元に提案を組み立てるため、前提が曖昧だと提案も曖昧になります。逆に「読者は 30〜50 代女性／投資判断は煽らない／専門用語は初出時に必ず説明する」のような粒度で書き出してあると、生成物のブレが一気に小さくなります。

FinLabo の場合、最低限以下の項目を設計書として用意しています。

• サイトの目的とミッション（誰の何を解決するメディアか）
• 主要な読者像と前提知識のレベル
• 記事構成のテンプレート（H2 の本数、リード文の役割、まとめの書き方）
• 文体ルール（敬体・体言止め混在／避けたい言い回し）
• カテゴリと内部リンクの設計思想
• CTA とアフィリエイトリンクの扱い

この文書を Claude Code に共有しておくと、新しい記事を組み立ててもらうときも、テーマのカスタマイズを相談するときも、判断の足場が共通になります。ここを省略すると「個別の指示は通るけれど、サイト全体としては一貫性が薄い」という状況が起こりやすくなります。

2. テーマカスタマイズと JS パッチを、安全な単位で作る

SWELL は子テーマと「カスタムスニペット」「カスタム JS」「カスタム CSS」の窓口が整理されているため、Claude Code と相性が良いテーマです。一方で、AI に任せる範囲が広がると、影響範囲の大きい変更を一気に作りがちになる点には注意が必要です。

FinLabo が運用で守っているのは、以下のような単位の切り方です。

1. 1 パッチ＝ 1 機能。トップページのレイアウト変更と記事下の関連リンク刷新を、同じスニペットに混ぜない。
2. 影響範囲を DOM セレクタで明示する。document.querySelectorAll('.is-style-pickup') のように、変更が及ぶ要素を限定する。
3. 「対象要素が無いケース」を最初に書く。if (!el) return; のような早期リターンで、別ページに展開されたときの副作用を防ぐ。
4. SWELL 側のショートコードや独自ブロックを上書きしない。アップデートで挙動が変わったときに最初に壊れる箇所になる。

Claude Code には、こうした制約条件を「やってはいけないこと」として最初に渡しておくと、提案そのものが安全側に寄っていきます。「動くコード」ではなく「サイト運用にとって扱いやすいコード」を出してもらうための、ちょっとした下準備です。

3. 公開前に「人間が必ず確認する」3 つのチェック

記事や機能改修の最終確認は、AI に委ねず人間が引き受ける——これは SWELL × Claude Code の運用で最も重要な原則です。読者に届ける前の関門として、FinLabo では次の 3 点をチェックリスト化しています。

(1) 専門知識の正確性

税制、金融商品、社会保険、法律。これらの情報は、AI の出力をそのまま信頼することはできません。一次情報（国税庁・金融庁・各種公式サイト）を必ず人間が当たり、出典を文中で明示します。AI が「もっともらしく」書いた数字や用語こそ、最後に人間が照合します。

(2) 表示崩れと挙動

テーマカスタマイズや JS パッチは、PC・スマホ・タブレットの実機で目視確認します。Lighthouse などの自動ツールだけでなく、実際にスクロールして「読者が読むときに違和感がないか」を確かめます。特に SWELL は装飾系のクラスが豊富なので、不要な余白や重なりが残っていないかを必ずチェックします。

(3) サイトの一貫性

新しい記事や新しい機能が、サイト全体のトーンと整合しているか。CTA の置き方、画像の選び方、見出しの粒度、内部リンクの導線。これらを「サイト全体の編集者目線」で見直すのが、Claude Code には任せきれない領域です。

逆に言えば、ここに人間の編集眼が入っているからこそ、AI で生成した部分も含めて「メディアとしての一貫性」が保たれます。AI を相棒にすると言うとき、人間が手放してはいけない役割は、まさにこのレイヤーにあります。

4. Claude Code を「相棒」にするための 3 つの判断軸

ここまでの話を、より普遍的な判断軸にまとめると、SWELL × Claude Code の運用では次の 3 つの問いを常に持っておくことになります。

判断軸	問い
戦略	このサイトは誰のためのもので、どんなトーンを保ちたいか
設計	今回の変更は、サイト全体の構造にどう影響するか
検証	公開前に、人間がどの観点でチェックするか

戦略は人間が決め、設計は人間と AI で行き来し、検証は人間が締める。この役割分担を最初に握っておくと、Claude Code は「タイピングが速い同僚」ではなく、「サイトの方向性を理解して動いてくれる相棒」に近づきます。

まとめ

SWELL と Claude Code を組み合わせたメディア型サイトの運用は、AI に丸投げするか／全部自分でやるかの二択ではありません。設計の前提を人間が言語化し、カスタマイズは安全な単位で作り、公開前のチェックは必ず人間が締める——この基本ラインを押さえると、AI を「相棒」として落ち着いて活用できるようになります。サイトの軸を持つ運営者ほど、AI 時代の運用は楽しく、深くなっていきます。