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

OpenCode + Obsidian：AI駆動のナレッジマネジメントワークフローを構築する

Thu, 30 Apr 2026 02:00:15 +0800

📋 目次

一、opencode-obsidianプラグインとは？

opencode-obsidianは、OpenCode AIアシスタントをObsidianウィンドウに直接埋め込むサードパーティコミュニティプラグインです。従来のターミナル統合ソリューションとは異なり、このプラグインはOpenCodeのWebビューを使用して直接埋め込むため、表示されるのは完全なOpenCodeインターフェースであり、ターミナルとObsidianの間を行き来する必要がありません。

コア機能：

🖥️ OpenCodeインターフェースがObsidianのサイドバーやメインエディタに直接埋め込み
🔄 サーバーの自動管理——パネルを開くと起動、閉じると停止
📄 実験的なコンテキスト注入——現在開いているノートと選択テキストを自動的にAIに渡す
⌨️ ショートカット Ctrl/Cmd + Shift + O でパネルを素早く切り替え

適用シーン：

長文コンテンツの要約と精製
執筆、編集、推敲
ナレッジベースの検索と探索
アウトラインと構造化ノートの生成

⚠️ プラグイン作者はOpenCode / Obsidianとは無関係で、これは独立したサードパーティプロジェクトです。現在のバージョンは0.2.1（Beta段階）、デスクトップのみ対応。

二、環境準備

始める前に、以下の準備ができていることを確認してください：

項目	要件	説明
Obsidian	≥ 1.4.0	公式サイトからダウンロード
Node.js	≥ 18+	ダウンロード、OpenCodeのインストールに必要

準備ができたら、以下の手順に従ってください。

三、BRATプラグインのインストール

BRAT（Beta Reviewer’s Auto-update Tool）は、コミュニティプラグインマーケットプレイスにまだ公開されていないBeta版プラグインをインストールするためのObsidianコミュニティプラグインです。opencode-obsidianはまだ正式に公開されていないため、BRATでのインストールが必要です。

ステップ1：コミュニティプラグインマーケットプレイスを開く

Obsidianで順にクリック：設定 → サードパーティプラグイン → 「セーフモード」をオフ → コミュニティプラグインマーケットプレイス

ステップ2：BRATを検索してインストール

コミュニティマーケットプレイスでBRATを検索（正式名称：Obsidian42 - BRAT）、「インストール」→「有効化」をクリック。

💡 BRATはBeta Reviewer’s Auto-update Toolの略で、TfTHackerによって開発されました。Betaプラグインの更新を自動的に検出し、アップグレードを通知します。

四、BRATでopencode-obsidianをインストール

BRATがインストールできたら、それを使ってopencode-obsidianプラグインをインストールできます。

ステップ1：BRAT設定を開く

設定 → サードパーティプラグイン → インストール済みのBRATを見つけ、右側の歯車アイコンをクリックして設定に入ります。

ステップ2：Betaプラグインを追加

BRAT設定ページで、**「Add Beta plugin」**ボタンをクリック。

ステップ3：リポジトリアドレスを入力

ポップアップの入力ボックスに以下を入力：

`1`	`mtymek/opencode-obsidian`

**「Add Plugin」**をクリック。

BRATがGitHubから最新のリリースバージョンを自動的に取得してインストールします。

ステップ4：プラグインを有効化

インストール完了後、設定 → サードパーティプラグイン → 「インストール済みプラグイン」リストでOpenCode-Obsidianを見つけ、スイッチをオンにして有効化します。

✅ 有効化後、Obsidianの左サイドバーにターミナル風のアイコンが表示されます——これがOpenCodeのエントリーポイントです。

自動更新

BRATは定期的にGitHubの新しいバージョンをチェックします。更新があると、Obsidian内で通知が表示され、確認をクリックするだけで自動アップグレードされます。

五、OpenCode CLIのインストール

プラグイン自体は「シェル」に過ぎません——バックグラウンドでopencode serveサービスを起動し、OpenCodeのWebインターフェースをObsidianに埋め込みます。そのため、npmでOpenCode CLIをインストールするだけで十分です。

システムのターミナルを開きます（WindowsはPowerShell、macOS/LinuxはTerminal）：

`1`	`npm i -g opencode-ai`

インストール確認：

1
2

opencode --version
# 期待出力例: 1.14.39

⚠️ Windowsユーザー：プラグインが「Executable not found at ‘opencode’」と表示する場合、本文の第十節にジャンプして解決策を確認してください。

六、プラグイン設定の詳細

プラグインを有効化した後、設定 → サードパーティプラグイン → OpenCode-Obsidianの歯車アイコンから、以下の設定項目を確認できます：

基本設定

設定項目	デフォルト	説明
OpenCode実行ファイルパス	`opencode`	システムPATHで見つからない場合、フルパスを入力
ポート	`14096`	OpenCodeサービスがリッスンするポート番号
ホスト名	`127.0.0.1`	サービスがバインドするアドレス
プロジェクトディレクトリ	（Vaultパスから自動取得）	OpenCodeが操作する作業ディレクトリ
起動タイムアウト	`45000` (45秒)	サービス起動を待つ最大ミリ秒数

インターフェース設定

設定項目	デフォルト	説明
デフォルトビューポジション	`sidebar`	`sidebar` = サイドバー、`main` = メインエディタ
自動起動	`オフ`	Obsidian起動時にOpenCodeサービスを自動起動

コンテキスト注入（実験的）

設定項目	デフォルト	説明
ワークスペースコンテキスト注入	`オフ`	現在のノート情報をOpenCodeに自動転送
最大ノート数	`20`	コンテキストに含まれる最大ノート数
最大選択テキスト長	`2000`	AIに渡す選択テキストの文字数上限

カスタムコマンド

設定項目	デフォルト	説明
カスタムコマンドを使用	`オフ`	有効にするとOpenCode起動コマンドをカスタマイズ可能
カスタムコマンド	（空）	カスタム起動コマンド（第九節を参照）

七、初回使用

OpenCodeパネルを開く

OpenCodeを開く3つの方法：

サイドバーアイコンをクリック：左サイドバーのターミナルアイコンをクリック
ショートカット：Ctrl + Shift + O（macOSはCmd + Shift + O）
コマンドパレット：Ctrl/Cmd + P → Toggle OpenCode panelと入力

初回起動フロー

パネルを開くと、プラグインが自動的に以下を実行：

OpenCode実行ファイルパスを検出
OpenCodeサービスを起動（opencode serve）
埋め込みWebビューにOpenCodeインターフェースを読み込み

起動成功後、完全なOpenCodeダイアログインターフェースが表示され、プロンプトを直接入力できます。

すべてが正常に動作しているか確認

OpenCodeインターフェースで以下を入力：

/help

コマンド一覧が表示されれば、すべて正常です。以下も入力できます：

/models

利用可能なAIモデルを確認。OpenCodeには無料モデル（GLM-4.7、MiniMax-2.1）が内蔵されており、設定不要ですぐ使えます。

ショートカット早見表

ショートカット	機能
`Ctrl/Cmd + Shift + O`	OpenCodeパネルの切り替え

八、コンテキスト注入（実験的機能）

これはopencode-obsidianプラグインの最もユニークな機能の1つ——Obsidianの作業コンテキストをOpenCodeに自動的に渡せます。

有効にする方法

プラグイン設定で、**「ワークスペースコンテキスト注入」**スイッチをオンにします。

注入される内容

有効にすると、プラグインは以下の情報を実行中のOpenCodeインスタンスに自動転送します：

📂 現在開いているノート一覧：どのファイルを編集中か
📝 選択テキスト：ノートでハイライトしたテキスト

使用シーン

テキストを選択してOpenCodeパネルを開き、「この文章を推敲して」と言う——AIはすでにどのテキストかを知っている
複数のノートを同時に開き、AIに「この2つのノートの違いを比較して」と頼む——AIはすでにどのファイルが開いているかを知っている

制限事項

⚠️ これは実験的機能で、現在いくつかの制限があります：

OpenCodeインターフェースで新しいSessionを作成する時、コンテキストは自動注入されない

コンテキスト更新には一定の遅延がある

九、カスタムコマンドモード

デフォルトでは、プラグインはopencode serveコマンドでサービスを起動します。より多くの制御が必要な場合は、カスタムコマンドモードを有効にしてください。

カスタムコマンドが必要な場合

追加のCLI引数が必要な場合
カスタム起動スクリプトを使用する場合
コンテナや仮想環境でOpenCodeを実行する場合
OpenCodeが非標準パスにインストールされている場合

設定手順

プラグイン設定で**「カスタムコマンドを使用」**をオン
**「カスタムコマンド」**入力ボックスに完全なコマンドを入力

コマンドテンプレート

`1`	`opencode serve --port 14096 --hostname 127.0.0.1 --cors app://obsidian.md`

⚠️ 重要な注意事項

ポートとホスト名は設定の値と一致している必要があります
--cors app://obsidian.mdを含める必要があります——さもないとObsidianがOpenCodeのWebインターフェースを埋め込めません

十、よくある質問とトラブルシューティング

❌ OpenCode実行ファイルが見つからない

症状：パネルを開くと「Executable not found at ‘opencode’」と表示されるが、ターミナルでopencodeは正常に動作する。

原因：Electron（Obsidianの基盤フレームワーク）がWindowsでシステムPATH環境変数を完全に継承しない。

解決策：

ターミナルでopencode.cmdのフルパスを検索：

`1`	`where opencode.cmd`

出力されたフルパスをプラグイン設定の「OpenCode実行ファイルパス」に貼り付け、例：

`1`	`C:¥Users¥あなたのユーザー名¥AppData¥Roaming¥npm¥opencode.cmd`

❌ サービス起動タイムアウト

考えられる原因：ネットワークの問題、モデル読み込みの遅さ、ポートが使用中。

解決策：

ポート14096が他のプログラムで使用されていないか確認
ポート番号を変更してみる（例：15096に）
起動タイムアウト時間を増やす

❌ パネルが空白で表示される

考えられる原因：CORS設定が正しくない。

解決策：

カスタムコマンドを使用している場合、コマンドに--cors app://obsidian.mdが含まれていることを確認してください。

❌ パネルを埋め込めない

考えられる原因：OpenCodeのバージョンが古い。

解決策：

`1`	`npm i -g opencode-ai@latest`

❌ 中国語ファイル名の文字化け（Windows）

解決策：PowerShellで実行：

`1`	`chcp 65001`

