2024年3月29日
ChatGPTはプロのUI/UXデザイナーによるアプリ設計にどの程度役立つのか?
本記事は、原著者の許諾のもとに翻訳・掲載しております。
none
«自動化できるものはすべて自動化されるだろう» - ロバート・キャノン、インターネット法・政策専門家
人工知能(AI)が今年のトレンドであることは紛れもない事実です。AI技術が台頭し、さまざまな業界で急速に普及する中、UI/UXデザイナーやプロダクトデザイナーも当然その影響を受けています。ChatGPTやMidjourney、DALL-E 2(ダリ・ツー)、Stable Diffusionなどの製品はすでにかなり人気があり、筆者の同僚の中にも積極的なユーザーが多数います。
UI/UXデザイナーとして、筆者もChatGPTを作業プロセスに取り入れたことにより、より使いやすいインターフェースの開発能力が格段に向上したことをすでに実感しています。この記事では、ChatGPTの具体的な使い方を示しつつ、ChatGPTを利用することでどのようなメリットを享受でき、いかにして全体的な作業効率を高められるのかを説明します。では早速見ていきましょう!
UI/UXデザイナーとプロダクトデザイナーの補助ツールとしてのChatGPT
リクエスト作成またはプロンプトエンジニアリング
ChatGPTの可能性を最大限引き出せるかどうかは、効率的なクエリを作成する能力にかかっています。まずはリクエスト作成の基本をマスターし、さまざまなプロンプトスタイルを試してみましょう。
参考になりそうな例を以下にいくつか挙げましたので、ぜひご覧ください。
- 200+ ChatGPT UX Prompts
- 25 ChatGPT Use Cases for UX Designers
- 45 ChatGPT Use Cases for Product Managers
完璧なリクエストの作成は、レシピを作る作業に似ています。期待する結果を得るためには、必要な材料をすべて適切な量加えて混ぜ合わせる必要があります。すべての工程を正しく行っても、完璧に仕上げるためには微調整が必要になるかもしれません。その要点についてこれからお話しします。 以下では、分かりやすい例として、数学を楽しく学べるモバイルアプリを開発しなければならないと仮定します。脳のトレーニングになるさまざまなテストやパズルを提供する数学クイズアプリを開発するとしましょう。
要件とアイデアを集める
ChatGPTは、ユーザーのリクエストを分析し、答えを生成することで、デザイナーが新しいプロジェクトの要件とアイデアを集める手助けをすることができます。コンセプトを考案し、主な機能やデザイン要件を決定する作業を含めることも可能です。
では、実際にChatGPTがこの作業を行う上で助けになるのか見てみましょう。
ChatGPTの会話
画像内テキストの翻訳
none
UX/UIデザイナーとして対応してください。主な目標は、製品やサービスのユーザーエクスペリエンスを可能な限りシームレスかつ直感的で、魅力的なものにすることです。デジタル製品やサービスのユーザーにとって、魅力的で楽しい体験を生み出します。あなたの仕事は、アプリ、ウェブサイト、その他のデジタル製品のユーザーエクスペリエンスを、創造的な方法で改善することです。結果はすべて英語で出力してください。最初のタスクは、iOS向けの数学クイズアプリのコンセプトを作成することです。
タイトル:MathWiz
概要: MathWizは、iOSデバイス向けに開発された対話型の数学クイズアプリであり、あらゆる年齢層のユーザーに、楽しく魅力的な教育体験を提供することを目指しています。このアプリは、各ユーザーに合わせた学習プロセスを通じて数学能力を高め、強化することに主眼を置いたさまざまなクイズや課題を提供します。
特長:
- カスタマイズされた学習パス: MathWizは、ユーザーの習熟度と進捗に応じた学習パスを提供します。さまざまなクイズや課題におけるユーザーの成績を評価することで、ユーザーが効果的に力をつけられるよう最適なクイズや演習をアプリが提案します。
- トピックの網羅性: 算数、代数、幾何学、三角法、微分積分など、幅広い数学トピックを網羅します。ユーザーは、自分の興味やレベルに応じてクイズを選択できます。
- 成績に応じた難易度設定: MathWizは、ユーザーの成績に応じてクイズの難易度を変更する仕組みを使用します。これにより、ユーザーは常にやりがいのある問題に挑戦することができ、飽きたり不満を感じたりすることなく、関心を持って積極的に取り組むことができます。
- ゲーム要素: このアプリは、ポイント、バッジ、リーダーボードなどのゲーム要素を取り入れることで、学習プロセスを楽しく満足の得られるものにします。ユーザーは、クイズやチャレンジ問題をこなすとポイントやバッジを獲得します。これらはフレンドと共有したり、グローバルリーダーボードで成績を比較したりできます。
- デイリークエスト: 日替わりのデイリークエストを実施すると、ユーザーは追加のポイントやバッジを獲得することができます。これらのクエストは、常にユーザーのモチベーションを高め、関心を引きつけ、アプリに戻ってくるよう促します。
- 進捗の管理と分析: ユーザーが進捗を把握し、改善が必要な部分を確認できるよう、詳細な分析を行います。ユーザーはトピックやクイズ、チャレンジ問題ごとに成績を確認できるほか、進捗をフレンドと比べることもできます。
- コラボレーションと交流: MathWizは、クイズやチャレンジ問題、成果を共有しやすくすることで、ユーザー間のコラボレーションや競争を促します。また、チャット機能を取り入れることで、戦略を話し合ったり、助け合いながら複雑な問題に取り組んだりすることができます。
- オフライン機能: ユーザーは、オフラインでもクイズやチャレンジ問題に取り組むことができるため、インターネットに接続できない環境でも学習と練習を続けられます。
- 保護者機能: 保護者機能を搭載することで、保護者が子供の進捗を監督したり、目標を設定したり、特定のトピックスや機能へのアクセスを制限したりできるようにします。
デザインアプローチ:
アプリはスムーズで直感的なユーザーエクスペリエンスの実現を優先したデザインとします。デザインの重要な要素は以下のとおりです。
- 洗練されたモダンなUI: MathWizは、無駄のないデザインと操作のしやすさに重点を置いた、洗練されたモダンなUIを搭載します。
- 魅力的なビジュアル: アニメーションやイラスト、配色など、視覚的に魅力的なデザイン要素を取り入れることで、楽しく没入感のある学習環境を作り出します。
- 使いやすいナビゲーション: アプリのナビゲーションは分かりやすく、使いやすいものにし、ユーザーはクイズやチャレンジ問題などの機能に迷うことなく簡単にアクセスできるようにします。
- アクセシビリティ: MathWizはアクセシビリティを念頭に置いてデザインします。ユーザーの能力や好みによらず、誰でも便利に使えるようにします。
最後に、MathWizはカスタマイズされた学習プロセスを通じてユーザーが楽しみながら、興味を持って数学を学び、練習できる手段を提供することを目指します。トピックの網羅性、成績に応じた難易度設定、ゲーム要素、使いやすいデザインなどにより、年齢を問わずすべてのユーザーが楽しめるシームレスな体験を生み出します。
ご覧のとおり、ChatGPTはアプリのコンセプトをかなり詳細に記述しています。必要であれば、各機能についてさらに質問することも可能です。ChatGPTは明確な回答を提示し、さらには最も重要なポイントも示してくれます。
では、MathWizアプリをユーザーにとってより魅力的なデザインにするためのアイデアを尋ねてみましょう。
MathWizのデザイン案
画像内テキストの翻訳
none
MathWizアプリのデザイン案をいくつかリストアップしてください。
視覚的に魅力的で、ユーザーの興味を引き出すようなアプリにするためのデザイン案を以下にいくつか挙げます。
- カスタマイズ可能なアバター:ユーザーが自分のアバターを作成し、カスタマイズできるようにします。アバターは、プロフィール写真や、アプリ内での自分の分身として使用できます。こうしたパーソナライズ機能により、ユーザーエンゲージメントを高め、主体性を持たせることができます。
- ゲーミフィケーション:ポイントやバッジ、リーダーボードなどのゲーム要素を取り入れることでモチベーションを高め、より楽しく学習できるようにします。クイズに答えるとポイントを獲得し、一定のマイルストーンに到達するとバッジが解放され、リーダーボードでフレンドや他のグローバルユーザーと成果を比べることができます。
- 進捗の可視化:視覚的に魅力的なチャートやグラフを使用して進捗を表示し、ユーザーが自分の向上過程を簡単に確認できるようにします。トピックごとの成績、合計獲得ポイント、集めたバッジを表示する進捗ダッシュボードを搭載します。
- ダークモード:特に夜間や暗い場所での使用の際に目の疲れを軽減できるよう、ダークモードに切り替えられる機能を実装します。
- アニメーションと画面遷移:ささやかなアニメーションやさりげない画面遷移により、スムーズでインタラクティブなユーザーエクスペリエンスを生み出します。正解や不正解の際のアニメーションや、画面の読み込み、アプリ内のセクション間のナビゲーションなどを含みます。
- テーマに沿ったクイズ:人気のイベントや祝日、時事ネタなどをテーマにしたクイズを作成し、ユーザーの興味を引き出します。そうすることで目新しさを出し、ユーザーに新しいトピックやチャレンジ問題に挑戦するよう促すことができます。
- 共同学習:ソーシャル機能を組み込むことで、フレンドや他の学習者とつながったり、クイズやチャレンジ問題を送ったり、数学の問題について話し合ったり、成果を共有したりできるようにします。そうすることで、コミュニティとしての意識が芽生え、コラボレーションを通じた学習を促すことができます。
- 成績に応じた難易度設定:能力に合ったクイズや問題を提示することによる、ユーザーのスキルレベルに応じた難易度設定を可能にします。そうすることで、個別化された学習体験を生み出し、ユーザーを圧倒することなく、適度に難しい問題で興味を持続させます。
- 一貫した視覚言語:色やタイポグラフィ、アイコン、イラストなど、アプリ全体で一貫した視覚的言語を使用します。そうすることで、統一感のあるプロフェッショナルな外観になり、全体的なユーザーエクスペリエンス向上につながります。
- マイクロインタラクション:ハプティックフィードバックや効果音、ビジュアルキューなどのマイクロインタラクションを取り入れることで、より興味を引きつけ、インタラクティブなアプリにします。例えば、ユーザーが答えを提出した際にハプティックフィードバックを使用したり、正解と不正解を効果音で知らせたりするといいでしょう。
これらのデザイン案をMathWizアプリに取り入れることで、視覚的に魅力的で興味をかき立てられるような体験を生み出し、ユーザーに楽しみながら数学を学ぶよう促すことができます。
バーチャルアシスタントはポイントを10個挙げてくれました。どれもかなり的確で、これから開発するアプリのデザインコンセプトをまとめる手助けになりそうです。
デザインの選択肢を出す
ChatGPTを使うことで、要件を満たすさまざまなデザインの選択肢が得られます。その中から最も良いアイデアを選び、あまり有望でないものは除外します。
MathWizアプリについてはすでにアイデアが固まりましたので、情報アーキテクチャに関する詳細な説明を入手してみましょう。
デザインの選択肢を生成
画像内テキストの翻訳
none
次のタスクです。この数学クイズアプリに適した構造(情報アーキテクチャ)を作成してください。
MathWiz用にしっかりした情報アーキテクチャを作成するために、主要な画面とそれらの関係を概説します。この構造は、ユーザーとアプリのインタラクションを可能にする明確で直感的なナビゲーションシステムを提供します。
-
スプラッシュスクリーン:
・アプリのリソースを読み込む間、アプリのロゴ名前を表示 -
オンボーディング画面(新規ユーザー向けオプション):
・アプリの主な機能や利点をまとめた一連の紹介画面を表示し、新規登録やログインの方法を案内 -
ホーム画面:
・個別化された推奨クイズやデイリークエスト、成果を含むユーザーの進捗概要。
・以下のセクションへのアクセス:
a. トピック
b. デイリークエスト
c. 成果
d. プロフィール
e. 設定 -
トピック画面:
・利用可能な数学のトピック(算数、代数、幾何学、三角法、微分積分など)
・トピックのフィルター・検索機能
・各トピック内のサブトピックや関連するクイズへのアクセス -
サブトピック画面:
・選択したトピック内のサブトピックの一覧
・各サブトピック内のクイズへのアクセス -
クイズ画面:
・選択されたクイズを、問題、答えの選択肢、タイマー(該当する場合)とともに表示
・回答後、結果とともに正解、解説、獲得ポイントを表示 -
デイリークエスト画面:
・実施できるデイリークエストの一覧
・各クエストのステータス(実施済みかどうか)を、リワード(ポイントとバッジ)とともに表示 -
成果画面:
・ユーザーが獲得したバッジや達成した成果の概要
・リーダーボードを表示し、フレンドや他のグローバルユーザーと成果を比較する機能 -
プロフィール画面:
・名前やプロフィール写真などのユーザーの個人情報や、進捗(ポイント、バッジ、完了したクイズ)の概要を表示
・パフォーマンス分析やフレンドリストへのアクセス -
パフォーマンス分析画面:
・トピックごとの成績や強み、改善が必要な部分など、ユーザーの詳細なパフォーマンス分析を表示 -
フレンドリスト画面:
・ユーザーのフレンドリストを、それぞれの成果とポイントとともに表示
・フレンドを追加、削除、検索する機能
・戦略を話し合ったり、複雑な問題について助け合ったりするためのチャット機能へのアクセス -
設定画面:
・通知やサウンド、アクセシビリティ(ユーザー補助)などの環境設定が可能
・子供のアカウントを監視し、管理するための保護者設定 -
チャット画面:
・フレンドと会話したり、クイズやチャレンジ問題を送ったり、数学の問題について話し合ったりすることが可能
画面とそれらの関係をこのように整理することで、MathWizは十分に定義された情報アーキテクチャを持つことができ、使いやすくて楽しいユーザーエクスペリエンスを実現できます。
これはまだ製品の土台ではありませんが、この基本構造案をもとにユーザーとのインタラクションを開発し、この案をデザインの初期段階とすることができます。
悪くないではありませんか!
ChatGPTに製品の最適な配色を提案してもらうことはできるでしょうか?普段はColormindやColorhunt、Coolorsといった他のツールを使用していますが、今回はChatGPTの意見を聞いてみたいと思います。
ChatGPTの回答
画像内テキストの翻訳
none
それでは続けましょう。数学クイズアプリでは、色が重要な役割を果たす場合があります。次のタスクは、数学クイズアプリMathWizのブランドカラー、プライマリーカラー、セカンダリーカラーを含む、16進コード付きのカラーパレットを作成することです。
よく考えられたカラーパレットは、視覚的に魅力的で、やる気を起こさせる学習環境を生み出し、MathWizのユーザーエクスペリエンスを格段に向上させることができます。ここに挙げた色は、心地良く楽しい雰囲気を維持しつつ、興味をかき立て、やる気を引き出し、集中力を高める効果が期待できます。以下がブランドカラー、プライマリーカラー、セカンダリーカラーを含むMathWizのカラーパレット案になります。
-
ブランドカラー:
・ディープブルー(#274472):この色は、信用、安定、信頼性を表します。これらは教育アプリに欠かせない要素です。ディープブルーはアプリのロゴ、ヘッダー、ナビゲーションの主要要素に使用します。 -
プライマリーカラー:
・ライトブルー(#4B8BBE):この色は気持ちを落ち着かせ、親近感を抱かせます。そのため、背景やボタン、インタラクティブ要素に適しています。
・ティール(#009688):この鮮やかな色は、アクセントに使用したり、CTAボタンや重要な情報などに注意を引き、行動を促したい場合にも使用できます。 -
セカンダリーカラー:
・ソフトイエロー(#FFEB3B):この色は暖かみとエネルギーを与え、進捗インジケータやバッジ、リワードのハイライトに使用できます。
・ライトグレー(#F5F5F5):この中立色は、背景色として適しています。また、強烈すぎる印象になったり、注意をそらせたりしないようにしつつ、コントラストを与えます。
・ダークグレー(#616161):この色は、テキストやアイコンに使用できます。クリーンでモダンな外観を保ちつつ、可読性を確保します。
MathWizのカラーパレット案は、心地良くも興味をかき立てるような、視覚的に魅力的な環境を作り出し、ユーザーに学ぶことを促しつつ、アプリを楽しんでもらうことを意図しています。信頼できるブランドカラーを鮮やかなプライマリーカラーやセカンダリーカラーと組み合わせることで、MathWizはユーザーの注意を引き、長期間にわたる学習セッションを促します。
なかなか有望です!筆者は色の組み合わせの記述が詳細である点と、説明が簡潔にまとめられている点が特に気に入りました。このパレットを再現してみましたが、結果は概ね満足のいくものでした。
カラーパレット
フォントはどうでしょうか?システムのSan FranciscoフォントとNew Yorkフォントは除外し、選択肢の多様化を図りたいと思います。
フォントの提案
画像内テキストの翻訳
none
見出しと本文のフォントの組み合わせを3つ提案してください。iOS向けのアプリであることを踏まえつつ、ネイティブのシステムフォント(San FranciscoとNew York)は除外してください。
MathWizのような数学クイズアプリに使用するフォントの最適な組み合わせを選ぶことは、可読性、ユーザーエンゲージメント、全体的な視覚的魅力を確保する上で極めて重要です。フォントはモダンで読みやすく、アプリのデザインを補完するものでなければなりません。MathWizに適した、見出しと本文のフォントの組み合わせを以下に3つ用意しました。
- 見出し:Montserrat | 本文:Open Sans
・Montserratはモダンで汎用性の高いサンセリフ体のフォントであり、見出しやタイトルの見栄えを良くします。独特な幾何学的構造を持ち、クリーンで現代的な雰囲気があります。
・Open Sansは非常に読みやすく、汎用性の高いサンセリフ体のフォントであり、印刷用とデジタル用の両方に適しています。可読性に優れ、親しみやすくオープンな見た目であり、本文用として理想的です。 - 見出し:Roboto Slab | 本文:Roboto
・Roboto Slabは現代的なスラブセリフ体のフォントであり、幾何学的な形状や親しみやすい曲線が特徴です。見出しに個性的なタッチを加えますが、過度に目を引くということもありません。
・Robotoは人気のあるサンセリフ体のフォントであり、可読性と汎用性に定評があります。Roboto Slabと相性が良く、アプリ全体に統一感のあるモダンな外観を与えます。 - 見出し:Lato | 本文:Nunito
・Latoはやや丸みを帯びたディテールが特徴で、親しみやすく暖かみのある外観のサンセリフ体のフォントです。見出しに適していて、クリーンでモダンな見た目を与えます。
・Nunitoは丸みを帯びたサンセリフ体のフォントで、親しみやすさがあります。可読性に優れ、Latoとの相性も良く、調和のとれた視覚的に魅力的な組み合わせです。
これらのフォントの組み合わせは、モダンなデザインと可読性のバランスが取れており、MathWizのユーザーにとってコンテンツを扱いやすくします。これらの内いずれかの組み合わせを選ぶことで、統一感の取れた視覚的に魅力的なデザインを生み出し、ユーザーエクスペリエンスを向上させることができます。
技術的な観点で言うと、回答はかなり正確ではありますが、一見すると面白味に欠けます。では、これらのフォントが実際どのように見えるのか確認してみましょう。
フォントの比較
競合の一次分析
競合アプリ(他の数学アプリ)に関する詳細な調査は、MathMasterにおける筆者のデザインプロセスに欠かせない部分であり、AIが大いに役立っています。ChatGPTは、さまざまな情報源から大量のデータを自動的に集めて処理し、競合分析を手助けしてくれます。希望するデータの表示形式(表形式など)を指定するだけで、適切な分析結果が得られます。
MathWizの競合アプリ
画像内テキストの翻訳
none
同じタイプの競合するアプリをリストアップし、ステークホルダーに発表できるよう比較分析してください。比較分析結果は表にまとめてください。
MathWizの競合アプリを以下にリストアップし、比較分析結果を表にまとめました。この分析では、十分な情報をもとに意思決定を行い、MathWizのビジネスチャンスを見極められるよう、各アプリの主な機能、長所、短所、価格、対象ユーザーを比較しました。
競合アプリ | 主な機能 | 長所 | 短所 | 価格 | 対象ユーザー |
---|---|---|---|---|---|
Khan Academy | 包括的なカリキュラム 個別化された学習パス 進捗管理 ゲーミフィケーション |
確立されたブランド 充実したコンテンツ 年齢層を問わない |
UIの情報量が多すぎる ソーシャル機能がない |
無料 | 生徒・学生 教員 保護者 独習者 |
Photomath | カメラベースの問題解答 ステップバイステップの解 複数の解答方法 |
画期的な問題解答のアプローチ 使いやすい |
カメラを使った問題解答のみに対応、クイズや練習問題に重点を置いていない | 無料 Photomath Plusのサブスクリプションは月額$9.99 |
生徒・学生 教員 保護者 |
Mathletics | アダプティブラーニング ターゲットを絞った練習問題 リアルタイムの数学コンテスト 進捗管理 |
興味をそそるリアルタイムのコンテスト 強力なカリキュラム |
サブスクリプションベース 気軽に学びたい人向けではない 社会人にあまり重点を置いていない |
サブスクリプションベース 月額$12.99〜 |
幼稚園児から高校生 教員 保護者 |
Prodigy Math Game | カリキュラムに沿ったコンテンツ アダプティブラーニング ゲームベースの学習 進捗管理 |
興味をそそるゲーム要素 幼稚園児から中学生向け |
幼稚園から中学校までのカリキュラムのみに対応 上級学習者や社会人向けではない |
無料 オプションのPremiumサブスクリプションは月額$8.95 |
幼稚園児から中学生 教員 保護者 |
Brilliant | インタラクティブコース 問題解決型のアプローチ クイズ 日替わりのチャレンジ問題 |
クリティカルシンキングと問題解決に重点 上級学習者向け |
無料アクセスは制限あり 基本的な数学の知識にあまり重点を置いていない |
制限付きで無料アクセス Premiumサブスクリプションは月額$24.99 |
高校生 大学生 生涯学習者 |
価格や対象ユーザーなどの情報も含めたこの詳細な比較分析表により、ステークホルダーは現在の市場状況に関する包括的な理解を得られるでしょう。MathWizのビジネスチャンスを見極め、ユーザーを獲得し、引きつける魅力的な製品を開発する上で、この情報が役立つはずです。
モックアップやプロトタイプの作成プロセスを加速させる
ChatGPTは、要素の説明を生成し、説明の配置やインタラクションを提案することで、モックアップの作成プロセスを一部自動化することができます。それにより、デザイナーは開発プロセスをスピードアップし、デザインのよりクリエイティブな部分に注力することができます。
モックアップの作成
画像内テキストの翻訳
none
MathWizアプリのフローとデザインを紹介するためにFigmaでプロトタイプを構築できるよう、プロトタイプのスクリプトを作成してください。
MathWizアプリの主な画面とインタラクションの概要を示すプロトタイプのスクリプトを以下に作成しました。このスクリプトを使用してFigmaでプロトタイプを構築し、アプリのフローとデザインを紹介できるでしょう。
-
スプラッシュスクリーン:
・MathWizのロゴと、その下にアプリの名前を表示
・テキスト例:「MathWiz」 -
オンボーディング画面(新規ユーザー向けオプション):
・スライド1:「MathWizへようこそ!楽しいクイズやチャレンジ問題で数学をマスターしよう。」
・黒板に数学の問題を解いているキャラクターのイラストを入れる。
・スライド2:「幅広い選択肢からトピックを選び、自分に合った学習体験を作ろう。」
・算数、代数、幾何学など、数学のさまざまなトピックを表すアイコンを表示
・スライド3:「バッジを獲得し、デイリークエストを実施し、学習の進捗を管理しよう。」
・成果を表すバッジコレクションとプログレスバーを表示
・スライド4:「準備はいいですか?新規登録またはログインして学習プロセスを始めましょう!」
・「新規登録」と「ログイン」のボタンを含める -
ホーム画面:
・ウェルカムメッセージと、一人ひとりに合わせたおすすめクイズを表示
・テキスト例:「[ユーザー名]さん、お帰りなさい![ユーザー名]さんにおすすめのクイズをご案内します。」
・水平スクロール可能なおすすめクイズリスト(画像、タイトル)を含める
・画面下部に「トピック」「デイリークエスト」「プロフィール」に移動するためのアイコンを表示 -
トピック画面:
・算数、代数、幾何学、三角法、微分積分など、数学のトピックの一覧を表示
・画面上部にトピックを検索するための検索バーを含める
・難易度や学年に応じてトピックを絞り込むためのフィルターを追加する
・サブトピックやクイズにアクセスするため、各トピックを選択できるようにする -
サブトピック画面:
・選択したトピック内のサブトピックのリストを表示
・代数の例:線形方程式、二次方程式、多項式、連立方程式
・クイズにアクセスするため、各トピックを選択できるようにする -
クイズ画面:
・選択式のクイズ問題とタイマー(該当する場合)を表示
・問題例:「次の方程式を解きなさい:2x + 3 = 11」
・多肢選択式解答:A) x = 4、B) x = 3、C) x = 2、D) x = 1
・答えを送信、問題をスキップ、クイズを終了すためのボタンを含める
・ボタンテキスト:「送信」「スキップ」「終了」
・クイズを終えたら、結果とともに正解、解説、獲得ポイントを表示
・テキスト例:「おめでとうございます!80ポイント獲得しました。以下の正解と解説を確認してください。」 -
デイリークエスト画面:
・利用可能なデイリークエストとそれぞれのリワード(ポイント、バッジ)を表示
・クエスト例:「幾何学クイズを5問答えて50ポイントと幾何学マスターバッジを獲得しよう。」
・プログレスバーで各クエストのステータス(実施済みかどうか)を表示
・テキスト例:進捗:5問中3問完了)
・クエストの開始ボタンを含める
・ボタンテキスト:「クエスト開始」
このスクリプトをもとに、MathWizアプリのフローとデザインを効果的に紹介するFigmaプロトタイプを作成することができます。それにより、ステークホルダーはユーザーエクスペリエンスを視覚化し、アプリの機能と外観についてフィードバックすることができます。
テキストコンテンツの生成
AIは、製品のランディングページやその他の部分に表示するさまざまなテキストを効率的に生成することができ、便利です。自動化により作業効率を向上させ、テキスト作成に要する時間を削減することができます。
テキストコンテンツの生成
画像内テキストの翻訳
none
MathWizアプリのランディングページ用のコピー文を作成してください。
MathWiz – 楽しいクイズとチャレンジ問題で数学をマスターしよう
思わず引き込まれてしまうクイズや、わくわくするチャレンジ問題を通じて、数学を学ぶ楽しさを発見してください。MathWizは、自分のペースで数学をマスターできる究極のアプリです。退屈な数学のレッスンにおさらばして、自分のレベルや目標に合わせた学習体験を始めましょう。
特長:
幅広いトピック
算数から代数、幾何学、微分積分に至るまで、MathWizは包括的なトピックとサブトピックを提供しており、年齢や能力を問わずあらゆる学習者にご利用いただけます。
アダプティブラーニング
独自のスマートアルゴリズムにより、ユーザーの成績に応じてクイズの難易度を調整し、真に個別化された学習体験を提供します。適度に難しい問題なので、圧倒されることもなく興味が続きます。
ゲーミフィケーションとリワード
クイズやデイリークエストをこなしてポイントを獲得し、バッジを解放し、リーダーボードの上位ランクインを目指しましょう。フレンドと競い合ったり、学習プロセスの新しいマイルストーン到達を目指して頑張りましょう。
パフォーマンスの追跡
自分の強みや改善が必要な部分、トピックごとの成績などを示した視覚的に魅力的なチャートや分析結果で、進捗を把握しましょう。
共同学習
インタラクティブな学習コミュニティを通じてフレンドとつながり、クイズやチャレンジ問題を送り、数学の問題について話し合い、成果を共有しましょう。
アクセシビリティと優れた操作性
iOS向けに開発されたMathWizは、直感的なインターフェース、カスタマイズ可能なアバター、そして誰もが楽しくシームレスな学習体験を味わうことを可能にするさまざまなアクセシビリティ機能を提供します。
MathWizで内に秘めた数学のポテンシャルを解き放とう
楽しさ満載の数学アドベンチャーに出発する用意はいいですか?今すぐMathWizをダウンロードして、やりがいを感じながら楽しく学べるクイズやチャレンジ問題を通じて数学をマスターしましょう。
[App Storeでダウンロードボタン]
[ユーザーの声をカルーセルで表示—満足したユーザーのコメントを表示し、アプリのメリットと有効性を強調する]
[フッター—SNS、プライバシーポリシー、利用規約、サポート/問い合わせ窓口情報を含める]
デザインシステムのドキュメント作成の加速
ChatGPTは、コンポーネントやその使用方法の説明を自動的に生成してくれるため、デザインシステムのドキュメント作成プロセスを容易にします。そのため、デザイナーはプロジェクトの重要な部分に注力でき、ドキュメントの一貫性や分かりやすさを確保することができます。
では、例としてAIが作成したカラーパレットの詳細な説明を見てみましょう。カラーパレットの説明にはデザイントークンも含まれ、その他にタイプスケールも作成してみました。
カラーパレットの制作
画像内テキストの翻訳
none
先ほど提供した色情報を使用して、デザインシステムのカラーパレットを作成してください。名前、16進コード、デザイントークン名、色の使用目的を含め、表にまとめてください。
名前 | 16進コード | デザイントークン | 使用目的 |
---|---|---|---|
ディープブルー | #274472 | --color-brand | アプリのロゴ ヘッダー ナビゲーションの主要要素 |
ライトブルー | #4B8BBE | --color-primary-1 | 背景 ボタン インタラクティブ要素 |
ティール | #009688 | --color-primary-2 | アクセント CTAボタン 重要な情報 |
ソフトイエロー | #FFEB3B | --color-secondary-1 | 進捗インジケータ バッジ リワード |
ライトグレー | #F5F5F5 | --color-secondary-2 | 背景 コントラスト効果(強烈すぎず、注意をそらさない) |
ダークグレー | #616161 | --color-secondary-3 | テキストとアイコン クリーンでモダンな外観を保ちつつ可読性を確保 |
セカンダリーテキスト | #757575 | --color-text-2 | セカンダリーテキスト要素(キャプション、ラベル、重要性の低い情報など) |
エラー | #D32F2F | --color-error | エラーメッセージ アラート 問題やトラブルを知らせる通知 |
グレー1 | #E0E0E0 | --color-gray-1 | 淡い背景 境界線 セパレーター |
グレー2 | #BDBDBD | --color-gray-2 | 無効化された要素 無効なボタン 入力 |
グレー3 | #9E9E9E | --color-gray-3 | プレースホルダーテキスト 優先度の低い情報 |
この表は、MathWizアプリのデザインシステム用のカラーパレットを表し、各色の名前、16進コード、デザイントークン名、使用目的を含みます。このような形で整理することで、アプリのビジュアルデザインを通して一貫性を保ち、デザイナーや開発者が適切な色を参照して適用しやすくなるでしょう。
デザインシステムの作成
画像内テキストの翻訳
none
iOS向けのアプリであることを踏まえ、MathWizデザインシステム用のタイプスケールを作成してください。
タイプスケールとは、フォントサイズ、フォントの太さ、行の高さを整理したものであり、デザインシステムにおいてタイポグラフィの視覚的階層を生み出します。以下はMathWizアプリのデザインシステム用のタイプスケールで、iOSのモバイルアプリ向けに作成されています。
レベル | フォントサイズ | 行の高さ | フォントの太さ | 用途 |
---|---|---|---|---|
ディスプレイ | 32 | 40 | ボールド | アプリのタイトル オンボーディング画面の大見出し 特別プロモーション |
見出し | 28 | 36 | ボールド | セクション見出し ダッシュボードタイル |
サブ見出し | 24 | 32 | セミボールド | サブセクション見出し CTAボタン クイズタイトル |
本文 | 20 | 28 | レギュラー | 本文 クイズ問題 リスト項目 ラベル |
キャプション | 18 | 24 | レギュラー | 本文のセカンダリーテキスト キャプション ツールチップ |
ラベル | 16 | 22 | レギュラー | 小ラベル 入力欄 ナビゲーション項目 |
細字 | 14 | 20 | レギュラー | 細字 利用規約 プライバシーポリシー |
注:フォントサイズは、画面サイズや解像度が異なる場合でもアクセシビリティと一貫したユーザーエクスペリエンスを確保するため、sp(スケール非依存ピクセル)で指定します。
MathWizアプリデザインシステムでこのタイプスケールを使用することにより、一貫性のあるタイポグラフィ階層を維持し、可読性を高めるとともに、視覚的に魅力的なユーザーエクスペリエンスを創出することができます。前に提案したフォントペア(見出しはRoboto、本文はOpen Sans、など)を使用することで、アプリのデザインをより一層高めましょう。
UXタスクの自動化
ChatGPTを使用することで、ユーザー手順の分析やペルソナの特定、詳細な情報アーキテクチャの構築といったUX関連の複雑な作業を自動化できます。AIが詳細なデータ分析を行ってくれるので、よりインテリジェントで効果的なソリューションを作成できます。
例として、MathWizアプリのユーザーペルソナをいくつか作成したので見てみましょう。
ユーザーペルソナ
画像内テキストの翻訳
none
UXペルソナとは、ユーザーベースを代表するユーザーに関する情報や知見を集約したものであり、主要なタイプと考えられるユーザー像(メインペルソナ)です。必要に応じて他にもいくつかのペルソナを作成します。MathWizアプリ用にUXペルソナを3つ生成してください。
ペルソナ1:メインペルソナ
名前:ソフィア
年齢:14歳
職業:生徒
場所:米国ニューヨーク州
略歴:ソフィアは勉強が大好きな高校生で、クラスでも良い成績を収めています。特に数学が好きで、数学コンテストに好んで参加しています。暇があればスマホでパズルゲームをして遊んでいます。
目標:
- 数学の力をつけて、数学コンテストで優位に立つ。
- 数学の練習問題を解ける、楽しくて夢中になれるアプリを見つける。
- 進捗を確認し、改善できる部分を見つける。
ペインポイント:
- 彼女のレベルに合った難しい数学問題があまりない。
- 従来の数学の勉強方法ではモチベーションを保てない。
- 学校の勉強と課外活動、自由時間のバランスがをうまくとれない。
ペルソナ2:セカンダリーペルソナ
名前:イーサン
年齢:35歳
職業:エンジニア
場所:米国テキサス州オースティン
略歴:イーサンは土木技師で、仕事で頻繁に数学を使用します。大学時代に比べて自分の数学の知識が少しサビついてきていると感じており、手軽に知識をリフレッシュして能力を維持できる方法を探しています。
目標:
- 数学の練習問題を定期的に解き、スキルの維持・向上を図る。
- 今の自分のレベルに合った、個別化された学習体験を提供するアプリを見つける
- 仕事の休憩時間や通勤時間にアプリを使う。
ペインポイント:
- 数学のスキル向上に費やせる時間が限られている。
- 幅広い数学のトピックに対応したプラットフォームがなかなか見つからない。
- 柔軟なスケジュールで学べるアプリが必要。
ペルソナ3:セカンダリーペルソナ
名前:グレイス
年齢:27歳
職業:小学校教師
場所:米国カリフォルニア州ロサンゼルス
略歴:グレイスは小学校の教師であり、生徒が算数の知識を身につける手助けをしたいと思っています。生徒や保護者に勧められる面白い教育アプリを常に探しています。
目標:
- 面白くて勉強になる、生徒に適した算数(数学)アプリを見つける。
- 生徒たちに学校以外の時間でも算数の練習をするよう促す。
- 生徒の進捗を確認し、アプリの有効性を評価する。
ペインポイント:
- さまざまなレベルに対応できて、年齢的にも相応しい算数(数学)アプリが見つからない。
- 生徒に安全でフレンドリーな環境を提供するアプリが必要。
- 生徒が飽きないよう、学びと楽しさのバランスが取れたアプリが必要。
ユーザー調査の実施
ChatGPTはユーザーからのフィードバックを自動的に分析し、重要な問題やトレンドを示し、製品のさまざまな側面についての分かりやすさや有効性についてレポートを生成することができます。デザイナーはユーザーのニーズにより素早く対応し、製品に適切な変更を加えることができます。
効果的なコミュニケーションの確保
ChatGPTは、技術用語や複雑な概念を分かりやすく説明することで、デザイナーや開発者、その他のチームメンバーがコミュニケーションを取りやすくしてくれます。チーム全員がプロジェクトの目標や要件を理解し、連携を深め、より短時間で成果を出せるよう手助けしてくれます。
ChatGPTを使って他にできること
- ユーザーストーリー、シナリオ、ユーザージャーニーマップ、ユーザーフローの作成
- デザインやテキストのABテストの選択肢作成
- デザインスプリントの計画
- ポートフォリオ用の独自ケース作成
- 記事や投稿、その他デザイン関連作業のアイデア出し
- 専門能力の開発
- 続く
結論の代わりに
条件付きのMathWizアプリの例を用いて、UI/UXデザイナーやプロダクトデザイナーが仕事でChatGPTを使用する具体的な方法を説明しましたが、ご自身の仕事にも適用可能な有益な情報はありましたでしょうか。
最後に、ネット上で最も頻繁にされている質問の1つについて考えてみたいと思います。
AIがデザイナーに取って代わり、その仕事を奪う日は来るのでしょうか?
ドラムロール… AIが近い将来デザインの仕事を完全に置き換える可能性は極めて低いと思います(ただし、反復作業や自動化できる作業は除きます)。なぜでしょうか。それは、あらゆるビジネスは個別化されたケースであり、ユーザーグループやその他さまざまな要素についても同じことが言えるからです。デザインは、視覚対象物の創出にとどまらず、共感性や創造性、人間中心のアプローチによる問題解決なども関わる仕事です。これらのスキルは、AIが容易に再現できるものではありません。
したがって、ChatGPTはAIのパーソナルアシスタントと見なすことができるでしょう。そのようなものであれば、誰もが欲しいと思うのではないでしょうか。現にこのようなツールがすでに存在するので、使い方を学ぼうではありませんか。
それでは最後のコメントです。AIがデザイナーに取って代わることはないでしょう。しかし、AIを利用しなければ、AIを使うデザイナーに淘汰されるかもしれません。
株式会社リクルート プロダクト統括本部 プロダクト開発統括室 グループマネジャー 株式会社ニジボックス デベロップメント室 室長 Node.js 日本ユーザーグループ代表
- Twitter: @yosuke_furukawa
- Github: yosuke-furukawa