ChatGPTを使用して、自動でワイヤーフレームを生成するWireGen 2024年07月11日

AIによるワイヤーフレーム作成には、
どちらかというと懐疑的でしたが、
WireGenを試してみました。

まず無料版だと月に25回までしか使えません。

下記URLにアクセス
Figmaのプラグインになっています。

WireGen
https://www.figma.com/community/plugin/1221144015267698736

■なぜAI GPTワイヤーフレーム生成を使うのか?

UI ワイヤーフレームを数分で生成することで、貴重な時間を節約できます。このFigmaプラグインを使えば、より効率的になります。
ボタンをクリックするだけで、複数のワイヤーフレームを生成できます。最初の結果に不満ですか?AIに変更を依頼するか、プロンプトを少し変更して生成するだけです。
生成されたワイヤーフレームは完全に編集可能です。

とのことです。

■どのように生成するのか?

作ってほしいものを書くか、例の一つをクリックしてください。
次に「生成」をクリックします。
画面の数や現在使用している人数にもよりますが、数分かかります。

■作業例

Figmaにログインを求められます。

1.Figmaで新規ファイルを作成します。

2.Figmaで実行ボタンをクリック

3.コマンドプロンプトの画面が出てきます。
 試しに例3をクリック。

■例として、ネイルサロンのユーザーストーリーを入力してみます。

コマンドプロンプト
・ユーザーはアプリを使用して、近くのネイルサロンを探すことができます。
・行きたいネイルサロンを見つけて、予約と支払いができます。
・ネイルサロンは、ユーザーの支払いを完了すると予約を受け取ります。

そうするとUIを構成してくれます。
英語のなので、日本語にしました。


与えられたデザインに基づき、UIは以下のセクションに分けられる:

  1. ヘッダー
  2. 検索バー
  3. 地図
  4. ネイルサロン一覧
  5. サロン詳細
  6. 予約と支払い
  7. ヘッダー
    ヘッダーセクションはUIの上部に配置し、以下の要素を含める必要があります:
  • ロゴ: ロゴ:アプリを象徴するロゴで、クリックするとホーム画面に戻ります。
  • ナビゲーションメニュー: ホーム、マイ予約、プロフィールなど、アプリの様々なセクションを表示するために展開されるメニューアイコン。
  • ユーザープロフィール: ユーザーの名前とプロフィール写真を表示するアイコンです。クリックするとプロフィールページに移動します。
  1. 検索バー:
    検索バーはヘッダーの下に配置し、以下の要素を含むようにする:
  • 場所入力: ユーザーが現在地を入力するか、アプリが現在地にアクセスできるようにするためのテキスト入力。
  • 検索ボタン: ユーザーの現在地からネイルサロンを検索するためのボタン。
  1. 地図:
    地図は検索バーの下に配置し、ユーザーの現在地と近隣のネイルサロンの位置を表示する。地図はインタラクティブなものとし、ユーザーが拡大・縮小したり、移動してさまざまなエリアを探索できるようにする。
  2. ネイルサロンのリスト:
    ネイルサロン一覧はマップの右側に配置し、各サロンの以下の情報を表示する:
  • サロン名
  • 評価
  • 現在地からの距離
  • 今すぐ予約ボタン: ユーザーをサロンの詳細ページに導くボタン。
  1. サロン詳細:
    ユーザーが特定のサロンの今すぐ予約ボタンをクリックすると、サロン詳細ページが表示されます。このページには以下の要素を含める必要があります:
  • サロン名と住所
  • サロンの評価
  • サービスのリスト: サロンが提供するサービスのリストとその価格。
  • 空きカレンダー 予約可能な日時を表示するカレンダーです。
  • 今すぐ予約ボタン 予約・支払いページへ移動するボタンです。
  1. 予約と支払い:
    予約・支払いページは、ユーザーがサロン詳細ページの “今すぐ予約 “ボタンをクリックすると表示されます。ページには以下の要素を含む必要があります:
  • サービス選択: サービス選択:ユーザーが予約したいサービスを選択できるドロップダウンメニュー。
  • 日時の選択: カレンダーでユーザーが予約日時を選択できます。
  • お支払い情報: お支払い情報を入力するフォームです: ユーザーが支払い情報を入力できるフォームです。
  • 予約確認ボタン: 予約を確認し、ユーザーを確認ページに導くボタン。

全体的に、UIは一貫したカラースキームとタイポグラフィーを持つクリーンでモダンなデザインでなければなりません。ユーザーはアプリの様々なセクションを簡単にナビゲートでき、最小限の摩擦で予約と支払いを完了できる必要があります。


ということです。
作成してくるのはいいが、
生成されるワイヤーフレームは英語だし、
プロンプトは日本語でいいのに、
ワイヤーフレームも日本語化に対応してくれればいいのにと思いました。

Figmaで編集できるので、
英語を一個づつ日本語にするか、
一からワイヤーフレーム描くかどっちがいいんだろ。

あとコマンドプロンプトのユーザーストーリーの作り方にもだいぶ左右されるので、
そこはなんとかしたいところ、
ChatGPTとかでなんとかなるのかな。

コメント

タイトルとURLをコピーしました