Codex use case
ユーザーストーリーから UI モックアップを作成
プロダクトへのフィードバック、課題についてのやり取り、デザインの背景をもとに、チームで検討し、実装に移せるモックアップを作成します。
Codex で Slack、Linear、Google ドライブからプロダクトへのフィードバックを集め、ユーザーストーリーと制約条件に整理します。次に、ImageGen で UI モックアップを生成します。デザインの方向性が決まったら、選んだモックアップをもとに実際に動くプロトタイプを作成します。
Best for
- 各所に寄せられたフィードバックをもとに、機能のデザイン方針を決めたいプロダクトチーム
- 実装に入る前に、元の資料に基づいてモックアップを作成したいデザインチームやエンジニアリングチーム
- ユーザーのフィードバックをもとに、短いサイクルで改善を重ねたいチーム
Contents
ユーザーストーリーから UI モックアップを作成
プロダクトへのフィードバック、課題についてのやり取り、デザインの背景をもとに、チームで検討し、実装に移せるモックアップを作成します。
Codex で Slack、Linear、Google ドライブからプロダクトへのフィードバックを集め、ユーザーストーリーと制約条件に整理します。次に、ImageGen で UI モックアップを生成します。デザインの方向性が決まったら、選んだモックアップをもとに実際に動くプロトタイプを作成します。
Codex で Slack、Linear、Google ドライブからプロダクトへのフィードバックを集め、ユーザーストーリーと制約条件に整理します。次に、ImageGen で UI モックアップを生成します。デザインの方向性が決まったら、選んだモックアップをもとに実際に動くプロトタイプを作成します。
Related links
Best for
- 各所に寄せられたフィードバックをもとに、機能のデザイン方針を決めたいプロダクトチーム
- 実装に入る前に、元の資料に基づいてモックアップを作成したいデザインチームやエンジニアリングチーム
- ユーザーのフィードバックをもとに、短いサイクルで改善を重ねたいチーム
Skills & Plugins
- フィードバックの収集が認められているチャンネルやスレッドを検索し、ユーザーストーリー、ユーザーが困っている点、引用できる発言、未解決の疑問を集めます。
- 機能要望、バグ報告、ラベル、優先度、プロジェクトの背景を、モックアップ作成用の資料にまとめます。
- 調査メモ、通話の要約、ドキュメント、スプレッドシート、スライドに記載されたプロダクトへのフィードバックやデザイン要件を読み取ります。
- モックアップが既存のプロダクトのデザインと調和するよう、設計の背景がわかる資料やスクリーンショット、デザインシステムの参考資料を集めます。
- ImageGen整理したユーザーストーリーとデザイン上の制約をもとに、UI モックアップとそのバリエーションを生成し、画面の仕上がりを判断する基準を示します。
- 選んだモックアップをもとに実際に動くウェブプロトタイプを作成し、モックアップどおりに実装できているかを確認します。
| Skill | Why use it |
|---|---|
| Slack | フィードバックの収集が認められているチャンネルやスレッドを検索し、ユーザーストーリー、ユーザーが困っている点、引用できる発言、未解決の疑問を集めます。 |
| Linear | 機能要望、バグ報告、ラベル、優先度、プロジェクトの背景を、モックアップ作成用の資料にまとめます。 |
| Google Drive | 調査メモ、通話の要約、ドキュメント、スプレッドシート、スライドに記載されたプロダクトへのフィードバックやデザイン要件を読み取ります。 |
| Figma | モックアップが既存のプロダクトのデザインと調和するよう、設計の背景がわかる資料やスクリーンショット、デザインシステムの参考資料を集めます。 |
| ImageGen | 整理したユーザーストーリーとデザイン上の制約をもとに、UI モックアップとそのバリエーションを生成し、画面の仕上がりを判断する基準を示します。 |
| Build Web Apps | 選んだモックアップをもとに実際に動くウェブプロトタイプを作成し、モックアップどおりに実装できているかを確認します。 |
Starter prompt
はじめに
プロダクトチームは、Slack のスレッド、Linear の課題、Google ドライブ上のドキュメントやスプレッドシート、顧客との通話メモなど、さまざまな情報源からフィードバックを集めます。解決したい課題がユーザーストーリーとして明確にまとまっている場合もあれば、課題を理解するためのコンテキストがそれぞれの情報源に散らばっている場合もあります。
ChatGPT は、こうしたコンテキストを集め、課題の解決につながる機能の UI モックを作成できます。モックで方向性を確かめたら、Codex にその機能をプロダクトに実装してもらえます。
UI モックの作成
明確なユーザーストーリーがあれば、それを出発点にできます。まだなければ、まず ChatGPT と対話しながら、さまざまな情報源からコンテキストを集め、ユーザーストーリーにまとめます。
次に、ChatGPT に画像生成を使って、方向性の異なるモックをいくつか作成するよう依頼します。どの案でも、プロダクトの情報設計を維持し、デザインシステムの制約を守るようにします。
必要に応じて、参考資料として現在の UI のスクリーンショットや Figma ファイルを渡すこともできます。
納得のいくモックができるまで、この手順を繰り返します。変更範囲を絞るほど、Codex がそのまま実装できるモックを生成しやすくなります。
モックからプロトタイプへ
Codex に実装してもらいたい最終版のモック画像を使います。ChatGPT のチャットをそのまま続けるのではなく、Codex を選んで新しいチャットを開始し、画像を添付し直します。次に、モックを実装して動作するプロトタイプを作成するよう Codex に依頼します。Web アプリを開発する場合は、必要に応じて Build Web Apps プラグインを使えます。
