ChatGPT-4oでBootstrp5を使ったワイヤーフレームの作成

ワイヤーフレームをさくさく作りたい

ワイヤーフレームを作るツールっていろいろあると思うんです。figmaとか。
諸事情あって、ファイルだけ渡せばさくっと確認できるような状態で作りたいと思いまして。
Bootstrap5でデザインし、html、css、javascriptのみで動くワイヤーフレームを作成しました。
比較的カッチリした内容のWebシステムですが、できるだけフレンドリーなUIにできればと思い、Codebaseをデザインの参考に作成しました。

プロンプトと出力の節約

コードの出力って意外と時間がかかるんですよね。。
無料版のChatGPTでは、途中で出力が止まってしまいましたが、4oは比較的レスポンスよく出力してくれたと思います。
夕方になるとChatGPT自体開けなくなるようなときもありました。。

プロンプトや出力の節約になるかどうかわかりませんが、以下3点の工夫をしました。

メニュー・ヘッダー・メインの基本骨格作成

最初に行ったのは、全体のレイアウトを「メニューコンテンツ」「ヘッダーコンテンツ」「メインコンテンツ」の3つに分けることです。このアプローチにより、デザインの基本骨格を確立しやすくなります。

プロンプトは下記のように入力しました。

メニュー、ヘッダー、メインと3つに画面割したhtml、css、javascriptが出力されます。
細かい修正も発生しますが、「デモサイトを参考に」としただけで、メニューブロックはボタン一つで開閉・ドロップダウンも問題なく動作するコードが出力されました。

次に、メニューコンテンツの作り込みを行うプロンプトです。

ヘッダーコンテンツも同様にすることで、ChatGPTが考える時間の節約になるかと思います（多少ですが。。）

外部ファイルとしてcssやjsを呼び出す

ワイヤーフレームを作成する際には、cssやjsを外部ファイルとして呼び出すことをお勧めします。これにより、コードの可読性が向上し、メンテナンスが容易になります。

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>

メインコンテンツブロックのコード出力とcss/jsの変更点のみ出力

メニューコンテンツとヘッダーコンテンツが決まったら、以降の出力はメインコンテンツブロックのみのコード出力にするよう指示しました。さらに、cssやjsも変更点のみ出力するようにして、効率的なコード管理を実現しました。

プロンプトは以下の通りです。

完成

慣れると半日ぐらいでできちゃいますね、、、

まとめ

ChatGPT-4oを活用することで、効率的にBootstrap5を使ったワイヤーフレームを作成することができました。画面割の工夫や外部ファイルの活用、コード出力の指示など、細かな工夫を凝らすことで、実用的なワイヤーフレームが完成しました。是非、皆さんも試してみてください。