Chat-GPTに画像を入れてWebサイトを作らせてみた。

先日、X（旧ツイッター）を見ていると、Chat-GPTに画像を入れたらソースコードが完成した！来年にはコーダーは廃業する！（うろ覚え）というようなポストを見ました。

Web制作人生でn回目のコーダーオワコン説です＼(^o^)／
何回見ただろうか...何かが新しいサービスやツールが現れる度に、オワコン説が流れますが、無事コーダーは生存しています。こういったポストがあると、「外注出すのやめよ！」「コーダー失業！」といった心無い声が上がりますよね...

実際にやってみましょう！

使う画像は、僕が一晩で完成できるレベルのペライチのWebサイトです。TOPページだけでボリュームも少なめです。現物は見せられないのでイメージを作りました。

名称未設定-2.png 230.68 KB
こんな感じのボリュームです。まずは画像を投げ入れて適当な指示をしてみました。

01.画像を投げ入れて以下の雑な指示を出す

添付した画像をWebサイトとして作りたいです。まずはマークアップを開始してください。logoが<h1>になるようにしてください。

本当に適当です。さて、これでどの程度のHTMLが完成するかワクワクして待つと3分程でHTMLが完成しました。

抽出されたソースコード
名称未設定-2.png 275.89 KBうーん...とりあえずこのままは無理。
プロンプトが適当すぎるのもあり、そのままでは使えないソースコードができました。

結果
・class名は無い
・<ここに画像を入れる>というサボりが多い
・マークアップは正しいとは言えない
・<head>内が甘い

02.少し具体的な修正指示を出す

上記のソースを元にして、以下の作業をお願いします。
・BEMでclass名を付与してください。
・店舗情報は<ul>ではなく<table>で
・Aboutと店舗情報は同じsectionにしてください
・<head>の<style>は不要です。

##フォルダ構成
/assets/
/assets/css/ ... cssを格納
/assets/images/ ... 画像を格納
/assets/js/ ... JavaScriptを格納
index.php

プロンプトもサボっています。一気に指示を出すのも覚え切れるかが怖いのと、GPTがサボっている箇所を自ら直すかも試してみたかったです。

抽出されたソースコード
名称未設定-2.png 342.1 KBよくなったけど、指示をしていないサボりは自ら進んで作ってはくれない。

結果
・マークアップは、やはり完璧ではない。
・2023年の最新の技術は取り入れられていない（<meta>部分など）
・必要最低限。<meta>のディスクリプションなどは自分で設置する。
・<img>にwidthやheightやaltは無い。
・文字は正確に読み取れていないので注意が必要。（住所が全く違った）
・そういえばBEMを普段使っていないので正確かの判断が難しいwだが良さそう。

03.再度修正（サボり部分も具体的に指示）

ボリュームの少ないシンプルなサイトだからかもしれないが、ここまで15分程度！

以下の修正をしてください。
・<meta http-equiv="X-UA-Compatible" content="IE=edge">を削除
・<main>タグが無い。<header>と<footer>の間に入れること
・に在庫情報とお問合せのメニューを追加
・styles.css ではなくstyle.css

抽出されたソースコード
名称未設定-2.png 342.1 KB

結果
ほとんど完成したが完璧にそのまま使える内容ではない。スタイルを当てながらマークアップの修正も必要。だがスピードは早いので実践での導入を考えても良いかもしれない🤔
・相変わらず文章は正しく読み取れていない
・指示通りには動いてくれる
・<img>関連はやはり個別に設定が必要。

04.ダメもとでCSSも作ってもらった！

リセットcssから作ろうとしたので、そこは既存の物を使うと説明しました。

ごめん、リセットcssは別途用意をします。
それ以外をお願いします。

抽出されたソースコード
名称未設定-2.png 211.61 KB画像の文字が小さくなってごめんなさい。

結果
全く使えない...CSSは実践で使うことは厳しそうだ。
・このまま使えない
・Webサイトの運用に適していない
・このまま修正指示を続けても、よいものが完成するイメージが湧かないし重い。

