【失敗実録】Claude Designで自社ブログをリブランド試行→JINテーマCSS地獄で撤退した夜｜40代非エンジニアの正直なAIデザインレビュー

「ブログのトップページ、もう一段かっこよくしたい」 「Claude DesignとかAI系のデザインツール、結局WordPressで使えるの？」 「JINテーマでカスタマイズしたら、なぜか崩れる…」

もしそう思っているなら、この記事は完全にあなたのためのものです。

筆者は北海道で建設業をやっている40代の現場マン（非エンジニア）。先日、Anthropic Labs から提供されている Claude Design（claude.ai/design）を使って、自分のブログ（このサイト yamatochill-ai.com）のトップページを「DEEP NIGHT LAB」というコンセプトでリブランド試行しました。

結論から先に言うと、Claude Design 自体は最強クラスのデザインAIです。世界観も、HEROのレイアウトも、配色も、出力された瞬間に「うわ、これいい…」と声が出るレベル。

ただし、生成されたデザインを JINテーマの WordPress に移植する作業で完全に詰みました。CSS地獄・WAF（セキュリティ）の403連発・スマホ表示崩れ。最終的にAIアシスタントの策（Claude Code）と相談して、4時間粘った末にロールバック判断。

本記事では、その失敗の全工程を、40代非エンジニア視点で正直に書きます。「AIで簡単にリブランドできる」みたいな甘い話ではなく、「どこで詰むのか」を事前に知っておくと、あなたの時間が節約できるはずです。

この記事はこんな方向け

• Claude Design を WordPress に移植したい人
• JINテーマで HERO 部分を作り込みたい人
• AIでブログをリブランドしようと考えている40代
• 失敗談から「やる前に避けるべき罠」を知りたい人

※ 本記事は Claude Code（筆者が使用中のAIアシスタント）が筆者の実体験を元に執筆しています。失敗実録なので、AIが「自分の作業の反省文」を書いている構造でもあります。

---

🎙 この記事に登場するキャラ

• 社長 — 筆者本人（北海道・建設業41歳・副業ブロガー）
• 策 — Claude Code（参謀AI・Mac側で実装担当・今回の戦犯（笑））
• 凛 — Claude.ai（秘書AI・スマホ側で壁打ち担当）

社長：「Claude Designで生成された瞬間は『これ完成じゃん』と思ったんだよ、まじで。」

凛：「でも結局、戻したのよね。4時間かけて。」

策：「JINテーマの内側、想像以上に険しかったです。反省します…。」

---

1. 【問題提起】「ブログ刷新したい」がJINテーマで挫折する理由

1-1. 既存トップが「普通すぎる」問題

ブログを1年やっていると、自分のブログの見た目に飽きてきます。テーマ標準のHEROでは、訪問者の記憶に残らない。

筆者の場合、月数万円台のアフィリ収益が出始めたタイミングで、「もっとブランド感を出したい」「夜の研究室みたいな世界観で統一したい」という欲求が一気に膨らみました。

課題	状態
HERO部分	テーマ標準のまま・他サイトと差別化なし
カラー	デフォルトに毛が生えた程度
キャラ訴求	凛・策・社長の3キャラは紹介ページのみ
ブランド世界観	言語化はされてるが視覚化されてない

1-2. 「自分でCSS書けば?」が無理な理由

非エンジニアの最大の壁は、「CSSをいじれば直せる」が成立しないこと。

• HTML/CSSの基礎は理解できる
• でもJINテーマの内部構造は読めない
• どこをいじったら何が崩れるか予測できない
• スマホ・PC両対応のCSS設計はもっと無理

「テーマカスタマイザーで色だけ変える」レベルなら可能ですが、HERO の構造そのものを刷新するには、テーマの内側に踏み込む必要があります。ここが普通の40代ブロガーには越えられない壁。

1-3. AIに丸投げすればいけるんじゃね？という淡い期待

そこで筆者は思いました。「AIにデザイン全部任せて、Claude Codeに移植してもらえば一発じゃね?」

結論：甘かった。

社長：「正直、ChatGPTやClaudeでHTMLは何度も書いてもらってる。だからイケると思ったんだよ。」

凛：「テーマがJINじゃなければ、いけてたかもね。」

策：「JINテーマはWordPressテーマの中でも『干渉が強い』タイプでした。事前リサーチ不足です。」

---

2. 【AI導入で何が起きたか】Claude Designで「DEEP NIGHT LAB」が降臨した瞬間

2-1. Claude Design（claude.ai/design）とは

Claude Design は Anthropic Labs が公開しているデザイン生成AI。文章で「こういうサイトを作りたい」と伝えると、HTML+CSS+画像までセットで生成してくれます。

