【非エンジニアが20分で完成】Claude Code環境構築→日報アプリ量産マニュアル｜つまずきポイント解決フロー全公開
「Claude Codeって何ができるの？」と聞かれたとき、一番いい答えは言葉での説明より動画を見せることです。
でも、動画を見ても「実際にどこからどう始めればいいか」が分からないまま終わる人が多い。
この記事では、Claude Codeを初めて触る人が「環境構築から実際に動くアプリを作るまで」を完全に再現できるよう、全手順を書きます。
プログラミングの知識がなくても問題ありません。コードは書きません。指示するだけです。
目次
- Claude Codeの3つの利用方法と選び方
- まず試すべきはアプリ版（最も簡単）
- VSCode環境構築の全手順
- フォルダの作り方と場所の管理
- 初めてのアプリ作成：日報作成アプリのデモ
- よくあるつまずきポイントと解決策
- プランモードの使い方
- モデルの選び方（Sonnet / Opus / Haiku）
- トークン節約術5選
- Skillsでレシピ化する方法
- 使えるプロンプトテンプレート3本
1. Claude Codeの3つの利用方法と選び方
Claude Codeを動かす方法は3種類あります。
①アプリ版（初心者向け）
Claude公式のデスクトップアプリをインストールして使います。Web版のClaude画面と見た目はほとんど同じで、左上のメニューでチャット/Cowork/Codeを切り替えるだけ。最初に試すならここからです。
②ターミナル（中級者向け）
黒い画面でコマンドを打って操作する方法です。グラフィックを使わないため動作が速く、エンジニアが好んで使う方法。ただし、多少の慣れが必要です。
③VSCode等のコードエディター（おすすめ）
VSCode（Visual Studio Code）は、ファイル一覧・コード画面・ターミナル・AIチャットが1画面に収まったエディターです。最初のインストールと設定が必要ですが、一度動けば圧倒的に作業しやすくなります。
2. まず試すべきはアプリ版（最も簡単）
Claude公式サイト（claude.ai）から、デスクトップアプリをダウンロードします。Mac・Windows両方に対応しています。
インストール後、アプリを開くと画面上部に「チャット」「Cowork」「Code」の切り替えが出てきます。「Code」を選択して、テキストエリアに指示を入れるだけで使えます。
月額20ドル（約3,000円）のProプラン契約が必要です。
無料プランでは利用できません。
3. VSCode環境構築の全手順
VSCodeは、Microsoft公式サイト（code.visualstudio.com）から無料でダウンロードできます。
手順①：日本語化
インストール後、画面が英語表示になっています。左側のアイコン列から「拡張機能（四角いアイコン）」を押して、検索窓に「Japanese」と入力します。「Japanese Language Pack for Visual Studio Code」をインストールして再起動すると日本語になります。
手順②：Claude Code拡張機能のインストール
同じく拡張機能の検索窓に「Claude」と入力します。「Claude Code for VS Code」が出てきたらインストールします。再起動後、画面上部にClaudeのアイコンが表示されれば完了です。
4. フォルダの作り方と場所の管理
最初に失敗しやすいのが「どこにファイルが作られているか分からなくなる」ことです。
おすすめの管理方法
デスクトップまたはドキュメントに「AIプロジェクト」というフォルダを作ります。その中に、プロジェクトごとのフォルダを作っていきます。
例：
AIプロジェクト/
├── 20260628_日報アプリ/
├── 20260629_問い合わせ自動化/
└── 20260630_月次レポート/重要：自分がどのフォルダにいるかを確認する
VSCodeの「ファイル」→「フォルダーを開く」で、作業したいフォルダを選択します。これをしないと、別のフォルダにファイルが作られてしまいます。
この記事のライター
