最近話題のClaude CodeをWindows環境で試してみました。こちらは、ターミナル上で動作する対話型AIコーディングツールです。
実際のランディングページを作ってみましたが、インストール手順・利用方法・良かった点・イマイチだった点、お伝えしますね。
「Claude Codeって最近聞くけど、どんな特徴があるんだろう」「品質はどうだろう」と思ったら見てみてください。
感想をひとことでいうと、「お、こりゃ、便利！」って感じです。ただ最後はCursorを使って、細かくチェック＆調整を加えました。
Claude Codeへの申し込み
Claude Codeは、Anthropic ClaudeのPro（月額$20）版またはMax（月額$100/$200）版で利用可能です。
まずはPro版を契約して、使ってみました。
Claude Code利用時のPro版とMax版の違いはこちらご覧ください。
料金プランはこちら。
今回のClaude Codeへの依頼内容
今回は、Claude Codeを使って、Laravelで作ったプロジェクト内に、サービスを紹介するランディングページを作成することにしました。
既存のランディングページをお手本にして、別のサービスのランディングページを作るという内容です。技術的には難しくないものの、技術力だけではなく、デザインや日本語力も重要となります。
Claude Codeのインストール手順
まず最初にインストールが必要となります。わたしはWindows11環境なので、Windows11での設定を書きますね。
現在は、WSLなしで、PowerShellで直接下記コマンドを実行して、インストールができます。Claude Codeのインストールはこちらの記事に詳細をいれています。
まずは下記記事にてインストールを進めてから、本記事に戻ってきてくださいね。
役立ちコマンド
Claude Codeを利用する上で必要なコマンドとしては次のようなものがあります。
■通所コマンド実行前には、!をつける
普通のコマンドを実行するときは、先頭に!をつけます。たとえば今いる場所の確認は、下記コマンドを実行します。
|
1 |
!pwd |
■ファイルの指定は@マークをいれる
|
1 |
@ファイル名 |
途中まで入力すると、候補となるファイル名やディレクトリ名が表示されます。
ほか、使えそうなコマンドはこちらの公式マニュアルの下部ご覧ください。
実際にClaude Codeを使ってみた結果
ここまで、Claude Codeのインストール方法と使い方をご紹介しました。ここからは、実際に試してみた結果をお伝えします。
今回はClaude Codeにランディングページを作ってもらいます。こういった依頼はauto-accept edits onにして自動モードで作成すると良さそうです。ただ今回は、デフォルトの通常モードを選択。ひとつひとつ確認しながら進めていくことにしました。
こちらが実際の画面です。
【Claude CodeでLP作成時の画面・Claude Codeの返答】
作業の流れて見れて安心ですね。しばらくすると、無事LPが完成しました。
ですがイマイチなデザインだったので、「本気でお願い！」とダメ出しをしてみました。
ダメ出しを自然言語で理解してくれるところが嬉しいですね。
【Claude Codeにダメだしをしてみた画面】
指示に沿って、がんばってデザインを作り直してくれました。完成したページがこちら。
【Claude Codeにダメ出しをしてできたLP】
大分よくなりましたが、】1日3時間以上 と、カッコの向きがずれています。また、上記画像にはないですが、下のほうに「○○は商標登録です」などとウソの言葉もさらっと入っていたりしました。
当然ながら、この後は人がチェックして、修正が必要ではあります。ですが、指示にそって短時間でここまでのものを作ってくれたので満足です。
AIツールを使う時の注意点
なお今回は、新たにLPを作るという指示を出したのですが、既存のファイルも勝手にかえられていました。
既存ファイルを変更されたくない場合は、明確に指示をいれておくか、あるいはブランチをわけるか、既存の変更点はコミットしておくと安全です。
このあたりの対策は、CursorやDevinなど、エージェント系ツールでは重要ですね。
AIにコーディングを任せるときは、誰かに作業をお願いするという気持ちで、Git管理をしっかりしておくのは必須ですね。
Git管理については、下記記事で、手書きの絵を使って分かりやすくご紹介しています＾＾ 「Git管理ってなに？」と思ったら見てみてください。
さいごに
今回はClaude Codeを使ってみましたが、「なかなか良いな♪」と感じました。まず、コードを見ずにコマンド画面で普通の言葉で指示を出せるのが便利です。
ですがコードを見ずに自動で作るだけでは、不十分なこともあります。今回例でお見せしたランディングページは、その後、Cursorエディタを使って、コードを見ながら調整を加えました。Cursor上でも、AIモデルはClaude 4 Sonnetを使いました。
最新版のLPはこちらです。
Claude Codeのランディングページもそれっぽい出来でしたが、どうも満足できず。
ですが、Claude Codeでほぼ自動で作成したランディングページは、土台としては十分な出来でした。
現段階では、Claude Codeでプロトタイプを作ったり、構想を練ったり、枠組みを作ったりした後に、Cursorを使ってコードに細かく手を加えて仕上げていく、こんな使い方が便利だと感じています。また色々試してみますね。
なお、Youtube動画にて、Claude Codeを使って10分でWebサイト公開までを実演しています。よかったらこちらも参考にしてくださいね。
生成AIツールを使うと、Webサイトやアプリを手軽に作成できます。とはいえ、セキュリティや本番への反映方法など、初めての場合には不安を感じられる部分もあると思います。
特にセキュリティは何かあると一発アウトのコワイ部分です。
私の方では、「Claude CodeでWebサイトや社内ツールを作りたい」といったご相談を承っています。お気軽にお問い合わせください。
