今日は、生成AI でどこまで、UI設計を自動で、図示することができるのか、確認したくて、ChatGPT と Google Bard で試してみました。また、Adobe XD をUI設計で、普段使っているのですが、UI設計ツール「Autodesigner」が、どこまで、対応しているのかも、知りたくて、調査しました。
投入したプロンプト
■プロンプト・その１ ログイン画面のUI設計をしてください。 画面の構成要素は、 ・ログインID入力欄 ・パスワード入力欄 ・ログインしたままにするチェックボックス ・ログインボタン ・キャンセルボタン ■プロンプト・その２ 上記の設計を図で、示してください。
ChatGPT-3.5 の回答（プロンプト・その１のみ投入）
もちろんです。以下は基本的なログイン画面のUI設計の例です。これはあくまで参考として利用できます。デザインはプロジェクトの要件やデザインガイドラインに従って調整することが重要です。
------------------------------- | ログイン | ------------------------------- | ログインID: [ ] | | パスワード: [ ] | | [ ] ログインしたままにする | ------------------------------- | [ログイン] [キャンセル] | -------------------------------説明:
- タイトル: ログイン画面の上部には「ログイン」というタイトルを配置しています。
- ログインID入力欄: ユーザーがログインID（ユーザー名やメールアドレスなど）を入力できるテキストボックスがあります。
- パスワード入力欄: ユーザーがパスワードを入力できるテキストボックスがあります。通常はパスワードはセキュリティのために非表示にします。
- ログインしたままにするチェックボックス: ユーザーが「ログインしたままにする」オプションを選択できるように、チェックボックスが配置されています。
- ログインボタン: ユーザーが入力を完了したら、このボタンをクリックしてログインできます。
- キャンセルボタン: ユーザーがログイン画面を閉じたり、入力をやり直したい場合に利用できるボタンです。
デザインの詳細は、プロジェクトのデザインガイドラインやユーザビリティに合わせて調整してください。
Google Bard の回答
■プロンプト・その１
ログイン画面のUI設計をしてください。 画面の構成要素は、 ・ログインID入力欄 ・パスワード入力欄 ・ログインしたままにするチェックボックス ・ログインボタン ・キャンセルボタン■回答・その１
ログイン画面のUI設計を以下に示します。
画面構成
- 画面中央に、ログインID入力欄とパスワード入力欄を配置する。
- ログインID入力欄の上に、ログインIDの説明文を配置する。
- パスワード入力欄の上に、パスワードの説明文を配置する。
- 画面右下に、ログインしたままにするチェックボックス、ログインボタン、キャンセルボタンを配置する。
色彩
- 画面全体を、白または淡い色で構成する。
- ログインID入力欄とパスワード入力欄の枠線を、黒または濃い色にする。
- ログインボタンとキャンセルボタンの色を、目立つ色にする。
フォント
- ログインID入力欄とパスワード入力欄のフォントは、読みやすく、入力しやすいフォントにする。
- ログインボタンとキャンセルボタンのフォントは、大きいフォントにして、視認性を高める。
レイアウト
- 画面の要素は、左右対称になるように配置する。
- ログインID入力欄とパスワード入力欄は、画面の中央に配置して、視線を集めやすくする。
- ログインしたままにするチェックボックス、ログインボタン、キャンセルボタンは、画面の右下に配置して、操作しやすいようにする。
説明文
- ログインID入力欄とパスワード入力欄の上に、説明文を配置して、ユーザーが入力すべき内容を明確にする。
- 説明文は、簡潔で分かりやすい言葉で書く。
チェックボックス
- ログインしたままにするチェックボックスは、ユーザーがログイン状態を維持するかどうかを選択できるようにする。
- チェックボックスの説明文は、簡潔で分かりやすい言葉で書く。
ボタン
- ログインボタンは、ユーザーがログイン操作を行うためのボタンである。
- ボタンのテキストは、「ログイン」など、分かりやすい言葉で書く。
- ボタンの色は、目立つ色にして、ユーザーが操作しやすいようにする。
キャンセルボタン
- キャンセルボタンは、ユーザーがログイン画面を閉じるためのボタンである。
- ボタンのテキストは、「キャンセル」など、分かりやすい言葉で書く。
- ボタンの色は、ログインボタンとは異なる色にして、区別できるようにする。
この設計は、一般的なログイン画面の設計を踏襲したものですが、具体的な設計は、サービスの目的やターゲットユーザーによって調整する必要があります。例えば、以下の点に注意するとよいでしょう。
- サービスの目的
サービスの目的が、ユーザーの利便性を向上させることであれば、入力欄を大きくして、入力しやすいようにするなどの工夫が必要です。
- ターゲットユーザー
ターゲットユーザーが、高齢者や視覚障害者である場合は、文字サイズを大きくしたり、色の配色に配慮したりするなどの工夫が必要です。
また、ユーザーのニーズを把握するために、ユーザーテストを行うことも有効です。ユーザーテストを行うことで、実際にユーザーが使用したときにどのような問題が生じるかを確認することができます。
■プロンプト・その２
上記の設計を図で、示してください。■回答・その２
上記の設計を図で示したものが、以下のとおりです。
[図] ログイン画面のUI設計
画面全体を白で構成し、ログインID入力欄とパスワード入力欄の枠線を黒で、ログインボタンとキャンセルボタンの色を目立つ色にしています。
画面の要素は、左右対称になるように配置し、ログインID入力欄とパスワード入力欄は画面の中央に、ログインしたままにするチェックボックス、ログインボタン、キャンセルボタンは画面の右下に配置しています。
ログインID入力欄とパスワード入力欄の上に、説明文を配置して、ユーザーが入力すべき内容を明確にしています。
ログインしたままにするチェックボックスは、ユーザーがログイン状態を維持するかどうかを選択できるようにしています。
ログインボタンは、ユーザーがログイン操作を行うためのボタンです。
キャンセルボタンは、ユーザーがログイン画面を閉じるためのボタンです。
なお、この図はあくまでも一例です。具体的な設計は、サービスの目的やターゲットユーザーによって調整する必要があります。
考察
ChatGPT は、テキストベースですが、指示した内容で、図示をしてくれました。
Google Bard は、まだ、画像の出力機能に対応していないようなので、「[図] ログイン画面のUI設計」と表示され、その説明文が、下に、表示されるだけです。
現時点では、ChatGPT のほうが、UI 設計の自動化では、一歩進んでるようです。
また、「Autodesigner」が、どこまで、対応しているのかについては、「テキストからUIデザインを生成出来るAI「Autodesigner」を試してみた」 を参照してみましたが、テキストを解析し、近しいテンプレートを表示しているだけのようですので、ChatGPT のように、配置したい部品を理解して、UI設計するには、至っていないようです。
生成AI による、UI 設計には、期待していますので、こらからが、楽しみですね！
本内容に、ご興味がある方は、お問い合わせフォーム より、お問い合わせくださいませ。