Web Design Skill 学習ノート

Claude Design とは？

Claude Design は Anthropic がリリースしたデザインツールで、リリース当日に Figma の株価を暴落させました。

コアコンセプト： 左側にタイプし、右側にデザインが表示される（本質的には実行可能なウェブページ、画像ではない）

従来のデザインツールとの違い

次元	従来のデザインツール（Figma など）	Claude Design
主導者	人がキャンバス上で操作、AI が補助	AI が主要生成者、人がレビュー担当
出力物	デザイン画像	実行可能なコード
交流方式	手動描画	テキスト記述 → 自動生成
バージョン管理	手動操作	クリック可能なリンク、タグでバージョン切替

本質： Claude Design は Claude Code（デザイナー版）に近く、AI 版 Figma ではありません。

コアプロンプト分解（6つの要点）

ビデオは Claude Design のリークされたプロンプトを深く分析し、6つのコアデザイン原則を抽出しました：

ロールポジショニング — 動的アイデンティティ切替

オリジナルプロンプトの要旨： 「あなたはエキスパートデザイナーで、ユーザーはプロダクトマネージャーです」

重要な洞察：

❌ 「あなたは AI アシスタントです」と言わない
✅ デザイナー ↔ プロダクトマネージャーの協力関係を構築

2つのメリット：

AI の意思決定がより果断に — デザイナーは判断力を持つべき、すべてを確認する必要はない
重要なポイントは確認に来る — ユーザーがプロダクトマネージャーなので、最終決定はユーザーが行う

動的アイデンティティ切替：

アニメーション作成 → モーションデザイナー
プロトタイプ作成 → UX デザイナー
プレゼン作成 → デックデザイナー

💡 洞察： 多くの人のプロンプトは「あなたはフロントエンド開発者です」と一言で終わります。良いロールポジショニングは動的であるべきで、具体的なタスクに応じて柔軟にアイデンティティを切り替えます。

ワークフロー — 6ステッププロセス

1

要件理解 → リソース探索 → 計画作成 → 構造構築 → 検証完了 → 簡潔なまとめ

ディテール1：質問の技術（いつ聞くべき？いつ直接やるべきか？）

問題： 多くのエージェントは、まず質問の嵐を浴びせるか、何も聞かずに黙ってやるかのどちらかです。

Claude Design の戦略：

「PPT を作って」と入力 → まずいくつかの質問（情報不足）
「PPT を作って、全運会で使う、10分」→ 直接やる（緊急シナリオ、情報十分）

💡 洞察： コンテキストの緊急度と情報の完成度に基づいて、質問するか実行するかを柔軟に決定します。

ディテール2：まとめの原則

✅ 重要な考慮事項と次のステップのみ述べる
❌ すでにやったことを繰り返さない

💡 洞察： この原則は AI が大量の無駄話を生成するのを効果的に防ぎます。

AI 風の除去（最も価値のある部分）

典型的な AI 生成ウェブページの特徴：

紫ピンク青のグラデーション背景
大きな角丸カード
絵文字をアイコンとして使用
どこにでも偽データを配置
左側に色付きボーダーの角丸カード
使い古されたフォント
意味のないデータとアイコンの積み重ね

記事全体に「さらに」「注目すべきは」「以上のように」が散りばめられているようなもので、一目で AI が書いたとわかります。

Claude Design のアプローチ： 完全な**「地雷原チェックリスト」**を作成し、AI にこれらのクリシェを使用しないよう一つ一つ伝えます。

フォント推薦も慎重に検討：

絶対に使用してはいけないフォントを明確にリスト + 代替案
ニッチだが品質の高いフォントを推薦

カラーシステム — OKLCH 色空間

配色戦略の優先順位：

1

ブランドカラー → OKLCH 派生カラー → 決して新しい色をでっち上げない

なぜ HSL ではなく OKLCH なのか？

	HSL	OKLCH
知覚均等性	❌ 不均等（同じ明度値で、黄色は青よりずっと明るい）	✅ 均等
AI 配色効果	数値は問題ないが見栄えが悪い	明度と彩度を保ったまま色相だけ変えると、色が自然に調和

💡 洞察： OKLCH は一見小さなディテールですが、ウェブページの高級感を直接1レベル上げることができます。

コンテンツ原則 — 「1000個の NO で1つの YES を」

スティーブ・ジョブズの有名な言葉を引用。

AI のウェブページ作成の伝統的な問題： 空間をすべて埋めたがる — Hero、特徴、レビュー、データ、FAQ、連絡先情報…全部入れるが、どれも平凡。