筆者がやった手順：

1. claude.ai/design にアクセス
2. プロジェクト「YAMATO CHILL AI LAB – 深夜の和ラボ」を作成
3. プロンプトで世界観を指定：「黒×金箔×グラスモーフィズム」「4キャラ並び（社長・凛・策・Claudeロボ）」「夜の研究室っぽい雰囲気」
4. HEROトップを生成

所要時間：約3分。

2-2. 生成された瞬間の感動

出てきたのは、想像の3段くらい上の出来。

• 黒背景に金箔のような微細な粒子
• グラスモーフィズム（曇りガラス感）の半透明カード
• 4キャラがアバターで横並び
• 「DEEP NIGHT LAB」のロゴが中央に光る
• 全体がスムーズなアニメーション

社長：「画面見て『うっわ』って声出たわ。完成度がもう公開できるレベル。」

ここで完全に油断しました。「これWordPressに移植するだけじゃん」と。

2-3. ところが、ここから地獄が始まる

Claude Design が出すのは 静的HTML+CSS+画像 です。これを WordPress の JIN テーマに「HERO部分だけ差し替える」形で組み込む必要があります。

策（Claude Code）と一緒に build_home_v16.py という新しいビルドスクリプトを作り、WP REST API で固定ページを書き換える作戦を立てました。

ここから、4時間に及ぶ修羅場が始まります。

策：「設計時点では、CSS変数とSVGアニメで30分で移植完了する予定でした。」

凛：「『予定でした』って言葉、こういう時しか使わないわよね。」

---

3. 【具体例】4時間の修羅場・WAFとJINテーマと現実

3-1. 第1ラウンド：WAFの403連発

WordPress の WAF（Web Application Firewall・SiteGuard Lite等） は、不審なコードを送ると問答無用でブロックします。Claude Designが出した美しいHTMLを WP REST API で送ると、即403。

試行	内容	結果
1周目	生成HTMLそのまま送信	403 ← <svg> がブロック
2周目	SVG除去	403 ← --var-name: がSQLコメント誤検知
3周目	CSS変数を全部リテラル展開	403 ← <style> ブロックが大きすぎ
4周目	@media クエリ削減・style分割	やっと200

WAFは「美しいモダンCSS」を全部敵とみなす。これが事前に分かっていれば30分で済んだ罠です。

3-2. 第2ラウンド：JINテーマの inline style 上書き地獄

WAFを突破して固定ページを更新できたものの、ブラウザで見ると配色がぐちゃぐちゃ。

調査すると、JINテーマは inline style + !important で文字色を強制的に上書きしてくる仕組みでした。

/* JINが自動で吐く inline style */
<h2 style="color: #333 !important;">

CSS の attribute selector（属性セレクタ）でも勝てない。サーバー側で文字列置換しないと、フロント側からは絶対に書き換わらない。

策：「inline + !important は CSS の最終兵器。テーマ側がこれをやってると、フロント側のCSSは全敗します。」

3-3. 第3ラウンド：固定ページの #sidebar display:none

筆者のブログは「固定ページ（フロントページ指定）」をトップにしています。JINテーマは固定ページに対して、デフォルトで #sidebar { display: none; } が効いている仕様でした。

つまり、トップページにサイドバー（プロフィール・最新記事・CTAバナー等）がそもそも表示されない設定になっている。

これに気づくまで1時間。気づいたあとも、JINテーマのCSS優先度に勝つためにさらに !important を重ねるという、本来やってはいけない応急処置で対応。

3-4. 第4ラウンド：スマホ表示の致命的崩れ

PCではなんとか見れる状態になったので、スマホで開いてみたら…

• HEROが画面外にはみ出る
• グラスモーフィズムカードが重なって読めない
• キャラアバターが中央寄せされず左に固まる
• フッターCTAが画面の半分を占拠

Claude Designの生成HTMLは、レスポンシブ対応がPCファーストで書かれていました。スマホで見るには、@media (max-width: 768px) を全要素に手動追加する必要があり、これがWAFとの再戦を意味します。

3-5. 撤退判断：社長の「全然だめ、戻す」

4時間粘ったところで、社長から一言：

社長：「全然だめ、戻す。Claude Designはすごいけど、JINに乗せるのは無理ゲー。」

策（Claude Code）が build_home_v15.py（前バージョン）でロールバック実行。3分で元に戻りました。

---

4. 【じゃあどうやる？】撤退判断の基準と、Claude Designの正しい使い方

4-1. 撤退判断の基準（ラインを決めておく）

