こんにちは、最近スマホのChatGPTアプリで、音声入出力機能を使って会話を楽しんでいる安部です。

皆さんWebアプリ開発などで、画面モックを作成しなければいけない場面は多いですよね？
適当なHTMLを作ったり、ツールで図示したりしますが、正直面倒です。

そこで今回は、ChatGPTに最初から画面モックを作ってもらいます。

最近はChatGPTに画像を添付できるようになったので手書き画像からHTMLを出力することもできますが、この記事では画面要素を言葉で指定し、HTMLを出力してもらいます（配置などのデザインは、ひとまずChatGPTにお任せしてみます）。

では早速始めましょう。使用モデルはGPT-4です。

簡単な入力フォームを出力させる

まずは、よく使いそうな簡単な入力フォームを出力してもらいます。

ここでは、「書籍を登録する画面」という設定で指示を出します。

次の画面構成の案を、HTMLで出力してください。
Bootstrapを利用し、デザインを整えてください。

- 書籍の登録画面の登録フォーム
- 書籍のタイトル、出版社、カテゴリ、登録日、備考を持つ
- カテゴリはプルダウンからの選択
- 最後にキャンセルボタン、登録ボタンがある

長くなるので出力は途中まで載せます。

出力されたHTMLをブラウザで表示させると、以下のようになりました。

明示的に指示していなくても、「登録日」入力部分はカレンダーコンポーネント、「備考」入力欄はテキストエリアとなっています。

当然ボタンを押しても何も動きませんが、画面モックとしては申し分ないですね。これが30秒でできるのですから、言うことなしです！

一覧表示画面を出力させる

次に、一覧表示画面を出力させてみます。

フィルター機能やページネーションもつけてもらいましょう。

次の画面構成の案をHTMLで出力してください。
Bootstrapを利用し、デザインを整えてください。
 
- 一覧画面
- 書名、著者名、出版社、カテゴリ、発売日の列を持ち、各行に編集・削除ボタンがある
- 各列には、フィルター機能がある
- 表の下にページネーション部品がある
- さらに下に登録ボタンがある

出力されたHTMLをブラウザで表示すると、以下のような画面となりました。

まだブラッシュアップできそうではありますが、かなり期待したものに近い画面ができています。

画像選択画面を出力させる

少し凝った例として、画像を表示してユーザに選ばせる画面を作ってみます。一度に表示されるのは3枚で、カルーセルで横にスワイプすると新たな画像が表示されるようにしたいです。

次の条件でHTMLを作成してください。デザインはBootstrapで整えてください。
 
- タイトルの下に、画像が横に3枚並んでいる
- 画像は、横にスワイプすると新たな画像が表示される
- どれか1つの画像をクリックすると選択状態になる。選択状態かは見た目でわかるようにする
- 画像の下には太字でキャプションが入っている
- 下に決定ボタンがある

期待通り、画像のスワイプはBootstrapのCarouselを利用してくれるようです。

生成されたHTMLをブラウザで表示すると、以下のような画面となりました（画像の参照先は、ダミー文字列だったのでライセンスフリー画像のアドレスに置き換えています）。

画像選択もカルーセルも、問題なく動いていますね！

「表示すべき画面要素は決まっているけど、レイアウト/デザインはいまいちイメージがない」というような場面でもきれいにデザインされた画面を提案してくれるので、大変重宝しそうです。

まとめ

画面要素を指定することで、ChatGPTに画面構成案をHTMLで出力させることができました。面倒な作業になりがちな画面イメージの作成が一瞬で出来てしまうので、活用の場面は多そうです。 Bootstrapも十全に使ってきれいな画面を作成してくれ、名前から適したコンポーネントを勝手に選んでくれるのも賢いですね。

コンポーネントの多い複雑な画面も、部分ごとに分けて出力させてつなげることで、画面モック作成の大幅な効率化ができそうです！

Acroquest Technologyでは、キャリア採用を行っています。

ディープラーニング等を使った自然言語／画像／音声／動画解析の研究開発

Elasticsearch等を使ったデータ収集／分析／可視化

マイクロサービス、DevOps、最新のOSSを利用する開発プロジェクト

書籍・雑誌等の執筆や、社内外での技術の発信・共有によるエンジニアとしての成長

　少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。 www.wantedly.com