Blog

タッフブログ

2025.01.20

ChatGPTを使って画像からHTMLコードを生成することはできるのか?

これまでに何回か触れてきた生成AIですが
少し使い慣れてきていろんなことにあんまり驚かなくなってきている昨今です。
が、先日何気なく使ったら驚いたことがあったので紹介します。

最近だと画像検索もすごく優秀で、ほしい商品を画像検索すると似たものやその商品を簡単に探したり購入したりできますよね。

コーディングでタブメニューを設置する機会があったのですが、以前使ったものを使いまわしてもいいけど
レスポンシブでシンプルなものがほしいし、探してみようか・・・

とまあシンプルな感じのデザイン例を探してきました。
ちょっとした好奇心で
この画像のまんまコーディングしてくれたらいいのにな・・
いや、ちょっとやってみる???

ということでchatGPTに

タブメニューを作ってほしい
htmlとcssを使ってjsも使っていい
画像のurlを送って

との旨を入力すると・・・・

なんと

作ってくれました。画像ですよ。しかも一瞬で!!!

作ってくれたのがこちら↓
きちんとTABメニューを再現してくれました
何気にレスポンシブです

activeのカラーも再現してくれました

あとはCSSを調整すればOK!修正したいこともChatGPTにお願いすればコード書いてくれます。

ではトグルボタンもやってみよう!!

画像のようなトグルボタンを作りたい
でこちらも一瞬!!

切り替えできるトグルボタンが一瞬でできました

html css jsまできちんと書いてくれてます
コワイ・・

今後もますます発展していくのでしょう。AIを使いこなせないと時代に乗り遅れる怖さ・・
AIを使いこなす言語力や技術力を持たないといけないと改めて感じます。

皆さんはAI、きちんと使いこなせていますか?