Claude Codeで本気のLPを制作してみた（Windows×Laravel）｜Cursorユーザーの体験談

最近話題のClaude CodeをWindows環境で試してみました。こちらは、ターミナル上で動作する対話型AIコーディングツールです。

わたしはこれまでCursor内でClaudeを使っていましたが、直接Claudeに課金していませんでした。なので、Claude Codeは全くの初心者です。

その目線で、手順と、良かった点や注意点、お伝えしますね。

「Claude Codeって最近聞くけど、他のツールと何がちがうんだろ」と思ったら見てみてください。

Claude Codeへの申し込み

Claude Codeは、Anthropic ClaudeのPro（月額$20）版またはMax（月額$100/$200）版で利用可能です。今のところ、無料プランでは使えなそうでした。

今回はPro版を契約して、使ってみることにしました。

現在はPro版だと、Claude Sonnet 4のみ使えます。Max版にすると、Claude Opus 4も選択できます。ほか送信できるプロンプト数も異なります。

Claude Code利用時のPro版とMax版の違いはこちらご覧ください。

料金プランはこちら。

今回のClaude Codeへの依頼内容

今回は、すでに出来上がっているLaravelプロジェクトにランディングページを追加してみます。

既存のランディングページはあるのですが、これをお手本にして、もうひとつ作るという内容です。技術的には難しくないものの、デザインや日本語力が重要となります。

Claude Codeのインストール手順

まず最初にインストールが必要となります。わたしはWindows11環境なので、Windows11での設定を書きますね。

WSLのインストール

WSLは、Windows上でLinux環境を仮想的に動作させるシステムです。Windows PowerShellを管理者権限で実行し、以下のコマンドでインストールします。

インストール後、Ubuntuを起動します。

Node.jsのセットアップ

Ubuntu上で、Node.jsをセットアップします。今回はNode.jsのバージョン管理がしやすいnvmを使用してセットアップを行いました。

Ubuntuを再起動した後、下記コマンドを実行して、LTS版（長期サポート版）のNode.jsをインストールします。

インストール後、再度下記コマンドを順番に実行します。最新のLTS版が入ったことが確認できます。

Claude Codeのインストール

これで準備ができました。下記コマンドで、Claude Codeをインストールします。

その後、claude –versionといれて、Claudeのバージョンが表示されれば、インストール成功です。

プロジェクトの場所へ移動

WSL（Ubuntu）では、WindowsのCドライブに行くには下記のようにコマンドを実行します。

cdは、場所を移動するためのコマンドです。引き続きcdコマンドを使って、今回編集するプロジェクトの中に移動しておきます。

claudeの起動

プロジェクトの中で、claudeコマンドを実行します。

claude用のターミナルが起動します。

アカウント連携

初回はアカウントとの連携が必要となります。サブスクアカウントと連携させるなら1.Claude account with subscriptionを選びます。Anthropicにログインします。

その後、初回はセキュリティに関する注意事項や、このフォルダを信用するかなど出てきます。「Yes」を選んで進んでいきます。

すると、次のようにClaude Code上で入力可能な画面に。

Claude Codeの初期設定ファイル

最初に、CLAUDE.mdファイルを作っておくと便利です。CLAUDE.mdはClaude Code起動時に自動で読み込まれ、プロジェクトの情報やClaude Codeへの希望を記述できます。

画面上でも、次のようにCLAUDE.mdの作成を促すメッセージが表示されます。

