【検証】ChatGPTを使ってWeb制作はできるのか？【結論：使える】

• chatGPTって何？
• chatGPTってすごいの？
• chatGPTの活用方法は？

こんな方に向けて。

先日に下記のツイートをしました。

chatGPTは最高の先生です。
ちょっとした質問にも的確に、丁寧に教えてくれる。「雑談」風の会話でも、ちゃんと質問者の意図を汲み取ってくれます。人間に聞いたら「ググれ」なんて言われそうですが…。「ググる」が消滅する未来は本当に来そう。 pic.twitter.com/cT95RpM23N

— つる │ Web制作・デザイン勉強中 (@Tsuruoka_1103) February 21, 2023

chatGPTを使ってみた感想をツイートしたら、反響がありました。

そこで、本記事ではChatGPTの概要を解説しつつ、Web制作に使えるのか？について考察します。

ChatGPTを用いたWeb制作に興味のある方や、ChatGPTの具体的な活用方法について知りたい方の参考になるかもです。

ChatGPTとは？

「chatGPTとは？」についてまとめます。

ChatGPTの概要や特徴について

ChatGPTとは、OpenAI社によって開発されたAI（人工知能）です。

ChatGPTの最新版であるGPT-3は、巨大なトレーニングデータを用いて学習されており、自然言語処理や文章生成、会話などのタスクにおいて高い精度を発揮します。

※「-3」はバージョンを表しており、現在はバージョン3です。

ChatGPTは、大量の文章を読み込んで学びます。機械学習の成果を使って文章を作ったり、文章の意味を理解することができます。

そのため、ある程度の「自律的」な意思決定ができる点が特徴的。

つまり、ある程度自分で考えて決めることができます。

また、ChatGPTで文章を生成する際には、特定のテーマや文脈に合った文章を生成することが可能です。

たとえば、「旅行」に関するテーマであれば、ChatGPTは「旅行」に関する単語や表現を学習しているため、「旅行」に関する文章を生成することができます。

と、「愛媛旅行」をテーマに質問しました。

次に「他にもないの？」とさらにたたみかけると・・・

上記のとおり。テーマから外れることなく、「愛媛のおすすめスポット」を教えてくれました。

もちろん無料。

ChatGPTは誰でも「無料」で利用することができます（※課金バージョンもあり）。

まだ登録していない方は、下記からどうぞ。

ChatGPT公式サイト：https://openai.com/blog/chatgpt/

以下のとおりに登録すればOKです。

ChatGTP、遅ればせながら先日登録して使ってみています。登録までの3ステップ、図解にまとめてみました。2021年9月までの学習データしか搭載されていないなどの問題もあるので、場合によってはChromeの拡張機能なども併用した方がよさそう。#ChatGTP pic.twitter.com/4aNu0Kb9ZV

— のり｜ブレイン秘書/オンライン秘書 (@life_shift525) February 21, 2023

また、ざっくりした概要を知りたいなら下記の動画がわかりやすかったです。

ChatGPTで何ができるのか？

ChatGPTでできることは下記のとおり。

• 翻訳
• 会話
• Web制作（←今回詳しく解説）

※他にも「文章生成」「要約」もできる

まずは「翻訳」。

ChatGPTは、膨大な量の翻訳データを学習しているため、高い精度で翻訳を行うことができます。

複数の言語間での翻訳にも対応しており、異なる言語間でのコミュニケーションをスムーズに行うことができます。

また、ChatGPTを使って「会話（チャットボット）」もできますよ。

チャットボットとは、人工知能によって自動的に会話を行うプログラムのこと。

ChatGPTを使って作成したチャットボットは、自然な言葉遣いや文脈を理解して、人間のような会話ができます。

で、Web制作もできます。

正確に言うと、HTML&CSSのコードを教えてくれたり、カンタンなプログラムを書いてくれたり、人間の質問に回答してくれたりします。

たとえば、

• tableタグの作成
• ハンバーガーメニューの作成
• 静的サイトのWordPress化

上記のようなことが可能です。

ChatGPTを使ったWeb制作について

さて、ここからが本題です。

Web制作では、ChatGPTを使ってHTMLやCSS、JavaScriptなど、ありとあらゆる言語のコードを生成できます。

✓ChatGPTを使ったWeb制作の方法

• ChatGPTに問題を伝える
• ChatGPTが解答してくれる
• コピペして試す

ざっくりこんな感じ。

後述しますが、ここでは人間の「質問力」が重要になってきます。

ChatGPTが「Web制作」においてどのような役割を果たすか？

アイディアは下記。

• コンテンツ生成
• 質問応答システム
• 言語処理に基づく自然な対話
• キーワードやトピックの抽出

①コンテンツの生成

ChatGPTは、大量のテキストデータを学習しているため、Webサイトのコンテンツを生成する際に役立ちます。

たとえば、特定のトピックについての記事を自動生成することができます。

