Codex use case
ユーザーストーリーから UI モックを作成
プロダクトのフィードバック、イシューのスレッド、デザインのコンテキストを、チームで検討し、実装に移せるモックアップに変換します。
Codex を使って Slack、Linear、Google Drive からプロダクトのフィードバックを収集し、ユーザーストーリーと制約として整理してから、ImageGen で UI モックを生成します。方向性が決まったら、そのモックを実際に動作するプロトタイプに仕上げます。
最適な用途
- 散在するフィードバックから機能のビジュアル方針を定めるプロダクトチーム
- 実装前に、元資料に基づくモックアップを用意したいデザインチームとエンジニアリングチーム
- ユーザーのフィードバックをもとにすばやく改善を重ねたいチーム
Contents
ユーザーストーリーから UI モックを作成
プロダクトのフィードバック、イシューのスレッド、デザインのコンテキストを、チームで検討し、実装に移せるモックアップに変換します。
Codex を使って Slack、Linear、Google Drive からプロダクトのフィードバックを収集し、ユーザーストーリーと制約として整理してから、ImageGen で UI モックを生成します。方向性が決まったら、そのモックを実際に動作するプロトタイプに仕上げます。
Codex を使って Slack、Linear、Google Drive からプロダクトのフィードバックを収集し、ユーザーストーリーと制約として整理してから、ImageGen で UI モックを生成します。方向性が決まったら、そのモックを実際に動作するプロトタイプに仕上げます。
関連リンク
最適な用途
- 散在するフィードバックから機能のビジュアル方針を定めるプロダクトチーム
- 実装前に、元資料に基づくモックアップを用意したいデザインチームとエンジニアリングチーム
- ユーザーのフィードバックをもとにすばやく改善を重ねたいチーム
スキルとプラグイン
- 承認済みのフィードバックチャンネルやスレッドで、ユーザーストーリー、課題、発言の引用、未解決の疑問点を検索します。
- 機能リクエスト、バグ報告、ラベル、優先順位、プロジェクトのコンテキストを取得し、モックのブリーフに取り込みます。
- プロダクトのフィードバックやデザイン要件を含む、リサーチノート、通話の要約、ドキュメント、スプレッドシート、スライドを読み取ります。
- モックがプロダクトのビジュアルスタイルから外れないよう、デザインのコンテキスト、スクリーンショット、デザインシステムの参照資料を取得します。
- ImageGen統合したユーザーストーリーとデザイン上の制約をもとに、UI モックやそのバリエーションを生成し、完成イメージを具体化します。
- 選択したモックを実際に動作する Web プロトタイプに仕上げ、実装がモックに沿っているか検証します。
| Skill | Why use it |
|---|---|
| Slack | 承認済みのフィードバックチャンネルやスレッドで、ユーザーストーリー、課題、発言の引用、未解決の疑問点を検索します。 |
| Linear | 機能リクエスト、バグ報告、ラベル、優先順位、プロジェクトのコンテキストを取得し、モックのブリーフに取り込みます。 |
| Google Drive | プロダクトのフィードバックやデザイン要件を含む、リサーチノート、通話の要約、ドキュメント、スプレッドシート、スライドを読み取ります。 |
| Figma | モックがプロダクトのビジュアルスタイルから外れないよう、デザインのコンテキスト、スクリーンショット、デザインシステムの参照資料を取得します。 |
| ImageGen | 統合したユーザーストーリーとデザイン上の制約をもとに、UI モックやそのバリエーションを生成し、完成イメージを具体化します。 |
| Build Web Apps | 選択したモックを実際に動作する Web プロトタイプに仕上げ、実装がモックに沿っているか検証します。 |
開始用プロンプト
はじめに
プロダクトチームは、Slack のスレッド、Linear のイシュー、Google Drive のドキュメントやスプレッドシート、顧客との通話メモなど、さまざまなソースからフィードバックを収集することがよくあります。解決したい問題を示す明確なユーザーストーリーがある場合もあれば、必要なコンテキストがそうしたソースに散在している場合もあります。
ChatGPT はそうしたコンテキストを収集し、問題を解決する機能の UI モックを作成できます。方向性を検証したら、Codex でその機能をプロダクトに実装できます。
完成イメージの具体化
明確なユーザーストーリーがある場合は、そこから始められます。ない場合は、まず ChatGPT と対話し、さまざまなソースからコンテキストを収集して、ユーザーストーリーにまとめることができます。
次に、ChatGPT に画像生成を使って、方向性の異なるモックをいくつか作成するよう依頼できます。モックでは、プロダクトの情報アーキテクチャとデザインシステムの制約を維持する必要があります。
必要に応じて、現在の UI のスクリーンショットや Figma ファイルを参考資料として提供できます。
納得できるモックになるまで、この作業を繰り返します。変更範囲を絞るほど、Codex はそのまま実装できるモックを生成しやすくなります。
モックからプロトタイプへ
Codex で実装したい最終版のモック画像を使用します。ChatGPT のチャットをそのまま続けるのではなく、Codex を選択して新しいチャットを開始し、画像を再度添付します。次に、Codex にモックの実装を依頼し、実際に動作するプロトタイプに仕上げます。Web アプリを構築する場合は、必要に応じて Build Web Apps プラグイン を使用できます：