その後、Obsidianを再起動してください。

❌ プラグイン更新後に再設定が必要

BRATはプラグイン更新時に設定データを保持します。設定が失われている場合は、設定ページを開いて再設定してください。

まとめ

インストールフロー全体を一図でまとめると：

┌──────────────────────────────────────────┐
│        BRATプラグインをインストール         │
│  設定 → コミュニティマーケットプレイス      │
│  → BRATを検索 → インストール              │
└──────────────────┬───────────────────────┘
                   │
                   ▼
┌──────────────────────────────────────────┐
│   BRATでopencode-obsidianをインストール    │
│   BRAT設定 → Add Beta plugin              │
│   入力: mtymek/opencode-obsidian          │
└──────────────────┬───────────────────────┘
                   │
                   ▼
┌──────────────────────────────────────────┐
│        OpenCode CLIをインストール          │
│   npm i -g opencode-ai                   │
└──────────────────┬───────────────────────┘
                   │
                   ▼
┌──────────────────────────────────────────┐
│      プラグインを有効化して使用開始         │
│   Ctrl+Shift+Oでパネルを開く              │
│   Obsidian内でOpenCodeを直接使用          │
└──────────────────────────────────────────┘

一言まとめ：BRATをインストール → mtymek/opencode-obsidianを検索 → OpenCode CLIをインストール → Ctrl+Shift+Oで始めよう。これだけ簡単です。

📚 参考元：

opencode-obsidian GitHubリポジトリ

BRATプラグインGitHubリポジトリ

OpenCode公式ドキュメント

OpenCode 完全ガイド：オープンソース版 Claude Code のインストール、設定、高度な活用法

Thu, 30 Apr 2026 02:00:15 +0800

📋 目次

一、OpenCodeとは？

OpenCodeは現在最もホットなAIプログラミングツールで、本質的にはオープンソース版のClaude Codeです。Claude Codeのほぼすべてのコア機能を複製し、中国ユーザーによくある速度制限やアカウント停止の問題を解決しました。

Claude Codeとの比較

比較項目	Claude Code	OpenCode
オープンソース	❌ クローズドソース	✅ オープンソース
無料モデル	❌ 有料API必要	✅ 無料モデル内蔵
中国ユーザー向け	⚠️ 速度制限/停止リスク	✅ 制限なし
Skills/MCP	✅ サポート	✅ 完全互換
Session並列	❌	✅ コア機能

コアポジショニング

オープンソース版Claude Code：ほぼ全機能、中国ユーザー向け、速度制限・アカウント停止なし
無料モデル：GLM-4.7、MiniMax-2.1などの無料モデルがそのまますぐ使える
トップクラスモデル接続：AntigravityプラグインでGemini 3 Pro、Claude 4.5 Opusを無料利用；/connectでGPT Codexに接続
キラー機能：Session並列処理、Timelineロールバック、Share共有、Ultra Workマルチエージェント協調
プラグインエコシステム：Oh My Open Code (OMO) — 7つのプログラミングエージェント + 3つのMCP Server + 各種ツール

二、4つのインストール形態

⭐ 1. コマンドライン版（主力おすすめ）

最も安定し、機能が最も充実した使用方法。

# インストール（Node.jsを先にインストールする必要があります）
npm i -g opencode-ai

# 起動
opencode

前提条件：Node.jsのインストールが必要（nodejs.orgから対応OS版をダウンロード）

2. デスクトップクライアント（Beta）

公式サイトからクライアントをダウンロードし、インストール後、プロジェクトフォルダを選択して使用。

⚠️ 現在Betaテスト段階でバグ较多、主力ツールとしての使用は推奨されません。

3. VS Codeプラグイン版

前提条件：コマンドライン版OpenCodeがインストール済み。プラグイン版のコア価値はIDEとのシームレスな統合にあり、AIが直接コードのコンテキストを認識します。

VS Code拡張機能ストアでOpenCodeを検索してインストール
ショートカット Ctrl + Shift + P → open opencodeと入力してEnter
プラグインが左側ウィンドウで開いているコードファイルを自動的に関連付け
コードを選択後 Ctrl + Alt + K でOpenCodeチャットウィンドウに素早く貼り付け

4. クラウド実行環境（GitHub Actions）

オープンソースプロジェクトの自動化されたIssue修正に最適：

プロジェクトをGitHubの公開リポジトリにアップロード
リポジトリにAPI Keyを設定（Settings → Secrets and Variables → Actions）
Issueのコメントに/opencode + 要件説明を入力
GitHub Actionsが自動的にOpenCodeワークフローを実行
完了後、自動的にPull Requestを作成

三、無料モデルの設定

利用可能なモデルを確認

`1`	`/models # 利用可能なすべてのモデルを表示（freeマーク付きは無料で使用可能）`

トップクラスモデルへの接続

方法1：Antigravityプラグイン（Gemini + Claudeを無料接続）

AntigravityはGoogleが提供するAIプログラミングIDEで、Gemini 3 ProとClaude 4.5 Opusを無料で提供しています。

OpenCodeにインストールプロンプトを貼り付け（Antigravity GitHubのトップページからコピー）
AIが自動的にインストールを完了するのを待つ
新しいターミナルを開いてログインコマンドを実行、Google → Antigravityログインを選択
Googleアカウントにログイン、生成されたURLを貼り付け
OpenCodeを再起動、/modelsでGemini 3 ProとClaude 4.5 Opusが表示される

方法2：GPT Codex（OpenAI公式提携）

OpenAIとOpenCodeが公式提携し、ChatGPT Codexに直接接続できます。

`1`	`/connect # OpenAI → GPT Pro → ブラウザログインを選択`

前提条件：ChatGPT Plus以上のサブスクリプションが必要。

方法3：OpenRouter（万能接続）

OpenRouterを通じて、市販されているほぼすべての大規模モデルに接続でき、国内ユーザーも簡単にクレジットを取得できます。

`1`	`/connect # OpenRouter → API Keyを入力を選択`

OpenCodeは75種類のAI接続方法をサポートしており、ほぼすべてのモデルベンダーを網羅しています。

四、コア機能のハイライト

1. 質問による要件明確化

コーディングを始める前に、OpenCodeは一系列の質問をします：

コードサンプルだけでいいですか、それとも完全に実行可能なプログラムが必要ですか？
どの機能が必須ですか？
どのモデルを使用しますか？
環境変数はどのように保存しますか？

この「先に聞いてから行動する」メカニズムにより、手戻りが大幅に減少します。

2. コマンドラインコードDiffインターフェース

OpenCodeのコマンドラインdiff表示は、すべてのコマンドラインプログラミングツールの中で最高とされており、コードの変更が一目瞭然です。

⭐ 3. Session並列処理

これはOpenCodeの最も特徴的な機能です — 複数Sessionの並列実行：

# 最初のタスクを開始（例：タイマー追加）
# タスク実行中に新しいセッションを作成
/new

# 2番目のタスクを開始（例：ブラシの色変更）
# すべてのセッションの状態を確認
/sessions

# セッション間を切り替え
/session <id>

回転シンボルはSessionがバックグラウンドで実行中であることを示します。2つの要件を完全に並列開発できます。

4. Timelineチェックポイントロールバック

`1`	`/timeline # 現在のセッションの完全な会話履歴を表示`

任意の履歴ノードを選択：

Revert：コードとチャットコンテンツをその時点にロールバック
View：当時AIが行った変更を確認

プログラミングの「タイムマシン」のように、大胆に異なるアプローチを試すことができます。

5. Share共有

1
2
3

/share      # 会話履歴をウェブページとして共有
/unshare    # 共有を停止
/export     # 会話履歴をファイルとしてエクスポート

共有後、完全な会話履歴とコード変更プロセスを表示するウェブリンクが生成され、コラボレーションやデモンストレーションに便利です。

五、Skillsスキル移行

OpenCodeはClaude CodeのSkillsディレクトリ構造と完全互換で、移行コストが極めて低いです：

1
2

# ディレクトリ構造の対応関係
.claude/skills/<skill-name>/    →    .opencode/skills/<skill-name>/

操作手順

プロジェクトのルートディレクトリに.opencodeフォルダを作成
.opencodeの下にskillsフォルダを作成
元の.claude/skills/配下のスキルフォルダをそのままコピー
OpenCodeを再起動すると、AIがこれらのSkillsを認識して呼び出す

各Skillはディレクトリ付きの説明書で、AIに特定分野のタスクを完了する方法を伝えます。

六、MCP設定

OpenCodeは2つのMCP（Model Context Protocol）モードをサポートしています：

ローカルMCP（Local）

ローカルコマンドで実行。~/.config/opencode/opencode.jsonで設定：

{
  "mcpServers": {
    "shed-cn": {
      "type": "local",
      "command": "npx",
      "args": ["shed-cn"],
      "enabled": true
    }
  }
}

リモートMCP（Remote）

URLでリモート呼び出し。Context7を例に：

{
  "mcpServers": {
    "context7": {
      "type": "remote",
      "url": "https://context7-mcp-server-url",
      "headers": {
        "Authorization": "Bearer <your-api-key>"
      },
      "enabled": true
    }
  }
}

設定完了後、OpenCodeを再起動し、/mcpと入力すると設定済みのMCP Serverを確認できます。

七、Oh My Open Code (OMO) スーパープラグイン ⭐

OMOはOpenCodeで最も人気のあるプログラミングプラグインで、本質的にはツール + MCP + プログラミングエージェントの組み合わせバンドルです。

7つのプログラミングエージェント

エージェント	役割	おすすめモデル
🧠 シーシュポス (Sisyphus)	メインエージェント、計画とオーケストレーション	Claude 4.5 Opus / GPT 5.2
🔮 予言者 (Prophet)	アーキテクチャ設計、コードレビュー	—
📚 司書 (Librarian)	文献調査、ドキュメント検索	—
🔍 探索者 (Explorer)	ウェブ検索	—
🎨 フロントエンドエンジニア	フロントエンド開発	Gemini 3 Pro
📝 ドキュメントライター	ドキュメント生成	—
🖼️ マルチモーダル	画像/PDF理解	—

各エージェントにはその作業に最適な大規模モデルが割り当てられています。作者によると、最適な組み合わせを見つけるために24,000ドル相当のTokenを費やしたとのことです。

3つのMCP Server

Web Search：ウェブ検索
Context7：最新の技術ドキュメントを取得
Grep App：GitHubリポジトリの高速コード検索

統合ツール