また、商品の説明文やレビューなど、大量のテキストを扱う場合にも役立ちます。

②質問応答システム

ChatGPTを用いることで、Webサイトに質問応答システムを設置することができます。

これにより、ユーザーが質問を投げかけると、ChatGPTがそれに適した回答を自動生成します。

たとえば、FAQページに質問応答システムを設置することで、ユーザーが簡単に求めている情報にアクセスできるようになります。

③言語処理に基づく自然な対話

ChatGPTを用いることで、Webサイト上で自然な対話ができるようになります。

たとえば、チャットボットを作成することができ、ユーザーが問い合わせると、ChatGPTがそれに対して適切な回答を生成します。

これにより、Webサイトの利便性を高めることができます。

④キーワードやトピックの抽出

ChatGPTは、テキストデータを学習しているため、Webサイトに掲載されているテキストからキーワードやトピックを自動抽出することができます。

これにより、WebサイトのSEO対策に役立ちます。

また、ユーザーの興味に合わせたコンテンツを提供する際にも活用できます。

「chatGPTでWeb制作ができるのか？」を、検証しました。

その１：WordPressの質問をしました。

論より証拠で下記をご覧ください。

今日もChatGPTさんに質問攻めです。
headerナビゲーションにある「検索フォーム」がWordPressにするとうまくいかない原因と対処法を教えてくれました。ググっても解決できなかったのに、AIだと一瞬…。#Web制作 pic.twitter.com/Arm9Ps7Hri

— つる │ Web制作・デザイン勉強中 (@Tsuruoka_1103) February 23, 2023

問題の箇所がこちら。

上記のコードにすると…

上の「検索フォーム」が消える事象が発生しました…。

ChatGPTさんの答えはこちらです。

このコードはWordPressでナビゲーションメニューを表示するためのものであり、検索フォームを表示するためのものではありません。したがって、このコードに検索フォームが表示されないのは正常です。

もしあなたがこのコードに検索フォームを追加したい場合は、ナビゲーションメニューのコードの外側に検索フォームを追加する必要があります。例えば、以下のようにすることができます。

（以下、コード&略）

そのとおりに、コードを修正したら、

ちゃんと検索フォームが復活しました！（※位置はCSSで修正）

その２：PHPの質問をしました。

お次は「PHP」の質問です。

エラーの原因は、「コンマ（,）」漏れでした。。。

プログラミングの世界だとあるあるなんですが、こういうミスって意外と発見できないものですよね。

しかし、ChatGPTに聞けば一瞬です。ものの数秒でミスを指摘してくれました。

ChatGPTを使ってWeb制作するメリット

ChatGPTを使ったWeb制作には、以下のようなメリットがあります。

• Web制作の深い知識が必要ない
• わかりやすいコードが書ける
• Web制作の作成時間を短縮できる

Web制作の深い知識が必要ない。

まず、ChatGPTを使ったWeb制作では、プログラミング言語の「深い」知識が必要ありません。

ChatGPTは自然言語処理を行うため、Web制作をする際にプログラム言語の深い知識を必要としません。

そのため、初心者でも簡単にWeb制作ができます。

たとえば、

Web制作初心者がつまづく

• スライダー
• モーダルウィンドウ
• ハンバーガーメニュー

このあたりのコードは、ChatGPTにきけばすぐに答えてくれます。

JavaScriptの深い知識がなくとも、コピペでの実装が可能です。

わかりやすいコードが書ける

また、ChatGPTを使ったWeb制作では、より自然な言葉遣いでプログラムを書くことができます。

プログラミング言語は、専門用語や特殊な文法が多く、初心者にとっては理解が難しいことがあります。

しかし、ChatGPTを使ってプログラミングを行うことで、自然な言葉でプログラムを書くことができ、より分かりやすいプログラムを作成することができます。

Web制作の作成時間を短縮できる

さらに、ChatGPTを使ったWeb制作では、Web制作の時間を短縮できます。

これまでは、Webサイトを作成するために時間がかかることがありました。

制作の途中で、

• CSSがうまく利かなかったり、
• 意味不明のバグが発生したり、
• JavaScriptの深い知識が必要だったり、

と、壁にぶつかります。

参考書を読み漁ったり、ググり散らかしたり、人に聞いたりして、上記の問題を解決していました。が、時間がかかるんですよね。

しかし、ChatGPTを使ってコードを書くことで、短時間でWebサイトを作成することができます。

ChatGPTに問題の箇所を質問すれば、すぐに答えにたどり着けるからです。

ChatGPTを活用するためのヒントや注意点

ChatGPTを使ったWeb制作をする上でのヒントやコツ、注意点についてです。

• 適切なデータセットを用意することが重要
• 不適切な文章が生成される可能性がある
• ある程度の知識が必要
• 不適切な文章が生成される可能性がある
• 入力したコードに対して想定外の動作をする場合がある
• プログラミングの基礎知識がないと十分に活用できない
• 生成されたコードが不適切な場合がある

