コーダーが生成AIとうまく付き合うために。正しく活用するためのポイント

こんにちは、菅井です。

みなさん、生成AIを使ってコーディングしていますか？
私は、基本的には手打ちで書いているんですが、動きをつけるためのJava scriptを書いてもらったり、ややこしいCSSアニメーションなどでかなり活用しています。めちゃくちゃ時短になりますし、役立ってますよね。

AIがコーディングの現場に入り込んでくる中で、最近は「コーディングの知識がない方でも、コードを書ける時代」になってきているなと実感することも増えました。
例えばSTUDIOのようなサイト制作サービスでは、AIコーディングの機能が標準で備わっていて、自然言語で「こういう動きをつけたい」と指示を出すだけで、HTMLコードを自動で生成してくれます。
専門知識がなくても、やりたいことを言葉にできれば実装できてしまう、そんな環境がどんどん整ってきています。

こうなってくると、コーディングやデザイン業務においても、生成AIが当たり前のように使われるのは、もはや自然な流れだと感じます。

しかし、正しいコーディング知識は必要だと感じています。今回は生成AIを活用しながら正しいマークアップの仕方や、指示の出し方などをまとめていこうと思います。

うまくAIエージェントを使えてない人が陥っている誤解

多くの人が犯している最大の誤解は、生成AIを「万能な検索エンジン」や「何でも勝手にやってくれる魔法の道具」として扱っている点です。

生成AIはGoogle検索のように「正解」を返すデータベースではありません。
言葉の文脈を理解し、次の言葉を確率的に予測して組み立てる「思考のパートナー」なのです。

「使われる人」と「使いこなす人」、何が違うの？

「使われる人」は、AIから出てきたコードやデザイン案をそのまま受け取って、内容を理解しないまま貼り付けてしまうタイプです。

一方「使いこなす人」は、AIを一つのツールとして捉え、実装したい仕様に合わせて指示を組み立て、出てきたコードを取捨選択・カスタマイズしながら自分の成果物につなげていくタイプです。

同じAIを使っていても、出てくるコードの品質や、そのあとの修正のしやすさにはかなりの差が出ます。これはAIの性能の差というより、使う側の”頭の使い方”の差なんですよね。

生成AIを使いこなすための思考フレームワークとは？

私が意識しているのは、大きく分けて4つです。

1. 目的をはっきりさせる
2. 文脈（コンテキスト）をきちんと渡す
3. 壁打ち相手として使う
4. アウトプットは必ず人の目でチェックする

シンプルに基礎を大切にしています。以前からブログで書いているように、AIエージェントはあくまで道具であるという認識が重要です！

ステップ1：目的をはっきりさせる

まず一番大切なのが、「何のためにAIを使うのか」を自分の中ではっきりさせることです。

「なんとなくコードを書いてほしい」ではなく、「どのページの」「どの要素に対して」「どんな挙動・見た目にしたいのか」、ここを曖昧にしたままAIに投げてしまうと、当然出てくるコードもぼんやりしたものになります。

例えば「レスポンシブ対応して」だけでなく、「ブレイクポイントは768px、スマホ表示ではナビをハンバーガーメニューに切り替えて」というように、具体的に条件を渡してあげると、修正の手戻りがぐっと減ります。

目的が明確であればあるほど、AIへの指示も具体的になり、結果として精度の高いコードが返ってきやすくなります。

ステップ2：文脈（コンテキスト）をきちんと渡す

AIは、こちらが渡した情報の中でしか考えることができません。

使用しているフレームワークやCMS（WordPressなのか、素のHTML/CSSなのか）、既存のコードの構成、命名規則といった前提をしっかり渡してあげることで、AIの回答の精度はぐっと上がります。

例えば、既存のCSSの一部を貼り付けた上で「このクラス名の命名規則に合わせて追加のスタイルを書いて」と伝えるだけで、プロジェクトの雰囲気に合ったコードが返ってきやすくなります。

逆に言うと、「AIが察してくれるだろう」という期待は禁物です。人間相手なら空気を読んでもらえる場面でも、AIには言葉にして渡さない限り伝わりません。

ステップ3：壁打ち相手として使う

生成AIというと「コードを代わりに書いてもらう」イメージが強いかもしれませんが、それだけではもったいない使い方です。

実装方針やデザインの方向性を整理するための「壁打ち相手」として使うのも、とても有効な活用法です。

「このレイアウト、他にどんな実装方法があるか出して」「このコンポーネント設計、メンテナンス性の観点で問題ないか教えて」といった形で問いかけると、自分一人では気づけなかった視点が返ってくることがよくあります。

コードを出してもらうだけでなく、設計や実装方針を広げる相棒として使う、という意識を持つと、AIとの付き合い方がぐっと変わってきます。

ステップ4：アウトプットは必ず人の目でチェックする

どれだけ精度が上がったとはいえ、AIが出してくるコードには、非推奨の書き方や、動くけれどパフォーマンスやセキュリティ面で望ましくない実装が混ざることがあります。

出てきたコードをそのまま使うのではなく、

• 実際に動作確認をしたか（表示崩れやエラーが出ていないか）
• セキュリティ面で問題のある書き方になっていないか
• 既存のコーディング規約やプロジェクトの構成に合っているか

この3点は、必ず自分の目でチェックするようにしています。

AIはあくまで優秀な下書き役。最終的な責任を持つのは、いつでも使う側の人間である、という意識は忘れないようにしたいところです。

結局、何を意識すればいいの？

長々と書いてきましたが、結局のところ大事なのは、AIを「魔法のコード生成機」ではなく「優秀だけどプロジェクトの文脈を知らない新人コーダー」くらいの感覚で捉えることだと思っています。

仕様を伝え、必要なコードや構成の情報を渡し、時には設計を相談しながら一緒に考えてもらい、最後は自分の目でコードレビューして仕上げる。

この一連の流れを意識するだけで、AIから返ってくるコードの質は大きく変わってきます。

「使われる」のではなく「使いこなす」側に回れるよう、これからも試行錯誤しながら向き合っていこうと思います。