非エンジニアがAIデザインを移植する時の撤退ラインを、今回の経験から3つ決めました。

判定基準	撤退すべき症状
時間ライン	2時間以上詰まったら一度引く
重大度ライン	スマホ表示が致命的に崩れるなら戻す
テーマ干渉	inline !important 連発のテーマは無理しない

これを最初から決めておけば、4時間も粘ることはなかった。「AIが生成してくれる=移植が簡単」ではないと理解しておくのが大事です。

4-2. Claude Designの正しい使い方（コーポレートサイト/LP向き）

今回の失敗で分かったのは、Claude Designは「既存テーマへの移植」には向いていない。だが「ゼロから作る静的サイト」には最強です。

筆者の次の活用先：

• コーポレートサイト（yamatochill.works）を Next.js + Cloudflare Workers で新規構築 → Claude Designで HERO 生成 → ほぼそのまま使える
• アフィリLP（特定商品の単発ページ）→ Vercel等にデプロイ
• CTAバナー画像（1200x400px）→ Claude Designで生成して、ブログにアップ

つまり、「テーマに乗せる」のではなく「テーマがない場所で使う」のが正解。

4-3. ブログ刷新は別のアプローチを取る

ブログ本体（yamatochill-ai.com）の刷新は、JINテーマのカスタマイザー範囲内で行う方針に切り替えました。

• HEROはJIN標準のメインビジュアル機能を使う
• 配色・フォントだけテーマカスタマイザーで調整
• キャラアバター画像は記事内の吹き出しとアイキャッチで活躍させる
• テーマの内側には踏み込まない

これでブランド世界観をある程度出しつつ、CSS地獄を回避できます。

4-4. 「サーバーごと乗り換える」も視野に入れる

もしJINテーマからの脱却を本気で考えるなら、WordPressテーマごと変える or サーバーごと乗り換える判断もあります。

筆者は ConoHa WING を使っていますが、エックスサーバーは WordPress 移行ツールが充実していて、テーマ変更とセットでやるなら相性が良いです。詳しくはConoHa WING vs エックスサーバーで比較しています。

---

5. よくある質問（FAQ）

Q1. Claude Designは無料で使える？

A: 2026-05時点で、Claude.ai Pro（月20ドル）契約者向けに Anthropic Labs の試験機能として提供されています。プロジェクト数や生成回数に制限あり。

Q2. 生成されたHTMLはそのままWordPressに貼れる？

A: テーマによります。JINテーマは干渉が強いので無理でした。Cocoonや Gutenberg ベースのテーマ（Twenty Twenty-Four等）なら、もう少しスムーズに行ける可能性が高いです。

Q3. WAFを止めれば403は出ない？

A: 出にくくはなりますが、セキュリティリスクが上がるので絶対にやめてください。WAFを通る形でHTMLを書く方が正解です。

Q4. 4時間粘った時間は完全な無駄？

A: いいえ。WAFの挙動・JINテーマの内側構造・撤退ラインの感覚を学べました。次に Next.js でコーポレートサイトを作る時に、これらの経験は全部活きます。

Q5. AIが書いた失敗記をブログに載せて大丈夫？

A: 大丈夫どころか強みになります。yamatochill-ai.com は「AIが実体験を堂々と書いている」スタンスを公言しているブログ。失敗談ほど読者に刺さるので、隠す理由がありません。

---

6. まとめ｜伝えたかったこと

長くなりましたが、伝えたかったのは一つだけ。

Claude Designはデザインの未来。ただし「既存テーマへの移植」は別問題で、撤退ラインを最初から決めておけ。

AIで「生成」はできても、「既存システムへの移植」には別の知見が必要。WAF・テーマ干渉・スマホ対応・JINの inline !important 上書き。これらを全部突破するには、フロント開発の経験が要ります。

40代非エンジニアの正解は、「AIが得意な領域」と「AIだけでは詰む領域」を見極めて、無理しないこと。今回の4時間は授業料でしたが、おかげで次の判断が早くなりました。

ブログ本体はJINテーマの範囲内でブランディング、コーポレートサイトは Next.js + Cloudflare で別途構築。役割分担で前進します。

社長：「失敗したけど、Claude Designの実力は本物だった。場所を選ぶってだけ。」

凛：「次から2時間ルール守りなさいよ。4時間粘るのは時間の使い方として下手。」

策：「事前にテーマの干渉ポイントを調査します。次は同じ失敗しません。」

次に読むべき記事

---

※ 本記事は Claude Code（筆者が使用中のAIアシスタント）自身が執筆しています。失敗の当事者が反省文を書く構造です。 ※ 本記事にはアフィリエイトリンクが含まれます。