Claude Codeのデザインがダサい？57歳が980円の「金継ぎ」でブログを測ったら散らかり度67だった

Claude Codeで作った画面が「なんかダサい」と思っていませんか？でも、どこがダサいのかは言えない。

ぼくもそうでした。

ぼくは57歳の会社員で、コードは書けません。

それでも2026年6月からClaude Codeを使っていて、このブログの見た目もClaude Codeで作り直しました。

自分では「まあまあ」のつもりでした。

先に答えを書きます。

• ダサさは、センスではなく数で分かります。測ると「なんかダサい」が「この3件」に変わります
• ぼくのブログは、散らかり度67でした（合格は30未満）。読めない薄い文字が14件ありました
• 980円のClaude Codeスキル「金継ぎ」で、本番を壊さずに直して、67→16になりました

この記事では、10月に3回やった診断と修理を、本物の画面と数字で書きます。

都合の悪い数字もそのまま出します（2026年11月5日に確かめました）。

結論：Claude Codeのデザインがダサいのは、センスではなく測っていないから

Claude Codeで作った画面がダサいとき、足りないのはセンスではなく「どこがダサいか」を数える道具です。

これがぼくの答えです。

理由は、ぼく自身がそうだったからです。自分のブログを見て「なんか素人っぽい」とは思っていました。

でも、どこが悪いのかは言えません。AIに「もっときれいにして」と頼むと、色が増えて、前より散らかります。

「金継ぎ」で測ったら、答えは数で出ました。文字の大きさが1ページに21段階。

白に見える色が13色。薄くて読めない文字が14か所。

「なんかダサい」の正体は、ばらつきの数でした。

ただし、これはぼくの意見です。金継ぎを入れたからといって、自動できれいになるわけではありません。

機械が測って、AIが直して、最後に自分の目で見てOKを出す。その3つがそろって、はじめて見た目が変わりました。

数えれば、直す順番が決まります。これが、この記事でいちばん言いたいことです。

ぼく

ブログサイトの見た目をチェック。金継ぎのスキルでチェックして

ぼくのブログは「散らかり度67」だった、10月3日の最初の診断

最初の診断は2026年10月3日の夜でした。結果は散らかり度67。合格は30未満なので、2倍以上の散らかりです。

散らかり度は、金継ぎの採点で、デザインのばらつきを0〜100で表します。低いほどそろっています。

教材のページには、2026年8月の実測で、デジタル庁のサイトが4点、Appleが20点台と書いてあります。

ぼくのブログは、同じものさしで67でした。

40ページを巡回して、合格は0ページ

診断は、トップページだけではありませんでした。金継ぎはサイトの中を巡回して、40ページを測りました。

結果は、合格圏（散らかり度30未満）が0ページ。真ん中の値が53で、いちばん悪いページは82でした。

82は、暗号資産の話を書いていた昔の記事です。

トップページは67、株の記事は71。どのページも、同じように散らかっていました。

原因はページごとの中身ではなく、サイト全体で使っている文字の大きさと色でした。

読めない薄い文字が14件、10.8pxのボタンが全ページに

数字の中で、いちばんまずかったのは「読めない」でした。

• 薄くて読めない文字：株の記事に14件（投稿日・目次の開け閉め・カテゴリーの札・シェアのボタンなど）
• 小さすぎる文字：サイドバーのSNSボタンの名前が10.8px。これが40ページ全部に出ていました

読めない文字は、デザインの好みの話ではありません。読む人がそこで止まります。

ぼくは毎日自分のブログを見ていたのに、気づいていませんでした。自分の目は、自分のサイトに慣れすぎて当てになりません。

内訳も出ました。

トップページの散らかりの素点118のうち、文字の大きさの段数が多すぎる分が84点、似ているのに違う色が30点。

直すなら、まず文字の大きさ、次に色。順番が数字で決まりました。

数字に出ないダサさ：「10月1日に公開」の約束が過ぎたまま

金継ぎには、数字のほかに「見立て」があります。12の問いで、数字に出ないダサさと「売れる形になっているか」を見ます。

