きっかけ

パッケージ製品を使った開発現場で主にバックエンドよりを中心に開発してきたので、一からフロントを作っていく経験に乏しく、「こんな感じのWebページ作りたいな」とイメージはあっても、それをイメージのままコードに落とし込めなかったんですが、gpt4oの登場で、「あれ？これってChatGPTに放り込めばいい感じで作ってくれるのでは？」と思い立ち試してみた記録です。

ざっくり作りたい画面を考える

今回はチャット画面を雑に書いてみました。

とりあえずChatGPTに投げてみる

特に何も考えずに放り込んでみました。

出力されたHTMLをまるっとコピペして表示した結果、なんかいい感じだけどめっちゃ余白あるｗ
ボタンの配置はまあ良いとしてアイコンがどっか行ったな・・・

プロンプト添えてChatGPTに投げてみる

やっぱり最低限プロンプトは合ったほうが良いと思うので、画像の説明＋補足的に情報を追加する形でプロンプトとを添えて投げてみました。
アイコン使いたいのでアイコンのファイル名もプロンプトに入れました。

結果、思ってたよりいい感じになった。（センスない自分がつくるよりはるかにマシ）

まとめ

手書きで画面レイアウトをざっくり書く
ChatGPTにプロンプト添えて投げる

というやり方でちゃちゃっと"ガワ"だけ作って、そこからスタートするのはかなりアリな気がしてきた