こんにちは！コーダーのゆうしです。
「AIってなんか難しそう」「ChatGPTは聞いたことあるけどClaudeって何？」という方に向けて、今回はAnthropicが開発したAI「Claude（クロード）」をコーディングのアシスタントとして活用する方法を紹介します。
実際にぼく自身がHTMLやCSS・WordPressのコーディングにClaudeを使ってみたところ、作業スピードがかなり変わりました。「AIを使いこなせている気がしない」という方こそ、ぜひ読んでみてください。
Claudeとは？コーダーが知っておきたい基本
ClaudeはAnthropicという企業が開発した生成AIです。ChatGPTと同じく自然な日本語で会話でき、コードの生成・解説・修正まで幅広くこなしてくれます。
ブラウザから無料で使える claude.ai にアクセスするだけで、すぐに試せます。
ChatGPTとの違いをざっくり言うと、Claudeは長い文章・大きなコードを一度に処理するのが得意で、ファイルまるごと貼り付けて「ここを直して」といった使い方がしやすいです。
コーディングでClaudeを使う3つの場面
① コードを書いてもらう
「レスポンシブ対応のナビゲーションメニューをHTMLとCSSで作って」と伝えるだけで、動くコードを生成してくれます。
【プロンプト例】
レスポンシブ対応のハンバーガーメニューをHTML・CSS・JavaScriptで作ってください。
スマホでは左からスライドインするドロワー形式にしたいです。
そのままコピペして使えるレベルのコードが返ってくることも多く、「とりあえずたたき台がほしい」という場面で特に便利です。
② エラーや挙動の原因を調べてもらう
「CSSを書いたけど思い通りに動かない」というとき、コードをまるごと貼り付けて「なぜ効かないか教えて」と聞けます。
【プロンプト例】
以下のCSSでposition:stickyが効きません。原因と修正方法を教えてください。
（コードをここに貼る）
自分でGoogle検索するよりも、コードの文脈を理解した上で答えてくれるので、ピンポイントに解決策が得られることが多いです。
③ コードの意味を説明してもらう
既存のコードを読み解きたいとき、「このコードが何をしているか説明して」と聞くだけで丁寧に解説してくれます。
WordPressのfunctions.phpに書かれた関数や、jQueryプラグインのソースを理解するのにも使えます。
上手に使うためのプロンプトの書き方
Claudeへの指示（プロンプト）は、具体的に書けば書くほど精度が上がります。
| NG例 | OK例 |
|---|---|
| CSSを直して | このCSSのflex指定がスマホで崩れる原因を教えて |
| コードを書いて | Cocoonテーマ用のカスタム投稿タイプをfunctions.phpに追加して |
| エラーが出た | コンソールに「Uncaught TypeError: Cannot read properties of null」が出た。原因と修正方法を教えて |
ポイントは以下の3つです。
- 何を・どうしたいかを明確にする
- 使用している技術・環境を伝える（WordPress / Cocoon / jQuery など）
- エラーメッセージやコードはそのまま貼る
躓きやすいポイント
生成されたコードをそのままコピペしない
Claudeが出力したコードは「動く可能性が高い」ものですが、必ずしも100%正確ではありません。特にWordPressのバージョンやプラグインの仕様が絡む場合は、動作確認を必ずしましょう。
日本語で聞いてOK、でも質問は1つずつ
一度にあれもこれも聞くと、回答が散漫になりがちです。「まずこの問題だけ解決して」と1問1答形式で進めると精度が上がります。
無料プランでも十分使える
claude.aiの無料プランでも、コーディングの補助には十分な性能があります。まずは無料で試してみることをおすすめします。
まとめ
Claudeはコーダーにとって、かなり頼りになるアシスタントです。コードを書く・直す・読む、この3つをClaudeに手伝ってもらうだけで、日々のコーディング作業はぐっとスムーズになります。
「AIって結局使いこなせない」と感じていた方も、まず1つだけ試してみてください。きっと「こんなに便利なのか」と感じてもらえると思います。
次の記事では、Cursorというエディタを使ってAIとより深く連携する方法も紹介予定です。ぜひあわせてチェックしてみてください。
コーディングのご依頼・ご相談はお問い合わせフォームからお気軽にどうぞ！