ぼくのブログには4つの指摘が出ました。

1. トップの一番目立つ所に「最初の運用報告は10月1日に出します」と書いたまま、10月3日になっていた
2. 新着の一覧が、新しい記事と昔の記事で別のブログに見える
3. プロフィールの背景が、テーマに最初から入っている海の写真のまま
4. トップは明朝の見出しなのに、記事のページだけゴシック

1つ目は、いちばんこたえました。このブログの看板は「検証記録」です。

守れていない日付が、いちばん目立つ場所にあった。これは機械の数字には出ません。

見立てがなければ、ぼくは気づかないままでした。

この日は診断だけで、本番は1行も変えていません。

写しの上で直す試し（修理デモ）までやって、トップは67→20、株の記事は71→12になると分かった所で止めました。

ぼく

サイトは概ねOK

金継ぎがやるのは3つ、測る・直す・残す

ここで、金継ぎが何をする道具かを書きます。教材のページに書いてあることと、ぼくが使って見たことだけです。

金継ぎは、AIで作ったWebの画面のダサさを数字で突き止め、壊さずに直し、直った証拠と自分専用のデザインルールを残す、Claude Codeのスキルです。

やることは3つです。

• 測る：検査器が、色・文字・余白のばらつきと「AIが作ったっぽさ」を採点する。PC・タブレット・スマホの3つの幅で測る
• 直す：修理はサイトの写しに行う。本番は、自分が前後を見比べてOKを出すまで触らない。直すのは一度に3件まで
• 残す：修理で決めた色・文字・余白の値を、自分専用のデザインルールとして書き出す。次からAIがそれを読んで作る

最初に頼む言葉は、教材のページに書いてあるとおりで、1文です。

このUIを変更せず、まず金継ぎ診断だけして

これをClaude Codeに打つだけで、診断が始まります。ぼくはコードを書いていません。

診断だけなら10分ほど。診断書と、修理の前後を重ねて見比べるレポート（証書）が自動で残ります。

名前の由来も、教材のページに書いてあります。割れた器を金で継いで、直した跡をいちばん強い模様に変える工芸が、金継ぎです。

本番を壊さずに直す、写しで試してOKのあとに入れた（10月4〜5日）

2回目の診断は、翌日の10月4日の夜でした。

この日のうちに、ぼくは「全部直す」と決めて、日付が変わるころに本番へ入れました。

本番を壊さずに済んだのは、修理が「写し」の上で行われるからです。金継ぎは、公開中のページの写しを取って、そこに修理を当てて、前後の数字を出します。

ぼくが見るのは、その前後です。納得したら、本番に入れる。

この順番が決まっているので、AIに画面をいじらせる怖さがありませんでした。

修理デモ：トップ67→16、運用報告74→16（写しの数字）

10月4日の診断は、トップページと、公開したばかりの9月の運用報告の記事です。トップは67のまま、運用報告は74でした。

運用報告には読めない文字が17件ありました。

写しに修理を当てた結果が、こうです。

見比べて分かったのは、文章も写真も1つも変わっていないことでした。

変わったのは、文字の大きさの段数（20段→5段）と、白や灰の色の数だけ。それで見た目の印象が変わりました。

この日の見立てには、恥ずかしいものがありました。

トップの一番大きいボタン「最新の記録を読む」の行き先が、ページのどこにも無かったのです。

押しても動かないボタンが、入口にありました。

もう1つ、運用報告に載せた証券口座の明細の画像で、4行が二重に写っていました。

信用の証拠のつもりで載せた画像が、確かめる読者ほど引っかかる形になっていました。

本番に入れたもの：追加CSS・見出しのタグ・ボタンの行き先

本番に入れたのは、大きく3つです。

