初心者ガイド on Yanmu

Cドライブの空き容量不足？他のドライブで拡張する方法

Sun, 24 May 2026 16:00:00 +0800

Cドライブの空き容量不足はWindowsユーザーの悩みの種です。システム更新キャッシュ、一時ファイル、デスクトップファイル、WeChatのチャット履歴…気づかないうちにCドライブはいっぱいに。ドライブ交換はコストが高く、クリーンアップは対症療法にすぎません。最も根本的な解決策は、他のドライブからCドライブに容量を借りることです。

📖 目次（クリックで展開）

#	セクション	説明
1	準備	ダウンロード、インストール、PE環境へ
2	拡張開始	パーティションアシスタント8ステップ
3	再起動と後片付け	Windowsに戻り、ブートメニューを整理
4	ヒント	補足アドバイスとよくある質問

📦 準備

⚡ 一言でいうと：Windowsを「休止状態ボックス」に入れて操作し、Cドライブが占有されないようにします。

① 微PEツールボックスをダウンロード

微PEツールボックス — 軽量なPE（プレインストール環境）ツール、クリーンで広告なし。

② システムにインストール

ダウンロードしたプログラムを開き、「すぐにシステムにインストール」 をクリックします。自動的にブートエントリが書き込まれます。

③ 再起動してブートメニューへ

インストール完了後、PCを再起動するとシステムブート選択画面が表示されます。

⏱ 注意：カウントダウンは数秒しかありません。タイムアウトすると現在のシステムで起動します。画面をよく見て素早く選択！

④ PE環境に入る

矢印キーで 微PEツールボックス を選択し、Enterキーを押します。

💡 なぜPEに入るのか？

PE環境では、Windowsシステムは完全に「休止」状態になります。Cドライブはどのプロセスにも占有されていないため、安全にパーティションサイズを調整できます。これは手術のようなもので、患者は麻酔をかけられてからでないとメスを入れられません。他のパーティションツールも同じ原理です。

🛠️ 拡張開始

PEに入ると、デスクトップにツールメニューが自動表示されます。「パーティションアシスタント」 をクリックします。

ステップ1 · ディスクレイアウトを確認

パーティションアシスタントが開くと、すべてのディスクパーティションのレイアウトが表示されます。Cドライブに空き容量を提供できるドライブを確認します。

ステップ2 · 縮小するドライブを選択

ここでは Software（Dドライブ） を例に、DドライブからCドライブに容量を移動します。

💡 どのドライブを選ぶべき？

✅ 空き容量が十分で、あまり使わない大容量ドライブを優先

❌ システム回復パーティションやEFIパーティションには触れない

ステップ3 · パーティションを調整

Dドライブを右クリック → 「パーティションを調整」。

ステップ4 · ドライブを縮小

表示されたウィンドウで、スライダーをドラッグするか数値を入力して、Dドライブから確保する容量を決定します。

✅ 例：Cドライブに50GB追加したい場合、ここでDドライブを50GB縮小します。

⚠️ 注意：縮小する値はDドライブの使用済み容量を超えないようにしてください。エラーになります。

確認できたら 「OK」 をクリックします。

ステップ5 · Cドライブに結合

Dドライブの横に 「未割り当て領域」 が表示されます。

手順	操作
1	Cドライブを右クリック → 「パーティションを調整」
2	スライダーを一番右にドラッグし、未割り当て領域をすべてCドライブに結合
3	「OK」をクリック

ステップ6 · タスクを送信

左上の 「送信」 をクリックします。

⚠️ 重要な注意

ここまでの調整はすべて 「計画」 にすぎず、まだ実際には反映されていません。

「送信」をクリックして初めて、システムが実際にパーティション操作を実行します。確認してから送信！

ステップ7 · 実行を待機

パーティションアシスタントが調整を開始します。ディスクのサイズと速度にもよりますが、数分から10数分かかる場合があります。

⚠️	🔴 処理中は絶対に電源を切ったり強制シャットダウンしないでください！
パーティションテーブルが破損し、データが失われる可能性があります
ノートPCの場合は電源アダプターを接続してください
お茶を飲みながら、気長に待ちましょう 🍵

ステップ8 · 完了 🎉

成功メッセージが表示されたら拡張完了です！

🚀 再起動と後片付け

順序	操作
①	「再起動」をクリック
②	ブートメニューで通常の Windowsシステムを選択して起動
③	PC を開き、Cドライブの容量が増えたことを確認 ✅

🧹 最後のステップ：毎回起動時にブート選択画面を表示したくない場合は、微PEツールボックス を開いて 「アンインストール」 をクリックすれば元の状態に戻ります。

📌 ヒント

シナリオ	推奨
🟢 Cドライブが小さすぎる（30GB未満）	少なくとも 80〜100GB に拡張
🟡 Dドライブにも空きがない	Dドライブをクリーンアップするか、外付けドライブに大容量ファイルを移動
🔴 操作前のデータ損失が心配	先に重要なファイルをバックアップすることを強く推奨！パーティションアシスタントは安定していますが、念には念を

✨ 以上がCドライブ拡張の完全ガイドです。あなたのPCが二度と不足に悩まされませんように！

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から始めましょう。最初の一歩が最も大切です！

MCP入門ガイド：誰でも理解できるAIの万能プラグ

Mon, 01 Dec 2025 01:46:03 +0800

ステップ	内容	一言でのまとめ
ステップ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アシスタントを起動！

初心者ガイド on Yanmu

Cドライブの空き容量不足？他のドライブで拡張する方法

📦 準備

① 微PEツールボックスをダウンロード

② システムにインストール

③ 再起動してブートメニューへ

④ PE環境に入る

🛠️ 拡張開始

ステップ1 · ディスクレイアウトを確認

ステップ2 · 縮小するドライブを選択

ステップ3 · パーティションを調整

ステップ4 · ドライブを縮小

ステップ5 · Cドライブに結合

ステップ6 · タスクを送信

ステップ7 · 実行を待機

ステップ8 · 完了 🎉

🚀 再起動と後片付け

📌 ヒント

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

📋 目次

📌 コアポイントまとめ

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

基本操作

実践シナリオ

使用テクニック

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

起動方法

適用シナリオ

Ultra Workとの違い

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

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

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

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

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

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

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

一言まとめ

八、実際の事例

最初の試み

修正

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

概要

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

1.1 Node.js のインストール

1.2 npm 国内ミラーの設定

1.3 Git のインストール

1.4 CC-Switch のインストール

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

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

ステップ3：DeepSeek の接続

3.1 API Key の取得

3.2 CC-Switch の設定

3.3 モデルの検証

ステップ4：実践例

コマンド早見表

よくある質問

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

概要

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

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

Node.js のインストール

Node.js のダウンロード

Node.js のインストール

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

環境変数の設定方法

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

Claude Code のインストール

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

インストールの確認

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

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

CC-Switch のダウンロード

CC-Switch のインストール

DeepSeek API Key の取得

DeepSeek アカウントの登録

残高の入金

API Key の作成

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

CC-Switch を開く

DeepSeek 設定の追加

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

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