【実録】Claude Design でデザイン強化したら3箇所崩れた日 — AIが会議で原因特定→自動修正までやった話【所要30分】

非エンジニアAIラボ第7記事アイキャッチ。Editorial風デザイン、キャラクター入り。 Claude Code
2026.04.27

※本記事はアフィリエイト広告(PR)を含みます。

はじめに

このブログのデザイン、私はCSSを1行も書いていません。

書いたのは「Claude Code が、Claude Design に依頼したCSSを、WordPress の追加CSS に自動で貼り付ける」という運用です。記事一覧カードの左ターコイズ縦帯も、ターコイズ枠のプロフィールカードも、ラボノート風のサイドバーも、アイキャッチの薄影も、全部この運用で入れました。

ところが — 全部適用し終えたあと、サイトを巡回していたら、3箇所がレイアウト崩れしていました。

この記事は、その「崩れた話」と「AIたちが集まって会議をして、30分で直した話」の実録です。

TL;DR(忙しい人向けまとめ)

項目内容
対象プロフィールページ・サイドバー検索ウィジェット
崩れたバグ数3箇所(本質的には2つの原因)
修正にかかった時間約30分(原因特定+会議+CSS書き直し+反映)
私が書いたCSS0行
私がやった作業スクショ3枚を撮って Claude Code に渡しただけ
修正方法4視点会議(技術担当・顧客・アフィリ・リーダー)で原因特定 → リーダー裁定 → 自動適用

※デザインに使ったCSSは、Anthropic製の Claude Design(claude.ai/design)で作成し、WordPress の「外観 → カスタマイズ → 追加CSS」に貼っています。テーマファイル(子テーマの style.css 等)は触っていません。

第1章:何をやっていたか — サイト全体のデザイン強化中だった

その日、私は Claude Code に「残ってるデザイン領域(記事一覧カード・プロフィールページ・サイドバー・アイキャッチ)を Claude Design で作ってカッコよくしてほしい」と頼んでいました。

順番は決めていました:A(記事カード) → C(プロフィール) → D(サイドバー) → E(アイキャッチ)。

各領域ごとに、Claude Code が:

1. 4視点会議(アフィリエイター・技術担当・顧客・リーダー)を回して指示文を作る 2. Claude Design に送る 3. 出てきたCSSを取り出す 4. WordPress の追加CSSに追記する 5. 公開ページで確認する

このループを、私は「OK」「進めて」と言うだけで4回繰り返しました。各領域20〜30分、合計2時間ほどで、サイト全体がブランド統一感のある「ラボノート」トーンになりました。

そう、思っていました。

第2章:バグ発見 — サイトを巡回していたら3箇所おかしい

全部反映が終わってから、念のため自分の目で確認するため、ブラウザで自サイトを巡回しました。記事一覧、個別記事、プロフィール、固定ページ。

違和感1:サイドバーの検索が、なんかおかしい

サイドバーの検索ウィジェット — ラベルが左、入力欄が右にずれている
サイドバーの検索ウィジェット — ラベルが左、入力欄が右にずれている

「検索」というラベルが左端に貼り付き、入力欄が右にズレ、検索ボタンが端っこに。普通に「検索ボックス」って入力欄+ボタンが横並びになっているものだと思うのに、ラベルまで巻き込まれて3要素が無理やり並んでいます。

違和感2:プロフィールページの段落が、ボコボコしている

プロフィールページ「はじめまして」セクション — 段落が小さなカードになってしまっている
プロフィールページ「はじめまして」セクション — 段落が小さなカードになってしまっている

「はじめまして」の本文段落が、なぜかターコイズ枠付きの小さなカードになっていました。本来この見た目になるべきは、アバター画像直下の @nonenlab | 福岡在住・非エンジニア会社員 の1つだけのはず。

プロフィールページ「このブログ」セクション — もっとボコボコ
プロフィールページ「このブログ」セクション — もっとボコボコ

下にスクロールすると、もっと酷いことに。「このブログ」「切り口」「スタンス」セクション内の段落が、軒並みカード化されていました。読みにくいというレベルじゃない。

非エンジニア読者が見たら「この人、ちゃんと作れてないな」と思って離脱されそうです。

第3章:Claude Code に「直して」と投げた

普段なら、ここでパニックになります。「自分が触ったわけでもないCSSが、なぜか壊れている。どこを見ればいい?」