LSPアドバンスト版：プログラミング言語の構文とセマンティクスを通じてAIのコード特定を支援
ASTツール：コード構文木を通じた関連検索
LOCツール：マルチモーダル視覚能力で画像、PDFを理解
Delegate Task / Background Task：エージェントのタスク割り当てとバックグラウンドスケジューリング

インストールと使用

設定ファイルの場所：C:¥Users¥<ユーザー名>¥.config¥opencode¥oh-my-opencode.json

OMO GitHubのトップページからinstallで始まるプロンプトをコピー
OpenCodeに貼り付け、設定質問に回答（サブスクリプション状況など）
自動的にインストール完了

2つのコア使用法

① @ で特定エージェントを指定

`1`	`@フロントエンドエンジニアこのページのレスポンシブレイアウトを最適化して`

② Ultra Workモード（魔法の言葉ULW）

`1`	`ULW ペットショップアプリを作成して`

Ultra Workモードでは、シーシュポスがメインエージェントとして以下の処理を行います：

タスクをTodo Listに分解
複数のバックグラウンドタスクを同時並行実行
各エージェントを中央からオーケストレーション
完成したプロジェクトを納品

Ralph Loopモード

AIに長時間ループで作業を強制し、極めて困難なタスクに適しています：

`1`	`/ralph-loop`

例：「最新のSpring Boot 4標準を使用してプロジェクト全体をリファクタリングし、すべてのテストケースがパスするまで」——タスクが完了するまで数時間連続実行可能です。

八、その他の便利機能

`/init` — プロジェクト知識初期化

AIにプロジェクトフォルダ全体を読み込ませ、agents.mdファイルをシステムプロンプトとして生成し、AIがプロジェクトを素早く理解できるようにします。

`/compact` — コンテキスト圧縮

これまでの会話を簡潔な要約にまとめ、モデルのコンテキストウィンドウを解放し、Tokenのオーバーフローを防ぎます。

カスタムコマンド

~/.config/opencode/commands/の下に.mdファイルを作成してカスタムコマンドを定義：

# テスト実行
モード：build
コマンド：npm test
説明：プロジェクトのすべてのテストケースを実行

使用方法：/テスト実行でトリガー。

カスタムエージェント

~/.config/opencode/agents/の下に.mdファイルを作成：

# Code Review Agent
タイプ：subagent
モデル：claude-4.5-opus
説明：コードレビューを専門とし、コード品質、セキュリティ脆弱性、ベストプラクティスをチェックします。

Primary Agent：Tabキーで切り替え、会話で直接使用
Sub Agent：メインエージェントがバックグラウンドで自動スケジューリング

九、まとめとおすすめ

適用シーン

シンARIO	おすすめ度	説明
初心者のAIプログラミング入門	⭐⭐⭐⭐⭐	無料モデル、ゼロコストでスタート
日常開発補助	⭐⭐⭐⭐⭐	Session並列 + Timelineロールバック
複雑なプロジェクト開発	⭐⭐⭐⭐⭐	OMOプラグインマルチエージェント協調
オープンソースプロジェクト保守	⭐⭐⭐⭐	GitHub Actionsクラウド自動化
Skills/MCP練習	⭐⭐⭐⭐⭐	Claude Codeエコシステムと完全互換

十、実践記録：Oh My OpenAgentのインストール

以下は、Oh My OpenAgent（旧Oh My Open Code）のインストールを個人的にテストした完全な会話記録で、環境はWindows + PowerShellです。

環境チェック

1
2

opencode --version
# 出力: 1.14.39

インストールプロセス

OpenCodeの会話で直接AIに伝えます：

“Install and configure oh-my-openagent by following the instructions here: https://raw.githubusercontent.com/code-yeongyu/oh-my-openagent/refs/heads/dev/docs/guide/installation.md"

AIがまずモデルのサブスクリプション状況を確認します：

サブスクリプション	私の状況
Claude Pro/Max	❌ なし
OpenAI / ChatGPT Plus	❌ なし
Gemini	❌ なし
GitHub Copilot	✅ 学生認証版
OpenCode Zen	✅ 無料利用可
Z.ai Coding Plan	❌ なし
OpenCode Go	❌ なし
Kimi for Coding	❌ なし
Vercel AI Gateway	❌ なし

⚠️ AIは「Without a Claude subscription, the Sisyphus agent might not work idealally」と表示しますが、GitHub Copilotがフォールバックモデルとして自動的に引き継ぎます。

サブスクリプション確認後、AIが自動的にインストールコマンドを実行：

bunx oh-my-openagent install --no-tui \
  --claude=no --openai=no --gemini=no \
  --copilot=yes --opencode-zen=yes \
  --zai-coding-plan=no --opencode-go=no \
  --kimi-for-coding=no --vercel-ai-gateway=no

インストール成功の出力：

[1/4] Checking OpenCode installation...
[OK] OpenCode 1.14.39 detected
[2/4] Adding oh-my-openagent plugin...
[OK] Plugin added -> C:¥Users¥<ユーザー名>¥.config¥opencode¥opencode.json

インストール後の設定ファイル

メイン設定ファイル ~/.config/opencode/opencode.json：

{
  "plugin": [
    "oh-my-openagent@latest"
  ]
}

エージェントモデル設定 ~/.config/opencode/oh-my-openagent.json：

AIがGitHub Copilotサブスクリプションに基づいて自動的にモデルを割り当て：

エージェント	割り当てモデル
Sisyphus（メインエージェント）	`github-copilot/claude-opus-4.7`
Oracle（予言者）	`github-copilot/gpt-5.5` (medium)
その他のエージェント	Copilot利用可能モデルから自動選択

認証設定

インストール完了後、手動でGitHub Copilotを認証する必要があります：

`1`	`opencode auth login`

インタラクティブ手順：

上下キーでGitHub Copilotを選択
Enterキーで確認
ブラウザが自動的に開き、GitHub学生アカウントにログイン
認証完了、ターミナルに認証成功と表示

エージェントモデルを再設定するには？

方法1：AIに直接伝える

“Sisyphusのモデルをclaude-sonnet-4.6に変更して” “Oracleはgpt-5.5を使って”

方法2：設定ファイルを手動編集

~/.config/opencode/oh-my-openagent.jsonの対応するエージェントのmodelフィールドを直接変更。

追加設定：OpenCode Zenをフォールバックとして追加

インストール時に無料のOpenCode Zenを忘れた場合（--opencode-zen=no）、後からOpenCodeの新しい会話でAIに修正してもらいます：

“実は無料のOpenCode Zenもあるんだけど、もうGitHub Copilotにはログインしてるから、修正して”

AIの最初の試みではOpenCode Zenがプライマリに設定され（opencode/claude-opus-4-7）、GitHub Copilotがフォールバックになりました。実際のニーズはその逆です：

“違う、GitHub Copilotをプライマリにして、OpenCode Zenの無料モデルをフォールバックにして”

AIが修正した後の最終設定戦略：

1
2

