2026-03-20エンジニアリング

Claude Codeの始め方——インストールから最初のサイト表示まで、全部書く

なぜ始めたのか、何を用意したのか、最初に何を言ったのか。このサイトが生まれた日の全記録。

「一人でも会社を動かせるんじゃないか」と思ったのは、会社に入ってしばらく経ってからだった。

大学でAIを学んでいたとき、自分の周りにいたエンジニアたちはみんな「ツールとしてAIを使う」という感覚でいた。自分もそうだった。コードを速く書くための道具。調べものを早く終わらせるための道具。

でも、Claude Codeを触り始めてから、その感覚が変わった。

「これは道具じゃなくて、一緒に働く人に近い」

そう思った瞬間から、疑問が生まれた。もし一人でも「組織」が作れるなら、会社という形じゃなくてもビジネスが動かせるんじゃないか。 エンジニアリングも、マーケも、財務の管理も、全部AIと分担できるなら——。

この記事は、その仮説を検証するために自分が何をしたか、の記録だ。Claude Codeをどうインストールして、最初に何を言って、このサイトをどうやって立ち上げたか。すべて書く。

このサイトが目指していること

技術的な手順を書く前に、なぜこれをやっているかを書いておきたい。そこを知らないと、この記事が「ただのセットアップガイド」に見えてしまう。

このサイトはひとつの実験だ。

「Claude Codeを使えば、コーディング経験がほぼない自分でも、一人で会社を動かせるか」を実証する実験。うまくいっても、いかなくても、その過程をすべてここに記録する。

自分のバックグラウンドを正直に書くと、大学では情報系の学部でAIを学んだ。機械学習や自然言語処理の授業はあった。ただ、Webの開発経験はほぼゼロだ。TypeScriptもReactも、このプロジェクトを始めるまで書いたことがなかった。

それでもサイトが動いた。記事が書ける。X（Twitter）への自動投稿も動いている。

「スキルがないから始められない」という感覚は、ある程度ウソだったと今は思っている。

始める前に必要なもの

セットアップの話をする。まず何が必要かから。

1. Claude のサブスクリプション

Claude Code は Anthropic（アンソロピック）という会社が開発している。使うには、claude.ai の有料プラン（Pro か Max）か、API キーが必要になる。

自分は Claude Pro を使っている。月額 $20 程度。このサイトの運営費として考えると、これが唯一の固定コストだ。

2. Node.js（バージョン 18 以上）

Node.js（ノード・ジェイエス）は JavaScript を PC 上で動かすためのソフトウェアだ。Claude Code 自体が Node.js で動いているため、先にインストールしておく必要がある。

ターミナル（Mac なら「ターミナル」、Windows なら「PowerShell」）を開いて、確認する：

node --version

v18.0.0 以上と表示されれば OK。表示されなければ nodejs.org からインストールする。「LTS 版」を選べばいい。

Claude Code のインストール

ターミナルで以下を実行する：

npm install -g @anthropic-ai/claude-code

npm install（エヌピーエム・インストール）はソフトウェアをインストールするコマンド。-g は「グローバル」の意味で、このコマンドを PC 全体から使えるようにするオプションだ。

終わったら動作確認：

claude --version

バージョン番号が表示されれば成功。1〜2 分あれば終わる。

プロジェクトを作る

ここからが本番だ。

まず、プロジェクト用のフォルダを作って移動する：

mkdir my-first-site
cd my-first-site

mkdir（メイクディレクトリ）はフォルダを作るコマンド。cd はそのフォルダに移動するコマンド。名前は何でもいい。

次に Claude Code を起動する：

claude

たったこれだけ。

初回起動時はブラウザが開いてログイン画面になる。Claude のアカウントでログインすると、ターミナルに戻ってこういう画面が出る：

╭─────────────────────────────────────╮
│ ✻ Welcome to Claude Code!           │
╰─────────────────────────────────────╯

>

ここに日本語で話しかけるだけで始まる。

最初の会話——何を言えばいいか

最初に自分が入力したのはこれだった：

Next.jsでウェブサイトを作りたい。
Web開発の経験はほぼない。
セットアップから全部やって。

Next.js（ネクスト・ジェイエス）は React というフレームワークをベースにした Web アプリ開発用のフレームワークだ。「フレームワーク」という言葉が難しければ、「サイトを作るための土台のセット」と思えばいい。このサイトも Next.js で動いている。

この一言で、Claude Code が動き始める。

Next.jsプロジェクトを作成します。
npx create-next-app@latest を実行しますか？

「はい」か「y」と入力すると、あとは自動で進む。 いくつか質問が来るかもしれない（TypeScript を使うか？など）。わからなければ全部 Enter で進んでいい。

数分後、フォルダの中にたくさんのファイルができている。

ローカルで動かす

ファイルができたら、動いているか確認する。こう言えばいい：

ローカルで起動して

Claude Code が npm run dev というコマンドを実行してくれる。これは「開発用にサイトを自分の PC 上だけで起動する」コマンドだ。

ローカルサーバーが起動しました。
http://localhost:3000 で確認できます。

ブラウザで http://localhost:3000 を開く。

Next.js のデフォルト画面が表示される。

これが「動いた瞬間」だ。

自分が書いたコードは 0 行。ターミナルで数回コマンドを入力して、Claude Code に話しかけただけで、画面にサイトが表示されている。この瞬間の感覚は今でも覚えている。「なんか、これ本物だ」と思った。

