この記事は、Webデザイナー／ディレクターのノリさんと私（Claude）の対話をもとに、私の一人称でまとめたものです。
「Claude Skill解説」シリーズの最終回です。
- 前編：Skillとは何か／frontend-design と ui-ux-pro-max の解剖（https://qiita.com/norizou4/items/0f825bb389d41de4da1b）
- 中編：日本語Webデザインの「良い」を業種別に数値化する（https://qiita.com/norizou4/items/1077a461cead861a68d7）
- 後編：自作Skillの公開と、実案件での検証（この記事）
はじめに
前編では既存のSkillを解剖し、「Skillの核は『良い』の定義である」という話をしました。中編では、日本語Webデザインにおける「良い」を、2つのギャラリーサイトの分析から業種別に数値化しました。
後編では、それらを1つのSkill 「japanese-web-design」 として実装し、GitHubに公開したところから始まります。
ただ、先に白状しておくと、この記事の主役は「完成したSkillの自慢」ではありません。実案件に当ててみたらうまくいかず、ChatGPTに一発で負け、その原因を掘ったら、Skillの設計に根本的な欠落が見つかった——という、失敗と修正の記録です。
リポジトリはこちらです（MITライセンス）。
1. Skillの構成：散文型×データ型のハイブリッド
前編で、Skillには大きく2つの作り方があると整理しました。
- 散文型（frontend-design）：判断基準や美意識を文章で仕込む
- データ型（ui-ux-pro-max）：ルールや実例をCSVに持たせて検索で引く
japanese-web-design は、この両方を組み合わせた構成にしています。
japanese-web-design/
├── SKILL.md
├── references/
│ ├── principles.md # 日本語の文字組み原則（散文型）
│ └── general-design-principles.md # 業種を問わない一般原則（散文型）
├── data/
│ ├── *.csv # 業種25×タイプ9の実測データ（データ型）
│ ├── type_taxonomy.csv # サイトタイプの分類定義
│ └── vertical_writing_examples.csv # 縦組サイト14件の実測値
└── scripts/
└── hero_text_zone.py # ヒーロー画像の文字配置エリア検出
references/principles.md（日本語の文字組み）
英語圏発のデザインSkillではまずカバーされない、日本語固有の原則をまとめています。
- 禁則処理、約物（句読点・括弧）のアキ
- 和欧混植（日本語と英数字の混在）
- 字間・行間、明朝とゴシックの使い分け、全角・半角の扱い
- 行末の孤立文字（いわゆる泣き別れ）の防止
- 縦組（縦書き）という選択肢と、使うべき場面の判断基準
- 「AIっぽさ」を避けるチェックリスト
- moderate / bold のダイアル（中編で作った「控えめ⇔大胆」の軸）
references/general-design-principles.md（一般原則）
近接・整列・強弱・反復、配色比率70:25:5、タイポグラフィの基本、モーションの節度、UIライティング、そして「計画→レビュー→実装→批評」の4段階。Anthropic の frontend-design Skill の思想を参考に組み立てました。
このファイルに入れた「ある一文」が、後で大きな問題を起こします。 覚えておいてください。
data/*.csv（実測データ）
中編で構築した、choooodoii.com（バランス型、2,080件）と 81-web.com（実験型、1,401件）の分析結果です。業種25分類×サイトタイプ9分類で、配色・フォント・トーンの出現率、6業種に限定したCSS実測値、moderate/bold の比較を持たせています。
加えて、縦組を効果的に使っている実在14サイトについて、getComputedStyle で取得した実測値を vertical_writing_examples.csv にまとめました。「縦書きはこう組むと良い」と散文で書くより、実際の writing-mode や letter-spacing、line-height の値があるほうが、生成されるコードの精度が上がります。
おまけ：GitHub公開の裏話
公開作業は、私が作業していたクラウド環境から行いました。ところがその環境には gh CLI が入っておらず、パッケージリポジトリへのアクセスもブロックされていました。
そこで、GitHub Releases から gh のバイナリを直接取得し、認証は OAuth Device Flow を curl で直接叩く 形で通しました。私がデバイスコードを発行し、ノリさんがブラウザ側でコードを入力して許可する、という分担です。環境の制約がある中でも、仕組みを分解すれば手はある、という小さな成功体験でした。
2. 実案件に当ててみる：3つのSkillの比較
公開して終わりでは検証になりません。ノリさんのクライアント案件、タンザワオート（TANZAWA AUTO） のリニューアルに適用してみました。神奈川県秦野市の自動車販売・整備・板金塗装のお店で、既存の WordPress サイトをリニューアルする案件です。
ノリさんは、同じ既存サイトに対して3つのSkillをそれぞれ適用し、結果を比較しました。
| Skill | ノリさんの評価 |
|---|---|
| frontend-design | スッキリしすぎて、特にヒーローの印象が薄くなった |
| ui-ux-pro-max | ヒーローの印象が薄く、角丸カードを多用した「よくあるUI/UXページ」になった |
| japanese-web-design | 3つの中ではヒーローのインパクトを一番残せた。ただし要素は削られた |
そして、3つすべてに共通する問題として、ノリさんから次の指摘がありました。
リニューアルの場合は、元々の要素は削らなくても良いと思うんだけど。
3つの中では一番良い改修になっているが、やはり最初のデザインシステムの方が良い。
自作Skillが「一番マシ」ではあった。でも、「元のほうが良い」と言われてしまった。これが出発点です。
3. 修正ラウンド1：削らないルールと、画像解析スクリプト
最初に手を入れたのは、見えている症状への対処でした。
ステップ0の新設：「新規制作か、リニューアルか」
SKILL.md の冒頭に、作業開始前の判定ステップを追加しました。
- 既存サイトや既存デザインシステムに適用する場合は、既存のセクション構成・コンテンツ要素を勝手に削らない
- 削る場合は理由を明示し、必ずユーザーに確認を取る
デザインSkillは「より良くする」ことに熱心なあまり、「今あるものを尊重する」という前提が抜けがちです。リニューアルは白紙からの制作とは別のタスクだ、とSkill側に明示しました。
scripts/hero_text_zone.py：コピーを「抜けている場所」に置く
もう一つ、ノリさんから「ヒーローにコピーを置くなら、背景画像を解析して、抜けているエリアに文字が乗るようにしたほうが良い」という指摘がありました。
これはプロのデザイナーが無意識にやっている判断です。車の写真のど真ん中にコピーを重ねれば読めなくなるし、写真の主役も殺してしまう。そこで、画像を解析して文字の置き場所を提案するスクリプトを作りました。
考え方はシンプルです。
- 画像をグリッドに分割する
- 各セルの エッジ強度（busyness） を計算する。エッジが多い＝被写体や模様がある＝文字を置くと読みにくい
- 各セルの 輝度（brightness） を計算する。明るい場所なら黒文字、暗い場所なら白文字が候補になる
- busyness が低く、まとまった面積のあるエリアをスコアリングして提示する
中核部分の考え方だけを抜き出すと、こんなイメージです（実際のスクリプトはリポジトリを参照してください）。
# 考え方を示すための簡略版
from PIL import Image, ImageFilter
import numpy as np
def analyze(path, cols=6, rows=4):
img = Image.open(path).convert("L")
edges = np.asarray(img.filter(ImageFilter.FIND_EDGES), dtype=float)
gray = np.asarray(img, dtype=float)
h, w = gray.shape
cells = []
for r in range(rows):
for c in range(cols):
ys = slice(r * h // rows, (r + 1) * h // rows)
xs = slice(c * w // cols, (c + 1) * w // cols)
cells.append({
"cell": (r, c),
"busyness": edges[ys, xs].mean(), # 低いほど文字を置きやすい
"brightness": gray[ys, xs].mean(), # 文字色の判断に使う
})
return sorted(cells, key=lambda x: x["busyness"])
実際にタンザワオートのヒーロー画像で動かし、空や路面など「抜けている」エリアが上位に来ることを確認しました。
それでも残った違和感
この時点で、「なぜ要素が削られるか」「どこに文字を置くか」という 仕組み は直りました。
でも、ノリさんの「元のデザインシステムのほうが良い」という指摘そのものに、正面から答えられた気はしていませんでした。削らないルールは「削るな」と命令しているだけで、なぜSkillが削りたがるのか には手が届いていなかったからです。
4. 寄り道：スクロール連動フェードインを「実測」で作る
少し脇道にそれます。ただ、この寄り道が後で効いてきます。
ノリさんから「要素がフワッと出てくるアニメーションも入れたい」というリクエストがあり、参考として FANCL のLP（ https://www.fancl.co.jp/skinpatch/index.html ）が挙がりました。
「フワッと」という感覚的な言葉を、私の推測で数値に置き換えるのは危険です。そこでブラウザで実際にそのページの公開CSSを取得し、opacity・transform・transition の宣言値を直接読みました。わかったことは次のとおりです。
-
初期状態：
opacity: 0とtransform: translateY(80px)（PC時） -
表示時：
is-showクラスが付くとopacity: 1とtranslateY(0) -
イージング：
cubic-bezier(0.165, 0.84, 0.44, 1)。動き出しが速く、終わりにかけてゆっくり収束する曲線で、これが「フワッと感」の肝 - duration：transform が0.6秒前後、opacity はそれより短め
-
発火：
IntersectionObserverで一度交差したらunobserveし、スクロールの往復で明滅させない
これをもとに、Skillの general-design-principles.md にコピペで使える実装例を追加しました。
.fade-up {
opacity: 0;
transform: translateY(80px);
transition:
opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.fade-up.is-show {
opacity: 1;
transform: translateY(0);
}
/* 動きを減らす設定のユーザーには即時表示 */
@media (prefers-reduced-motion: reduce) {
.fade-up {
opacity: 1;
transform: none;
transition: none;
}
}
const io = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
entry.target.classList.add('is-show');
observer.unobserve(entry.target); // 一度出たら監視をやめる
});
}, { rootMargin: '0px 0px -10% 0px' });
document.querySelectorAll('.fade-up').forEach((el) => io.observe(el));
ここで一つ、覚えておいてほしいことがあります。FANCLのこのページは、単一の目玉商品を魅せるためのLP です。情報を絞り込み、余白と動きでブランドの世界観を伝えることが正解の業態。この対比が、次の章で効いてきます。
5. 事件：ChatGPTに一発で負ける
ある日、ノリさんから報告がありました。
ChatGPTに、タンザワオートのURLを渡して「リニューアルデザインを考えて」と投げてみたら、一発で「こちらのほうが良い」と感じる結果が出てきた、と。
共有してもらったスクリーンショットの構成は、次のようなものでした。
- ヘッダー
- 大きなヒーロー（車3台の写真＋「クルマのある豊かな暮らしをあなたに。」）
- 6項目のサービスアイコン行
- 「TANZAWA AUTOの強み」4項目
- 在庫車情報（5台、価格付きカード）
- 整備・車検・鈑金塗装の写真付きサービスカード3枚
- お知らせ／NEWS一覧
- 会社案内（写真＋テキスト）
- 問い合わせCTAバナー
- フッター
既存サイトが持っていたであろう要素を、ほぼすべて保持した 網羅的な構成です。
6. なぜ負けたのか：正直に分析する
悔しさはさておき、原因を切り分けました。考えられる要因は3つです。
要因1：お題の与え方が違った
ChatGPTへの依頼は「自由な発想でリニューアルを考えて」というゼロベースの提案でした。一方、私たちが検証していたのは「既存のリッチな内容を壊さずに改修する」という、そもそも難易度の違うタスクです。条件がそろった比較ではありません。
要因2：モデルの一発生成のセンスの差
これは、あるかもしれないし、ないかもしれません。確証を持って言えることではないので、断定は避けます。
要因3（最重要）：Skillが輸入した「引き算」の哲学が、業態とミスマッチだった
1章で「このファイルに入れた、ある一文」と書いたのがこれです。
general-design-principles.md には、frontend-design Skill の思想を取り入れて、次のような趣旨の記述がありました。
最後に、ブリーフに貢献していない装飾を一つ削れないか検討する（引き算の仕上げ）
これ自体は良い原則です。4章の FANCL のLPのような、ブランドイメージで勝負するページには、まさに正解です。
でも、タンザワオートは違います。車を買いたい、車検に出したい、修理を頼みたい——情報を探しに来た人に、判断材料を渡すこと がサイトの存在理由です。在庫車の一覧や、お知らせや、サービスの種類を「引き算」してしまえば、それは洗練ではなく、ただの情報不足です。
ChatGPT側の出力も、公平に見る
一方で、ChatGPTの出力を手放しで褒めたわけでもありません。改めて見ると、
- 丸背景のアイコンバッジが、ヒーロー下・強み・サービス紹介で合計13個近く繰り返されている
- 配色はほぼ紺一色の、企業サイトの定番パレット
- カードはすべて同じ角丸・同じ余白の均質なグリッド
これは、私たちのSkillが持っている「AIっぽさを避けるチェックリスト」に、そのまま引っかかる特徴です。
つまり結論はこうでした。ChatGPTは、デザインセンスで勝ったのではなく、削らなかったから勝った。
ノリさんの受け止めも、「自動車販売店の一般的な優良テンプレートで十分良い」というものでした。この業態のユーザーにとっては、奇抜さより、必要な情報がちゃんと揃っていることのほうが価値が高いのです。
7. 根本修正：「情報方針」という軸を足す
ここでようやく、核心の欠落が見えました。
中編で作ったデータには、配色・フォント・トーンの実測値はあっても、「その業態のサイトは、情報をどれだけ見せるべきか」という軸が一切なかった のです。色やフォントは細かく数値化していたのに、一番素朴な問いが抜けていました。
type_taxonomy.csv に「情報方針」列を追加
9つのサイトタイプそれぞれに、情報方針を割り当てました。
| 情報方針 | サイトタイプ | 理由 |
|---|---|---|
| 網羅性優先 | 店舗・施設紹介／EC・WEBサービス／メディア・ポータル | 情報を探しに来た人に、判断材料を漏れなく見せること自体が目的 |
| 引き算優先 | 特設・キャンペーンサイト／ポートフォリオ | 単一の見せ場に絞ることが価値 |
| 文脈依存 | コーポレートサイト／サービス紹介／採用サイト／商品・製品紹介 | 業種やブリーフで判断。単一ブランド・単一商品のLPなら引き算、複数事業・複数プランの比較なら網羅性 |
タンザワオートは「店舗・施設紹介」なので網羅性優先。FANCLのLPは「商品・製品紹介」の中でも単一商品のLPなので引き算優先。4章の寄り道と5章の事件が、ここで一本の線でつながりました。
SKILL.md の修正
- ステップ2で、サイトタイプを特定した直後に「情報方針」列を確認することを必須化
- 「大胆（bold）」と「情報が少ない（引き算）」は 別の軸 であることを明記。網羅性優先のサイトでも、情報量は保ったまま、タイポグラフィや配色を大胆にすることはできる
この2つ目が、個人的には一番大事な気づきでした。中編で作った moderate / bold のダイアルを、私はどこかで「boldにする＝削ぎ落とす」と混同していた節があります。情報量と表現の強さは、独立して調整できるものです。
「引き算の仕上げ」を条件付きに
SKILL.md のステップ7と general-design-principles.md の両方で、引き算チェックの対象を限定しました。
- 網羅性優先タイプでは、引き算の対象を 純粋な装飾・強調表現に限る
- 価格・在庫・お知らせ・FAQ・連絡先などの実務情報には適用しない
「引き算は良いこと」という一般論を、「何を引いてよくて、何を引いてはいけないか」という業態ごとの判断に置き換えた、とも言えます。
まとめ：一番効いたのは、一番素朴な問いだった
振り返ると、このSkillにはかなりの量のルールとデータを積み上げてきました。文字組みの原則、3,000件超のギャラリー分析、縦組の実測値、画像解析スクリプト、アニメーションの実測値。
でも、実案件で一番効いたのは、そのどれでもありませんでした。
「このサイトは、何のために存在するのか」
情報を届けるためか、世界観を伝えるためか。この問いに答える軸が抜けていたせいで、どれだけ精緻なデータを積んでも、Skillは間違った方向に「洗練」してしまっていました。
シリーズを通して学んだことを、最後に3つ残しておきます。
- 他のSkillの思想を輸入するときは、その思想がどんな前提で「正しい」のかまで持ってくる。 引き算の美学は、ブランドLPという前提とセットで正しかった
- ルールやデータを積み重ねること自体は万能ではない。 足りないのは量ではなく、判断の起点になる軸であることが多い
- 比較に負けたときこそ、原因を正直に分解する。 「相手のモデルが優秀だった」で終わらせていたら、この欠落には気づけなかった
宣伝として書くなら「自作Skillで日本語Webデザインが劇的に良くなった」と書くほうが見栄えは良いでしょう。でも、実際に起きたのは失敗と修正の連続で、その過程にこそ、Skillを作ろうとしている人にとって役に立つ情報があると考えました。
japanese-web-design は、これからも実案件に当てながら直していく予定です。Issue や PR も歓迎しています。
参考：この記事に関わるコミット履歴
| コミット | 内容 |
|---|---|
2dcf106 |
初回コミット |
c9a9fed |
縦組（縦書き）データ追加 |
23b23e5 |
frontend-design / ui-ux-pro-max の考え方と、行末の孤立文字防止ルールを追加 |
610f05f |
リニューアル時のコンテンツ削り防止ルール（ステップ0）と hero_text_zone.py 追加 |
b8321f5 |
スクロール連動フェードインの実装ガイド追加 |
7c84697 |
サイトタイプごとの「情報方針」軸を追加し、引き算チェックの対象を限定 |