1. 追加CSS：WordPressの「追加CSS」の末尾に、金継ぎが作った修理のCSSを貼った。9,942字が16,991字に。末尾に「ここから下を消せば元に戻る」の印を付けた
2. 見出しのタグ：トップの見出し9か所が、見た目は見出しなのにタグは段落（p）だった。h2〜h4に直した。文言は変えていない
3. ボタンの行き先：「最新の記録を読む」を、記事の一覧の直前へ飛ぶようにした。明細の画像は切り直した

CSS（見た目を決める設定の文字）を貼るのも、見出しのタグを直すのも、Claude Codeがやりました。

ぼくがやったのは、前後を見比べて「OK」と言うことです。

貼る前の設定は控えてあるので、いつでも戻せます。ここは、本番をいじるときにいちばん大事にしているところです。

本番で測り直した数字（悪化0）

本番に入れたあと、同じものさしで測り直しました。PC・タブレット・スマホの3幅です。

どのページも悪化した項目は0でした。サイト全体のCSSを直したので、測っていないページにも効きます。

昔の暗号資産の記事は85→63で、合格には届いていません。あれは記事そのものの装飾が原因で、CSSでは直りません。

全部が合格になったわけではない。そこは正直に書いておきます。

ぼく

全部修正したい

3回目はスマホ、記事2本を38→22にした（10月14〜15日）

3回目は10月14日。

この日は、公開ずみの記事2本（現引きの記事と、Geminiで株を分析した記事）を、スマホの幅まで入れて測りました。

ぼくの頼み方は、こうです。

ぼく

金継ぎをやる。スマホでも見た目確認。色合いもチェック。全ての観点から。アイキャッチ画像の出来も判断。画像もチェック

パソコンは合格、スマホで散らかる

結果は、PCでは24と26で合格圏。10月5日の修理がそのまま効いていました。

読めない文字・小さすぎる文字・はみ出しは0件。

ところがスマホでは38と39でした。

原因は、関連記事の題の文字の大きさの端数（14.5px・16.1px・15.2px）と、本文の墨色とほとんど同じなのに違う黒（#333333・#464646）。

PCでは見えない散らかりが、スマホにだけ残っていました。

修理のあと、本番で測り直したら、2本ともPC14・タブレット22・スマホ22でした。

PCで見て満足していたら、スマホの読者には散らかったままでした。ぼくのブログは、読む人の多くがスマホです。

機械が見つけた不具合：かっこの途中で段落が割れていた

この回で、思いがけない不具合が見つかりました。

本文の段落が「（」の途中で切れて、次の段落が「）」で始まっている所が、現引きの記事に3か所。

原因は、長い段落を句点で分ける道具を、ぼくがClaude Codeで作ったときに、かっこの中の「。」

でも切る作りにしていたことでした。調べると、ほかの4本の記事にも同じ割れがありました。

自分で作った道具の不具合は、自分では見つけられません。機械が測って、はじめて分かりました。

画像の中の文字は測れない、目で見る宿題

一方で、金継ぎにできないこともはっきりしました。

画像の中の文字は測れません。教材のページにも「写真やグラデーションに重なった文字は未計測と正直に出す」と書いてあります。

ぼくの記事では、ここが本当の問題でした。

証券口座の画面を横1336×縦122pxの細長い画像で載せていて、スマホでは数字が3〜4px相当。

自作の図も、中の文字が6〜7px相当。記事の証拠が、スマホでは読めない大きさでした。

これは見立てで指摘されました。機械の数字には出ないので、目で見る宿題です。

結局、図28枚を描き直して、図の中の一番小さい文字を大きくしました。

使ってみて分かった、良い所と注意（都合の悪いことも）

3回使って、良かった所と、注意がいる所を書きます。

自動の直し案をそのまま使わなかった、サイトの色の設計が消える

金継ぎには、自動で修理案を下書きする道具が入っています。ぼくは、これをそのままは使いませんでした。

10月14日の自動案は、スマホの38を22にする代わりに、このブログの深緑（ロゴ・表の見出し・入部の箱の色）を本文の墨色に寄せ、見出しの生成りの帯を白に寄せる中身でした。

数字は下がるけれど、色の設計が消えます。10月4日の自動案も、フッターの色で新しい違反を出して止まりました。

