ChatGPT-4oでBootstrp5を使ったワイヤーフレームの作成
ワイヤーフレームをさくさく作りたい
ワイヤーフレームを作るツールっていろいろあると思うんです。figmaとか。
諸事情あって、ファイルだけ渡せばさくっと確認できるような状態で作りたいと思いまして。
Bootstrap5でデザインし、html、css、javascriptのみで動くワイヤーフレームを作成しました。
比較的カッチリした内容のWebシステムですが、できるだけフレンドリーなUIにできればと思い、Codebaseをデザインの参考に作成しました。
プロンプトと出力の節約
コードの出力って意外と時間がかかるんですよね。。
無料版のChatGPTでは、途中で出力が止まってしまいましたが、4oは比較的レスポンスよく出力してくれたと思います。
夕方になるとChatGPT自体開けなくなるようなときもありました。。
プロンプトや出力の節約になるかどうかわかりませんが、以下3点の工夫をしました。
メニュー・ヘッダー・メインの基本骨格作成
最初に行ったのは、全体のレイアウトを「メニューコンテンツ」「ヘッダーコンテンツ」「メインコンテンツ」の3つに分けることです。このアプローチにより、デザインの基本骨格を確立しやすくなります。
プロンプトは下記のように入力しました。
あなたは、プロのWebデザイナーです。
Webシステムのワイヤーフレームを作成してください。
以下の条件に従って、html、css、必要に応じてjavascriptで生成してください。
#条件
・UIは英語で出力してください
https://demo.pixelcave.com/codebase/db_classic.html
・このデモサイトを参考に、画面左側がメニューエリア、画面上部がヘッダーエリア、画面右側がコンテンツエリアになるように、Bootstrap5で整えてください。
メニュー、ヘッダー、メインと3つに画面割したhtml、css、javascriptが出力されます。
細かい修正も発生しますが、「デモサイトを参考に」としただけで、メニューブロックはボタン一つで開閉・ドロップダウンも問題なく動作するコードが出力されました。
次に、メニューコンテンツの作り込みを行うプロンプトです。
生成したhtmlに対して、まず画面左側のメニューを作り込みたいです。
メニューは以下の条件に従って生成してください。
#条件
以下のメニューを生成してください。
・[Add Task]
・[Dashboard]
・[Task]をクリックすると、子メニューとして[New]、[Search]
・[User]をクリックすると、子メニューとして[New]、[Search]
・[Master]をクリックすると、子メニューとして[Category]、[Authority]、[Language]
ヘッダーコンテンツも同様にすることで、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も変更点のみ出力するようにして、効率的なコード管理を実現しました。
プロンプトは以下の通りです。
次に画面右側のコンテンツエリアにダッシュボードを作成します。
以降は、<div class="container-fluid"></div>に囲まれた部分のみのコードを出力してください。styles.cssも、変更・追記した箇所のみ出力してください。
#条件
・ [News]を表示する
・[Tasks]のテーブルを表示する
・[Tasks]のテーブルは、ユーザ名、タスク名、更新日時、更新の種類、の4つのカラムを用意する
完成
慣れると半日ぐらいでできちゃいますね、、、
まとめ
ChatGPT-4oを活用することで、効率的にBootstrap5を使ったワイヤーフレームを作成することができました。画面割の工夫や外部ファイルの活用、コード出力の指示など、細かな工夫を凝らすことで、実用的なワイヤーフレームが完成しました。是非、皆さんも試してみてください。
