この記事を読み終わると、コードを一切書かずにClaude Code Desktopをインストールし、Plan modeで「ファイルを壊さずに」AI作業を確認してから実行できるようになります。さらにSkillsとMCPの基本を把握し、LP制作の受託業務への最初の一歩を踏み出せる状態を目指します。
- 想定所要時間: 記事を読む 約15分 ／ 初回セットアップ 約30分
- 対象: AIを使いたい未経験会社員。ターミナル操作は不要です
1. Claude Code Desktopとは？CLIとの違い
Claude Code は Anthropic が提供するAIコーディング・エージェントです。以前はターミナル（黒い画面）での操作が前提でしたが、Desktopアプリ版が登場し、GUIだけで全操作が完結するようになりました。
CLIとDesktopの主な違いをまとめます。
| 比較項目 | Desktop（GUIアプリ） | CLI（ターミナル） |
|---|---|---|
| 操作方法 | クリック・テキスト入力のみ | コマンド入力が必要 |
| 非エンジニア向け | ◎ ターミナル不要 | △ 慣れが必要 |
| Plan mode | ◎ GUIで確認・承認 | ○ フラグで利用可 |
| 画面分割 | 最大6分割（Workspace） | なし（別ウィンドウ管理） |
| Ultracode自動切替 | ◎ GUIで設定可能 | △ 手動設定 |
| 企業向け推奨 | ◎ 全面推奨 | エンジニア向け |
| 料金 | Claude Proプラン等が必要（目安・要公式確認） | |
2026年6月時点では、企業向け導入においてもDesktopアプリが全面推奨されています（出典: X @masahirochaen・2026-06-07）。
2. 非エンジニアにDesktopが向く3つの理由
理由1: Plan modeで「実行前に確認」できる
Plan modeを使うと、AIが実際にファイルを変更する前に「これを変更しようとしています」という計画を画面に表示してくれます。承認しない限りファイルは1バイトも変わりません。コードが読めなくても「何が起こるか」を日本語で確認できるため、初心者が最初に覚えるべき機能です。
理由2: ターミナルを一切使わなくてよい
CLIはターミナルに npm install や git commit などを打ち込む場面が多く、慣れていないと不安を感じます。Desktopはすべてチャット画面と設定パネルで完結するため、「黒い画面が怖い」という方でも安心です。
理由3: 7日間ロードマップなど学習コンテンツが整備されている
Anthropic公式と有志コミュニティの双方で、非エンジニア向けの習得コンテンツが増えています。55,000文字の完全解説マニュアル（note掲載、一部無料）など、体系的に学べる資料が充実しています（出典: X @masahirochaen・2026-06-07）。
3. インストールと初期設定（所要10分）
必要なもの
- Anthropicアカウント（claude.ai で無料登録可）
- Claude Proプラン以上（料金目安・要公式確認）
- PC（macOS / Windows 10以降）
手順
- Anthropic公式サイトにアクセスし、Claude Code Desktop の最新インストーラーをダウンロードします。
- インストーラーを起動してウィザードに従いインストールします。
- 起動後、Anthropicアカウントでログインします。
- 最初のProject（作業フォルダ）を作成します。空のフォルダを選ぶだけでOKです。
- チャット欄に
こんにちは、接続できていますか？と入力して応答が返れば準備完了です。
料金プランや機能は変更される場合があります。インストール前にAnthropic公式サイトで最新情報をご確認ください。
4. Plan modeで「見てから実行」する手順
Plan modeはClaude Code Desktopにおいて非エンジニアの最重要機能です。以下の5ステップで体験してみましょう。題材は「陽だまり珈琲」という架空の喫茶店のLPを作る想定です。
STEP 1: Plan modeに切り替える
画面左上またはチャット欄のツールバーにある「Plan mode」ボタンをクリックしてオンにします。ボタンの色が変わりアクティブになったことを確認してください。
STEP 2: 作業内容をプロンプトで伝える
チャット欄に以下のように入力します。
陽だまり珈琲というカフェのLPページをindex.htmlで作成してください。
構成はヒーロー、メニュー紹介、アクセスの3セクションです。
まずどのファイルをどう変更するか計画を見せてください。STEP 3: 計画（Plan）を確認する
AIが「以下のファイルを作成・変更します」という一覧を表示します。この段階ではまだ何も変更されていません。表示された計画を読み、意図と違う点があれば「メニューセクションはスキップしてください」などと追加指示できます。
STEP 4: 承認して実行する
計画に問題がなければ「承認して実行」ボタンをクリックします。ここで初めてファイルが変更されます。
STEP 5: 結果を確認する
作業完了後、プロジェクトフォルダ内に index.html が生成されているはずです。ブラウザで開いて確認しましょう。
Plan modeを習慣にすることで、「思っていたのと違う大量の変更が走ってしまった」というトラブルを大幅に減らせます（出典: X @potatobiz1・2026-06-07）。
5. 6画面分割Workspaceの使い方
Claude Code Desktop 2026年6月版では、Workspace（作業領域）を最大6分割できます。複数のタスクを並列表示しながら作業できるため、効率が大きく上がります。
分割の基本操作
- 画面上部のWorkspaceメニューから「新しいペインを追加」を選択します。
- 各ペインに別々のプロジェクトやタスクを割り当てられます。
- ドラッグでペインのサイズを調整できます。
おすすめ分割例（LP制作の場合）
- ペイン1: HTMLの作業チャット
- ペイン2: CSSの作業チャット
- ペイン3: ファイルツリービュー
また、作業量を最大設定にするとUltracodeに自動で切り替わり、より高速・高精度なコード生成が可能になります（出典: X @masahirochaen・2026-06-07）。
6. Skillsで「毎回説明しなくていい」設定をする
SkillsはClaude Codeに繰り返し使う知識・ルール・作業手順を「記憶」させる仕組みです。一度設定すれば、毎回同じ説明を繰り返す必要がなくなります。
Skillsの基本概念
Memory（Skills）＋ Action（MCP）＝ AI AgentSkillsは「知識・ルール」を担い、MCPは「外部への操作」を担います。この2つを組み合わせることで、自分専用のAIエージェントが構築できます（出典: X @claudecode_ut・2026-06-07）。
非エンジニアが最初に設定するべきSkillsの例
- 「不要な挨拶や前置きを省略する」
- 「大規模な変更の前に必ず確認を求める」
- 「出力はすべて日本語で返す」
設定手順
- プロジェクトルートに
CLAUDE.mdというファイルを作成します。 - 以下のようなテキストを入力して保存します。
あなたは日本語で回答するアシスタントです。
不要な挨拶は省略してください。
ファイルを大量に変更する前に、必ず計画を提示して確認を求めてください。次回からClaude Codeはこの指示を自動的に読み込み、毎回説明しなくてもルールに従って動作します（出典: X @ai_300・2026-06-07）。
UIデザイン向けSkills（参考）
「UI/UX Pro Max skills」と呼ばれるSkillセットは、50以上のUIスタイル・97色のカラーパレット・57フォントを内包しており、Magic MCP Serverと組み合わせることでデザイン選択から実装まで一貫して担える環境を構築できます（出典: X @claudecode_ut・2026-06-07）。
7. MCP・Connectorsで外部サービスと連携する
MCP（Model Context Protocol）は、Claude Codeに「外部サービスへの手足」を追加するプロトコルです。MCPを使うと、Claude Codeが直接メールを読んだりドキュメントを更新したりできるようになります。
おすすめConnectors 5選（参考）
| サービス | 主なユースケース |
|---|---|
| Gmail | メール自動分類・返信下書き生成 |
| Google Drive | ドキュメント読み書き・ファイル整理 |
| Slack | チャンネル投稿・通知自動化 |
| Notion / Obsidian | ナレッジベース連携・メモ自動整理 |
| GitHub | コードレビュー・PR自動化 |
（出典: X @claudecode_ut・2026-06-07）
Dynamic Workflowsについて
最新アップデートではDynamic Workflowsとして最大1,000エージェントの並列実行に対応しているとされています。ただし、この仕様の詳細はAnthropicの公式リリースノートで必ず裏取りしてから活用してください（出典: X @masahirochaen・2026-06-07）。
8. 実践: LP制作に使う（陽だまり珈琲の事例）
ここでは「陽だまり珈琲」という架空の喫茶店のLPを、Claude Code Desktopで10〜30分で作る流れを紹介します。LP制作は非エンジニアがClaude Codeで始める副業として実績が報告されています（参考: X @cnemalek・2026-06-07）。
海外での活用事例（参考）
海外では以下のようなフローが実践されています（本人申告・参考値。成果を保証するものではありません）。
- Google MapsでWebサイトが古い・ない地元ビジネスを探す
- Claude Code Desktopで簡易LPを作成（10分程度）
- そのまま提案メールを送る
（出典: X @cnemalek、引用元 @explorax_・ビュー32K・いいね234・ブックマーク201・2026-06-07）
陽だまり珈琲LPを作るプロンプト例
陽だまり珈琲というカフェのランディングページ（LP）を作成してください。
【条件】
- ファイル名: index.html（1ファイルにHTMLとCSSをまとめる）
- セクション: ヒーロー（キャッチコピー＋CTA）、メニュー3品、アクセスマップ
- 雰囲気: 温かみのあるブラウン系カラー
- スマートフォン対応（レスポンシブ）
- 日本語
まず変更計画を見せてから実行してください（Plan modeで確認します）。納品・受注への流れ
完成したLPはAntigravityやVercel等のホスティングサービスで公開できます。LP制作の具体的な手順は【HP・LP制作】の作り方ガイド、v0との組み合わせはv0の使い方も参考にしてください。AI副業の自動化・コンテンツ展開についてはAIコンテンツシステム2026年版もご覧ください。
LP受注の実践パッケージについてはAIエージェントLP・HP制作プランをご確認ください。
9. 完成チェックリスト
Claude Code Desktopの初期セットアップ・Plan mode活用・LP作成が終わったら、以下を確認してください。
- ☐ Claude Code Desktopをインストールしてログインできている
- ☐ 最初のProjectフォルダを作成し、チャットで応答確認できた
- ☐ Plan modeのオン・オフ切り替えができる
- ☐ Plan modeで「計画を確認してから承認」の手順を1回試した
- ☐ CLAUDE.mdを作成し、基本ルールを設定した
- ☐ Workspaceを2ペイン以上に分割できた
- ☐ LP（index.html）をブラウザで開いて表示を確認した
- ☐ スマートフォン表示（レスポンシブ）を確認した
- ☐ 次のステップ（公開・受注）の記事を読んだ
10. よくある質問（FAQ）
Q1. プログラミング経験がまったくなくても使えますか？
はい。Claude Code DesktopはGUIで操作するため、ターミナルやコマンド入力の知識は不要です。Plan modeで実行前に確認できるため、「誤操作でファイルを壊してしまった」というリスクも最小化できます。まずは空のフォルダでテスト用のLPを1枚作ることから始めてみてください。
Q2. 料金はいくらかかりますか？
Claude Code DesktopはAnthropicのプランに依存します。2026年6月時点ではClaude Proプランなどが必要とされていますが、プラン構成・価格は変更される場合があります。必ずAnthropic公式サイトで最新の料金をご確認ください。
Q3. Plan modeとは何が違うの？通常モードとどう使い分ければいいですか？
通常モードではAIがすぐにファイルを変更・作成します。Plan modeでは変更前に「計画リスト」を表示して承認を待ちます。慣れるまでは常にPlan modeで作業することを推奨します。作業手順と内容に慣れてきたら、小さな変更は通常モード、大きなリファクタリングや複数ファイルにまたがる変更はPlan modeと使い分けるのが効率的です。
Q4. MCPを設定するのは難しいですか？
基本的なConnectors（Gmail・Google Drive等）はDesktop画面から数クリックで接続できるものが増えています。カスタムMCPサーバーの自作はエンジニア向けですが、既存のConnectorsを使うだけなら非エンジニアでも設定可能です。詳細はClaude Codeツールページもご参考ください。
Q5. 作ったLPをどうやって公開しますか？
完成したHTMLファイルは、Antigravityなどのホスティングサービスにドラッグ&ドロップするだけで公開できます（無料プランあり・要各サービス確認）。Vercel・Netlifyも同様に簡単に公開可能です。公開後のURL共有から受注提案まで、LP制作ガイドで詳しく解説しています。
出典・参考情報
- X（旧Twitter）@masahirochaen「Claude Code Desktop完全解説マニュアル」（ビュー347K・いいね1.1K・ブックマーク1.5K・2026-06-07）
- X @potatobiz1「Plan mode 非エンジニア向け解説」（2026-06-07）
- X @claudecode_ut「Skills/MCP/Connectors 5統合・UI/UX Pro Max」（2026-06-07）
- X @cnemalek（引用元: @explorax_）「Google Maps × Claude Code LP制作」（ビュー32K・いいね234・ブックマーク201・2026-06-07）
- X @ai_300「CLAUDE.md設定術」（2026-06-07）
- Anthropic公式: https://www.anthropic.com（最新情報は公式でご確認ください）
※ 本記事に掲載したX投稿の数値（ビュー・いいね等）は本人申告・参考値です。成果・収益を保証するものではありません。情報は2026年6月時点のものです。