Figma×ChatGPTで実現！最短ルートでアイデアから画面遷移図を作成しよう。

2023年5月23日 23:42

こんにちは、UXアーキテクトのtamasallyです。
以前twitterに投稿したのですが、Figmaで画面遷移図を作成するプラグインを公開しました。

まずはtweet内の動画を見て頂ければと思うのですが、今回は「画面遷移図のマークダウン形式（uiflow）」をChatGPTでサクッと作成する方法をご紹介します。※ChatGPT3.5で作成したので無料で試せます。

Figma で画面遷移図をマークダウン形式で簡単に作成できるプラグインを公開しました。UI flowsの先駆者の皆様に感謝… #Figma https://t.co/rioNQD3WJV pic.twitter.com/SQqV9iQFAO
— tamasally (@tamasally) May 10, 2023

この記事はこんな方におすすめ

時間をかけずにサービスアイデアをとりあえず具体化したい
ChatGPTと共同でサービス開発を行いたい

UI flowsとは何か

※既にご存じの方は表記に違和感があるのかもしれないのですが、原典のRyan Singerさんの記事のタイトルに倣い「UI flows」にしました。が、お好きなように読み変えていただけると幸いです。

「画面遷移図」とは、アプリやサイトの構成を表した図です。しかし、更新が大変だったり、書きすぎたりすると、分かりづらくなってしまいます。そこで、「UI flows」という、シンプルなテキスト記法で解決する方法をご紹介いたします。

一つの画面を「ユーザーが見るもの」と「ユーザーがすること」の2つの要素に分解し、矢印でつなげていくだけで画面遷移図を作成できます。

さらに、このUI flowsをテキストエディタから書くために開発された「uiflow*」という記法を用いて、今回はFigmaで、サービスアイデアベースから、シンプルな画面遷移図を作成する方法をご紹介していきます。
※考案者: @hirokidaichiさん

具体的な作成手順

全部で4ステップあり、以下の通りです。

ChatGPTにサービスコンセプトを伝え、必要な画面を洗い出しする
uiflow記法についてChatGPTに伝える
1で洗い出した画面遷移図をuiflow記法で作成する
Figmaプラグイン"UI flows for Figma"で画面遷移図を作成

1. ChatGPTにサービスコンセプトを伝え、必要な画面を洗い出しする

このあたりは、サービスを作りたいみなさんの腕の見せ所です。
正直なところ「お好きなようにお任せします」としたかったのですが、参考までにプロンプト例を公開します。シンプルに書くのであれば、5W+1H（+可能であればマネタイズまで）を意識すると良いかと思われます。
※今回は諸事情によりマネタイズの記載は省略しました🙇

あなたは優秀なPdMです。
オンラインで知らない人同士が集まって、作業に集中するコミュニティサービスで必要な画面を洗い出していただけますか?　
またこのサービスを、ユーザーにとって分かりやすい言葉で表してください。

このプロンプトは必須ではなく自分で考えてもOKです、もっと高度なものを作るのも良いと思います。何はともあれ、最終的にアウトプットとしてこちらのようなフォーマットを用意してください。※参考例は、見出し以外はほぼ無加工です。