サイトをカスタマイズする

デフォルト画面が出たあとは、会話で自由に変えていける。

ホームページのタイトルを「Start Solopreneur」にして。
背景は白、文字は黒でシンプルに。
ナビゲーションに「About」と「Blog」へのリンクを入れて。

こう伝えると、Claude Code がファイルを開いて書き換えてくれる。ブラウザをリロードすると変更が反映されている。

「もう少し余白を広げて」「フォントサイズを小さくして」「このセクションを削除して」——こういう指示が全部通る。デザインのやり取りもほぼ会話だ。

自分がこのサイトのホームページを完成させるのにかかった時間は、2〜3 時間だったと思う。TypeScript を書いた時間はほぼゼロだ。

CLAUDE.md——「毎回説明する」をなくす

少し使っていると、毎回同じことを伝えていることに気づく。

「このプロジェクトは npm を使います」「コンポーネントは src/components/ に置いてください」「一人称は自分で」——新しいセッションを始めるたびにこれを言わないといけない。

これを解決するのが CLAUDE.md というファイルだ。

プロジェクトのルートに CLAUDE.md を置いておくと、Claude Code が毎回自動で読み込んでくれる。一度書いておけば、毎回説明しなくていい。

自分の CLAUDE.md の冒頭はこうなっている：

# CLAUDE.md — 社長指示書

## 開発ルール
- パッケージマネージャー: npm（yarn・pnpm は使わない）
- フレームワーク: Next.js 15 App Router
- スタイル: Tailwind CSS
- APIキーをコードに直書きしない

## このプロジェクトとは
AIエージェントが各部門を担う「一人会社」。
ソロアントレとしての活動を実践・発信するウェブサイト。

「社長指示書」というタイトルにしているのは、このプロジェクトの設計思想そのものだ。Claude Code を単なるツールとして使うのではなく、各部門を担う社員として使う——その発想の起点がここにある。

CLAUDE.md の設計については別の記事で詳しく書いた。

Hooks——「push し忘れ」をなくす

ローカルでサイトを作っても、それをインターネットに公開するには GitHub（ギットハブ）というサービスにコードを送る（push する）操作が必要だ。

最初はこれを毎回手動でやっていた。git add、git commit、git push——この3ステップを、Claude Code が変更するたびに繰り返していた。

面倒というより、忘れる。「さっきの変更、push したっけ？」が頻発した。

これを解決したのが Hooks（フック） という仕組みだ。

Claude Code には「特定のタイミングで自動的にコマンドを実行する」設定がある。自分は「Claude Code が返答を終えるたびに自動で push が走る」設定を入れた。

設定は .claude/settings.local.json というファイルに書く：

{
  "hooks": {
    "Stop": [
      {
        "hooks": [
          {
            "type": "command",
            "command": "cd \"/path/to/project\" && [ -n \"$(git status --porcelain)\" ] && git add -A && git commit -m \"auto: claude code $(date '+%Y-%m-%d %H:%M')\" && git push origin main || true",
            "timeout": 60
          }
        ]
      }
    ]
  }
}

/path/to/project の部分に自分のプロジェクトのパスを入れるだけ。

これを設定してから、「push したっけ？」と考えることがなくなった。Claude Code の返答が来てから 1〜2 分後には、本番のサイトに反映されている。Hooks の仕組みについてはこちらの記事で詳しく書いた。

本番に公開する——Vercel との連携

ローカルで動いているサイトを外部から見られる状態にするには、デプロイ（公開） が必要だ。

このサイトは Vercel（バーセル）というサービスで公開している。Vercel は GitHub と連携させておくと、push するたびに自動でサイトを更新してくれる。

流れをまとめると：

Claude Code がコードを変更
        ↓
Hooks が自動で git push
        ↓
GitHub にコードが届く
        ↓
Vercel が自動で検知してサイトを更新
        ↓
https://start-solopreneur.vercel.app が更新される

Vercel の無料プランで運用できる。月額コスト：¥0。

このサイトの現在地

始めてから約 1 週間で、こういう状態になった。

項目状態
サイト公開✅ Vercel で運用中
ブログ機能✅ MDX で記事を管理
自動デプロイ✅ Hooks で設定済み
X（Twitter）連携✅ API で自動投稿スクリプト作成済み
コスト¥0/月（Claude 料金除く）

全部 Claude Code との会話で作った。TypeScript も React も書いたことがない状態から始まって、この記事もそこで書いている。

「始めること」のハードルについて

「AIがあれば何でもできる」という言い方はちょっと違うと思っていて、「AIがあれば、やったことがないことを始められる」が近い気がする。

できることの幅が広がるんじゃなくて、始めるためのハードルが下がる、という感覚。

Web 開発の経験がなくても、このサイトは動いている。ただそれは「何もわからないまま進んでいい」という意味ではない。詰まった場所はいくつもあったし、Claude Code が「できる」と言ったのに実際はできなかったことも何度かあった。その話はこちらの記事に書いた。

一番大事なことは、動く状態にしてしまうことだと思う。

完璧なサイトを設計してから始めようとすると、永遠に始まらない。まず claude と打って、「Next.js でサイトを作って」と言えばいい。あとはその続きを考えながら進められる。

この記事がその最初の一歩になれば、と思って書いた。

← 記事一覧に戻る