Claude Design の態度：

すべての要素がなぜそこに存在すべきかを証明しなければならない
ページが空っぽに感じるなら → レイアウトの問題かもしれない、余白を使って解決
1つの大胆な余白 > 10の埋め合わせセクション

検証メカニズム — サブエージェントチェック

原理： 開発完了後、独立したサブエージェントをフォークしてウェブページの包括的チェックを行います。

なぜ独立したサブエージェントなのか？

同じコンテキストの AI は「自己満足」しやすい
独立したサブエージェントは「感情的な荷物」がないため、問題を発見しやすい

検証内容：

AI 風の特徴はあるか？
配色は調和しているか？
フォントは適切か？
レイアウトは創造的か？

Skill ファイルのコア最適化

Skill ファイルは Claude Design のプロンプトをベースに、3つの重要な最適化を行いました：

コード前に設計システムを述べる

コーディングを始める前に、AI に明確にリストアップさせる：

配色方案
フォント選択
間隔システム
…

なぜ？ 明確にしないと、AI は黙って自分で決めてコードを書きます。完成品を見た時に方向が間違っていたら、やり直しになります。事前に明確にすれば、コーディング前の方向修正コストはゼロです。

最小実用版を早期に出力

AI にまず仮定とプレースホルダーを持つ粗い V0 バージョンを作らせる
粗い V0 > 何倍も時間をかけて磨き上げた V1

なぜ？ 方向が完全に間違っていたら、V1 がどれだけ洗練されていても全部無駄になります。

追加補足

AI 風除去の項目をさらに追加
いくつかの検証済みフォントと配色の参照表を追加
参照ファイルを添付（典型的なコードテンプレート、プロンプトの「copy study the component」部分から）

効果比較デモ

テスト環境：Cursor + Claude 4.7（Skill あり vs Skill なし）

宇宙探索博物館オンライン展覧ページ

	Skill なし	Skill あり
配色	シアン紫ピンクのグラデーション、典型的な AI ネオン感	OKLCH 定義、雑誌印刷に近い深い色調
フォント	やや古い	見出しと本文に特徴、テック感
レイアウト	標準 Hero + カード、教科書的なランディングページ	従来のカード式でない、創造性がある
アニメーション	星空と惑星のアニメーション、ただし大量のグロー効果が積み重なっている	快適、創造性がある
総合	宇宙感はある、創造性に欠ける	非常に経験豊富なデザイナーの傑作のように

独立フォトグラファーの個人ポートフォリオ（最小プロンプト）

	Skill なし	Skill あり
デザインスタイル	ダーク背景 + ネオングロー + 半透明カード、古い	北欧のフォトグラファーを架空の人物として設定、完全なビジュアルスタイルをゼロから設計
コピー	AI 感たっぷり	—
感情表現	フォトグラファーが持つべき自由感が全く表現されていない	高級フォトグラフィーアルバムをめくっているように
意思決定戦略	そのままやった、質問なし	配色の傾向、コア要素などを積極的に質問

最終結論

1
2


Skill なし: 85点 → 使える、完成している、合格
Skill あり: 95点 → 美しい、洗練されている、スタイルがある

Skill の各ルールは個別に見ると効果は大きくありませんが、合わさると質的な変化を生み出します。これは「使える」から「美しい」へ、「完成している」から「洗練されている」へ、「合格」から「スタイルがある」への差です。

コア知識早見表

#	知識ポイント	一言まとめ
1	動的ロールポジショニング	タスクに応じて AI アイデンティティを柔軟に切替、「あなたはフロントエンド」と一言で終わらせない
2	6ステップワークフロー	要件理解→リソース探索→計画作成→構造構築→検証完了→簡潔なまとめ
3	質問の技術	情報の完成度と緊急度に基づいて質問するか実行するかを決定
4	AI 風の除去	地雷原チェックリストを作成、グラデーション/絵文字/大きな角丸カードなどのクリシェを禁止
5	OKLCH 配色	知覚均等な色空間、HSL より調和のとれた色を生成
6	コンテンツ抑制	すべての要素が存在理由を証明、大胆な余白
7	サブエージェント検証	独立したコンテキストでチェック、「自己満足」を回避
8	コード前に設計システムを述べる	デザイン決定を早期に露出、方向性のエラーを回避
9	素早い V0	粗いが速いプロトタイプ > 洗練されているが方向が間違った完成品