AIデザイン on Yanmu

Web Design Skill 実践マニュアル（詳細版）

Wed, 27 May 2026 00:00:00 +0800

Web Design Skill 実践マニュアル（詳細版）

対象ツール： Claude Code / OpenCode 目標： このガイドに従って、AI を使用して高品質な宇宙探索博物館のウェブページを生成します 所要時間： 40〜90 分

ゼロ：始める前に - やることを理解する

全体プロセス概要

`1`	`環境構築 → Skill インストール → プロジェクト作成 → ベアラン体験 → Skill 活用 → 比較`

なぜ先に「ベアラン」してから Skill を使うのか？

これは比較実験です：

直接 Skill を使うと、その価値を実感できません
まず AI に自由にやらせる → 典型的な AI 風ウェブページが見える（紫ピンク青のグラデーション、角丸カード、絵文字アイコン…）
そして Skill でやり直す → 同じトピック、同じモデルが全く異なる結果を出すのを目の当たりにします

必要なツール一覧

ツール	説明	入手方法
ターミナル	AI と対話する場所	Windows: PowerShell / Terminal；macOS: Terminal
Claude Code または OpenCode	AI コーディング Agent	インストール手順参照
Git	GitHub から Skill ファイルをダウンロード	`winget install Git.Git`（Win）/ `brew install git`（macOS）
ブラウザ	ウェブページのプレビュー	Chrome / Edge / Firefox
画面録画ソフト（オプション）	プロセスを録画	OBS Studio（無料）/ システム標準

Agent の準備確認

Claude Code を使う場合

説明： Anthropic 公式のターミナル AI コーディングツール。

インストール確認：

`1`	`claude --version`

バージョン番号が表示されればインストール済み。

インストールされていない場合：

1
2

# まず Node.js をインストール（https://nodejs.org）、その後：
npm install -g @anthropic-ai/claude-code

OpenCode を使う場合

説明： SST チームが開発したオープンソースのターミナル AI コーディングツール。

インストール確認：

`1`	`opencode --version`

インストールされていない場合：

# 方法 1：Go でインストール
go install github.com/sst/opencode@latest

# 方法 2：Homebrew でインストール（macOS/Linux）
brew install sst/tap/opencode

プロジェクトディレクトリ作成

作業フォルダ作成

1
2
3

cd ~/Desktop
mkdir space-museum-demo
cd space-museum-demo

Git リポジトリ初期化

`1`	`git init`

初期ファイル作成

claude

入力：

現在のディレクトリに index.html ファイルを作成してください。基本的な HTML5 構造のみ（DOCTYPE、head、body）、スタイルやコンテンツは不要です。HTML lang は zh-CN、title は「宇宙探索博物館」に設定してください。

ローカルプレビューサーバー起動

`1`	`npx serve .`

ブラウザで http://localhost:3000 にアクセス。

web-design-skill ダウンロード

リポジトリクローン

1
2

cd ~/Desktop/space-museum-demo
git clone https://github.com/ConardLi/web-design-skill.git

ベアラン体験 - AI の「ネイティブ美学」を見る

🎯 目的： デフォルト動作でウェブページを生成させ、AI の「ネイティブ美学」を観察する。

Agent 起動（Skill ロードなし）

1
2
3

claude
# または
opencode

設計要件入力

宇宙探索博物館のオンライン展覧ウェブページを作成してください。すべてのコードを1つの index.html ファイルに（HTML + CSS + JS インライン）。要件：

1. ダークテーマ、宇宙感とSF的な雰囲気
2. ヒーローエリアに博物館名「星間探索博物館」とスローガンを表示
3. 展示カードエリアに4つの宇宙探索マイルストーン（ガガーリン、アポロ11号、ハッブル望遠鏡、ジェイズ・ウェッブ望遠鏡）
4. タイムラインエリアに宇宙探索の重要な年号
5. スクロールアニメーション効果（要素がスクロール時にフェードイン）
6. レスポンシブレイアウト、モバイル対応

完全なコードを生成し、index.html に書き込んでください。

AI 生成待ち

約1〜3分かかります。

結果確認

ブラウザで http://localhost:3000 を更新。

観察チェックリスト：

カラー：紫ピンク青のグラデーションはあるか？
レイアウト：標準的な「中央揃えタイトル + サブタイトル」か？
AI 風の特徴：絵文字アイコン？大きな角丸カード？

ベアランバージョン保存

`1`	`現在の index.html をコピーして、index-no-skill.html という名前を付けてください。`

Agent に Skill をインストール

🎯 目的： web-design-skill のルールを Agent のシステムプロンプトに注入する。

Claude Code - 2つのインストール方法

方法 A：CLAUDE.md に書き込む（推奨、永続的）

`1`	`web-design-skill/skill.md ファイルの内容を読み込み、CLAUDE.md ファイルを作成してください。`

方法 B：会話で参照（一時的）

`1`	`@web-design-skill/skill.md この Skill ファイルのルールに従ってウェブページを設計してください。`

OpenCode - インストール

方法 A：AGENTS.md に書き込む（推奨）

`1`	`cp web-design-skill/skill.md AGENTS.md`

Skill が有効か確認

設計を始める前に、お聞きください：設計システムに従って、どのような配色方案を使いますか？フォントは？間隔のルールは？絶対にやってはいけないことは？

Skill が有効なら、AI は OKLCH 色空間、具体的なフォント推薦、「AI 風を除去する」ルールについて言及します。

Skill 活用 - 高級感を磨く

🎯 目的： 同じ要件で、Skill が AI を導いて全く異なるウェブページを作らせる。

新しい会話開始

重要：新しい会話を開始すること！

設計要件入力

今回は意図的に最小限の要件のみ：