” Run /init to create a CLAUDE.md file with instructions for Claude”(/initを実行して、Claudeへの指示をいれるCLAUDE.mdファイルを作りましょう）

メッセージにあるとおり、下記コマンドを実行すると、CLAUDE.mdを新規作成できます。

実行する内容にもよるかと思いますが、今回は、既に開発したプロジェクトにランディングページを追加するという想定なので、次のようにいれておきました。

【CLAUDE.md例】

すでに作成したCLAUDE.mdを編集したり、プロジェクトごとではなく全体の指示をいれるCLAUDE.mdファイルを作成するには、/memoryコマンドを実行します。

次のように３つの選択肢がでてきます。

User memoryを選択すると、全体のCLAUDE.mdを編集できます。常に日本語で返答してほしい場合には、次のようにいれます。

【全体のCLAUDE.md例】

※ファイルの編集モードから抜けるには、Ctrl+xキーを押します。保存する場合はYキーを押します。

Claude Codeの3つのモード

Claude Codeを実行するには、３つのモードがあります。デフォルトでは、１.通常モードとなっています。

＝＝

1. 通常モード

• 表示: 何も表示されない（デフォルト状態）
• 動作: 一つ一つ確認しながら実行

2. auto-accept edits on

• 表示: ⏵⏵ auto-accept edits on
• 動作: 毎回許可をせずに自動実行

3. plan mode on

• 表示: ⏸ plan mode on
• 動作: 実装せずに設計・計画のみ

＝＝

通常は1のデフォルトのままでも良いのですが、まず実装案を作ってほしい時は　play mode on とします。簡単な機能であれば、auto-accept edits onにすると、承認なしに進んでくれるモードがラクです。

【auto-accept edits on選択時】

役立ちコマンド

ほか、Claude Codeを利用する上で必要なコマンドとしては次のようなものがあります。

■通所コマンド実行前には、!をつける

普通のコマンドを実行するときは、先頭に!をつけます。たとえば今いる場所の確認は、下記コマンドを実行します。

■ファイルの指定は@マークをいれる

途中まで入力すると、候補となるファイル名やディレクトリ名が表示されます。

ほか、使えそうなコマンドはこちらの公式マニュアルの下部ご覧ください。

実際にClaude Codeに指示をしてみた結果

ここまで、使い方などをご紹介しました。実際に試してみた結果もお見せしますね。

今回はClaude Codeにランディングページを作ってもらいます。こういった依頼はauto-accept edits onにして自動モードで作成すると良さそうですが、とりあえず最初なので、デフォルトの通常モードを選択。ひとつひとつ確認しながら進めていくことにしました。

こちらが実際の画面です。

【Claude CodeでLP作成時の画面・Claude Codeの返答】

しばらくすると、無事完成しました。

ですがイマイチなデザインだったので、「本気でお願い！」とダメ出しをしてみました。

【Claude Codeにダメだしをしてみた画面】

すると…がんばってやり直してくれました。できたページがこちら。

【Claude Codeにダメ出しをしてできたLP】

大分よくなりましたが、】1日3時間以上　と、カッコの向きがずれています。また、上記画像にはないですが、下のほうに「○○は商標登録です」などとウソの言葉もさらっと入っていたりしました。

当然ながら最終的には人がチェックして、修正が必要ではあります。ですが、指示にそって短時間でここまでのものを作ってくれて、満足です。

AIツールを使う時の注意点

なお今回は、新たにLPを作るという指示を出したのですが、既存のファイルも勝手にかえられていました。

既存ファイルを変更されたくない場合は、明確に指示をいれておくか、あるいはブランチをわけるか、既存の変更点はコミットしておくと安全です。

このあたりの対策は、CursorやDevinなど、エージェント系ツールでは重要ですね。

さいごに

わたしは最近は、Cursorをよく使っています。CursorでもClaude 4 Sonnetを使っています。使用するモデルの性能は同じだったので、今回Claude Codeを使ってみて、精度自体には驚きはありませんでした。

ただ、Claude Codeはやはり、コマンドでやりとりできるのが便利だと感じました。

また、計画書をつくるモード（plan mode on）というのが気に入りました。あらかじめ計画を作ってくれるので、その段階で、修正を加えられます。

とはいえ、やはりコードをしっかり見ながらすすめるときはCursorのほうが便利。今回は結局、Claude Codeで作業した後に、Cursorを使って、自分で色々と修正をしてから仕上げています。

Claude Codeは、Cursorを併用して使うと便利そう、という感触です。また色々試してみます♪