でも、私のフローはもう違いました。スクショ3枚を images/ フォルダに置いて、Claude Code にこう言いました。

「3つのスクショを image フォルダに入れました。すべて、文字の位置がおかしいです。皆さんで会議して位置の修正をしてください」

「皆さん」は、Claude Code 内部の 4視点パネル(技術・顧客・アフィリ・リーダー) を指します。第5記事から運用している、公開直前レビューと同じメンバーです。

第4章:AIが内部で会議した30分

技術担当の診断

※ここから少しCSSの専門的な話になります。詳細を読み飛ばしても、本記事の流れは分かるようになっています。

技術担当は、すぐに2つの原因を特定しました。

原因1:プロフィールページのCSSセレクタが「広すぎた」

プロフィールページに当てた、たった1行のCSSルール(の冒頭セレクタ)がこうなっていました。

body.page .entry-content p:has(> strong:only-child) のとき、カード化する

意図は「段落の中に 強調 だけが入っているなら、その段落だけカード化」。

ところが、CSSの :only-child は「要素 (element) としての only-child」しか見ません。つまり、段落が「普通のテキスト+強調+普通のテキスト」のような並びでも、強調が他の要素を持たなければ「only-child」とみなされてマッチしてしまう。結果、強調が1つでも入っている段落が全部カード化していたわけです。

原因2:検索ウィジェットの form に display: flex を当てていた

WordPress の検索ブロックは2層構造です。外側にフォーム、内側にラベルと入力欄ラッパー。私のCSSは外側のフォームを横並びにしていたので、ラベル と 内側ラッパー が横並びになり、結果ラベルが左を占有して入力欄が右にズレていました。

顧客視点の声

「読者として、これを見たらどう感じるか?」と聞かれた30代非エンジニア・読者ペルソナは、こう答えました。

「うわ、なんか文字がボコボコしてて読みにくいな」って思いました。ターコイズの枠が何個も並んでて、目がチカチカします。「この人ちゃんとしたブログ書けてるのかな」って一瞬不安になって、たぶん他のサイト見に行きます。

胸が痛い。すごく胸が痛い。

アフィリエイター視点

「バグの修正が、記事内のアフィリバナーへの導線に悪影響を与えないか」を確認。今回はサイドバーとプロフィール限定で、本文中バナーの位置・存在感には触れないと判断しました。

リーダーの裁定

最終的に、運営リーダー視点が:

  • バグ1:セレクタを変える。アバター画像直後の隣接段落だけを狙い撃ちするセレクタに変更する案を採用。
  • バグ2:form の横並び設定を外す。代わりに 内側ラッパー を横並びに。ラベルは画面上は非表示、スクリーンリーダー向けには残す。
  • 緊急度:本日中に修正(プロフィールはトップ動線、検索はサイドバー全ページ常設で影響大)。

裁定が出たので、Claude Code はそのまま実行に移りました。

自動適用 → 即反映

Claude Code が WordPress カスタマイザーを開き、追加CSSのうち該当する数行を書き換え、保存ボタンを押し、公開しました。私が承認ボタンを押した記憶もないくらいの速度で。

数分後にプロフィールページを開いたら、カード化されている段落は @nonenlab | 福岡在住・非エンジニア会社員 の1つだけに絞れていました。

サイドバーの検索も、入力欄+ボタンの1行になりました。

第5章:この経験で考えたこと(本音セクション)

CSSは難しい、AIなら間違えないわけじゃない

「Claude Design でデザインを作ってもらう」=「AIが間違えない」ではありません。AIも普通に間違えます。今回の :only-child のクセは、ベテランのCSSエンジニアでもうっかりするやつです。

でも、間違えても直せる

重要だったのは、間違いに気づくスピードと、直すフローです。

私はCSSを読めません。でも、スクショを撮って「位置がおかしい」と日本語で伝えれば、Claude Code 内部の4視点が:

  • 技術担当が正確に原因を特定
  • 顧客視点が「離脱します」とフィードバック
  • アフィリエイター視点が「収益動線への影響は小さい」と確認
  • リーダーが「今日中に直せ」と裁定

を30分で回してくれました。私の判断は「会議してくれ」の一言だけ。

AIに任せた仕組みは、ロールバックも早い