`1`	`宇宙探索博物館のオンライン展覧ウェブページを作成してください。すべてのコードを1つの index.html ファイルに。`

フェーズ A：AI が質問

AI がまず確認質問をする場合があります。

フェーズ B：AI が設計システムを説明

コードを書く前に、AI が設計システムを説明：

設計システム：
━━━━━━━━━━━━
配色方案（OKLCH ベース）：
- 背景：oklch(15% 0.02 260) — 深い宇宙ブルー
- メイン：oklch(70% 0.15 250) — 冷たい青
- サブ：oklch(60% 0.12 310) — 深い紫
- テキスト：oklch(95% 0.01 260) — ホワイトに近い

フォント：
- 見出し：Orbitron（テック感）
- 本文：Space Grotesk（可読性良好）

間隔システム：8px グリッドベース

レイアウト戦略：マガジン風大画像レイアウト、従来のカードグリッドではない

フェーズ C：AI が V0 を出力（粗い初期版）

ブラウザで方向性が正しいか確認。

フェーズ D：反復改善

1回のフィードバックで1〜2点のみ。

フェーズ E：最終検証

新しいデザインレビューエキスパートとして、このウェブページを包括的にチェックしてください：
1. 「明らかに AI が作った」特徴はありますか？すべて列挙してください。
2. 配色は調和していますか？OKLCH を使っていますか？
3. フォントの使用は適切ですか？使い古されたフォントはありませんか？
4. レイアウトは創造的ですか？標準的なヒーロー + カードグリッドではありませんか？
5. アニメーションは自然ですか？グロー効果の使いすぎはありませんか？
6. モバイル対応は正常ですか？

Skill バージョン保存

AI 完成後、最終版を保存：

# Agent 対話中の場合、AI にコピーを依頼：
# "現在の index.html をコピーして、index-with-skill.html という名前にしてください"

# Agent 終了後、手動でコピー：
cp index.html index-with-skill.html

2つのバージョンを比較

ブラウザで両方のファイルを開く：

1
2

http://localhost:3000/index-no-skill.html     ← ベアランバージョン
http://localhost:3000/index.html               ← Skill バージョン

動画録画（オプション）

推奨ショット

ショット 1：完成品ショーケース（30秒）
ショット 2：比較表示（1分）
ショット 3：プロセス再生（2〜3分）
ショット 4：デザイン詳細解説（1分）
ショット 5：まとめ（30秒）

付録 A：よく使うプロンプトテンプレート

AI に設計システムを先に説明させる

コードを書く前に、設計システムを自然言語で説明してください：
1. 配色方案（OKLCH 使用）
2. フォント選択（見出しと本文それぞれ）
3. 間隔システム
4. レイアウト戦略
5. 絶対にやってはいけないことを確認してからコーディングを開始します。

素早い V0 を要求

まず最小限の実用版（V0）をください。
プレースホルダーと未完成の部分があって構いません。
方向を確認してから詳細を洗練してください。
詳細に時間をかけすぎないでください。

包括的検証をトリガー

1
2

新しいデザインレビューエキスパートとして、現在のウェブページを包括的にチェックしてください。
「明らかに AI が作った」特徴をすべて列挙し、配色、フォント、レイアウトのすべての問題を修正してください。

まとめ

1
2

ウェブデザインのコアワークフロー：
要件理解 → 設計システム確認 → 素早い V0 → 反復改善 → 検証

Skill のエッセンスを覚える3つの文：

設計システムが先、コードが後 — 方向が間違えばコードは無駄
まず粗い V0、その後磨き上げる — 素早い反復、最低コスト
大胆な余白、すべての要素は存在を証明せよ — 抑制こそが高級感

Web Design Skill 学習ノート

Tue, 26 May 2026 00:00:00 +0800

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	粗いが速いプロトタイプ > 洗練されているが方向が間違った完成品

AIデザイン on Yanmu

Web Design Skill 実践マニュアル（詳細版）

Web Design Skill 実践マニュアル（詳細版）

ゼロ：始める前に - やることを理解する

全体プロセス概要

なぜ先に「ベアラン」してから Skill を使うのか？

必要なツール一覧

Agent の準備確認

Claude Code を使う場合

OpenCode を使う場合

プロジェクトディレクトリ作成

作業フォルダ作成

Git リポジトリ初期化

初期ファイル作成

ローカルプレビューサーバー起動

web-design-skill ダウンロード

リポジトリクローン

ベアラン体験 - AI の「ネイティブ美学」を見る

Agent 起動（Skill ロードなし）

設計要件入力

AI 生成待ち

結果確認

ベアランバージョン保存

Agent に Skill をインストール

Claude Code - 2つのインストール方法

方法 A：CLAUDE.md に書き込む（推奨、永続的）

方法 B：会話で参照（一時的）

OpenCode - インストール

方法 A：AGENTS.md に書き込む（推奨）

Skill が有効か確認

Skill 活用 - 高級感を磨く

新しい会話開始

設計要件入力

フェーズ A：AI が質問

フェーズ B：AI が設計システムを説明

フェーズ C：AI が V0 を出力（粗い初期版）

フェーズ D：反復改善

フェーズ E：最終検証

Skill バージョン保存

2つのバージョンを比較

動画録画（オプション）

推奨ショット

付録 A：よく使うプロンプトテンプレート

AI に設計システムを先に説明させる

素早い V0 を要求

包括的検証をトリガー

まとめ

Web Design Skill 学習ノート

Web Design Skill 学習ノート

Claude Design とは？

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

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

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

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

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

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

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

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

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

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

Skill ファイルのコア最適化

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

最小実用版を早期に出力

追加補足

効果比較デモ

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

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

最終結論

コア知識早見表

関連リソース