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

1

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

1

claude --version

1
2

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

1

opencode --version

1
2
3
4
5

# 方法 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

1

git init

1

claude

1

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

1

npx serve .

1
2

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

1
2
3

claude
# または
opencode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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

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

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

1

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

1

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

1

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

1

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

1

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

1

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

設計システム：
━━━━━━━━━━━━
配色方案（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 グリッドベース

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

1
2
3
4
5
6
7

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

1
2
3
4
5

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

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

1
2

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

1
2
3
4
5

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

1
2
3
4
5
6

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

1
2
3
4

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

1
2

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

1
2

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