【2026年4月最新】Claude Codeの始め方｜デスクトップアプリで「会話するだけ」でWebサイトを作る全手順
aikanri-admin
この記事の内容
「Claude Codeって名前はよく聞くけど、結局何ができるの？」「エンジニアじゃないと使えないんでしょ？」——こんな声を、経営者や管理職の方からよくいただきます。
代表菅澤
AI鬼管理山崎
結論から言います。Claude Codeのデスクトップアプリを使えば、プログラミング経験ゼロの方でも「会話するだけ」でWebサイトを作ることができます。ターミナルの黒い画面も、コマンド入力も不要です。
この記事では、Claude Codeの4つの使い方のうち初心者に最適な方法を特定し、実際にWebサイトを1から構築する全手順を解説します。プランモードの使いこなし方から、デザインを「10パターン出して比較する」プロ級テクニックまで、非エンジニアの方でも今日から実践できる内容を詰め込みました。
さらに記事後半では、弊社（株式会社GENAI）がClaude Codeを全社導入して実感している効果や、Google AI Studioとの使い分けについても具体的にお伝えします。
01 BASIC Claude Codeとは何か？普通のAIチャットとの決定的な違い エージェント型コーディングツールの本質を理解する
Claude CodeはAnthropicが開発したエージェント型コーディングツールです。「エージェント型」という言葉がポイントで、ChatGPTやClaudeのチャットアプリとは根本的に異なる動きをします。
📚 用語解説
エージェント型AI：指示を受けて回答を返すだけでなく、自分で考え、判断し、必要なツールを選択しながらゴールに向かって自律的に作業を進めるAIのこと。人間の上司と部下の関係に近い。
通常のAIチャットは「質問→回答」の1往復が基本です。一方、Claude Codeはゴールを伝えると、自分で計画を立て、ファイルを作成し、コードを書き、動作確認まで行ってくれます。
代表菅澤
ここで重要なのは、Claude Codeはコーディングに特化しているけれど、コーディング以外にも使えるということです。Webサイト制作はもちろん、データ分析、ファイル整理、レポート生成など、PCで行う多くの作業を自動化できます。
| 項目 | 通常のAIチャット | Claude Code |
|---|---|---|
| 作業スタイル | 質問→回答の1往復 | ゴールを渡して自律的に作業 |
| ファイル操作 | 回答テキストをコピペ | 直接ファイルを作成・編集 |
| 計画立案 | ユーザーが考える | AIが計画→確認→実行 |
| コード実行 | 不可（テキストのみ） | その場で実行・動作確認 |
| 継続作業 | 毎回コンテキスト設定 | 作業フォルダで継続 |
📚 用語解説
コーディング：プログラムのソースコードを書く作業のこと。Claude Codeでは人間がコードを書く必要はなく、AIが自動で書いてくれる。経営の文脈では「業務の自動化指示書を作る作業」と捉えると分かりやすい。
つまり、Claude Codeを使う上でプログラミングの知識は必須ではありません。「何を作りたいか」を日本語で伝えるだけで、AIが全てのコードを書いてくれるからです。
02 OPTIONS 4つの使い方と「どれから始めるべきか」の結論 デスクトップアプリ・Web・VS Code拡張機能・CLIの違いを整理
Claude Codeには4つの使い方があります。見た目も操作感も違うので、最初にどれを選ぶかで挫折するかどうかが決まると言っても過言ではありません。
① Claude Code デスクトップアプリ（おすすめ度：★★★★★）
Claudeのデスクトップアプリに搭載されたClaude Code機能です。初心者に最もおすすめの使い方で、普段使っているチャットアプリと同じ感覚で操作できます。
AI鬼管理山崎
② Claude Code Web（おすすめ度：★★★☆☆）
ブラウザ上で動くClaude Code Webは、一度指示を出すと最後まで作り切ってくれるのが特徴です。ただし、GitHubとの連携が前提になります。
📚 用語解説
GitHub（ギットハブ）：プログラムのソースコードをインターネット上に保管・管理するサービス。複数人での共同開発に使われる。デスクトップ上の「フォルダ」のクラウド版と考えるとイメージしやすい。
GitHub上のリポジトリ（フォルダのようなもの）と紐づけて作業する仕組みのため、GitHubを理解していないと難易度が一気に上がります。非エンジニアの方が最初に選ぶ環境としてはおすすめしません。
途中で止めにくく、プランニングの細かな調整がしにくいという制約があります。また、一気に進行するため、初心者が途中で何が起こっているか把握しにくいデメリットもあります。
③ VS Code / Cursor 拡張機能（おすすめ度：★★★★☆）
エンジニアが普段使うコードエディタ（VS CodeやCursor）に、Claude Codeの拡張機能をインストールして使う方法です。
📚 用語解説
VS Code（Visual Studio Code）：Microsoftが無料で提供するコードエディタ。世界中のエンジニアに最も使われている開発ツール。拡張機能をインストールすることで機能を追加できる。
見た目はデスクトップアプリに近く、チャット画面で操作できます。コードエディタに慣れている方には使いやすい選択肢ですが、VS CodeやCursorを使ったことがない方にはセットアップのハードルがあります。
VS Codeの拡張機能タブで「Claude」と検索し、Anthropic公式（パブリッシャーがAnthropicと表示されるもの）をインストールしてください。似た名前の非公式拡張機能があるので、必ず公式であることを確認しましょう。
④ CLI（コマンドラインインターフェース）（おすすめ度：★★☆☆☆）
ターミナル（黒い画面）にコマンドを打ち込んで使う、本来のClaude Codeの使い方です。エンジニアの多くがこの方法を使っています。
📚 用語解説
CLI（コマンドラインインターフェース）：マウスやボタンではなく、キーボードでコマンド（命令文）を入力してコンピュータを操作する方式。「ターミナル」「コマンドプロンプト」とも呼ばれる。
CLIは全ての機能を100%使い切れる反面、見た目が無骨で初心者には敷居が高いです。ただし、処理速度はCLIが最も速く、デスクトップアプリでは使えない一部機能もCLIなら利用可能です。
代表菅澤
結論：初心者はデスクトップアプリ一択
デスクトップアプリ
まずはここから
VS Code拡張機能
慣れてきたら
CLI（ターミナル）
全機能を使いこなす
| 使い方 | 難易度 | GitHub | 速度 | 機能 | 初心者おすすめ |
|---|---|---|---|---|---|
| デスクトップアプリ | ★☆☆☆☆ | 不要 | 普通 | 90% | ◎ |
| VS Code拡張機能 | ★★★☆☆ | 不要 | 普通 | 95% | ○ |
| Claude Code Web | ★★★★☆ | 必要 | 速い | 85% | △ |
| CLI | ★★★★★ | 不要 | 最速 | 100% | × |
03 SETUP デスクトップアプリのセットアップと料金プラン プラン選択から初期設定まで、つまずきやすいポイントを解説
Claude Codeを使うには、Claudeの有料プランへの加入が必要です。現在、Claude Codeが使える主なプランは以下の通りです。
| プラン | 月額 | Claude Code | 特徴 | おすすめ度 |
|---|---|---|---|---|
| Proプラン | $20（約3,000円） | 利用可 | 制限に達しやすい | 入門には十分 |
| Maxプラン | $100（約15,000円） | 利用可 | 制限が緩い | 本格利用向け |
| Max 20x | $200（約30,000円） | 利用可 | 制限がさらに緩い | 業務全般で使う方 |
AI鬼管理山崎
まずはProプラン（$20/月）で試してみるのがおすすめです。使用量の上限に達しても、数日待てばまた使えるようになります。週単位で使用量がリセットされる仕組みなので、1ヶ月間ずっと使えないということはありません。
株式会社GENAIではClaude Max 20xプラン（月額約30,000円）を契約しています。営業・広告運用・経理・秘書業務まで全社で活用しており、1名分の月間業務量（概算160時間）をカバーできている実感です。月3万円の投資は人件費（月25〜30万円）と比べれば圧倒的にコストメリットがあります。
デスクトップアプリの初期セットアップ手順
デスクトップの直下や、重要なファイルが入っているフォルダは避けてください。「Claude Code練習」などの専用フォルダを新規作成し、そこを指定するのが安全です。Claude Codeはフォルダ内にファイルを自由に作成・編集するため、既存ファイルとの混在を防ぐことが大切です。
これで準備完了です。チャット画面に日本語で指示を入力するだけで、Claude Codeが動き始めます。音声入力にも対応しているので、話しかけるだけでWebサイトを作り始めることもできます。
04 PLAN MODE プランモードで「設計図」を先に作る重要性 家を建てるのに設計図なしでは進めない——AIも同じ
Claude Codeにはいくつかのモードがあります。その中で最も重要なのが「プランモード」です。
代表菅澤
3つのモードの使い分け
| モード | 用途 | いつ使う？ |
|---|---|---|
| プラン（Plan） | 計画立案・設計 | 新しい機能を作るとき、大きな変更をするとき |
| コード（Code） | 実装・コード生成 | 簡単な修正、小さな変更、実行するとき |
| 確認（Confirm） | 許可・承認 | Claude Codeが自動で切り替え（手動不要） |
📚 用語解説
プランモード：Claude Codeに「まず計画を立ててください」と指示するモード。いきなりコードを書き始めるのではなく、何をどの順番で作るかの設計図を先に作成してくれる。経営で言えば「事業計画書を先に作る」のと同じ発想。
操作は簡単で、チャット画面の下部にある「プラン」ボタンをクリックするだけです。プランモードに切り替えてから指示を入力すると、Claude Codeは以下のような流れで動きます。
ファイルを読み込み要件を把握
タスク一覧・セクション構成
「この内容でよいですか？」
コードを書いてファイル生成
Ask User Question：AIに「質問させる」テクニック
プランモードの真の力を引き出すには、Claude Codeに積極的に質問させることが重要です。これを「Ask User Question（アスクユーザークエスチョン）」機能と呼びます。
📚 用語解説
Ask User Question：Claude Codeがユーザーに質問を投げかける機能。「不明な点があれば質問してください」とプロンプトに書くと、Claude Codeが自発的に要件の不明点を洗い出して質問してくれる。質問に答えるたびに、AIの理解が深まり、より高品質な成果物ができあがる。
AI鬼管理山崎
具体的には、最初の指示に以下のような一文を加えます。
「〇〇を作ってください。要件が不明瞭な部分やクリアでない点があれば、積極的に質問してください。」——この一文を入れるだけで、Claude Codeが自発的に5〜10個の質問を投げてきます。その質問に答えるだけで、仕様書がなくても高品質な成果物ができあがります。
質問に回答するたびにClaude Codeの理解が深まり、最終的なアウトプットの精度が格段に向上します。仕様書を作る時間がない場合でも、この「質問→回答」のやり取りが実質的な要件定義として機能するのです。
05 HANDS-ON 実演：会話だけでWebサイトを構築する全手順 ワイヤーフレーム→デザインの2段階アプローチ
ここからは、実際にClaude Codeのデスクトップアプリを使ってWebサイトを構築する手順を解説します。ポイントは「ワイヤーフレーム→デザイン」の2段階で進めることです。
📚 用語解説
ワイヤーフレーム：Webサイトの骨格だけを示した設計図。色やデザインは入れず、モノクロで「どこに何を配置するか」だけを決める。建築で言えば「間取り図」にあたる。
Phase 1：ワイヤーフレームの作成
まず、プランモードに切り替えた状態で以下のように指示します。
「この資料の内容を分かりやすく伝えるWebサイトを構築したいです。いきなり作り込むのではなく、まずワイヤーフレーム（モノクロで骨格だけ）を作ってください。デザインは後で入れます。不明点があれば質問してください。」
Claude Codeは指示を受けると、まずフォルダ内のファイルを読み込んで内容を理解します。その後、プランエージェント（計画立案の専門AI）に設計を依頼し、セクション構成の提案を返してきます。
代表菅澤
構成に納得したら「このプランでOKです」と承認します。すると、Claude Codeがtodoリスト（チェックリスト）を生成し、上から順にタスクを実行していきます。
Phase 2：許可（パーミッション）の仕組み
Claude Codeが作業を進める際、「このファイルを読み込んでいいですか？」「このファイルを作成していいですか？」と許可を求めてくるシーンが何度もあります。
| 操作 | 許可が必要？ | 推奨設定 |
|---|---|---|
| ファイルの読み込み（Read） | はい | 「Always Allow」で常時許可してOK |
| ファイルの作成（Write） | はい | 「Allow for session」で都度許可 |
| ファイルの削除（Delete） | はい | 慎重に確認してから許可 |
| コマンドの実行（Bash） | はい | 内容を確認してから許可 |
ファイルの読み込み（Read）は安全な操作なので、「Always Allow（常に許可）」を選んで問題ありません。一方、削除（Delete）が走る場合は、何が削除されるかを必ず確認してから許可してください。
何度もやっていると「毎回許可を求められるのが面倒」と感じるようになります。Claude Codeには許可リスト（allowlist）の設定ファイルがあり、特定のコマンドは自動で許可する設定が可能です。これは作業フォルダ内の.claude/settings.local.jsonファイルに自動保存されます。
Phase 3：レスポンシブ対応の確認方法
📚 用語解説
レスポンシブ対応：PC・スマホ・タブレットなど、画面サイズの異なるデバイスで閲覧しても、レイアウトが自動的に最適化されること。現代のWebサイトでは必須の機能。
Webサイトが完成したら、スマホで見ても崩れないかを確認します。ブラウザの開発者ツール（DevTools）を使えば、実機がなくても様々なデバイスでの表示をシミュレーションできます。
Claude Codeが生成するWebサイトは基本的にレスポンシブ対応されていますが、念のため確認する習慣をつけておくと安心です。
06 DESIGN 10パターンデザイン手法──「数の暴力」でクオリティを引き上げる ワイヤーフレームが完成したら、デザインのフェーズへ
ワイヤーフレーム（骨格）が完成したら、次はデザインのフェーズです。ここで紹介するのが、「10パターン出して比較する」というテクニックです。
代表菅澤
10パターン出しの手順
生まれるデザインの多様性
Claude Codeが出してくる10パターンは、驚くほど多様です。実際に出てくるデザインテイストの例を紹介します。
| パターン名 | テイスト | 特徴 |
|---|---|---|
| ネオンサイバー | 近未来・派手 | ネオンカラーの光沢、ダークな背景。インパクト重視 |
| クリーン | ミニマル・清潔 | 白基調で余白多め。ビジネス向けに使いやすい |
| ニューラル | ダーク・知的 | 黒背景にノードの接続イメージ。AI感が強い |
| ブルータリスト | 個性的・大胆 | 太い文字、あえて崩したレイアウト。オリジナリティ |
| ホログラフィック | グラデーション | 虹色のグラデーション。AIっぽさ全開 |
AI鬼管理山崎
発散→収束→再発散のサイクル
10パターンから1つ選んだら、そのデザインをベースにさらに10パターンの変形を出す。これを繰り返すことで、どんどんクオリティが上がっていきます。
10パターン生成
1つを選択
選んだものベースに
さらに10パターン
最終デザイン確定
このサイクルを2〜3回繰り返すと、プロのWebデザイナーに依頼したのと遜色ないクオリティのWebサイトができあがります。かかる時間は合計で30分〜1時間程度。外注なら数十万円、数週間かかる作業が、AIの力でここまで短縮できるのです。
最初のプロンプトで「AI感のある」「テクノロジー感のある」と方向性を伝えると、その方向に寄せたバリエーションが出ます。逆に、方向性を指定しないと「渋谷のクラブ」のようなネオン全開のデザインから「区役所のサイト」のような地味なものまで、バラバラに出てきます。イメージが固まっているなら、最初に方向性を伝えた上で10パターン出す方が効率的です。
07 CASE STUDY GENAI社内で実践しているClaude Code活用術 全社導入のリアルな数字と使い方のコツ
ここからは、弊社（株式会社GENAI）がClaude Codeを全社導入して実感している効果を具体的にお伝えします。
代表菅澤
社内で活用している業務領域
| 業務領域 | 主な用途 | 削減効果（概算） |
|---|---|---|
| 営業 | 提案書・見積・顧客別資料の自動生成 | 週20h → 週2h |
| 広告運用 | 週次レポート・CPA分析・配信調整 | 週10h → 週1h |
| ブログ記事 | SEO記事執筆・リライト・内部リンク最適化 | 1本8h → 1本1h |
| 経理 | 請求書チェック・経費仕訳・Freee連携 | 月40h → 月5h |
| 秘書業務 | 日報生成・議事録・スケジュール調整 | 日2h → 日15分 |
Claude Max 20xプラン（月額約30,000円）で、これだけの業務をカバーしています。人件費換算で考えると、月25〜30万円分の業務工数を月3万円でまかなっている計算です。
非エンジニアスタッフの活用事例
弊社にはプログラミング経験がないスタッフもいますが、Claude Codeを日常的に使いこなしています。共通しているのは、まずデスクトップアプリから始めたという点です。
AI鬼管理山崎
つまずきやすいポイントと対策
非エンジニアのスタッフがClaude Codeを使い始める際に、よく出てくるつまずきポイントとその対策をまとめました。
| つまずきポイント | 原因 | 対策 |
|---|---|---|
| 許可を求められすぎて面倒 | 初期設定で全操作が許可制 | 安全な操作はAlways Allowに設定。設定ファイルに許可リストを作成 |
| 処理が途中で止まる | デスクトップアプリの動作不安定 | 少し待って再試行。改善しなければCLIへの移行を検討 |
| 指示通りに作ってくれない | 要件が曖昧なまま進行 | プランモード＋Ask User Questionで要件を固めてから実行 |
| 英語のメッセージが分からない | Claude Codeの一部UIが英語 | 分からない部分はClaudeのチャットアプリにスクショを送って質問 |
最も重要なのは「完璧に理解してから始めよう」としないことです。分からないことは後から調べればいい。まずは小さなタスクで触り始めて、使いながら学んでいくのが最速の上達ルートです。
代表菅澤
08 COMPARISON Google AI Studioとの使い分け｜Claude Codeを選ぶ理由 無料のGoogle AI Studioとどう棲み分けるか
Webサイトを作るAIツールとして、Google AI Studioも人気があります。無料で使えて、ブラウザだけで操作できるため、非常に手軽です。ではClaude Codeとどう使い分ければいいのでしょうか？
📚 用語解説
Google AI Studio：Googleが無料で提供するAI開発環境。GeminiベースのAIを使ってWebアプリやサイトを構築できる。ブラウザ上で完結するのが特徴で、インストール不要。
| 観点 | Claude Code | Google AI Studio |
|---|---|---|
| 料金 | 月額$20〜 | 無料 |
| 使用AI | Claude（Anthropic） | Gemini（Google） |
| ログイン機能 | 構築可能 | 制限あり |
| データベース連携 | 構築可能 | 制限あり |
| 完成度の天井 | 本番レベルまで | プロトタイプ〜60%程度 |
| カスタマイズ性 | 自由度が高い | 環境の制約がある |
| 学習コスト | やや高い | 低い |
代表菅澤
弊社おすすめの使い分け方
両方のツールを状況に応じて使い分けるのが最も効率的です。
プロトタイプ作成
形を素早く確認
コードを取得
ブラッシュアップ
本格機能を追加
本番デプロイ
Google AI Studioで大まかな形を作り、そのコードをダウンロードして、Claude Codeで細部の作り込みと本格機能の追加を行う。このハイブリッド運用が、現時点では最もコスパの良い方法です。
コーディングエージェントとしての「賢さ」がClaude Codeは抜きん出ています。複雑な要件を理解し、一貫性のあるコードを生成する能力は、現時点で業界最高水準です。多くのエンジニアがClaude Codeを第一選択にしているのも、このコーディング品質の高さが理由です。
よくある質問
Q. Claude Codeを使うのにプログラミングの知識は必要ですか？
A. いいえ、不要です。日本語で「何を作りたいか」を伝えるだけで、AIが全てのコードを書いてくれます。デスクトップアプリなら、チャットアプリと同じ感覚で使えます。弊社でもプログラミング経験のないスタッフが日常的に活用しています。
Q. Proプラン（$20/月）でも実用的に使えますか？
A. 入門としては十分に使えます。ただし、使い込むと週の使用量上限に達することがあります。上限に達しても数日で回復するので、毎日使い続けることは可能です。業務で本格的に使う場合は、Maxプラン以上がおすすめです。
Q. デスクトップアプリとCLIでできることに差はありますか？
A. CLIでは一部のコマンドやカスタム設定が使えるなど、デスクトップアプリでは利用できない機能があります。ただし、日常的なWebサイト制作やファイル操作であれば、デスクトップアプリで十分対応できます。慣れてきたらCLIへの移行を検討するとよいでしょう。
Q. Claude Code Webとデスクトップアプリはどちらがおすすめ？
A. 初心者にはデスクトップアプリをおすすめします。Claude Code WebはGitHubの知識が前提で、途中で止めにくいなどの制約があります。デスクトップアプリは手元のフォルダで作業でき、プランモードで段階的に進められるため、初心者でも安心して使えます。
Q. 10パターンデザインを出すのにどれくらい時間がかかりますか？
A. 5〜15分程度です。デスクトップアプリはCLIに比べてやや処理が遅い傾向がありますが、10パターンすべて自動で生成してくれるため、待っているだけで完成します。気に入ったものを選んで再度10パターン出す場合も、同程度の時間です。
Q. Claude Codeで作ったWebサイトはそのまま公開できますか？
A. はい、生成されたHTMLファイルをサーバーにアップロードすればそのまま公開できます。レスポンシブ対応もされているため、PC・スマホの両方で正しく表示されます。独自ドメインの設定やサーバーの用意は別途必要ですが、コード自体はそのまま本番で使えるクオリティです。
代表菅澤
弊社ではClaude Codeの導入支援から、業務設計・社内浸透まで実践ベースで伴走するサービス「AI鬼管理」を提供しています。「自分たちで回せる組織」を目指す経営者の方に最適なプログラムです。
NEXT STEP
この記事の内容を、あなたのビジネスで
実践してみませんか？
AI活用を自社で回せるようになりたい方
AI鬼管理
Claude CodeやCoworkの導入支援から、業務設計・ルール作成・社内浸透まで実践ベースで伴走します。「自分たちで回せる組織」を作りたい経営者向け。
学ぶ時間はない、とにかく結果がほしい方
爆速自動化スグツクル
業務ヒアリングから設計・開発・納品まで丸投げOK。ホームページ、LP、業務自動化ツールを最短即日で構築します。
| AI鬼管理 | 爆速自動化スグツクル | |
|---|---|---|
| こんな方向け | 社内で回せる状態を作りたい 外注に依存しない組織を作りたい | 学ばなくていいから結果だけ欲しい とにかく早く自動化したい |
| 内容 | AIの使い方・業務設計・自動化の作り方を 実践ベースで叩き込む | 業務をヒアリングし、設計から ツール・システムを丸ごと納品 |
| 一言で言うと | 自分で作れるようになる | 全部任せられる |
| AI鬼管理を詳しく見る | スグツクルを詳しく見る |
📒 NOTE で深掘り
AI鬼管理 × 経営者の本音は note でも発信中
ブログでは伝えきれない経営者目線の体験談・業界動向・社内エピソードを
note にて公開しています。フォローして最新情報をチェック！
Claude Code 特化型
1対1 専門研修
受講者本人の業務を題材に、「使いこなせる」状態になるまで1対1で伴走する専門研修。業務特化・実装まで踏み込むタイプのClaude Code研修です。
Claude Code 研修の詳細を見る →AI鬼管理へのお問い合わせ
この記事を読んで気になった方へ。
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。
- AI業務自動化サービス「AI鬼管理」を運営 — Claude Code を活用し、経営者の業務を「AIエージェントに任せる仕組み」へ転換するパーソナルトレーニングを 伴走構築 で提供。日報・採用・問い合わせ対応・経費精算・議事録・データ集計・営業リスト等の定型業務を、AIに代行させる体制を経営者と一緒に作り込む
- Claude Code 実装ノウハウを 経営者・法人クライアント に直接指導。生成AIを「便利ツール」ではなく 「業務を任せる存在」 として運用する手法を体系化
- 「やらせ切る管理」メソッドの開発者。シンゲキ株式会社（2021年設立・鬼管理専門塾運営）にて累計3,000名以上の学習者を志望校合格に導いた管理メソッドを、AI × 経営者支援 に転用
- 著書『3カ月で志望大学に合格できる鬼管理』(幻冬舎)、『親の過干渉こそ、最強の大学受験対策である。』(講談社)
- メディア出演: REAL VALUE / カンニング竹山のイチバン研究所 / ええじゃないかBiz 他
- 明治大学政治経済学部卒
