ターミナル初心者のフリーランスWeb制作者が、Claude Codeをゼロからセットアップした全手順(Mac)
「Claude Codeが便利らしいけど、ターミナルって何?」という状態から始めた人に向けて、この記事を書いている。
自分もはじめてターミナルを開いたとき、真っ黒な画面に何を打てばいいのか全くわからなかった。でも実際にセットアップしてみると、手順は思ったよりシンプルだった。この記事では「なぜその操作が必要か」も含めて、省略なく書いていく。
Claude Codeとはなにか
まず前提の整理から。Claude Codeを一言で言うと、AIのClaudeをターミナルから操作できるツールのこと。ちなみにproプラン以上の有料プランじゃないと使えません(泣)
※ ターミナルとは、キーボードでコマンド(命令文)を入力してパソコンを操作するためのアプリ。Macには最初から入っている。
ブラウザで使える claude.ai と何が違うかというと、ファイルへの直接アクセスができる点が大きい。
| チャット版(claude.ai) | Claude Code(ターミナル) | |
|---|---|---|
| 操作 | ブラウザで会話 | ターミナルで起動 |
| ファイル操作 | 手動でコピペが必要 | ファイルを直接読み書きできる |
| 向いていること | 質問・相談・文章作成 | コード編集・ファイル管理・開発作業 |
「コードを修正してほしいけど、毎回コピペするのが面倒」という場面にClaude Codeは刺さる。プロジェクトフォルダを丸ごと渡して作業してもらえる感覚に近い。
ステップ1: ターミナルを開く
ターミナルは、Macに最初から入っているアプリ。キーボードでコマンドを打ってパソコンを操作するためのツールで、黒や白の画面が特徴的。
開き方(2通りある)
方法A: Spotlight検索を使う(こちらが速い)
- キーボードで
Command(⌘)+ Spaceを押す - 検索ボックスに「ターミナル」と入力
- 表示されたターミナルをクリック
–>
方法B: Finderから探す
- Finderを開く
- 「アプリケーション」→「ユーティリティ」→「ターミナル」
黒または白の画面が開いて、ユーザー名@コンピュータ名 % のような文字が表示されていれば準備OK。
ステップ2: Node.jsをインストールする
Claude Codeを動かすには、Node.jsが必要。Node.jsとは、JavaScriptをパソコン上で実行するためのソフトウェアで、npm(ノード・パッケージ・マネージャー)というパッケージ管理ツールも一緒に入る。npmを使ってClaude Codeをインストールするので、まずここから始める。
※ Node.jsとは、本来ブラウザ上で動くJavaScriptを、パソコン上でも実行できるようにするソフトウェア。Claude Codeの動作に必要。
※ npm(Node Package Manager)とは、Node.jsと一緒にインストールされるパッケージ管理ツール。ソフトウェアのインストールや管理に使う。
インストール手順
- ブラウザで https://nodejs.org を開く
- トップページに2つのボタンが表示される。LTS(推奨版)と書いてある方をクリック(LTSはLong Term Supportの略で、安定して長期サポートされるバージョン)
.pkgファイルがダウンロードされる- ダウンロードしたファイルをダブルクリックして開く
- インストーラーが起動するので「続ける」→「インストール」と進む(パスワードを求められたらMacのログインパスワードを入力)
- 「インストールが完了しました」と表示されたら完了
ターミナルを閉じて開き直す(重要)
インストール後はターミナルを一度閉じて、もう一度開いてください。
ターミナルは開いたタイミングで環境情報を読み込む仕組みになっているため、新しくインストールしたNode.jsを認識させるには再起動が必要。これを忘れると次のコマンドが command not found になる。
- ターミナルウィンドウの赤い「×」ボタンで閉じる(または
Command + Q) - 先ほどの手順でもう一度ターミナルを開く
インストールの確認
ターミナルで以下を1行ずつ実行する。
node --version
npm --version
それぞれ以下のようにバージョン番号が表示されればOK。数字は使っているバージョンによって多少異なる。
v22.14.0
10.9.2
command not found と表示された場合は、ターミナルの再起動が足りているか確認する。それでも解決しない場合は後述の「よくあるトラブル」を参照。
ステップ3: Claude Codeをインストールする
Node.jsが入ったので、npmを使ってClaude Codeをインストールする。ターミナルに以下を入力してEnterを押す。
npm install -g @anthropic-ai/claude-code
-g はグローバルインストールの意味で、どのフォルダからでも claude コマンドが使えるようになる。インストールには数十秒〜1分程度かかる。
完了したらバージョンを確認する。
claude --version
バージョン番号(例: 1.x.x)が表示されれば成功。
ステップ4: グローバル設定ファイルを作る
Claude Codeには、設定ファイル(CLAUDE.md)を読み込ませる仕組みがある。これを使うと、毎回同じ指示を入力しなくても、Claudeに自分のスタイルや基本ルールを覚えさせておける。
※ CLAUDE.mdとは、Claude Codeの設定ファイル。プロジェクトのルールや指示を書いておくと、セッション開始時にClaude Codeが自動で読み込んで動作に反映してくれる。
グローバル設定(全プロジェクト共通の設定)を作るには以下を実行する。
mkdir -p ~/.claude
cat > ~/.claude/CLAUDE.md << 'EOF'
# グローバル設定
## 言語
- 日本語で応答する
## 自分について
- (自分のプロフィールや仕事スタイルを書く)
## 作業の進め方
- (作業上のルールを書く)
EOF
~/.claude/CLAUDE.md は、ホームフォルダの中に作られた隠しファイル。全プロジェクトに共通して読み込まれる。
ステップ5: 案件フォルダを作って起動する
実際に作業するプロジェクトのフォルダを作り、そこからClaude Codeを起動する。
mkdir -p ~/projects/sample-project
cd ~/projects/sample-project
claude
claude と入力してEnterを押すと、初回はAnthropicへのログインが求められる。アカウントがなければこのタイミングで作成する。ログインが済めば起動完了。
プロジェクトフォルダ内に CLAUDE.md を置くと、そのプロジェクト専用の指示を追加できる。グローバル設定と組み合わせて使うのが基本的なスタイル。
記憶の3階層構造
Claude Codeには「記憶」の仕組みが3段階ある。
| 階層 | 場所 | 内容 |
|---|---|---|
| グローバル | ~/.claude/CLAUDE.md | 全プロジェクト共通のルール・自己紹介 |
| プロジェクト | プロジェクトフォルダ/CLAUDE.md | 案件固有の設定・注意事項 |
| オートメモリ | 自動生成 | Claudeが会話から学習した内容を自動保存 |
グローバルには「日本語で返答して」「自分はWeb制作者で、WordPressを中心に使っている」のような基本情報を書いておく。プロジェクトには「このサイトはACFを使っている」「本番環境には直接触れないで」のような案件固有のルールを書く。
最初はグローバル設定だけ作っておけば十分。プロジェクト用のCLAUDE.mdは必要に応じて追加していけばいい。
よくあるトラブルと対処法
「command not found: node」と表示される
Node.jsのインストール後にターミナルを再起動していない可能性が高い。
- ターミナルを完全に閉じる(
Command + Q) - ターミナルを開き直す
node --versionを再度実行する
それでも解決しない場合は、nodejs.orgからもう一度インストーラーをダウンロードして実行してみる。
npmの権限エラー(Permission denied)
npm install 実行時に権限エラーが出た場合は、コマンドの先頭に sudo を付けて実行する。
sudo npm install -g @anthropic-ai/claude-code
sudo を使うとMacの管理者権限でコマンドを実行できる。パスワードを求められたらMacのログインパスワードを入力する(入力中は画面に何も表示されないが、正しく入力されている)。
Macのセキュリティ警告が出る
Macには、インターネットからダウンロードしたアプリを実行前にブロックする機能(Gatekeeper)がある。
- 「システム設定」→「プライバシーとセキュリティ」を開く
- 「セキュリティ」の項目に「〇〇はブロックされました」という表示があれば「このまま許可」をクリック
- もう一度コマンドを実行する
基本コマンドと使い分け
ターミナルでよく使うコマンド
| コマンド | 意味 | 例 |
|---|---|---|
pwd | 今いるフォルダを表示 | pwd → /Users/azu/projects/sample |
ls | フォルダの中身を一覧表示 | ls |
cd フォルダ名 | フォルダを移動 | cd ~/projects/sample-project |
mkdir フォルダ名 | フォルダを作成 | mkdir new-folder |
cat ファイル名 | ファイルの中身を表示 | cat CLAUDE.md |
cd ~ でホームフォルダに戻れる。迷ったときはこれを使う。
Claude Codeの終了は /exit またはキーボードの Ctrl + C。
チャット版との使い分け
| 向いている作業 | 使うべきツール |
|---|---|
| 調べ物・相談・アイデア出し | claude.ai(チャット版) |
| 短い文章の作成・添削 | claude.ai(チャット版) |
| コードの編集・ファイル操作 | Claude Code |
| プロジェクト全体を渡して作業させる | Claude Code |
| 長時間・複数ファイルにまたがる開発 | Claude Code |
気軽に話しかけるならチャット版、手を動かして作業を進めるならClaude Code、という使い分けがしっくりくる。
まとめ
Claude CodeをMacにインストールする手順をまとめると以下の通り。
- ターミナルは
Command + Space→「ターミナル」で開ける - Node.jsは nodejs.org からLTS版をダウンロードしてインストール
- インストール後は必ずターミナルを再起動する(これを忘れると次のコマンドが通らない)
node --versionとnpm --versionでインストールを確認するnpm install -g @anthropic-ai/claude-codeでClaude Codeをインストール- プロジェクトフォルダに移動して
claudeで起動
一度セットアップしてしまえば、次回以降は cd プロジェクトフォルダ → claude の2ステップで起動できる。最初の環境構築さえ乗り越えれば、あとはシンプル。
ターミナルに慣れていない段階でつまずくポイントのほとんどは「再起動を忘れた」「パスが通っていない」のどちらかなので、エラーが出たらまず再起動を試してみるのがいい。
次回予告
実はClaude Code、コーディングだけじゃなくFTPサーバーへのアップロードもできるんです。
※ FTPとは「File Transfer Protocol」の略で、サーバーにファイルを転送するための仕組みのこと。Web制作ではサイトのファイルをサーバーにアップロードする際に使う。
ターミナルのコマンドを実行できるということは、ファイルの編集 → FTPアップロードまでを、Claude Codeの中だけで完結できるということ。
次回は「Claude Codeで編集したWordPressテーマを、そのままFTPでサーバーにアップロードする方法」を書きます。Web制作者にとっては、これができるかどうかで実用度がまったく変わってくるので、ぜひ次回もチェックしてください。
※この記事はNPCの中の人の実務経験をもとに書いています。