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

先日、こんな記事を書きました。

https://community.creators-synergy-cafe.com/blogs/29799b66c7fa

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

せきゆおう[運営]

10/15 05:48

使ったのはこちらのサイトの画像

パーツ別Webデザイン集「Parts. 」さんで調べて「ココグルメ 」さんのサイトのスクリーンショットを使わせていただきました。

スクリーンショット 2023-10-15 16.01.52.png 5.14 MB

具体的に指示を出す

では、こちらの画像のHTMLとCSSを作れますか？

##ルール
・BEMでclass名を付与
・画像からテキストまで全てを<a>で囲う
・リンクは全てで3つです。<ul><li>で構築
・hoverは文字の色を変更し、かつ0.3秒の速度でリンク全体を1.2倍の大きさに変更

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

「では、」から文章がはじまっているのは、前回流れの続きだからです。

結果（HTML）

スクリーンショット 2023-10-15 16.57.35.png 738.08 KBHTMLは相変わらずいい感じ！具体的に指示を出すと一発で合格に近いマークアップを作ってくれますね。「テキストを省略しないで」と伝えると良いかもですね。altが追加されているのもGood！
しかし、そのまま使うことはやはり厳しいが7〜8割は完成していると思う。

結果（CSS）

スクリーンショット 2023-10-15 16.58.37.png 558.98 KBん〜〜〜〜〜〜、前よりはよくなったけど、相変わらずそのまま使うことは厳しいですね。Chat-GPTさんも以下のように補足をしています。

上記のHTMLとCSSで、指定されたデザインと動作を実現することができます。必要ならば、画像のパスやテキストの内容などを適宜調整してください。

ちゃんと指定したアニメーション部分はきちんと作ってくれますし、transitionにallを設定していないのも良いですね。

[良いところ]
・class名を書いてくれるのは時短になる
・上をベースにFigmaの開発モードのソースコードを使えば5割くらい完成する？

[悪いところ]
・やはりデザイン通りではない
・余白に甘い（marginやpaddingを正確に測定できないっぽい）
・色を拾うことも厳しそう
・拡張性が乏しい
・レスポンシブはプロンプトを考えるより直接やった方が早そう
・矢印などのアイコンをどうするかはこちらで決める必要がありそう
・やはり複雑な仕様は厳しそう

悪いところの方が多いが、「class名を書いてくれる」のは大きいし、色や画像名などは事前に指示できれば改善してくれるだろう。Chat-GPTに全てを任せると、ある程度進めてからは効率が失速するかプロンプト作りに時間がかかりそうなので、これくらいゆるい指示でベースを作ってもらい、あとはFigmaの力を借りることが最も効率が良さそうだ。

AIを使った効率が良さそうなコーディング方法

これはサイトの規模や仕様によることは予めお伝えします。

01.Figmaでデザインを起こし画像を書き出しマークアップをしてもらう。
02.理想に近いマークアップまで完成させる
03.CSS側は02で完成したHTMLを軸に全体のclass名を抽出してもらう。
04.部分的にスタイルも書いてもらう。
05.手書き＆Figmaの開発モードでHTML/CSSを完成させる
06.JavaScriptやGSAPはChat-GPTに助けてもらう

まぁ...結局重めの構築である05が入るけど、うまく使えば今までの2割〜3割くらいの工数削減はできる気がする。

Chat-GPTとJavaScript、GSAP、Swiperなどのライブラリとの相性が良いので、自分のスキル以上のものを構築してもらうこともできるし、なかなか精度が高い。

2023年10月の現段階では、やはりコーダーオワコン＼(^o^)／ にもならないし、Chat-GPTを使えば誰でも簡単にが知識がなくても簡単にコーディングができる！ともならない。

しかし、制作物の専門知識があればAIはお友達になれるし、逆に知識が乏しければAIは自分の仕事を奪う脅威になりかねないのかなと思います。