だから最終的な修理は、自動案を参考にしつつ、手で（Claude Codeと相談しながら）作りました。

点数を下げる直し方と、良くする直し方は、同じとは限りません。教材のページにも「最後の判は人が押す」と書いてあります。

ここは本当にそうでした。

図は作り直しになった（スマホで読めない）

上に書いたとおり、図の中の文字は測れません。金継ぎが直してくれるのは、CSSで直る範囲です。

画像は自分で作り直すしかありませんでした。28枚です。

時間はかかりましたが、スマホで読める図になりました。

ぼく

図は見本Aで全て変更します。全部直します

もう1つ。似ているのに違う色の指摘のうち、いくつかはわざと残しました。

生成りの地と生成りの白、本文の墨と見出しの深緑。役割のある色です。

潰すと設計が消えるので、理由を書いて残しました。合格の数字より、サイトらしさを優先した所があります。

1回にかかる時間と、必要なもの

ぼくの記録では、診断から本番に入れるまで、1回につき夜の数時間でした。10月3日は診断と修理デモまで。

10月4日は夜に診断して、日付が変わるころ本番へ。10月14日は夕方に始めて、翌朝までに図の描き直しまで終えました。

必要なものは、教材のページに書いてあるとおり、Claude Codeと、Node.js・Playwright（どちらも無料）です。

金継ぎ側の追加費用はありません。Claude Codeそのものは有料のプランが要ります。

ぼくの始め方はClaude Codeの始め方、非エンジニアの57歳が980円の教科書で学び直したに書きました。

AIっぽいデザインも測れる、金継ぎは「直す」デザインスキル

Claude Codeのデザインのスキルは、無料でも良いものがあります。

Anthropic公式のデザインの指針もあるし、金継ぎの作者のイケハヤさんも「Pro UI Director」というスキルを無料で配っています。

違いは、効く場面です。教材のページの説明を、ぼくの言葉で書くとこうです。

• 作るスキル：これから作る画面に効く。AIの手に美意識を足して、最初からマシなものを作らせる
• 金継ぎ：もう作って公開してしまったページを、測って、壊さず直す。中身は読み物ではなく、検査のプログラム

ぼくのブログは、作るスキルで作った画面ではなく、WordPressのテーマの上にClaude Codeで部品を足していったものです。

だから「これから作る」の指針では直りません。すでにあるものを測る道具が要りました。

「AIっぽいデザイン」の話も同じです。紫のグラデーション、角丸のカードと影、3つ並びの特徴。

そういう型が残っているかも、金継ぎは「定番度」として数えます。ぼくのブログの定番度は0〜8でした。

AIっぽさよりも、文字と色の散らかりが問題だった。これも、測るまで分かりませんでした。

金継ぎを売っている「Brain」とは？3分で登録できる教材のお店

Brain（ブレイン）は、個人が書いた教材を、1本ずつ買えるサイトです。運営は株式会社ブレイン。

AI、SNS、ブログ、副業などの教材が並んでいます。「金継ぎ」も、このBrainで売っています。

本屋さんやAmazonにはありません。

Brainで買う流れ（3分）

初めての人は、会員登録が要ります。流れは公式の使い方ガイドのとおりです。

1. 教材のページを開き、画面の右上の「新規登録」から登録する
2. 届いたメールで本登録をすませる
3. クレジットカードを登録する
4. 教材の「購入」を押す

公式の案内では、登録は3分前後。

支払いはクレジットカード（VISA・Master・JCB・AMEX・Diners）だけで、分割はできません。

買った教材は、メニューの「購入した記事」からいつでも読めます。

金継ぎの場合は、買ったあとに有料エリアの手順でスキルの一式を受け取り、Claude Codeに入れます。

入れ方はAIに聞けば教えてくれる形になっていて、ぼくもそうしました。

紹介の報酬は、正直に書きます

Brainには「紹介」のしくみがあります。このページのボタンから買ってもらうと、値段の50%がぼくに入ります。

金継ぎなら490円です。

