はじめに
2025年4月時点で、ChatGPTとClaudeを使ってコーディング作業を試してみました。
使用したAIは「ChatGPT（GPT-4o）」と「Claude 3」です。
この記事では、それぞれの特徴や使ってみて感じたメリット・デメリットをメモ形式で整理しています。
「AIにコードを書かせてみたい」という方の参考になれば幸いです。
AIにコードを書かせるメリット
- HTMLの枠組みを自動生成してくれるので手間が省ける
- JavaScriptなども一緒に書いてくれる
- コーディング作業の時間短縮につながる
デメリット・注意点
- テキスト部分は打ち直しが必要なことが多い
- 複雑なレイアウトには限界がある（例えば、日本語の縦書きなど）
- SEOを意識したマークアップは人間の知識が必要
- やりとりが多くなると、AIが過去の指示を忘れる傾向がある
画像からコードを生成する場合
よく取り上げられている通り、ブロック（セクション）毎に制作しないとうまくコーディングしてくれないので、事前に画像を分割して、用意する手間は必要となります。
デザインのコントラストがハッキリしていないと、テキストはAI側で勝手に作成した文章になってしまうことも。
ちなみに、ハッキリしていても勝手にコンテンツが変更されることもあるので、注意が必要です。
いずれにせよコード生成後のテキスト打ち直し（コピペ）は必須と判断しました。
- 質問回数が多くなるにつれて正答率が下がるハルシネーション（いわゆる幻覚）が起きる
- ブロックごとに作ってもらった後にCSSを効率化、まとめようとすると間違ったまとめ方をすることがある
※修正前のCSSが採用されてしまうことも確認。
まとめ
セマンティックなHTMLコードを書かせるのは難しいと判断。
ただし、枠組みが勝手に出来上がるのは、かなり楽になります！
「後で手動で打ち直せばいいや」といった気持ちでコードを書いてもらうと、イライラしなくて済みます。
コーディングが苦手な方には便利なものの、SEOまで意識したコードを書くのは難易度が高いと言わざるを得ない現状です。
モーダルやハンバーガーメニューなどを指定すると、一緒にJavaScriptや対応したCSSも書いてくれるのは本当にありがたいと感じました。
これは便利！
うまく動作しない場合は、不具合の状況を伝えて、修正・調整をすれば、OK。
一方で、画像の表示指定方法は難しいところ。
imgタグで書くのか、backgroundで指定するのか、はたまた疑似要素で指定するのか…
読み込んだ画像からだけでは、AIに判断させることは現状厳しいと判断しました。
この辺は手動で直すか、コードを書いてもらった後に指定して書き直してもらうか、自身で判断する必要があります。
以上が、ChatGPTとClaudeに触れて、私が感じたことです。
補足
「ChatGPT（GPT-4o）」の場合は、難しいレイアウト、特に日本語特有の縦書きが入ったレイアウトになると細かい指示を出す必要があります。
CSSのプロパティを知らないと、思い通りの出力を得るのは難しいとも感じました。
また、やり取りの回数が多くなる傾向にあるものの、シンプルなデザインであれば十分実用的なレベルと言える。
「Claude 3」の場合は、ChatGPT（GPT-4o）ではできなかったレイアウトが10ターン以内にほぼ完成。
しかも、細かいプロンプトを使わずに「添付した画像をHTMLとCSSで出力してほしいです。」で、最初から画像に近い形でHTMLとCSSを出力できました。
しかし、無料版は、ターン数と文字数に制限があり、さらに細かい部分を仕上げることはできず…
また、コントラストがハッキリしないものについては、出力できないという残念な結果に。