「ChatGPTって、実際のWeb制作でどう使うんですか？」
セミナーや商談の場でこの質問をよくいただきます。「なんとなく使ってみたけど、業務にどう活かせばわからない」という方も多いようです。
私がChatGPTをWeb制作に本格導入したのは2023年末。最初は半信半疑でしたが、今では一日として使わない日がないほど、制作フローの中心に組み込まれています。スピード・品質・提案力——すべてが変わりました。
この記事では、私（satokotadesign）が毎日の制作現場で実践しているChatGPT活用法を5つ、具体的なプロンプトの例も交えながら詳しくご紹介します。「ChatGPTを使ってみたい」「もっと上手に使いたい」という方のヒントになれば幸いです。
活用法① コピーライティング：「たたき台」を10秒で量産する
Web制作においてコピーライティングは、デザインより先に決まらなければなりません。キャッチコピー・サービス説明・会社の強みの言語化は、どれも時間と思考力を大量に消費する作業です。
ChatGPT導入前は、ヒアリング→熟考→修正のループを何度も繰り返し、1サイト分のコピーを書き上げるのに丸1〜2日かかることもありました。今は違います。
実際に使っているプロンプト例
以下は私が実際に使うプロンプトの骨格です。
あなたはBtoB向けのプロコピーライターです。
以下の会社情報をもとに、ホームページのトップページに使えるキャッチコピーを10パターン作成してください。
【会社情報】
・業種：静岡県浜松市の精密板金加工会社
・強み：試作品1個から対応、短納期、公差±0.05mm対応
・ターゲット：製造業の購買担当者・設計者
・トーン：信頼感・技術力・スピード感これを送ると10〜15秒で10パターンの候補が出てきます。そのまま使えるものは少ないですが、「この方向性が良い」「この言葉を使いたい」というヒントが必ず見つかります。あとは私が磨くだけ。以前と比べて作業時間は5分の1以下になりました。
コピーだけでなく、サービス説明文・会社概要・メタディスクリプション・FAQの回答文なども同様に活用できます。「ゼロから書く」のではなく「たたき台を選んで磨く」スタイルへの転換が、生産性を劇的に高めます。
活用法② 提案書・企画書：構成案を30分で仕上げる
お客様へのヒアリング後、提案書や企画書を作成するのも時間がかかる作業のひとつです。競合調査・サイト構成案・改善提案・見積もり根拠……これらをゼロから組み立てると半日かかることもありました。
今は、ヒアリングメモをChatGPTに貼り付けて「この情報をもとにWebリニューアルの提案書の構成案を作って」と指示するだけで、骨格ができあがります。
提案書作成の新フロー
- ヒアリングメモをそのままChatGPTに貼り付ける
- 「課題の整理→解決策→制作内容→スケジュール→費用感」の構成案を出させる
- 各セクションの詳細をさらに深掘りさせる
- 私が実際の知識・経験・価格感を加えて完成させる
このフローで、以前1日かかっていた提案書が2〜3時間で完成するようになりました。お客様への返答スピードも上がり、「レスポンスが早い」という評価につながっています。
活用法③ コーディング支援：実装スピードを3倍に上げる
コーディングの現場でもChatGPTは強力な助っ人です。特に効果が高いのは次の3つのシーンです。
アニメーションの実装
「スクロールしたら左から右にフェードインするアニメーション、CSSとIntersection Observer APIで書いて」——これだけで動くコードが出てきます。以前はStack OverflowやMDNを調べながら書いていたのが、今は数分で終わります。
バグの原因特定
「このCSSを当てると、iPhoneでだけレイアウトが崩れる。原因と解決策を教えて」とエラーのコードを貼り付けると、原因の仮説と修正案が出てきます。ひとりで悩んでいた時間が大幅に短縮されました。
コードレビュー
「このコードをセキュリティとパフォーマンスの観点でレビューして」と既存コードを渡すと、改善提案が返ってきます。ひとり制作者にとって、レビュアーを持てることは特に大きな価値があります。
重要な注意点：ChatGPTのコードは必ず動作確認が必要です。正しそうに見えて、特定のブラウザや環境で動かないコードが出てくることもあります。「コードを理解した上で使う」姿勢は絶対に崩してはいけません。
活用法④ SEO・キーワード戦略：検索意図を深く理解する
SEO対策でもChatGPTは欠かせないツールになっています。特に役立つのが「検索意図の深掘り」です。
たとえば「浜松市 板金加工」で検索する人が何を知りたいのかを、ChatGPTに分析させます。
「浜松市 板金加工」で検索するユーザーはどんな人で、何を求めていますか？
検索意図を3〜5パターンに分類して、各パターンに対して効果的なコンテンツ戦略を提案してください。このプロンプトで、「発注先を探している購買担当者」「コスト比較をしている設計者」「急ぎの試作品を探している開発者」といったセグメント別の検索意図と、それぞれに響くコンテンツの方向性が出てきます。
また、記事のアウトライン作成・タイトルのバリエーション生成・関連キーワードの洗い出しなど、SEOに関わる多くの作業でChatGPTを活用しています。
活用法⑤ お客様対応・メール文：丁寧さを保ちながら速く書く
制作の現場以外でも、ChatGPTは活躍しています。お客様へのメール・修正依頼への回答・見積もり送付時の文章——これらを書くのも実は時間がかかります。
「以下の要件でお客様へのお断りメールを丁寧に書いて」「修正箇所についてわかりやすく説明するメールを書いて」と状況を説明するだけで、適切なトーンのメール文案が出てきます。
これを元に自分の言葉で手を加えるだけで、以前の3分の1の時間でメールを送れるようになりました。一人で制作しているからこそ、こうした事務的な文章の作成にかける時間を圧縮することが、制作の質に直結します。
ChatGPTを使う上で大切にしていること
ChatGPTは万能ではありません。私が使う上で意識していることを正直にお伝えします。
- ファクトチェックは必須：ChatGPTは自信満々に間違いを言うことがあります（ハルシネーション）。数字・固有名詞・法律関連の情報は必ず一次情報で確認します。
- 「そのまま使わない」が原則：出てきた文章をコピペで使うと、個性がなくなり「AIが書いた感」が出ます。必ず自分の言葉・経験・視点を加えます。
- プロンプトの質が出力の質を決める：曖昧な指示からは曖昧な出力しか出ません。「誰に」「何を」「どんな形式で」を明確に指示することが重要です。
- 機密情報は入力しない：お客様の未公開情報・個人情報をChatGPTに入力することは避けています。
まとめ：AIは「代替」ではなく「増幅」ツール
ChatGPTはWebデザイナーを不要にするツールではありません。むしろ、デザイナーの能力を何倍にも増幅させるツールです。私の場合、ChatGPTによって生まれた時間的余裕を、お客様とのコミュニケーション・戦略的な提案・品質チェックに充てられるようになりました。
「AIを使いこなすWebデザイナー」と「使いこなせないWebデザイナー」の差は、これからますます広がります。まずは一つの作業からでいいので、ChatGPTを試してみてください。
satokotadesignでは、AI活用を含むWebデザインのご相談を無料で承っています。「自社のホームページにAIをどう活かせるか聞きたい」という浜松・静岡西部の中小企業の方は、ぜひお気軽にご連絡ください。
