ヘタリーマン
Claude Codeはターミナル(黒い画面)から直接AIに指示を出せるツール。「Webサイト作って」「このバグ直して」って頼むだけで、AIがコードを書いてくれるんだ。プログラミング副業を始めるなら、これは本当に必須だよ!

この記事の目次

  1. Claude Codeとは?Web版と何が違うの?
  2. インストール手順(Mac / Windows / Linux)
  3. 初期設定とログイン
  4. 基本的な使い方
  5. 覚えておきたいスラッシュコマンド
  6. 実践:Claude Codeで簡単なWebサイトを作ってみよう
  7. 副業での活用シーン5選
  8. 料金と注意点
  9. 困ったときのトラブルシューティング

Claude Codeとは?Web版と何が違うの?

Claude Code(クロード コード)は、Anthropicが提供するターミナルベースのAIコーディングアシスタントだよ。ブラウザでclaude.aiにアクセスする「Web版」とは違って、ターミナル(コマンドライン)から直接使えるのが特徴。

Web版Claudeとの違い

つまり、Claude Codeは「コードを教えてくれるAI」ではなく「一緒にコードを書いてくれるAI」。自分のパソコンのファイルを直接触ってくれるから、コピペの手間がゼロなんだ。

こんな人におすすめ

・プログラミングで副業を始めたい人
・コードは書けないけどWebサイトやツールを作りたい人
・開発スピードを爆速にしたいエンジニア
・ノーコードの次のステップに進みたい人

インストール手順

前提条件

Node.jsのインストール(まだの人)

Node.jsが入っていない場合は、まずこちらを入れよう。

# Macの場合(Homebrewを使用) brew install node # Windowsの場合 # nodejs.org から公式インストーラーをダウンロード # インストール確認 node --version # v18以上ならOK

Claude Codeのインストール

# npmで一発インストール npm install -g @anthropic-ai/claude-code

これだけ!たった1コマンドでインストール完了だよ。

ヘタリーマン
「ターミナルって何?」っていう人も大丈夫。Macなら「ターミナル」アプリを開いて、上のコマンドをコピペするだけだよ。Windowsなら「PowerShell」を検索して開こう。
広告スペース(300×250)

初期設定とログイン

Claude Codeを起動する

# 作業したいフォルダに移動 cd ~/Desktop/my-project # Claude Codeを起動 claude

認証方法

初回起動時に認証が必要だよ。2つの方法があるんだ。

  1. Anthropicアカウントでログイン(おすすめ):ブラウザが開くので、claude.aiのアカウントでログインするだけ
  2. APIキーを使うANTHROPIC_API_KEYの環境変数を設定しておけば自動認証

どっちを選ぶべき?

Claude Proに加入しているなら1番が楽。APIキーで従量課金のほうが安い場合もあるから、使い方に合わせて選ぼう。

基本的な使い方

Claude Codeが起動したら、あとは日本語で「やりたいこと」を伝えるだけ。こんな感じ。

# Claude Codeが起動した状態で... あなた:「index.htmlを作成して。ヘッダーとフッター付きのシンプルなWebページにして」 # → Claude がindex.htmlファイルを作成してくれる あなた:「CSSも追加して。モダンなデザインにして」 # → style.cssを作成し、HTMLにリンクも追加してくれる あなた:「レスポンシブ対応もお願い」 # → メディアクエリを追加してくれる

ファイルの作成・編集・削除を全部AIがやってくれるから、自分はやりたいことを伝えるだけ。まるでプロのエンジニアが隣にいるみたいでしょ?

Claude Codeが自動でやってくれること

広告スペース(300×250)

覚えておきたいスラッシュコマンド

Claude Codeの中で使える便利なコマンドがあるよ。全部覚えなくても、よく使うものだけ知っておけばOK。

実践:Claude Codeで簡単なWebサイトを作ってみよう

実際にやってみよう!「自己紹介のポートフォリオサイト」を作る流れだよ。

ステップ1:プロジェクトフォルダを作成

mkdir my-portfolio cd my-portfolio claude

ステップ2:AIに指示を出す

あなた:「フリーランスのWebデザイナー向けのポートフォリオサイトを作って。 以下の要件でお願い: - シンプルでモダンなデザイン - ヒーローセクション、実績セクション、お問い合わせフォーム - レスポンシブ対応 - HTML/CSS/JavaScriptのみで」

ステップ3:できあがりを確認

数十秒〜数分で、Claude Codeがファイルを作成してくれる。ブラウザでindex.htmlを開けば完成したサイトが見られるよ。

ステップ4:修正を依頼

あなた:「ヒーローセクションの背景色をもう少し暗めにして」 あなた:「お問い合わせフォームにバリデーションを追加して」 あなた:「全体的にアニメーションを追加してリッチな感じにして」

このやり取りを繰り返すだけで、どんどんクオリティが上がっていくんだ。

ヘタリーマン
実はこのブログサイト自体も、Claude Codeを使って作ったんだよ!「サラリーマン向けの副業ブログを作って」って指示するだけで、HTMLもCSSもJavaScriptも全部AIが書いてくれたんだ。すごい時代でしょ?
広告スペース(300×250)

副業での活用シーン5選

1. Web制作の受注案件をこなす

クライアントから「こんなサイトが欲しい」と言われたら、Claude Codeに指示を出して一気に作成。制作時間を従来の1/3〜1/5に短縮できるよ。

2. ブログのカスタマイズ

WordPressやHTMLブログのデザイン変更、機能追加をAIに任せられる。「サイドバーにプロフィールウィジェットを追加して」みたいな指示でOK。

3. 業務自動化ツールの開発

Pythonスクリプトやシェルスクリプトの作成をAIに任せて、企業向けの業務自動化ツールを納品する副業ができるよ。

4. LINEボット・チャットボットの開発

「飲食店の予約受付ボットを作って」と指示すれば、Claude Codeがコードを生成。1件5〜15万円の案件が狙えるジャンルだよ。

5. アプリのプロトタイプ作成

「こんなアプリを作りたい」というアイデアを伝えるだけで、動くプロトタイプを作ってくれる。スタートアップの受託開発にも使えるね。

料金と注意点

料金体系

注意点

困ったときのトラブルシューティング

「command not found: claude」と出る

Node.jsが正しくインストールされていないか、npmのグローバルパスが通っていない可能性があるよ。node --versionで確認してみて。

認証エラーが出る

ブラウザで認証する方法を試してみよう。claudeを実行すると認証用のURLが表示されるから、そこからログインしてね。

動作が遅い・フリーズする

大きなプロジェクト(ファイル数が多い)だと時間がかかることがある。.claudeignoreファイルを作って、node_modulesなどの不要なフォルダを除外しよう。

# .claudeignore の例 node_modules/ .git/ dist/ *.log
ヘタリーマン
Claude Codeは「プログラミングができない人」を「AIの力でプログラミングできる人」に変えてくれるツールだよ。ぜひ試してみて、副業の幅を広げてね!

Claude APIの使い方も学ぼう

Claude Code + Claude APIを組み合わせれば、もっと高度なツールが作れるよ

Claude API完全ガイドを見る
広告スペース(300×250)
前の記事 Claude APIの使い方完全ガイド おすすめ記事 Claudeの始め方完全ガイド