ChatGPTを利用して画面モックを爆速で作成する - Taste of Tech Topics

こんにちは、最近スマホのChatGPTアプリで、音声入出力機能を使って会話を楽しんでいる安部です。 皆さんWebアプリ開発などで、画面モックを作成しなければいけない場面は多いですよね？ 適当なHTMLを作ったり、ツールで図示したりしますが、正直面倒です。 そこで今回は、ChatGPTに最初から画面モックを作ってもらいます。 最近はChatGPTに画像を添付できるようになったので手書き画像からHTMLを出力することもできますが、 この記事では画面要素を言葉で指定し、HTMLを出力してもらいます（配置などのデザインは、ひとまずChatGPTにお任せしてみます）。 では早速始めましょう。使用モデルはGPT-4です。 簡単な入力フォームを出力させる まずは、よく使いそうな簡単な入力フォームを出力してもらいます。 ここでは、「書籍を登録する画面」という設定で指示を出します。 次の画面構成の案を、HT

[canadie]

HTMLもjsも書けないけどプロンプトが正確ならChatアプリが動作するところまで全部30分くらいでできるよ https://qiita.com/canadie/items/7d5486b678fe8f487747

[hinonono]

いえ普通にWebデザイナーと競合するし適応できず不幸になる人も居るでしょう。AIのデザイン能力はデザイナーこそが最も活用できて、全体的にはプラスが遥かに大きくなるとも思ってますが。

[msukasuka]

“ChatGPTを利用して画面モックを爆速で作成する”

[NOV1975]

こういう用途だと誰も不幸にならないから活用しないとな

[arapro]

Bootstrapみたいに「よく使われてネット上に情報が多い」フレームワークだから構成サンプルが出しやすい、って面がありそう。他のマイナーなフレームワークだとあんまり上手くいかなそう。

[misshiki]

“画面要素を指定することで、ChatGPTに画面構成案をHTMLで出力させることができました。”

[napsucks]

仕様サンプルとして開発会社にこれを投げたらそのまま使ってきそうなレベルで出来上がってるな・・・。

[otihateten3510]

YouTubeとかでも見たけど精度がまだ全然って感じだった、他のツールやサービス使った方が早い

[lb501]

普通にレスポンシブ対応HTML出力できたらHTMLコーダーの仕事がなくなる？

[suzuki_torakichi]

個人的にはコードとかいらんから、ページ全体のデザインの叩き台を提案して頂きたい。技術的なことは時短にはなっても、勉強して習得しなくちゃ仕事にはならんしね。イラスト生成できるなら出来ませんか。