#Webサービスの概要:"""
「集中コワーキングコミュニティ」は、作業や学習においてモチベーションを高めたり、他の人と協力したりしながら成果を出すことが目的です。
このサービスは、オンラインで利用できるため、時間や場所に制約されず、自分のペースで作業に取り組むことができます。
さらに、他のメンバーとの交流や共同作業を通じて、新たなアイデアや知識の獲得、ネットワーキングの機会も提供されます。
「集中コワーキングコミュニティ」は、効率的な作業環境と共同体のサポートを組み合わせ、ユーザーが目標を達成するためのサポートを提供します。
"""

#作成する画面:"""
- ログイン画面: ユーザーはアカウントを作成し、サービスにログインするために必要な情報を入力します。
- ホーム画面: ユーザーが最初に表示される画面で、コミュニティの概要や最新の活動を表示します。
- イベント一覧画面: コミュニティ内で開催される作業イベントや勉強会などの一覧を表示します。ユーザーは興味のあるイベントに参加できます。
- イベント詳細画面: 選択したイベントの詳細情報を表示します。日時、場所、イベントの目的や内容などを確認できます。
- イベント参加画面: ユーザーはイベントに参加するために登録や申し込みを行います。必要な情報や条件を入力し、参加表明をします。
- プロフィール画面: ユーザーは自分自身に関する情報や興味・専門分野、スキルなどを入力し、他のメンバーとの交流を促進します。
- コミュニティチャット画面: メンバー同士が交流し、情報や質問を共有するためのチャット機能を提供します。
- ブレイクアウトルーム画面: ユーザーが少人数のグループで作業やディスカッションを行うためのブレイクアウトルーム機能を提供します。
- 進捗トラッキング画面: ユーザーが自分の作業やプロジェクトの進捗状況を追跡できる画面を提供します。
- フィードバック画面: ユーザーは他のメンバーに対してフィードバックを送信したり、評価を行ったりすることができます。
"""

2.uiflow記法についてChatGPTに伝える

次にChatGPTにuiflow記法について教えます。以下のプロンプトをChatGPTに送ってください。

あなたはプロのUIデザイナーです。
以下の記法はuiflowと呼ばれるものです。ルールを覚えたら、「はい」とお知らせください。

#基本フォーマット:"""
[ページ名]
表示要素1
表示要素2
表示要素3
--
行動要素1
==> 遷移先ページ1名
行動要素2
==> 遷移先ページ2名
"""

#例:"""
[ログイン画面]
メールアドレス入力欄
パスワード入力欄
--
ログイン
==> ホーム画面
パスワードをお忘れの方
==> パスワード再発行画面

[パスワード再発行画面]
メールアドレス入力欄
--
送信
戻る
==> ログイン画面

[ホーム画面]
最近のお知らせ
メッセージ入力欄
ユーザー名1
投稿時間1
投稿内容1
ユーザー名2
投稿時間2
投稿内容2
--
投稿する
いいねする
"""

3. 1で洗い出した画面遷移図をuiflow記法で作成する

続けて、以下のプロンプトをChatGPTに送ってください。
前半はuiflow記法の詳細な制約条件の説明で、後半は1で取得した情報を記載しています。後半についてはご自身で出力した情報に書き換えてください。

ありがとうございます。uiflowで、以下のサービスの画面設計をお願いできますか?
以下の制約条件を守ってください。

#共通の制約条件:"""
- 出力内容はエディターに貼り付けるため、Code Blockを利用します。
- 一括でエディタに貼り付けるため、1つのCode Blockにまとめてください。
- 表示要素と行動要素の間には区切りとして「--」を挿入すること。
- 「==>」のある行では、==>より前に文字列を挿入しないでください。
"""

#表示要素の制約条件:"""
順序立てて考え、細部の要素名まで書いてください。

