うぇぶもよう

Web制作でChatGPTを活用する方法｜コーディング実例とプロンプト

うぇぶもようの中の人
Web制作でChatGPTを活用する方法

Web制作では、コーディングだけでなく、仕様の整理、エラー調査、文章作成、クライアントへの説明など、多くの作業が発生します。

ChatGPTをうまく使うと、こうした作業の「最初のたたき台」を短時間で作れます。一方で、生成されたコードや説明が常に正しいとは限りません。そのまま納品・公開するのではなく、Web制作者が確認して仕上げることが大切です。

この記事では、Web制作でChatGPTを活用できる場面と、実際に使えるプロンプトを紹介します。


ChatGPTはWeb制作のどんな作業に使える？

Web制作で特に使いやすいのは、次のような作業です。

ChatGPTにすべてを任せるというより、「調査と下書きを手伝うアシスタント」として使うと安定します。

1. HTML・CSSのたたき台を作る

作りたい要素と条件を伝えると、HTMLとCSSの基本形を作成できます。

例えば、カードを3列で表示し、スマートフォンでは1列にしたい場合は、次のように依頼します。

プロンプト例

HTMLとCSSで記事カード一覧を作ってください。

条件：
- パソコンでは3列、768px以下では1列
- 各カードに画像、タイトル、説明文、リンクを配置
- CSS Gridを使用
- クラス名はBEMを意識する
- アクセシビリティに配慮したHTMLにする
- HTMLとCSSを分けて提示する

「カードを作って」だけではなく、表示列数、ブレークポイント、使用する技術、必要な要素まで伝えるのがポイントです。

生成されたコードは、次の項目を確認してから使用します。

2. レスポンシブ対応の崩れを調べる

スマートフォンだけ横スクロールが発生する、画像が画面からはみ出す、といった問題の調査にも使えます。

プロンプト例

次のHTMLとCSSでは、画面幅375pxのときに横スクロールが発生します。
原因の候補を優先順位順に説明し、変更を最小限にした修正コードを提示してください。

対応環境：
- Chrome最新版
- Safari最新版
- iOS Safari

修正前と修正後の違いも説明してください。

【ここにHTMLとCSSを貼る】

エラーの原因だけでなく、「変更を最小限にする」「修正前後の違いを説明する」と指定すると、既存サイトへ反映しやすい回答になります。

画面のスクリーンショット、発生する画面幅、ブラウザ、該当コードを一緒に渡すと、原因を絞りやすくなります。

3. JavaScriptのエラーを調査する

JavaScriptのエラー調査では、エラーメッセージを省略しないことが重要です。

プロンプト例

次のJavaScriptを実行するとエラーが発生します。

エラーメッセージ：
Uncaught TypeError: Cannot read properties of null

やりたいこと：
ボタンをクリックしたらメニューにis-openクラスを付けたい

次の順番で回答してください。
1. エラーの意味
2. このコードで考えられる原因
3. 最小限の修正
4. 要素が存在しないページでもエラーにしない方法
5. 動作確認方法

【ここにコードを貼る】

ChatGPTが示した原因が正しいかは、ブラウザの開発者ツールで確認します。特に、対象要素の有無、スクリプトを読み込む位置、イベントが実行されるタイミングを確認しましょう。

4. WordPressのカスタマイズを相談する

WordPressでは、目的だけでなく使用環境も伝えます。

プロンプト例

WordPressで、特定カテゴリーの記事だけアイキャッチ画像の下に注意書きを表示したいです。

環境：
- 自作テーマ
- 子テーマなし
- PHP 8系
- ブロックエディターを使用

条件：
- テーマファイルへ追加するコードを提示
- 追加するファイル名と位置を説明
- 出力時のエスケープを行う
- 変更前にバックアップすべきファイルを示す
- 本番反映前の確認手順も示す

WordPressのコードは、テーマやプラグインの構成によって適切な実装が変わります。回答をそのまま貼る前に、ステージング環境やバックアップを用意してください。

また、認証情報、データベースのパスワード、APIキー、個人情報をChatGPTへ貼り付けないようにします。

5. 文章とページ構成を作る

ChatGPTは、サービスページの構成や見出し案を考える用途にも使えます。

ただし、「キャッチコピーを作って」だけでは、どのサイトにも当てはまる文章になりがちです。サービスの特徴と対象読者を具体的に伝えます。

プロンプト例

次のサービスについて、Webサイトのトップページ構成を作ってください。

サービス：
小規模店舗向けのWordPress保守サービス

対象：
- 自分で更新しているが、トラブル対応に不安がある店舗オーナー
- Web制作の専門知識は少ない

強み：
- 月1回のバックアップ
- WordPressとプラグインの更新
- 軽微な文章修正に対応
- 専門用語を使わずに報告

出力内容：
- 各セクションの目的
- 見出し案
- 本文の要点
- CTA文言を3案

誇張表現や、根拠のない実績は追加しないでください。

実績、料金、対応範囲などの事実は必ず人が確認します。存在しない実績や利用者の声を生成させて掲載してはいけません。

良い回答を得るプロンプトの基本形

Web制作の依頼では、次の6項目を入れると回答の精度が上がります。

あなたの役割：
フロントエンド開発者として回答してください。

目的：
何を実現したいか

現在の状態：
使用しているHTML、CSS、JavaScript、WordPress環境など

発生している問題：
エラー文、再現条件、対象ブラウザ、画面幅など

制約：
ライブラリを追加しない、既存HTMLを変更しない、対応ブラウザなど

出力形式：
原因、修正コード、変更点、確認手順の順に回答してください。

一度で完璧な回答を求める必要はありません。最初の回答を確認し、次のように追加で依頼します。

ChatGPTのCanvasでコードを編集する

利用できる環境では、ChatGPTのCanvasを使って文章やコードを編集できます。コードの一部分を選択して修正を依頼したり、コードレビューやバグ修正を行ったりできます。

HTMLやReactのプレビューにも対応していますが、プレビューは実際の本番環境と同一ではありません。WordPress固有の処理、外部ライブラリ、サーバー設定、ブラウザ差異などは別途確認が必要です。

生成されたコードをそのまま公開しない

AIが作ったコードは、見た目上は動いていても問題を含む場合があります。

公開前に最低限、次を確認しましょう。

動作

安全性

品質

「ChatGPTが作ったから大丈夫」ではなく、「自分で説明・検証できるコードだけ使う」ことが基本です。

クライアント情報を入力するときの注意

個人向けのChatGPTでは、設定によって会話内容がモデル改善に使われる場合があります。「設定」からデータコントロールを確認し、必要に応じて「すべての人のためにモデルを改善する」をオフにできます。

一時チャットは履歴に保存されず、モデルのトレーニングにも使用されませんが、だからといって機密情報を入力してよいわけではありません。

次の情報は入力しないようにします。

仕事で利用する場合は、自社やクライアントのAI利用ルールも確認してください。

Web制作では「作る」より「確認する力」が重要になる

ChatGPTを使えば、コードのたたき台や調査候補を短時間で得られます。しかし、目的に合う実装を選び、安全性や使いやすさを確認する仕事は残ります。

Web制作者に必要なのは、AIに丸投げすることではありません。

  1. 実現したいことを具体的に伝える
  2. 出力された内容を理解する
  3. 実際の環境で検証する
  4. 問題があれば条件を追加して修正する

この流れを身につけると、ChatGPTを単なる質問ツールではなく、Web制作を支える実用的なアシスタントとして活用できます。

まずは、普段時間がかかっている小さな作業を1つ選び、この記事のプロンプトを自分の環境に合わせて試してみてください。

モバイルバージョンを終了