COLUMN コラム
2025.3.17
Web制作現場で役立つChatGPTの活用術
ChatGPTがリリースされてから、この記事執筆時点で約2年が経過しました。この記事を見ている皆さんは、すでにChatGPTをある程度使ったことがあり、その便利さを実感していることでしょう。ただ、実際の仕事の現場でフルに活用できている人は、まだそれほど多くはないのではないでしょうか？
本記事では、WebデザイナーがChatGPTをどのように活用すべきか、具体的な事例を交えて紹介します。
ChatGPTで良い回答を得るためのコツ
まず初めに、ChatGPTから明確な回答を得るためのポイントを3つ紹介します。
①質問の意図を明確にする
質問の意図を明確にして、一度の質問で求めている回答が返ってくるようにしましょう。
会話を続けながら条件を与えることも可能ですが、長い会話の中では最初の質問と整合性を保つ必要が生じ、精度が落ちてしまうことがあります。
悪い例
「Figmaの使い方を教えて」
（どの機能について知りたいのか不明瞭）
良い例
「Figmaでボタンのコンポーネントを作成し、他のデザインに再利用する方法を教えて」
（具体的な機能や目的を明示）
②条件や制約を具体的にする
①とも関連しますが、条件や制約はできるだけ具体的に記載しましょう。
悪い例
「HTMLのボタンをおしゃれにする方法は？」
（どのようなデザインを求めているのか曖昧）
良い例
「CSSを使って、ホバー時にグラデーションが変化するボタンを作るコードを教えて。ライブラリなどは使わず、シンプルなCSSでお願いします」
（具体的な条件を指定）
③期待する回答のフォーマットを指定する
ChatGPTではフォーマットを指定して質問を投げることができるので、求めているフォーマットを記載しましょう。（〇〇文字以内で〜、ですます調で〜、初心者でもわかるように〜、など）
悪い例
「GA4のイベントトラッキングの設定方法を教えて」
（概要だけが欲しいのか、手順を詳しく知りたいのか不明）
良い例
「GA4でボタンのクリックイベントをトラッキングする設定手順を、1. Google Tag Managerの設定 2. GA4のイベント設定 3. 確認方法 の3ステップで説明してください」
（回答のフォーマットを明示）
次に、具体的な活用例を紹介します。
1. ワイヤーフレームの作成補助
１つ目は「ワイヤーフレームの作成補助」です。
ワイヤーフレームはサイトのレイアウトや全体の構成を決めるものです。
それぞれの要素にダミーのテキストを入れる必要がありますが、「ダミーテキスト」だけだと、どのような文章を入れればよいのか、クライアントが判断できません。
そのような時に、以下のような質問を投げることで、実際の情報に近い文章を提案してくれます。
Web制作会社のサイトトップページにサービスを3つ掲載します。それぞれのサービスのタイトルを10文字以内、概要を100文字以内で作成してください。タイトルと概要の頭には「ダミー。」とつけてください。ワイヤーフレーム作成時はダミーテキストをいれる箇所が多いので、自分で全て考えるのは大変ですが、ChatGPTにお願いすることで時間が削減できます。
2. コーディングの補助
次に「コーディングの補助」です。
ChatGPTはコードの生成やエラー修正にも役立ちます。
HTMLのタグやCSSの生成にももちろん使えますが、HTMLやCSSのジェネレーターはインターネット上にも割と存在します。
そのため、JavaScriptのエラー特定など、インターネット検索で解決するのが難しい問題に使うと、時間が削減できます。
ボタンをクリックすると表示/非表示を切り替えたいのですが、動作しません。考えられる原因を教えてください。
以下が現在のコードです。
const button = document.querySelector('.btn');
button.addEventListener('click', () => {
document.querySelector('.content').style.display = 'block';
});
補足:
・content は最初 display: none; に設定されています。
・表示・非表示を切り替えたいので、クリックするたびに display: block; と display: none; を切り替えるようにしたいです。
また、普段見ているサイトのアニメーションが、どのように実装されているか知りたいとき、わからない箇所のソースコードをChatGPTに投げることで、理解できることがあります。
以下のJavaScriptがどのような処理をしているのか、コメントアウトでわかりやすく教えて下さい。
〜 JavaScriptのコードを貼り付ける 〜
3. WordPressのカスタマイズ
ChatGPTはWordPressのカスタマイズにも活用できます。
WordPressをカスタマイズする際、テンプレートタグやカスタム投稿タイプの設定など、ChatGPTに聞くと適切なコードを提案してくれます。
カスタム投稿タイプ 'news' を作成する functions.php のコードを書いて【提案コード】
function create_custom_post_type() {
register_post_type('news',
array(
'labels' => array('name' => __('News'), 'singular_name' => __('News')),
'public' => true,
'has_archive' => true,
'supports' => array('title', 'editor', 'thumbnail'),
'menu_position' => 5,
)
);
}
add_action('init', 'create_custom_post_type');
上記は一例ですので、他にカスタマイズの要望がある場合でも、ChatGPTに必要な情報を共有すれば、コードの大枠を生成してもらえます。
4. コミュニケーションの効率化
クライアントとのやり取りの中で、自分で作成した文面がわかりづらいと感じるときには、ChatGPTにブラッシュアップしてもらうことができます。
クライアントにお見積り詳細について返信します。
以下の文章を添削してください。適宜改行したり、箇条書きを使用してください。
本件については、ご要望を踏まえた形で対応させていただきます。作業内容としてはデザインやコーディングを行い、納期は〇月頃を予定しています。費用はだいたい〇〇円くらいになる見込みです。なお、追加対応が発生した場合には、別途ご相談の上で調整させていただきますので、よろしくお願いいたします。【提案文面】
本件については、ご要望を踏まえた形で対応させていただきます。
■作業内容
デザイン
コーディング
■納期
〇月頃を予定しています。
■費用
おおよそ〇〇円になる見込みです。
なお、追加対応が発生した場合には、別途ご相談の上で調整させていただきますので、よろしくお願いいたします。
「良い回答を得るためのコツ」でも触れましたが、ChatGPTは回答のフォーマットも指定できるので、メールで送る想定ということを伝えれば、件名を考えてくれますし、ビジネスメールらしい文章にしてくれます。
注意事項
- ChatGPTには、会社名や個人名、住所、電話番号、メールアドレスなどの個人情報や機密情報を入力しないようにしましょう。ChatGPTは入力内容を学習データとして使うため、可能性は低いものの、第三者に回答として表示されてしまうリスクがあります。特にメール文の添削を依頼する際は、該当する情報を削除・置き換えてからご利用ください。
- また、公開されているサイトのJavaScriptコードを学習目的で活用するのは問題ないですが、商用利用や無断転載は避けましょう。迷った場合は、事前にサイト管理者に確認するのが安心です。
- ※本記事の内容を活用する際は、ご自身の判断と責任のもとでお願いします。万が一トラブルが発生しても、当社では責任を負いかねますので、ご了承ください。
おわりに
いかがでしたでしょうか？
ChatGPTの活用法は、今回取り上げたもの以外にも、アイデア次第で無限に存在します。
ぜひ業務の自動化・効率化を進めながら、よりクリエイティブな作業に時間を使うために、ChatGPTを積極的に活用してみましょう！