- 表示要素の静的な要素を記述する際には、具体的な要素名のみを記載してください。たとえば、「メールアドレス入力欄」や「イベント名」といった具体的な名前のみを使用してください。不要な「表示」といった表現は省略してください。
- 表示要素には「○○ボタン」または「○○リンク」の行動要素の表記しないでください。代わりに、「○○ボタン」または「○○リンク」は行動要素に含めてください。
- "input field"または"input box"の文字を入力可能な要素は、該当する要素を明確に示すようにしてください。その際、「○○入力欄」と記載すること。
- "checkbox"、"radio button"、"select box"の選択可能な要素は、該当する要素を明確に示してください。その際、「○○選択欄」と記載すること。
"""

#行動要素の制約条件:"""
- 行動要素にはボタンやリンク等、行動できる要素は記載します。
- 行動要素には画面名を利用してください、ただし、該当するものがない場合はボタンやリンクの名称を記載します。
- ボタン名称は、「○○ボタン」や「○○リンク」の表記は使用しないでください。代わりに具体的に「○○する」形式を使用してください。
- 行動要素の後には矢印（==>)を入力し、その行動によって遷移する先のページ名しますが、該当の画面が存在しない場合は、矢印（==>)は不要です。
"""

#Webサービスの概要:"""
「集中コワーキングコミュニティ」は、作業や学習においてモチベーションを高めたり、他の人と協力したりしながら成果を出すことが目的です。
このサービスは、オンラインで利用できるため、時間や場所に制約されず、自分のペースで作業に取り組むことができます。さらに、他のメンバーとの交流や共同作業を通じて、新たなアイデアや知識の獲得、ネットワーキングの機会も提供されます。
「集中コワーキングコミュニティ」は、効率的な作業環境と共同体のサポートを組み合わせ、ユーザーが目標を達成するためのサポートを提供します。
"""

# 作成する画面："""
- ログイン画面: ユーザーはアカウントを作成し、サービスにログインするために必要な情報を入力します。
- ホーム画面: ユーザーが最初に表示される画面で、コミュニティの概要や最新の活動を表示します。
- イベント一覧画面: コミュニティ内で開催される作業イベントや勉強会などの一覧を表示します。ユーザーは興味のあるイベントに参加できます。
- イベント詳細画面: 選択したイベントの詳細情報を表示します。日時、場所、イベントの目的や内容などを確認できます。
- イベント参加画面: ユーザーはイベントに参加するために登録や申し込みを行います。必要な情報や条件を入力し、参加表明をします。
- プロフィール画面: ユーザーは自分自身に関する情報や興味・専門分野、スキルなどを入力し、他のメンバーとの交流を促進します。
- コミュニティチャット画面: メンバー同士が交流し、情報や質問を共有するためのチャット機能を提供します。
- ブレイクアウトルーム画面: ユーザーが少人数のグループで作業やディスカッションを行うためのブレイクアウトルーム機能を提供します。
- 進捗トラッキング画面: ユーザーが自分の作業やプロジェクトの進捗状況を追跡できる画面を提供します。
- フィードバック画面: ユーザーは他のメンバーに対してフィードバックを送信したり、評価を行ったりすることができます。
"""

順序立てて考え、必要であれば他の画面も作成してください。
不明点等あれば、ご質問ください。

出力結果を見て、マークダウン形式のルールが守られているか確認してください。よくあるのは、「表示要素に行動要素が書かれている」「区切りの--（ハイフン2個）が省略されている」等ですが、すぐ修正できそうであれば、手動修正が早いです。

4.Figmaプラグイン"UI flows for Figma"で画面遷移図を作成

以下より、Figmaのプラグインをご利用ください。
UI flows for Figma
https://www.figma.com/community/plugin/1237560897507427410/UI-flows-for-Figma

テキストエリアに3の工程の出力結果(uiflow)をコピー&ペーストし、"Create UI Flows"ボタンを押すと生成されます。

画面遷移図の活用：アイデアから実践まで

画面遷移図は作って終わりではなく、まだスタート地点です。

今回ご紹介したChatGPTのプロンプト+プラグインは、多方面に活用できる可能性を感じており、私自身まだ使いこなす途中ではありますが、以下のようなシチュエーションで実践的に利用できると考えています。

実践的な利用例：

サービスアイデアが浮かんだ時、中程度に詳細化するメモとして。
新たなアイデアが実際に機能するかどうか仮説検証までに辿り着くまでのブースターとして（小さな失敗と改良を繰り返す）
より複雑で高度な構成案を設計する際のベースとして。

……など書きましたが、自分の頭の中にだけにあるアイデアを具体化していく瞬間は非常に楽しいですよ！ぜひ体験してみてください。

まとめ

以上、ChatGPTを使ったUI flowsの作り方についてご紹介しました。
画面遷移図はプロダクト開発において欠かせないものですが、更新が手間だったり、抽象的になったりすることがあります。そんな問題を解決するUI flowsを使えば、シンプルなテキスト記法で画面遷移図を作成できます。

今回は、作成手順やFigmaプラグインの紹介、作成した画面遷移図の活用方法についてもお伝えしました。是非、ご自身のプロジェクトに活用してみてください。

もしこの記事が参考になったら、よろしければ応援をお願いいたします🙇

記事のリアクションがよかったら、ChatGPT関連でサービスアイデアから画面遷移図にするまでの工程の試行錯誤についての記事を別途詳しく書きたいと思います。

この記事が気に入ったらサポートをしてみませんか？