ぼくはBrainで17本買いましたが、ブログで紹介すると決めたのは、使い込んだ6本だけです。金継ぎは、その1本です。

このブログで3回使って、本番に2回入れた。その記録が、上に書いた全部です。

ぼく

使い込んでいる

「金継ぎ」はどんな教材か、向かない人

教材の事実を、公開ページから書きます（2026年11月5日に確かめました）。

• 名前：AIで作ったウェブサイトのデザインを改善するスキル「金継ぎ」
• 作者：イケハヤさん
• 値段：980円
• 評価：5.0（6件）
• 公開：2026年8月27日。ぼくは発売の日に買いました
• 入っているもの：スキル本体・検査器ひとそろい・前後比較のレポートを作る道具・マーケ診断・処方箋と地雷図鑑・練習用のサイト

できないことも、教材のページに先に書いてあります。ぼくが実際に引っかかったのは2つ目です。

• アクセシビリティの適合判定はしない（読めない文字は検出するが、簡易の検査）
• 画像の上の文字は測れない
• 英語など外国語が主体のサイト、動画が主役のサイトは対象外
• スマホアプリの画面は基本的に対象外

向かない人も、はっきり書いてあります。

• これからサイトを作る人（金継ぎは、もう公開しているページを直す道具）
• デザイナーに直接頼める予算と時間がある人
• Claude Codeを使っていない人

Claude Codeを使っていない人は、金継ぎの前にClaude Codeです。無料では使えないので、そこは先に知っておきましょう。

よくある質問

WordPressのブログでも使える？

使えました。ぼくのブログはWordPressにSANGOというテーマを入れたものです。

教材のページにも、自作のLP・Webアプリの管理画面・WordPressのテーマに使えると書いてあります。

修理の中身は「追加CSS」に貼るCSSと、本文のタグの直しでした。

デザインの知識がなくても使える？

ぼくは知識がありません。測るのは検査器、直すのはClaude Code、前後を見比べてOKを出すのがぼく。

知識が要るのは最後の「OK」だけで、それは「読みやすくなったか」「自分のサイトらしさが消えていないか」を自分の目で見ることでした。

何が必要？

Claude Codeと、Node.js・Playwright（無料）です。Claude Codeは有料のプランが要ります。

金継ぎ側の追加費用や、外部サービスの契約はありません。

無料のデザインスキルを入れていれば、要らない？

役割が別です。無料のデザインスキルの多くは「これから作る画面」のガイド。

金継ぎは「公開ずみのページ」を測って直す検査器と手順です。

ぼくのブログは公開ずみだったので、作るスキルでは直りませんでした。

Claude Codeのおすすめのスキルは？

ぼくが毎日使っているのは、自分で作った仕事用のスキル（点検報告書・銘板の読み取り）と、買ったスキルでは金継ぎ、X運用の「シン・X攻略の教科書」、マーケティングの「軍配」です。

おすすめは、自分の困りごとに直結するものを1つだけ入れること。ぼくの場合、ブログの見た目の困りごとには金継ぎでした。

自分で直せる？

金継ぎが出す「最優先3件」には、どの行が悪いかまで書いてあります。CSSが分かる人なら自分で直せると思います。

ぼくは分からないので、Claude Codeに直してもらい、前後を見てOKを出しました。

「なんかダサい」を今夜、数字にしよう

ふり返ります。

• Claude Codeのデザインがダサいのは、センスではなく、測っていないから
• ぼくのブログは散らかり度67、読めない文字14件、合格0ページ。本番を壊さずに直して16
• 金継ぎは、測る・直す・残すの3つ。980円。画像の中の文字は測れない

「もっとおしゃれにして」とAIに頼む前に、1回測ってみる。ぼくが10月にやったのは、それだけです。

ぼくの意見ですが、自分のサイトを公開している人なら、最初の診断の数字を見るだけでも980円の元は取れます。

今夜、自分のサイトに、この1文を打ってみましょう。

このUIを変更せず、まず金継ぎ診断だけして