プライマリモデル: github-copilot/*     （有料、優先使用）
フォールバックモデル: opencode/*       （無料クレジット、Copilot利用不可時に自動切り替え）

主要設定スニペット（Sisyphusを例に）：

{
  "sisyphus": {
    "model": "github-copilot/claude-opus-4-7",
    "fallback_models": [
      { "model": "opencode/claude-opus-4-7" },
      { "model": "opencode/gpt-5.5" }
    ]
  }
}

💡 ヒント：設定要件を説明する際、プライマリ/フォールバックの関係を明確に——「XXをプライマリ、YYをフォールバックに」——と伝え、AIが逆にしないようにしましょう。

使用ヒント

インストール完了後、ターミナルでopencodeと入力して開始：

プロンプトにultraworkまたはulwを含めると自動並列処理がトリガー
Tabを押してPrometheus（プランナー）モードに入
/start-workを実行して完全なオーケストレーションを実行

付録：トラブルシューティング

問題	解決策
`doctor`コマンドタイムアウト（30s）	一部のチェックがハングする場合、`--verbose`を追加してトラブルシューティング、またはスキップしても使用に影響なし
PowerShellでの`if`構文エラー	OpenCodeのbashコマンドはPowerShellで構文変換が必要
Sisyphusの非Claudeモデルでのパフォーマンス低下	既知の制限、Claudeサブスクリプションがあると最良の体験
AIがプライマリ/フォールバックモデルを逆にする	プライマリ/フォールバックの関係を明確に説明：「XXをプライマリ、YYをフォールバックに」、「YYを追加して」だけは言わない

📚 参考元：技術エビ - OpenCode詳細攻略、Oh My OpenAgentインストールガイド

OpenCode 初級者から上級者へ：並列スケジューリングと使用テクニック完全ガイド

Thu, 30 Apr 2026 02:00:15 +0800

📋 目次

📌 コアポイントまとめ

機能	一言説明
Session並列	OpenCodeのキラー機能、複数タスクが同時に実行、干渉なし、効率2倍
Ultra Workモード	`ULW`を入力、メインエージェントがタスクを自動分解、サブエージェントを並列配置
@でエージェント指定	フロントエンド得意な人にフロントエンドを、アーキテクチャ得意な人にレビューを
Timelineタイムマシン	いつでも任意の履歴ポイントにロールバック、大胆に試してコストゼロ
Ralph Loop	AIに数時間ループで作業させ、極めて困難なタスクに挑戦

一、Session並列：AIに複数のタスクを同時にやらせる

これは他のAIプログラミングツールと比較したOpenCodeの最大の差別化優位性です。従来のツールは直列処理のみ——1つのタスクが完了してから次のタスクを開始できます。OpenCodeは複数のSessionを同時に開始でき、互いに干渉しません。

基本操作

/new              # 新しいSessionを作成
/sessions         # すべてのSessionの状態を確認（回転シンボル = 実行中）
/session <id>     # 指定のSessionに切り替え
/session prev     # 前のSessionに戻る
``### 実践シナリオ

「お絵かきおたずね」ゲームを開発しており、2つの独立した要件があるとします：

- **要件A**：タイマーを追加、最初のストロークでカウント開始、20秒超過でゲームオーバー
- **要件B**：ブラシの色を調整可能に

#### 従来の方法

Aを完了してからBへ → 要件Bは**5-10分**待たされる。

#### OpenCodeの方法

要件Aを入力、AIが作業開始
/newと入力、新しいSessionを作成
要件Bを入力、AIが作業開始
/sessionsで進捗確認：

Session 1 ◐ タイマーロジック追加中… Session 2 ◐ カラーピッカー追加中…


> 2つの要件が完全に並列開発、総所要時間が**15分から8分に短縮**。

### 注意事項

- ⚠️ Session間は完全に隔離、同一ファイルの変更は競合する可能性、異なるモジュールに割り当てることを推奨
- ⚠️ バックグラウンドSessionは完了を自動通知しない、手動で`/sessions`を確認
- ✅ いつでも`/new`で3つ目、4つ目のSessionを開けます——数に制限なし

---

## 二、Ultra Work：ワンクリックでAIプログラミングチームを召集

Session並列が「マニュアル車」なら、Ultra Workは「**フル自動運転**」です。魔法の言葉を入力すると、AIが自動的にタスクを分割し、最適なエージェントに割り当て、並列実行します。

### トリガーメソッド

プロンプトに以下のいずれかのキーワードを含めます：

ULW ultrawork Ultra Work

1
2


### 仕組み

あなたの要件：ペットショップウェブサイトを作って │ ▼ ┌─────────────────────────────┐ │ シーシュポス（メインエージェント） │ │ 1. タスク分解 → Todo List │ │ 2. サブタスクの割り当て │ └──────┬──────────┬───────────┘ │ │ ┌────▼───┐ ┌───▼────┐ ┌────────▼────┐ │ 予言者 │ │フロント │ │ドキュメント │ │アーキテク│ │UI開発 │ │ライター │ └────────┘ └────────┘ └─────────────┘ │ │ │ └──────────┴────────────┘ │ ▼ プロジェクト完成納品


1. Todo Listに自動分割
2. 3つのバックグラウンドタスクを並列実行
3. メインエージェントが中央からオーケストレーション
4. 最終的に完全なプロジェクトを納品

### いつ使う？

| シナリオ | 適用 | 説明 |
|----------|------|------|
| ゼロから完全なプロジェクト作成 | ✅ 最適 | フロントエンド、バックエンド、ドキュメントを自動分割 |
| マルチモジュール並列開発 | ✅ 最適 | 各エージェントの役割が明確 |
| 単一ファイルの小さな変更 | ❌ 非推奨 | オーバーキルで、かえって遅い |
| シンプルなバグ修正 | ❌ 非推奨 | 通常のチャットの方が速い |

> 💡 複雑度が高いほど、Ultra Workの価値が増します。シンプルなタスクはスケジューリングのオーバーヘッドで遅くなります。

### 実際の効果

Ultra Workモードでペットショップウェブサイトを作成：

- ✅ 画像素材なしで、絵文字を装飾として使用
- ✅ クリーンなインターフェース、スムーズなインタラクション、完全なアニメーション

---

## 三、@でエージェント指定：プロにプロの仕事させる

Oh My OpenAgent（OMO）をインストールすると、**AIプログラミングチーム**が手に入ります。`@`で特定のエージェントを指名できます。

### エージェント能力表

| エージェント | 得意分野 | 最適モデル | 使用例 |
|-------------|----------|-----------|--------|
| 🧠 シーシュポス | 全体計画、タスクスケジューリング | Claude Opus | 複雑な多ステップタスク |
| 🔮 予言者 | アーキテクチャ設計、コードレビュー | GPT 5.5 | プロジェクト構造設計 |
| 🎨 フロントエンドエンジニア | UI開発、ページレイアウト | Gemini 3 Pro | レスポンシブレイアウト最適化 |
| 🔍 探索者 | ウェブ検索、リサーチ | MiniMax | 最新APIドキュメント検索 |
| 📚 司書 | 文献調査、ドキュメント検索 | — | オープンソースプロジェクトのソースコード整理 |
| 📝 ドキュメントライター | README、コメント生成 | — | プロジェクトドキュメント生成 |
| 🖼️ マルチモーダル | 画像/PDF理解 | — | デザインモックからコード作成 |

### 使用例

@フロントエンドエンジニアこのログインページをレスポンシブレイアウトに変えて、モバイルでも良く見えるようにして

@予言者 src/service/ディレクトリのコードをレビューして、潜在的なパフォーマンス問題を見つけて

@探索者 React 19のServer Componentsの最新の使い方を調べて

@ドキュメントライタープロジェクト全体のAPIドキュメントを生成して


### メインエージェントの切り替え

`Tab`キーを押すと現在の会話のメインエージェントを切り替えられます——特定のロールを長時間使用するのに適しています。

---

## 四、Timelineタイムマシン：自由に試して、いつでもロールバック

プログラミングで最も怖いことは？大量のコードを変更して、アプローチが間違っていることに気づき、戻れないこと。**Timelineはあなたのアンドゥボタン**です。

### 基本的な使い方

```bash
/timeline    # 現在のSessionのすべての会話ステップを一覧表示

任意のノードを選択：

Revert：コードとチャットコンテンツをそのポイントにロールバック、何も起こらなかったかのように
View：当時AIが行った変更を確認

実践シナリオ

1
2
3

1. AIにモジュールをリファクタリングさせた → 結果が不満足
2. /timeline → リファクタリング前のノードを選択 → Revert
3. コードがリファクタリング前に戻る、別のアプローチで再挑戦

使用テクニック

🕐 ステージングタスクを完了したら、そのノードを心に留めておく（何回目の会話か）
🕐 大胆にラディカルなアプローチを試す——ワンクリックロールバックでいつでも戻れる
🕐 2つのアプローチを比較：アプローチAにRevert → 結果を確認 → アプローチBにRevert → 比較

これがプログラミング版の「セーブ/ロード」——あらゆる可能性を恐れずに探索できます。

五、Ralph Loop：AIに最後までやり遂げさせる

このモードはAIに継続的にループ作業をさせ、タスクが本当に完了するまで続けます。反復的な改善が必要な難しいタスクに最適です。

起動方法

`1`	`/ralph-loop`

適用シナリオ

"最新のSpring Boot 4標準を使用してプロジェクト全体をリファクタリングし、すべてのテストケースがパスするまで"

"src/配下のすべてのファイルのコード規範を1つずつチェックし、すべての違反項目を修正"

"プロジェクトに完全なユニットテストを追加し、カバレッジが90%に達するまで"

Ultra Workとの違い

比較項目	Ultra Work	Ralph Loop
メカニズム	並列分割、マルチエージェント協調	直列ループ、継続的イテレーション
最適な場面	ゼロからの構築、マルチモジュールプロジェクト	リファクタリング、修正、目標達成タスク
所要時間	数分から十数分	数時間の場合も
終了ポイント	タスク分解完了	終了条件の達成

⚠️ Ralph Loopは長時間実行される場合があります——APIクォータの消費に注意。

六、日常スピードアップのコツ

1. `/compact`でコンテキストを節約

AIとたくさん会話して、コンテキストウィンドウがいっぱいになりかけた時：

`1`	`/compact`

AIがこれまでの会話を要約にまとめ、作業を続けるためのスペースを解放。新しい会話を開いてコンテキストを失う必要はありません。

2. `/init`でAIに新しいプロジェクトを素早く理解させる

新しいプロジェクトに入った時、まずAIにコードを読ませます：

/init

AIがプロジェクト全体をスキャンし、agents.mdをシステムプロンプトとして生成。以降のすべての会話がこの理解に基づくため、効率が大幅に向上。

3. Shareでプログラミングプロセスを共有

1
2
3

/share      # 完全な会話とコード変更を表示する共有リンクを生成
/unshare    # 共有を停止、リンクが無効に
/export     # 会話履歴をファイルとしてエクスポート

適した場面：

同僚にAIでどう問題を解決したかを示す
トラブルシューティングの記録をチームの参考として
ブログ記事の素材として

4. 利用可能なモデルを確認

`1`	`/models # freeマーク付きは無料モデル`

GLM-4.7とMiniMax-2.1はプログラミング能力が良好で、軽量タスクに最適。

5. コードの素早い貼り付け（VS Codeプラグイン）

VS Codeでコードスニペットを選択 → Ctrl + Alt + K → OpenCodeダイアログに直接貼り付け。

コピーペーストの切り替えコストを省き、フロー状態を維持。

七、初心者おすすめワークフロー

┌─────────────────────────────────────────────┐
│                 新しい要件をもらう              │
└──────────────────┬──────────────────────────┘
                   │
                   ▼
          ┌────────────────┐
          │ シンプル？       │
          └───┬────────┬───┘
              │ はい     │ いいえ（複雑/マルチモジュール）
              ▼         ▼
    ┌─────────────┐  ┌─────────────────┐
    │通常のチャット │  │ULWを入力して    │
    │で対応        │  │Ultra Workモード │
    └─────────────┘  │をトリガー       │
                     └────────┬────────┘
                              │
                   ┌──────────▼──────────┐
                   │複数の独立した       │
                   │サブタスクがある？    │
                   └───┬──────────┬──────┘
                       │ はい      │ いいえ
                       ▼           ▼
              ┌─────────────┐ ┌──────────────┐
              │/newで複数    │ │Ultra Workが  │
              │Session並列   │ │自動完了するの │
              └──────┬──────┘ │を待つ         │
                     │        └──────────────┘
                     ▼
              ┌─────────────┐
              │/sessions     │
              │すべての進捗を│
              │確認          │
              └──────┬──────┘
                     │
                     ▼
              ┌─────────────┐
              │方向が違う？   │
              └───┬─────────┘
                  │
                  ▼
              ┌─────────────┐
              │/timeline →   │
              │Revertで戻る  │
              └─────────────┘

一言まとめ

小さなタスクは直接チャット、大きなタスクはULW、並列はSession、間違いはTimelineでロールバック、粘る時はRalph Loop。

八、実際の事例

Oh My OpenAgentのインストール完了後、エージェントモデルの設定を調整——GitHub Copilotをプライマリに、無料のOpenCode Zenをフォールバックにしたいと思いました。

最初の試み

OpenCodeの会話で直接言いました：

“実は無料のOpenCode Zenもあるんだけど、もうGitHub Copilotにはログインしてるから、修正して”

AIがOpenCode Zenをプライマリに設定——プライマリ/セカンダリの関係が不明確だったため。❌

修正

“違う、GitHub Copilotをプライマリにして、OpenCode Zenの無料モデルをフォールバックにして”

AIがすぐに修正し、oh-my-openagent.jsonを更新、すべてのエージェントがgithub-copilot/*をプライマリ、opencode/*をフォールバックに。✅

💡 教訓：AIに要件を説明する際、プライマリ/フォールバックの関係を必ず明確に——「XXをプライマリ、YYをフォールバックに」、「YYを追加して」だけは言わない。

📚 参考元：OpenCode完全ガイド、Oh My OpenAgent 📅 ノート生成日：2026-05-07

5分でClaude CodeをインストールしDeepSeekに接続する

Sun, 26 Apr 2026 02:00:15 +0800

概要

Claude Code は Anthropic がリリースしたコマンドライン AI プログラミングアシスタントで、さまざまな Skills プラグインが内蔵されています。異なる組み合わせによって、AI 単独では実現できない多くのことができます。国産大モデル DeepSeek V4 に接続すれば、利用コストを大幅に削減できます。

主な用途：

個人ナレッジベースの構築、学習ノートの自動整理
業界情報の定期収集と原稿への整理
各種ソーシャルメディアプラットフォームへの自動公開

ステップ1：実行環境のインストール

1.1 Node.js のインストール

Node.js 公式サイトから Windows インストーラー（.msi）をダウンロードし、ダブルクリックしてインストールします。

インストール確認：

1
2

node -v
npm -v

1.2 npm 国内ミラーの設定

`1`	`npm config set registry https://registry.npmmirror.com/`

💡 なぜミラーを設定するのか？

デフォルトの npm ソースは海外にあるため、ダウンロード速度が非常に遅くなります。国内ミラーを設定すると、インストール速度が10倍以上向上します。

1.3 Git のインストール

Git 公式サイトから対応バージョンのインストーラーをダウンロードし、インストールします。

インストール確認：

git -v

1.4 CC-Switch のインストール

CC-Switch はサードパーティモデルを Claude Code に接続するために使用します。

GitHub Release ページから対応バージョン（例：Windows MSI）をダウンロードし、ダブルクリックでインストールします。

ステップ2：Claude Code のインストール

`1`	`npm install -g @anthropic-ai/claude-code`

確認：

`1`	`claude --version`

ログインをスキップ（サードパーティ API 使用）

Claude Code を一度起動してから閉じる
ユーザーディレクトリ内の .claude.json ファイルを見つける
以下のフィールドを追加します（前のフィールドの末尾にカンマが必要です）：

`1`	`"hasCompletedOnboarding": true`

claude を再実行して起動し、現在のフォルダを信頼することを選択

⚠️ よくあるエラー

前のフィールドの末尾にカンマを追加し忘れると、JSON 解析エラーが発生し、Claude Code が起動できなくなります。

ステップ3：DeepSeek の接続

3.1 API Key の取得

DeepSeek 開放プラットフォームを開き、登録してログイン
アカウントに残高があることを確認
右側の API Keys → API Key を作成 → コピーして保存（閉じると再度閲覧できません）

🚨 秘密鍵のセキュリティ

秘密鍵を他人と共有しないでください。残高が消費されます。

3.2 CC-Switch の設定

CC-Switch を開き、右上の + ボタンをクリック
モデルプリセットで DeepSeek を選択
API Key を入力
モデル名を以下に統一変更：deepseek-v4-pro[1m]（コンテキスト 1M、Claude Code はデフォルトで 128K）
追加をクリック

3.3 モデルの検証

Claude Code のダイアログボックスで以下を入力：

/model

現在利用可能なモデルを確認したり、直接「現在どのモデルですか」と聞いて接続成功を確認できます。

ステップ4：実践例

デスクトップに新しいフォルダを作成
アドレスバーに CMD と入力して Enter
claude を実行して起動し、現在のフォルダを信頼することを選択
要件を入力：HTML + JS + CSS で Todo アプリを作成して
実行中にツール権限の要求があります — Yes を選択
完了後、ページを開いてプレビューするよう依頼

💡 ヒント

要件を中国語で直接記述できます。Claude Code は中国語と英語の混合入力をサポートしています。

コマンド早見表

操作	コマンド
Node バージョン確認	`node -v`
npm バージョン確認	`npm -v`
npm 国内ミラー	`npm config set registry https://registry.npmmirror.com/`
Git バージョン確認	`git -v`
Claude Code インストール	`npm install -g @anthropic-ai/claude-code`
Claude Code バージョン確認	`claude --version`
Claude Code 起動	`claude`
モデル切り替え	`/model`

よくある質問

claude を実行後にコマンドが見つからないと表示される？

Node.js が正常にインストールされているか（node -v）、npm のグローバルパスがシステム PATH に含まれているか確認してください。

起動後に Anthropic アカウントへのログインを求められる？

.claude.json の hasCompletedOnboarding が正しく設定されていません。ステップ2に戻って確認してください。

モデル呼び出しエラー / 応答なし？

DeepSeek アカウントの残高が十分かどうか、CC-Switch の API Key が正しく入力されているか確認してください。

Claude CodeをインストールしてDeepSeekに接続する（初心者向けガイド）

Sun, 26 Apr 2026 02:00:15 +0800

概要

このチュートリアルは誰向け？

このチュートリアルはコンピューターの知識がまったくないユーザー向けです。「コマンドライン」とは何か、「環境変数」とは何か、「バージョン管理」とは何かを知っている必要はありません——各ステップを最も細かいレベルまで分解し、どこをクリックするか、何をクリックするか、何を入力するか、成功したら何が表示されるかを説明します。

何をインストールするのか？なぜ必要なのか？

始める前に、インストールする必要がある 3つのもの と、それぞれの役割を理解しておきましょう：

#	ソフトウェア	一言での説明	なぜ必要なのか
1	Node.js	コンピューターがJavaScriptプログラムを実行するための「エンジン」	Claude Code はJavaScriptで書かれているため、これがないと動作しない
2	Claude Code	コンピューターの端末に常駐するAIプログラミングアシスタント	これが最終的に使いたいものです
3	CC-Switch	Claude Code の「脳」を交換する小さなツール	Claude Code の高価な公式モデルから安価な DeepSeek に切り替える

全体のプロセスには約 10〜15分 かかります。順番に一つずつ進めてください。飛ばさないでください。

📌 前提条件

Windows パソコン（Windows 10/11）とインターネット接続が必要です。

Node.js のインストール

Node.js とは？

Node.js = コンピューターが Claude Code を実行するためのランタイム環境です。完全に無料です。ソフトウェアを実行するためにWindowsを先にインストールする必要があるのと同じように、Claude Code を実行するには先に Node.js をインストールする必要があります。

Node.js のダウンロード

ステップ1：ブラウザを開く

お使いのブラウザ（Chrome、Edge、Firefoxのいずれか）を開きます。

ステップ2：Node.js 公式サイトにアクセス

ブラウザのアドレスバー（上部のURLを入力する長いバー）に以下のURLを入力し、Enterキーを押します：

`1`	`https://nodejs.org/`

ステップ3：ダウンロードボタンを見つける

ページが開いたら、中央に2つの大きなボタンが表示されます：

左側のボタンには LTS（推奨バージョン番号、例：22.16.0 LTS）と表示されています
右側のボタンには Current と表示されています

左側の LTS ボタンをクリックすると、ブラウザが自動的に .msi ファイルのダウンロードを開始します。

ステップ4：ダウンロードしたファイルを見つける

ダウンロードが完了したら（通常数秒）、2つの方法でファイルを見つけることができます：

方法1：ブラウザの右上隅にあるダウンロードリスト（通常は下向き矢印 ↓ のアイコン）をクリックし、リストからダウンロードしたファイルを見つけます。ファイル名は node-v22.16.0-x64.msi のようなものです
方法2：エクスプローラー（フォルダを閲覧するウィンドウ）を開き、左側のダウンロードフォルダを見つけると、その中にファイルがあります

Node.js のインストール

ステップ1：インストールファイルをダブルクリック

ダウンロードフォルダで、node-v22.16.0-x64.msi（バージョン番号は若干異なる場合があります）を見つけてダブルクリックします。

ステップ2：ようこそ画面

Node.js Setup（Node.js インストールウィザード）というタイトルのウィンドウが表示されます。下部の Next（次へ）ボタンをクリックします。

ステップ3：ライセンス契約

ウィンドウに長い英語のライセンス条項が表示されます。

左下隅のチェックボックスをオンにします：I accept the terms in the License Agreement（ライセンス契約の条項に同意します）
Next をクリック

ステップ4：インストール場所（⚠️ 重要！パスを変更する必要があります）

これは Node.js がコンピューターのどこにインストールされるかを示しています。

デフォルトのパスは：C:\Program Files\nodejs\

📌 D ドライブに移動しましょう！

D ドライブへのインストールをお勧めします。理由：

C ドライブはシステムドライブで、多くのものを入れるとコンピューターが遅くなります

D ドライブはソフトウェア専用で、Windowsを再インストールしてもDドライブのデータはそのまま残ります

管理と検索が簡単です

変更手順：

パス入力ボックスをクリックし、すべて選択（Ctrl + Aを押す）してから削除します
新しいパスを入力します：
1

D:\nodejs\
Next をクリック

💡 注意

パスに中国語やスペースを含めないでください。含めるとインストールエラーの原因になる可能性があります。

ステップ5：カスタムセットアップ

ツリー状のチェックボックスリスト（Custom Setup）が表示されます。

何も変更せずに、Next をクリックします。

ステップ6：インストールの確認

Install（インストール）ボタンをクリックします。セキュリティプロンプトが表示されたら、はいをクリックします。

ステップ7：インストールを待つ

プログレスバーが完了します。通常 10〜30秒 しかかかりません。

ステップ8：完了

Finish（完了）をクリックします。

Node.js のインストールが完了しました！

Node.js と npm（Node.js のパッケージマネージャー、「アプリストア」と考えてください）の両方がインストールされました。

Node.js が正しくインストールされたか確認

インストール後、確認する必要があります——買い物の後に漏れがないかチェックするのと同じです。

ステップ1：コマンドプロンプト（CMD）を開く

「コマンドプロンプト」とは？

コマンドプロンプト（CMD とも呼ばれます）は、黒い背景に白い文字のウィンドウで、テキストコマンドを入力してコンピューターに操作を実行させることができます。今後よく使うことになります。

開き方（どちらかを選択）：

方法1（推奨）：
1. キーボードの Win キー（左下隅、Windowsロゴのキー）を押し続けます
2. そのまま R キーを押します
3. 「ファイル名を指定して実行」という小さなウィンドウが表示されたら、cmd と入力します
4. OK をクリックするか、Enterキーを押します
方法2：
1. デスクトップの左下隅のスタートメニュー（Windowsアイコン）をクリックします
2. 検索ボックスに cmd と入力します
3. 検索結果の コマンドプロンプト をクリックします

ステップ2：確認コマンドを入力

開いた黒いウィンドウに以下を入力し（入力すると画面に文字が表示されます）、Enterキーを押します：

node -v

ウィンドウに v22.16.0 のような内容が表示されたら、Node.js は正常にインストールされています ✅

続けて以下のコマンドを入力し、Enterキーを押します：

npm -v

10.9.2 のようなバージョン番号が表示されたら、npm も正常です ✅

⚠️ 「’node’ は内部コマンドまたは外部コマンドとして認識されていません」と表示される？

環境変数が正しく設定されていません。以下の 1.4 環境変数の設定方法 を参照してください。

環境変数の設定方法

環境変数（PATH）とは？

PATH はコンピューターの「アドレス帳」と考えることができます。コマンドプロンプトで node と入力すると、コンピューターは node がどこにインストールされているかわからず、PATHという「アドレス帳」で検索します。PATH に Node.js のインストールディレクトリがない場合、コンピューターはそれを見つけられず、「’node’ は認識されていません」と報告します。

通常、Node.js インストーラーは自動的に自分自身を PATH に追加します。しかし、何か問題が発生した場合は、手動で追加する必要があります。

Node.js が既に PATH にあるか確認

Win + R を押し、sysdm.cpl と入力して Enter
上部の 詳細設定 タブをクリック
下部の 環境変数 ボタンをクリック
下部の システム環境変数 リストで、Path 行を見つけて選択し、編集をクリック

表示されたリストで、以下のようなエントリがあるか確認します：

`1`	`D:\nodejs\`

💡 パスはインストール先と一致している必要があります

もし D:\Software\nodejs\ にインストールした場合、ここにも D:\Software\nodejs\ と表示されるはずです。

このエントリがある場合：PATH は問題ありませんが、それでもエラーが発生する場合は、現在開いているすべてのコマンドプロンプトウィンドウを閉じて、新しいものを開いてから再試行してください。

このエントリがない場合：以下の手順で手動追加してください。

Node.js を PATH に手動追加

今開いている 環境変数の編集 ウィンドウで、新規をクリック
Node.js のインストールパスを入力：
1

D:\nodejs\
OK をクリック
OK をクリックして環境変数ウィンドウを閉じる
OK をクリックしてシステムのプロパティウィンドウを閉じる
開いているすべてのコマンドプロンプトウィンドウを閉じて、新しいものを開く（古いウィンドウは新しい設定を認識しません）
再度 node -v と入力して確認

npm 国内ミラーの設定（強く推奨）

💡 なぜ設定するのか？

デフォルトでは、npm は海外からソフトウェアをダウンロードするため、速度が非常に遅くなります。国内ミラーを設定すると、ダウンロード速度が 10倍以上 向上します。

コマンドプロンプトで以下のコマンドを入力し、Enterキーを押します：

`1`	`npm config set registry https://registry.npmmirror.com/`

以下のコマンドで確認し、https://registry.npmmirror.com/ が表示されれば成功です ✅：

`1`	`npm config get registry`

ステップ1完了！

Node.js をインストールし、国内ミラーを設定しました。次は Claude Code をインストールします。

Claude Code のインストール

npm 経由で Claude Code をインストール

コマンドプロンプトを開き（まだ開いていない場合）、以下のコマンドを入力して Enterキーを押します：

`1`	`npm install -g @anthropic-ai/claude-code`

インストールが完了するまで待ちます（通常 1〜3分）。画面にテキストがスクロールしますが、最後にエラーがなければ問題ありません。

インストールの確認

以下を入力：

`1`	`claude --version`

Enterキーを押します。バージョン番号（例：1.0.x）が表示されれば、インストール成功です ✅

初回起動（ログインをスキップ）

なぜログインをスキップするのか？

Claude Code は公式に Anthropic アカウントでログインすることを要求します。しかし、Anthropic のサービスは海外のクレジットカードでの支払いが必要で、国内ユーザーには不便です。

私たちの方法：まずログインをスキップし、次に CC-Switch ツールを使って国産の DeepSeek モデルに接続します。これによりAnthropic アカウントは不要になり、コストも大幅に低くなります。

ステップ1：Claude Code を一度起動

コマンドプロンプトで以下を入力：

claude

Enterキーを押します。Claude Code が起動し、紹介情報やログイン要求が表示される場合があります。

無視して、コマンドプロンプトウィンドウを閉じてください（右上隅の × をクリック）。

ステップ2：設定ファイルを見つける

Win + R を押します（WinキーとRキーを同時に）
「ファイル名を指定して実行」ウィンドウに %USERPROFILE% と入力
OK をクリックするか Enterキーを押す
開くと、さまざまなファイルやサブフォルダがあるフォルダが表示されます

ステップ3：.claude.json ファイルを見つける

このフォルダで、.claude.json という名前のファイルを探します。

⚠️ このファイルが見つからない？

.claude.json が見つからない場合、考えられる理由：

ファイル拡張子が非表示になっています——フォルダウィンドウの上部で、表示 → ファイル名拡張子 と 隠しファイル にチェックを入れる

Claude Code がまだこのファイルを作成していません——ステップ1に戻って、少なくとも一度は Claude Code を起動したことを確認してください

場合によっては、このファイルは .claude フォルダ内にあり、ファイル名が settings.json になっていることがあります

ステップ4：メモ帳で設定ファイルを開く

.claude.json ファイルを右クリック
ポップアップメニューで プログラムから開く を選択
メモ帳（Notepad）を選択
- メモ帳がリストにない場合は、別のプログラムを選択 → リストから メモ帳 を見つける → OK をクリック

ステップ5：設定ファイルを編集

開くと、次のような内容が表示されます（具体的な内容は異なる場合があります）：

{
  "someField": "someValue",
  "anotherField": "anotherValue"
}

最後の } の前に "hasCompletedOnboarding": true という行を追加する必要があります。

編集後は次のようになります：

{
  "someField": "someValue",
  "anotherField": "anotherValue",
  "hasCompletedOnboarding": true
}

📌 ⚠️ 3つの重要な詳細——間違えるとエラーになります！

カンマを追加：hasCompletedOnboarding の前の行の末尾に英語のカンマ , を追加

英語の引用符を使用：引用符は英語の " でなければならず、中国語の " は使えません

true は小文字：true と書く必要があり、True は使えません

ステップ6：ファイルを保存

Ctrl + S を押して保存（または左上隅の ファイル → 保存をクリック）
メモ帳ウィンドウを閉じる

ステップ7：ログインスキップが成功したか確認

コマンドプロンプトを再度開く（Win + R → cmd → Enter）
claude と入力して Enterキーを押す
Claude Code のメインインターフェースに直接入った場合（ログイン要求がない場合）、ログインスキップ成功です ✅

ステップ2完了！

Claude Code がインストールされ、ログインがスキップされました。次に CC-Switch をインストールして DeepSeek に接続します。

CC-Switch（モデル切り替えツール）のインストール

CC-Switch とは？

CC-Switch は、手動で設定ファイルを変更することなく、Claude Code の「脳」を公式モデルから DeepSeek に切り替えることができるビジュアルツールです。マウスでクリックするだけです。

CC-Switch のダウンロード

ステップ1：ダウンロードページを開く

ブラウザのアドレスバーに以下のURLを入力し、Enterキーを押します：

`1`	`https://github.com/cc-switch/cc-switch/releases`

ステップ2：最新バージョンを見つける

ページが開いたら、緑色の Latest ラベルが付いたバージョンを見つけてクリックして展開します。

ステップ3：ダウンロードリンクを見つける

展開したら下にスクロールし、Assets という単語を見つけて（小さな矢印 ▾ が隣にある場合があります）、クリックして展開します。

.msi で終わるファイル（Windows インストーラー）を見つけて、ファイル名をクリックしてダウンロードを開始します。

💡 どのファイルを選ぶ？

Windows パソコン：x64.msi で終わるファイルを選択

Mac パソコン：.dmg で終わるファイルを選択

CC-Switch のインストール

ステップ1：インストーラーをダブルクリック

ダウンロードフォルダで、ダウンロードした .msi ファイルをダブルクリックします。セキュリティプロンプトが表示されたら、実行または 詳細情報 → 実行をクリックします。

ステップ2：プロンプトに従ってインストール

インストールウィザードは Node.js と同様です：

Next をクリック
契約に同意 → Next
デフォルトのインストールパスを維持 → Next
Install をクリック
インストール完了を待つ → Finish

ステップ3完了！

CC-Switch がインストールされました。次に DeepSeek API Key を取得します。

DeepSeek API Key の取得

DeepSeek とは？

国産の大規模言語モデルで、強力なパフォーマンスと低価格（日常使用で月額約10〜30元）が特徴です。接続することで使用コストを大幅に削減できます。

API Key とは？

API Key は DeepSeek の AI サービスにアクセスするための鍵です。使用するたびにアカウント残高から差し引かれます。必要なのは：① アカウント登録 ② 入金 ③ Key の作成

DeepSeek アカウントの登録

ステップ1：DeepSeek 開放プラットフォームを開く

ブラウザのアドレスバーに以下を入力：

`1`	`https://platform.deepseek.com/`

Enterキーを押します。

💡 注意

これは DeepSeek の開発者プラットフォーム（platform.deepseek.com）であり、チャットサイト（chat.deepseek.com）ではありません。混同しないでください。

ステップ2：登録 / ログイン

ページの右上隅に ログイン / 登録ボタンがあります
登録（アカウントがない場合）または ログイン（既にアカウントがある場合）をクリック
画面の指示に従って情報を入力し、登録を完了

残高の入金

💡 費用の参考

日常使用では月額わずか 10〜30元 程度です。初回は 20〜50元 の入金をお勧めします。

ログイン後、左側のメニューで入金（または ウォレット / Billing）を見つけてクリック
入金額を選択し、支払い方法を選択して支払いを完了
アカウント残高が0より大きいことを確認（残高がないとAPIは使えません）

API Key の作成

ステップ1：API Keys ページへ

ログイン後、左側のメニューで API Keys を見つけてクリック
API Keys 管理ページが表示されます

ステップ2：新しい API Key を作成

API Key を作成 ボタンをクリック
Key の名前を入力するダイアログが表示されます
- 自由に入力できます——claude-code、my-key、test など何でも構いません
- この名前は自分用の参照で、異なるキーを区別するためのものです
確認または作成をクリック

ステップ3：API Key をコピー（⚠️ 最も重要なステップ！）

作成後、ページに API Key が表示されます。形式は次のようになります：

`1`	`sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`

⚠️ この Key は一度しか表示されません！

ダイアログを閉じると二度と見ることができません。すぐにメモ帳やWeChatファイル転送にコピーして保存してください。

🚨 セキュリティ注意事項

API Key はアカウントのパスワードと同等です。誰とも共有しないでください。公開の場に投稿しないでください。漏洩が疑われる場合は、すぐに削除して新しいものを作成してください。

ステップ4完了！

DeepSeek の API Key を取得しました。最後のステップとして、このキーを CC-Switch に渡して接続を完了します。

DeepSeek に接続するための CC-Switch 設定

CC-Switch を開く

デスクトップまたはスタートメニューで CC-Switch のアイコンを見つけ、ダブルクリックして開きます。

DeepSeek 設定の追加

ステップ1：追加ボタンをクリック

CC-Switch が開いたら、右上隅の + ボタン（プラス記号）を見つけてクリックします。

ステップ2：設定情報を入力

をクリックすると設定パネルが表示されます。以下を入力します：

① モデルプリセット（Model Preset）：DeepSeek を選択

② API Key：先ほどコピーした DeepSeek API Key を貼り付け（先頭と末尾にスペースがないことを確認）

③ モデル名（Model Name）：入力ボックスの内容を削除して以下を入力：

`1`	`deepseek-v4-pro[1m]`

④ Base URL / API アドレス（存在する場合）：

`1`	`https://api.deepseek.com`

ステップ3：設定を保存

すべての情報を確認したら、追加 / 保存 / 確認をクリックします。

DeepSeek に切り替え

CC-Switch のメイン画面に戻る
先ほど追加した DeepSeek 設定がリストに表示されます
その設定の横にある 切り替え / 有効ボタンをクリック
画面に「現在のモデル：DeepSeek」などと表示されるはずです

接続の確認

コマンドプロンプトを開き、claude と入力して Claude Code を起動します。

Claude Code 内で以下を入力：

/model

Enterキーを押します。表示されたモデル情報に DeepSeek が含まれていれば、接続成功です ✅

すべての設定が完了しました！

これでAIプログラミングアシスタントを使い始めることができます！

使い始める（実践例）

設定が完了したら、すべてが正常に動作することを確認するための簡単な演習を行いましょう。

プロジェクトフォルダを作成してコマンドプロンプトを開く

デスクトップで右クリック → 新規作成 → フォルダー、名前を my-first-ai-project に
ダブルクリックしてフォルダを開く
ウィンドウ上部のアドレスバーをクリックし、cmd と入力して Enterキーを押す

Claude Code を起動

表示されたコマンドプロンプトウィンドウで、以下を入力：

claude

Enterキーを押します。このフォルダを信頼するか尋ねられたら、y と入力して Enterキーを押します。

最初の指示を出す

Claude Code が起動したら、以下を入力（直接中国語で入力できます）：

`1`	`帮我创建一个简单的个人主页，使用 HTML + CSS + JavaScript，包含一个标题、一段自我介绍和一个深色模式切换按钮`

Enterキーを押して送信します。

権限リクエストの処理

実行中、Claude Code がファイルの作成/変更の許可を求める場合があります——Yes を選択してください。自分のプロジェクトでは、Yes, always allow（今後は尋ねない）を選択することをお勧めします。

結果を確認

完了後、プロジェクトフォルダに戻り、index.html をダブルクリックすると、ブラウザで開き、AIが作成したWebページを見ることができます！

おめでとうございます！

Claude Code + DeepSeek で最初のプロジェクトを完了しました！

コマンド早見表

操作	コマンド	説明
Node.js バージョン確認	`node -v`	Node.js がインストールされているか確認
npm バージョン確認	`npm -v`	npm が正常か確認
npm ミラー設定	`npm config set registry https://registry.npmmirror.com/`	ダウンロードを高速化
npm ミラー確認	`npm config get registry`	ミラーが有効か確認
Claude Code インストール	`npm install -g @anthropic-ai/claude-code`	グローバルインストール
Claude Code バージョン確認	`claude --version`	Claude Code がインストールされているか確認
Claude Code 起動	`claude`	現在のフォルダで起動
現在のモデル確認	`/model`	Claude Code 内で入力
Claude Code 終了	`/exit` または `Ctrl + C` を2回	プログラムを終了

よくある質問

node -v で「’node’ は内部コマンドまたは外部コマンドとして認識されていません」と表示される？

Node.js の環境変数（PATH）が正しく設定されていません。エクスプローラーを開き、D:\nodejs\ に移動して node.exe があるか確認します：

ファイルがある場合：Node.js はインストールされていますが PATH が設定されていません。上記の 1.4 環境変数の設定方法 の手順に従って手動で追加してください

ファイルがない場合：インストールが失敗しています。再ダウンロードして再インストールしてください

claude で「‘claude’ は内部コマンドまたは外部コマンドとして認識されていません」と表示される？

Claude Code のインストールが失敗しています。まず node -v と npm -v が正常であることを確認し、npm install -g @anthropic-ai/claude-code を再実行してください。

Claude Code の起動後に Anthropic アカウントへのログインを求められる？

.claude.json が正しく編集されていません。Win + R を押し、%USERPROFILE% と入力して Enterキーを押し、.claude.json を見つけてメモ帳で開きます。"hasCompletedOnboarding": true が含まれていること、前の行の末尾に英語のカンマがあること、true が小文字であること、引用符が英語の引用符であることを確認してください。

Claude Code の会話中にエラー / 応答なし？

一般的な原因：① DeepSeek の残高不足 ② API Key の入力ミス ③ モデル名が deepseek-v4-pro[1m] ではない ④ ネットワークの問題。一つずつ確認してください。

npm での Claude Code のインストールが非常に遅い（5分以上）？

国内ミラーが設定されているか確認：npm config get registry（registry.npmmirror.com と表示されるはずです）。表示されない場合は、npm config set registry https://registry.npmmirror.com/ を実行してから再試行してください。

CC-Switch が開かない、またはクラッシュする？

GitHub Release から最新バージョンを再ダウンロードするか、右クリックして管理者として実行してみてください。

GitHub ページが開かない？

原因：GitHub は中国国内から不安定にアクセスされる場合があります。 解決策：

ページを数回更新する

別のブラウザを試す

それでもアクセスできない場合は、オンラインで「CC-Switch ダウンロード」を検索してください——一部の国内ミラーサイトでもダウンロードを提供している場合があります

完全なプロセスの振り返り

ステップ内容一言でのまとめ

ステップ1 Node.js のインストール「ランタイムエンジン」をセットアップし、コンピューターがJavaScriptプログラムを実行できるようにする

ステップ2 Claude Code のインストール「AIアシスタント」をインストールし、ログインをスキップ

ステップ3 CC-Switch のインストール「脳交換器」をインストールし、AIモデルを切り替え可能に

ステップ4 DeepSeek API Key の取得 DeepSeek の AI サービスにアクセスするための「鍵」を取得

ステップ5 CC-Switch の設定「脳交換器」+「鍵」で Claude Code の脳を DeepSeek に切り替え

ステップ6 使い始める任意のフォルダで claude と入力してAIアシスタントを起動！

すべてのステップが完了したら、コンピューターの任意のフォルダで claude コマンドを入力して、DeepSeek 駆動の AI プログラミングアシスタントを起動できます！

初心者でもできる！AIできれいな技術アーキテクチャ図を素早く作成

Tue, 31 Mar 2026 19:51:00 +0800

✈️ 初心者でもできる！AIできれいな技術アーキテクチャ図を素早く作成

👋 このドキュメントはアーキテクチャ図を描いたことがまったくない初心者向けです。デザインの知識もコーディングも不要です。AI とチャットできれば大丈夫です。

技術アーキテクチャ図とは？なぜ描く必要があるの？

簡単に言うと、技術アーキテクチャ図とは頭の中のシステムを「描き出す」ことです。

例えば、App を作る場合：どんな機能モジュールがあるか？ユーザーはどう使うか？データはどう流れるか？これらの関係を図にしたものがアーキテクチャ図です。

描くメリットはたくさんあります：

✅ 考えが整理できる——図を描く過程でシステム設計がクリアになる
✅ チームとのコミュニケーションがスムーズに——1枚の図は千の言葉に勝る
✅ プレゼンで評価アップ——上司やクライアントが一瞬で理解してくれる
✅ AI が描いてくれて時短になる——AI を使えば数分で立派な図ができる

🤔 初心者はどの方法を選ぶべき？（最初に読んでね）

状況	おすすめ	難易度
とにかく一番早くきれいな図が欲しい、後で修正しない	方法1（AI が直接画像生成）	⭐
一手間かけてでも後で修正しやすくしたい	方法2（Mermaid.js コード生成）	⭐⭐
正式なドキュメント用、繰り返し修正・統一スタイルが必要	方法3（Excalidraw ローカル描画）	⭐⭐⭐

💡 初心者アドバイス：まず 方法1 を試して感覚をつかみ、次に 方法2 を試してください。方法3は正式なドキュメントが必要になってからで大丈夫です。

方法1：AI に直接絵を描かせる（最も簡単、最速）

⏱ 時間：2-3分 🛠 ツール：Gemini 3.1 Pro（Google 提供、無料）

一言でいうと

AI（Gemini など）に「描画用のプロンプト」を書かせ、そのプロンプトを AI の画像生成機能に渡すだけで、AI が絵を描いてくれます。

手順

ステップ1：AI に「描画プロンプト」を書かせる

Gemini を開いて、以下を入力するだけ：

技術アーキテクチャ図を生成するためのプロンプトを書いてください。
描きたいのは [システム名、例：ECサイト] のアーキテクチャ図です。
含むモジュール：ユーザーインターフェース、商品管理、注文システム、決済システム、管理画面。
データフロー：ユーザー注文 → 注文システムが決済を呼び出す → 決済完了が商品管理に在庫更新を通知。
プロフェッショナルでクリアで美しいスタイルで、英語のプロンプトを出力してください。

AI が英語の詳細なプロンプトを返します。

ステップ2：プロンプトを AI 画像生成に渡す

Gemini（または画像生成対応の AI）で、画像生成機能を選び、上記のプロンプトを貼り付けて生成ボタンを押すだけ。

ステップ3：完成 🎉

AI が画像を出力します。気に入らなければ再生成。

メリット・デメリット

✅ メリット	❌ デメリット
最速、数分で完了	修正が面倒——システム変更で再生成が必要
見た目がきれい、色鮮やか	結果が安定しないことがある
追加ツール不要	プロンプトが悪いと出力も悪い

📌 初心者向けヒント

プロンプトは詳細に——情報が具体的なほど出力が正確。「アーキテクチャ図を描いて」ではなく、モジュールや接続を明確に
複数回試す——最初の結果に満足いかなくても普通。プロンプトを微調整して再生成
英語プロンプトが効果的——多くの画像生成モデルは英語の理解が得意

方法2：AI にコードを生成させ、コードをレンダリングして図にする（初心者におすすめ）

⏱ 時間：3-5分 🛠 ツール：任意の AI（ChatGPT、Claude、Gemini）+ Mermaid.js

一言でいうと

フローチャートの本質はコード（Mermaid.js 構文）です。AI にコードを書かせ、無料のオンラインツールで画像にレンダリングします。図を変更したい？AI にコードを修正させて再レンダリングするだけ。

手順

ステップ1：AI に Mermaid コードを生成させる

AI を開いて以下を入力：

Mermaid 構文を使って EC システムのアーキテクチャ図を描いてください。
システム構成：ユーザーインターフェース、商品管理、注文システム、決済システム、管理画面。
データフロー：ユーザー注文 → 注文システム決済呼び出し → 決済完了が商品管理に在庫更新を通知。
純粋な Mermaid コードを出力してください。graph TD 形式で。

AI が以下のようなコードを返します：

graph TD
    A[ユーザーインターフェース] --> B[注文システム]
    B --> C[決済システム]
    B --> D[商品管理]
    C --> E[決済完了]
    E --> D

ステップ2：コードを画像にレンダリング

無料サイト mermaid.live を開く：

AI のコードを左側のエディタに貼り付け
右側に即座にフローチャートが表示
右上の「エクスポート」ボタンで PNG か SVG を選択（SVG はベクター形式で拡大してもぼやけない）

ステップ3：修正したい？AI にコードを直させる

古いコードを AI に貼り付けて、変更したいことを伝える：

`1`	`上記のコードを修正して、「ユーザーインターフェース」と「注文システム」の間に「ログイン認証」モジュールを追加してください。`

修正後、mermaid.live に貼り付けてエクスポート。

メリット・デメリット

✅ メリット	❌ デメリット
画質が良い、プロフェッショナルな印象	複雑な図の後期修正は依然として面倒
方法1より修正が容易——コード変更→再レンダリング	アーキテクチャの大幅変更時はほぼ再生成が必要
ソフトウェア不要、ブラウザだけで使える

📌 初心者向けヒント

Mermaid 構文は決まった形式がある——AI に「Mermaid 構文を使って」と明確に伝える
mermaid.live は神ツール——貼り付け即プレビュー、完全無料、登録不要
SVG でエクスポートがおすすめ——ベクター形式で拡大してもぼやけない
コードは保存しておく——後で修正するときに古いコードを AI に送るだけ

方法3：AI に編集可能なアーキテクチャ図を生成させる（正式なドキュメント向け）

⏱ 時間：10-15分（初回設定は少し時間がかかる） 🛠 必要なもの：AI プログラミングツール + Obsidian + 「作図指示パック」

一言でいうと

最もプロフェッショナルな方法ですが、初回設定に少し時間がかかります。セットアップ後は、AI に描きたいものを伝えるだけで、ドラッグ＆ドロップで編集可能なアーキテクチャ図ファイルを生成します。方法1や方法2が「死んだ図」なら、この方法は「生きた図」です。

🤔 「作図指示パック（Skills）」とは？

Skills は、AI に図の描き方を教える「説明書」のようなものです。

未インストール：「アーキテクチャ図を描いて」→ AI はテキストで説明するだけ
インストール後：AI が編集可能なアーキテクチャ図ファイルを生成できる

AI に「作図プラグイン」をインストールするイメージです。

この指示パックは axton-obsidian-visual-skills という名前で、Axton という人が作った無料オープンソースプロジェクトです。3つの作図機能を含みます：

作図方法	生成ファイル	用途	スタイル
Excalidraw	`.excalidraw` ファイル	フローチャート、マインドマップ、アーキテクチャ図	✏️ 手描き風（ホワイトボード風）
Mermaid	テキストルール	フローチャート、シーケンス図、比較図	🎯 ビジネスプロフェッショナル風
Canvas	`.canvas` ファイル	マインドマップ、知識整理	🎨 カラフルカード

💡 Draw.io も使えます——Draw.io は別の無料作図ツールで、対応する指示パックもあります。本ガイドでは Excalidraw を例に説明します。

🔧 事前インストール（最初の一回だけ）

💡 この指示パックはどこに置くの？

AI ツールはパソコンの固定位置でこれらの指示ファイルを探します。推奨場所：

C:\Users\ユーザー名\.claude\skills\

🤔 なぜ C ドライブ？ ユーザーフォルダはデフォルトで C ドライブにあるためです。これにより、このパソコンのすべてのプロジェクトで指示パックを使えます。

OpenCode と Claude Code で共通——一度インストールすれば両方で使えます。

インストール方法1：AI にやらせる（おすすめ、最も簡単）

OpenCode、Claude Code、Cursor のどれでも、以下のように伝えるだけ：

1
2
3

axtonliu/axton-obsidian-visual-skills を GitHub からダウンロードして、
解凍後、excalidraw-diagram、mermaid-visualizer、obsidian-canvas-creator
の3つのフォルダを C:\Users\ユーザー名\.claude\skills\ に配置してください。

AI が自動的にダウンロード、解凍、コピーを実行します。完了後ツールを再起動。

インストール方法2：手動ダウンロード

ダウンロードページを開く
緑色の Code → Download ZIP
解凍すると3つのフォルダが表示
C:\Users\ユーザー名\.claude\skills\ に3つのフォルダをコピー

追加で必要なもの：

ソフトウェア	用途	費用
OpenCode / Claude Code / Cursor	AI による作図ファイル生成	無料プランあり
Obsidian	アーキテクチャ図の表示・手動調整	無料
Obsidian Excalidraw プラグイン	Obsidian で Excalidraw ファイル編集	無料

🖐️ 手順

ステップ1：Skills をインストールし、描きたいものを AI に伝える

Excalidraw 手描きスタイルの場合：

1
2
3

Excalidraw を使って EC システムのアーキテクチャ図を描いて。
ユーザーインターフェース、商品管理、注文システム、決済システム、管理画面を含めて。
ユーザー注文 → 注文システム決済呼び出し → 決済完了で在庫更新。

Mermaid ビジネススタイルの場合：

1
2

このフローを Mermaid 図に変換して：
ユーザーがトップページにアクセス → 商品を閲覧 → カートに追加 → 注文送信 → オンライン決済 → 取引完了

Canvas マインドマップの場合：

1
2

この記事を Obsidian Canvas マインドマップに整理して：
[内容を貼り付け]

ステップ2：Obsidian で手動調整

Obsidian を開き、生成されたファイルをドラッグ＆ドロップ
Excalidraw ファイルはダブルクリックで編集モードに
ボックスをドラッグ、矢印を調整、テキスト修正、色変更が自由自在

ステップ3（任意）：AI でスタイル変更

スクリーンショットを Gemini に送り、参考画像と一緒に：

`1`	`図1を図2のような手描きスタイルに変換して、ユーザーが理解しやすいように適切なイラストを追加してください`

⚠️ よくある質問

Q：日本語フォントが手書き風にならない A：Excalidraw の手書きフォントはデフォルトで英字のみ対応。日本語はオンライン読み込みが必要です。

Q：生成された図が少し乱れている A：正常です。AI のレイアウトは完璧ではありません。Obsidian で手動調整してください。

Q：Claude Code じゃないとダメ？ A：いいえ。OpenCode、Claude Code、Cursor のどれでも使えます。

📌 初心者向けヒント

まず方法1と方法2を試してから方法3に進む
Skills のインストールが鍵——これで AI が編集可能ファイルを生成できるようになる
Excalidraw はデフォルトで手描き風
方法3の最大の価値は編集可能性——一度セットアップすれば、以降の修正はドラッグ＆ドロップだけ

🎯 初心者クイックスタートロードマップ

1日目 → 方法1：Gemini で画像生成（まずは体験）
         ↓
2日目 → 方法2：Mermaid.js でフローチャート生成
         （「コード変更＝図変更」の考え方を学ぶ）
         ↓
3日目 → 方法2の図をドキュメントで使う
         ↓
必要になったら → 方法3：Skills + Obsidian + Excalidraw プラグインを検討

📝 最後に：アーキテクチャ図で最も重要なのは伝えたいことを整理することです。AI はアイデアを画像にするための道具に過ぎません。一番簡単な方法1から始めましょう。最初の一歩が最も大切です！

モデル	特徴
GLM-4.7	プログラミング能力が高い、ゼロ設定
MiniMax-2.1	プログラミング能力が優秀、応答が速い

ステップ	内容	一言でのまとめ
ステップ1	Node.js のインストール	「ランタイムエンジン」をセットアップし、コンピューターがJavaScriptプログラムを実行できるようにする
ステップ2	Claude Code のインストール	「AIアシスタント」をインストールし、ログインをスキップ
ステップ3	CC-Switch のインストール	「脳交換器」をインストールし、AIモデルを切り替え可能に
ステップ4	DeepSeek API Key の取得	DeepSeek の AI サービスにアクセスするための「鍵」を取得
ステップ5	CC-Switch の設定	「脳交換器」+「鍵」で Claude Code の脳を DeepSeek に切り替え
ステップ6	使い始める	任意のフォルダで `claude` と入力してAIアシスタントを起動！

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 ファイルのコア最適化

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

最小実用版を早期に出力

追加補足

効果比較デモ

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

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

最終結論

コア知識早見表

関連リソース

OpenCode + Obsidian：AI駆動のナレッジマネジメントワークフローを構築する

📋 目次

一、opencode-obsidianプラグインとは？

二、環境準備

三、BRATプラグインのインストール

ステップ1：コミュニティプラグインマーケットプレイスを開く

ステップ2：BRATを検索してインストール

四、BRATでopencode-obsidianをインストール

ステップ1：BRAT設定を開く

ステップ2：Betaプラグインを追加