適切なデータセットを用意することが重要

まず、ChatGPTを使ったプログラミングをする上でのヒントとしては、適切なデータセットを用意することが重要です。

ChatGPTは大量の文章を学習することで高い精度を実現しているため、正確なデータセットを用意することが必要です。

また、ハイパーパラメーターの調整も重要なポイントです。ChatGPTの性能を最大限引き出すためには、適切なハイパーパラメーターの調整が必要です。

十分な時間を確保することが重要

次に、コツとしては、ChatGPTを使ったプログラミングは、プログラムの実行に時間がかかることがあるため、十分な時間を確保することが重要です。

また、ChatGPTは大量の文章を学習するため、学習に使用するデータセットの量によっては、多大なコンピュータリソースが必要となる場合があります。

そのため、十分なコンピュータリソースを用意することも重要なコツと言えます。

不適切な文章が生成される可能性がある

ChatGPTは学習したデータに基づいて文章を生成するため、学習データに偏りがあると、不適切な文章が生成される可能性があることに注意が必要です。また、ChatGPTを用いたプログラミングにおいては、プログラムの品質を保つために、適切なテストを行うことも重要なポイントです。

入力したコードに対して想定外の動作をする場合がある

ChatGPTを使ったプログラミングには、いくつかのポイントや課題があります。

まず、ChatGPTが単なる自動文章生成機であるため、入力したコードに対して想定外の動作をする場合があります。

そのため、ChatGPTが生成したコードを必ずしも信用せず、実際に動作させることが重要です。

プログラミングの基礎知識がないと十分に活用できない

ChatGPTを使ったプログラミングは、あくまでも開発の効率化を目的としているため、プログラミングの基礎知識がないと十分に活用することができません。

そのため、ChatGPTを使ったプログラミングを始める前には、プログラミングの基礎知識を身につけることをお勧めします。

生成されたコードが不適切な場合がある

最後に、生成されたコードが不適切なときもあります。

そのため、ChatGPTを使ったプログラミングでは、生成されたコードのチェックが非常に重要です。

不適切なコードが生成された場合は、手動で修正する必要があります。

また、ChatGPTを使ったプログラミングは、機械学習に基づいているため、学習データの質によって生成されるコードの質が大きく左右されます。

なので、ChatGPTを使ったプログラミングを行う際には、高品質な学習データを用意することが大切です。

ChatGPTを使ったWeb制作においては、生成されたコードのチェックやプログラミングの基礎知識の習得など、いくつかのポイントや課題があります。

しかし、これらの課題をクリアすれば、プログラミングの効率化や開発のスピードアップなど、多くのメリットを得ることができます。

最後に。

Web制作においてもChatGPTは有効でした。

ChatGPTを使用することで、Web制作をより楽に行うことができ、作業効率を高められると感じました。

将来的には、ChatGPTを使用したWeb制作&プログラミングが拡大していくじゃないかな〜。

圧倒的に楽であり、便利であり、正確であるからです。

また、ChatGPTを使用することで、コードの自動生成や修正、自然な文章でのコード説明が可能。

このため、プログラミングの初学者や非技術者にもアクセスしやすくなり、プログラミングの普及にもつながるはず。

もしかしたら、まったくの素人がプロ顔負けのプログラムを書く時代が来るかもです。

ただし、注意点も。

ChatGPTを使用したWeb制作においては、適切なデータセットやモデルの選択、適切なパラメーターの設定などが重要です。

• データセット：ChatGPTが学習するための文章データの集合のこと
• モデル：ChatGPTが学習する際に使用するアルゴリズムのこと
• パラメーター：ChatGPTが学習する際に調整する値のこと

要するに「適切な質問ができるか？」ってことです。

実際、ChatGPTを使いこなすには質問力が欠かせないと感じました。

また、ChatGPTが自動生成したコードが正確であることを確認するために、人間が手動でチェックを行う必要があります。

よくも悪くも、所詮インターネット上のデータの寄せ集めです。

だから、ときには間違うこともあるわけで。

また、部分最適なコードを返してくることもあります。ゆえに、コピペしてもうまくいかないときもあります。

現時点（2023年2月時点）では、人間の最終チェックが欠かせません。

ゆえに、人間サイドにも一定の知識が求められますね〜。

知識ゼロでは厳しいな、、、という印象です。

とはいえ、Web制作をかじったことがある方にとっては、最高の先生になるかもです。

なぜなら、ちゃんとした質問ができるから。そうすると、AIは求めている解答をよこします。

AIの解答を読解できるだけの知識もあるので、応用もできる。

そうすると、人に聞いたりGoogle検索したりするのが、ChatGPTにとって変わる可能性すらありえます。

だって、楽ですもん。

曖昧な質問に対しても、文脈を正確に捉えてくれるので。

コードをコピペして、「問題が発生しました」と言えばいいだけ。答えが微妙なら「他の方法はないの？」と追及すればいいです。