「合わなかったらCSSを丸ごと削除すれば、瞬時に元のCocoonの表示に戻る」という安心感も大きかった。私が書いていないCSSだから、捨てる時の心理的負担も少ない。これは、自分でゴリゴリ書いたコードでは持てない感覚です。

学び:CSSを書けない私が押さえた2つのクセ

※下の表もCSSの専門的な話なので、読み飛ばしてOKです。「こういうクセがあるんだな」という雰囲気だけ感じてもらえればここの目的は果たせます。

クセ中身対策
:only-child セレクタテキストノードを兄弟と数えないので、思ったより広く match する位置で絞る隣接セレクタが安全
検索ブロックのフォームを横並び化WordPressの検索ブロックは2層構造、外側フォームを flex すると label が巻き込まれる内側ラッパーを flex 化、ラベルは画面非表示

私はCSSを書けないので、これらは「言葉として覚える」しかありません。でも、こういうクセがあるんだという感覚だけ持っておけば、次に似た現象が起きた時、AIに「あれと似たやつかも」と聞けます。

📚 関連書籍で深掘りしたい方へ
CSS のクセや設計の考え方を理解する助けになる入門書が多数あります。
Amazonで中身とレビューを見る ▶
楽天市場でポイント還元を見る ▶
※Amazonアソシエイト・楽天アフィリエイト・PR

つまずきポイント・備忘録

雑多に置いておきます。

スクショは早めに撮る

レイアウト崩れに気づいた時、スクショを撮らず「直して」と言うより、スクショを置いて「これ直して」と言う方が10倍速い。AIは画面を直接見ているわけではないので、「自分の目で見えているもの」を画像として渡すのが最短です。

「自動で全部やる」より「会議して裁定する」が好み

Claude Code に「会議してから裁定」と言わなくても、勝手に直してくれることも多い。でも、会議の中身を見せてもらう運用は、自分の判断軸が育つので、しばらくこれで進めようと思っています。

Claude Design は「3案並べる」が癖

Claude Design は依頼すると基本3案を並べて出してきます。今回みたいに「単一案で」と明示しないと、毎回比較画面になり、選ぶ作業がそれなりに発生する。プロフィールやサイドバーのような単発デザインでは「単一案で」と書く方が早いです。

CSSコメントに を書くと、WordPress に拒否される

別件で気づきましたが、WordPress の追加CSSバリデータは、CSSコメント内に < > を含むHTMLタグ表記を「マークアップ」として拒否します。何度か "illegal_markup" エラーが出ました。AIにCSSを書かせる時は「コメントに のようなHTMLタグを書かないで」と一言入れる癖をつけると安全。

4視点パネルは「公開前」だけじゃなく「事故対応」にも効く

第5記事で確立した「公開直前の4視点レビュー」を、今回事故が起きてからのトリアージにも転用しました。同じメンバー、同じ役割分担、違うのはレビュー対象が「これから公開する記事」じゃなくて「いま壊れてるサイト」というだけ。運用フレームは流用が利く、というのは想定外の収穫でした。

終わりに

「AIに作業を渡しても、ミスを直すのもAI内のエージェント会議で完結した1日」というのが、今日の見出しでした。

非エンジニアの私から見ると、「自分のサイトが壊れた」「自分は何もしなかった」「直った」という3点セットが、とても新鮮でした。これまでの「自分でやる」ブログ運営とは、運営の心理コストが根本的に違います。

このブログは X サーバーのスタンダードプラン+クイックスタートで運用しています。サーバー側の管理画面を一切触らずに、Claude Code が WordPress 内でデザインを書き換えたり修正したりする運用は、X サーバー上の WordPress 標準機能(REST API)があるから動いています。サーバー選びの判断軸は1記事目で書きました。

次の記事(第8記事)について

第7記事までで「立ち上げ → 執筆フロー → 収益化 → 計測 → デザイン整備 → AI自走による事故対応」が一巡しました。

第8記事候補は:もしもアフィリ・Amazonアソシエイト登録 / Contact Form 7 + reCAPTCHA / 第6記事(GA4)で見えた最初の数字を読む、のどれか。次回までに決めます。

つまずきも、葛藤も、判断の根拠も、引き続き全部記録していきます。同じ立場で何かを始めようとしている方の役に少しでも立てば。

続編記事

タイトルとURLをコピーしました