ここで確信したのですが、2023年の10月段階だとこのままは使えない。コーダーオワコン説はまたしても立証できませんでした。なので「Chat-GPTに任せれば良いからもう外注しない」や「Chat-GPTで良いからコーダーに価値は無くなる」といった意見を鵜呑みにしないでください。

05.戦力外通告

心苦しいのですが、このままではGPTのCSSは使えないことを伝えました。
すると、こういったコメントが返ってきました。

申し訳ございません。具体的にどの部分が気に入らなかったか、またはどのようなスタイルを期待しているかを教えていただけると、より適切なCSSを作成するための参考にさせていただきます。

そして返答したのが以下になります。

間違っているポイントをお伝えします。
・色が違う
・CSSの保守が考えられていない（color: #fff;はbodyで良いなど）
・余白の数値が違う（細かい数値を測れていない）
・これをそのまま使ってもデザインどおりにはならない
以上、他にまだまだありますが、このまま使えないもしくは正確にデザインの寸法を読み取っていないのか、このベースを軸として訂正を繰り返す価値が無いと判断しました。

厳しいし日本語がおかしいのは徹夜明けの検証なのでご了承ください🙏

もっと具体的に指示が欲しいと前向きな返答をいただきましたが、正直...Figma for VS CodeやFigmaの開発モードの方が役に立つと判断をしたので以下の指示を出しました。

CSSのスタイルの抽出は諦めるので、HTML側に設定しているclassの一覧をCSSに書いてください。 { }の間は空白の1行を入れてください。

##例
.container {

}

結果
ちゃんと一覧を作ってくれましたが、当然擬似要素やhoverなどの設定は必要になりますしレスポンシブ対応も自分で構築をする必要があります。

まとめ

コーダーオワコンではない。
SNSで、そういったネガティブな意見を見たら、検証ができるなら検証をすることが大切なのかなと思います。鵜呑みにしないこと。コーダーだけでなく、Web制作オワコンといった投稿をする方は、ほとんど業界外の方です。できればコーダーやWeb制作の価値を下げるような投稿は避けていただきたいですよね。

そもそもAIが抽出した内容が正しいかの判断するのは人間ですし専門家です。2023年の10月の段階では確認作業が必要です。なのでChat-GPTを使うにしても、正しいかを判断する専門的な知識が必要になります。

しかし、全く使えないこともない
今回は、簡単な1ページ物かつボリュームも少ないこともあり、画像を入れてから20分程度で、そこそこ使えるマークアップが完成しました。それ自体はポジティブに捉えてよいと思います。感覚的に、手が恐ろしく早い部下にコーディングの修正指示を出しているようでした。

これが、複雑なWebサイトやページ数が多くなる場合、全く使えなくなる可能性すらあります。サイトを部分的に投稿をして、一部のマークアップを作ってもらうのはよいかもしれません。TailwindCSSなどのCSSフレームワークを使うなら結果も違うかもしれませんね。

コーディング学習中の人はどうするべきか

コーダーはオワコンではありません。しかしAIの進化はすさまじいです。今回のような簡単なWebサイトしか構築できないようであれば、今後は厳しくなると思います。クライアントの要望が簡単なWebサイトが必要くらいなら、STUDIOのテンプレートも選択肢に入ります。AIだけでなくNoCodeも進化をしています。簡単であればあるほど、コーダーの出番は少なくなると思います。

AIを恐れるのではなく、AIを有効活用できる人になってください。

・正確なマークアップを理解できる
・複雑なレイアウトも構築できる

HTML/CSSの範囲内だと、まずはこのあたりが大切なのかなと思います。マークアップは「武器になるHTML 」と「HTML解体新書」がオススメです。

最後に自分の宣伝をするのもアレですが、「ゼロから学ぶ実践的なコーディング＆スキルアップ」も頑張って作ったのでよろしければご検討ください！