生成AI×UX/UIデザインで発想を広げる！実践事例と注意点

生成AIの進化によって、デザインの現場でもアイデア出しや検討のスピードを大幅に高めることが可能になっています。特に、ペルソナやカスタマージャーニーマップ（CJM）の作成など、従来は手間のかかった検討プロセスにもAIを活かすことができます。
一方で、権利関係の問題や品質のバラつきといった課題があるのも事実です。最終的にはプロのデザイナーによる判断やブラッシュアップが不可欠です。
本セミナーでは、生成AIを「とりあえず案出しして検討する」ための有効な活用方法から、実際の事例紹介、業務で使う際の注意点までを分かりやすく解説します。ぜひお気軽にご参加ください。

主な内容
・生成AIとUX/UIデザインの可能性
・とりあえず案を広げるならAIが有効な理由
・UXデザインを取り入れたアプリ開発と生成AIの関わり方
・生成AIを使う際に注意すべき権利や品質の問題
・プロのデザイナーに任せるべき最終工程とは
・実際に試してみるとこんなことができる ― 事例紹介

こんな方におすすめ
・デザインのアイデア出しに生成AIを取り入れてみたい方
・ペルソナやCJM作成を効率化したい方
・生成AIを使うときのリスクや注意点を知りたい方
・デザインとAIの役割分担に関心がある方

Transcript

1. 生成AI×UX/UIデザインで発想を 広げる！ 実践事例と注意点 NCDC Online Seminar 2025 / 09 / 30 NCDC株式会社
2. 講師紹介 2 コンシューマ向けアプリ、新規Webサービス、ハードウェアの 操作用パネルなど、多岐にわたるUX/UIデザインを手がけ る。情報アーキテクチャの視点をもって構造を整理すること により、使いやすいUIを設計することを得意とする。「わかり やすく・楽しく」をモットーに、社外向けのUXデザイン講師とし ても多数登壇。デザイナーとコンサルタントを兼任し、活躍 の場を広げている。 経歴 デザイン専門学校卒業後、WEB制作会社に入社。ブランド化粧 品のECサイトのデザインとコーディングを担当。 その後、大手情報サービス企業にて店舗向けアプリケーション のUXチームに所属。各プロダクトのUXデザインを担当し、 Agile開発によるプロダクトをリリース。 NCDCではフルリモートの勤務スタイルを活かし、仕事と育児の両立 を実現。2人の子を持つママさんデザイナーとしてのキャリア形成に 取り組んでいる。 シニアUXコンサルタント 清水 奈生枝 Scrum Inc.認定プロダクトオーナー
3. NCDCのご紹介
4. Business 新規事業立ち上げからの伴走 業務改革やIT改革の支援 Design ユーザ視点での設計 Technology 技術による課題解決 Innovation Consultant デザイナーやエンジニアと協力して、新 規サービス立案の支援や新規性の高い システムの要件定義を行う。プロジェクト 全体のマネジメント役も担う。 UX/UI designer UIデザインはもちろん、デザイン 思考やUXデザインのフレーム ワークを用いて上流工程（サー ビス全体のUX設計）を担う。 Engineer モバイルやWeb、クラウド、IoTや AIなど、新しい領域の技術に特 化。つくるだけでなく技術コンサ ルティングができる知見を持つ 者も多数在籍。 ⚫ AWS サービスパートナー ⚫ AWS Lambdaパートナー ⚫ 内製化支援推進AWSパートナー NCDCの事業領域 ⚫ 3領域でサービスを展開 ⚫ 各領域のスペシャリスト を社内に揃える体制 4
5. デジタルビジネス立ち上げを一元的にサポート ⚫ デジタルビジネスに必要な企画から開発まで、一元的に提供しています。 ⚫ スモールスタートでの検証から、本開発・継続的な改善までサポートします。 5 ワークショップを中心とし た合理的なプロセスで、ビ ジネスモデルの検討からUX デザインまで、迅速に行い ます。 関係者が多数いる場合の組 織横断、会社横断のファシ リテーションも得意です。 新規性の高いプロジェクト ではMVP（Minimum Viable Product）を用いた検証を行 うなど、目的に応じて段階 的な開発を企画します。 早い段階でモックやプロト タイプを用意してユーザの 評価を確認します。 ユーザとのタッチポイントとなる各種デバ イスのフロントエンドデザインから、クラ ウドサービスを駆使したバックエンドの開 発まで。多様なテクノロジーをインテグ レーションします。 ⚫ AI / IoT ⚫ モバイル・ウェブ アプリ開発 ⚫ クラウドインテグレーション ⚫ システムアーキテクチャコンサルティング など ビジネスモデルのデザイン スモールスタート・PoC システム・インテグレーション ユーザ視点を大切にした アイデア・企画 モックやプロトタイプ の開発・検証 システム・アプリ開発 継続的な改善
6. 本日のテーマ
7. 本日のテーマ ⚫ 生成AIとUX/UIデザインの可能性 ⚫ 発想を広げる際にAIが有効な理由 ⚫ UXデザインと生成AIの関わり方 ⚫ 生成AI利用時の注意点（権利・品質） ⚫ デザイナーが担うべき最終工程 ⚫ 実践事例紹介 7
8. 本ウェビナーの概要 ⚫ 手間のかかるUX/UIデザインの検討プロセスにも、生成AIを活かすこと がで、アイデア出しや検討のスピードを大幅に高めることが可能になっ てきました ⚫ 一方で、権利関係の問題や品質のバラつきといった課題があるのも 事実です ⚫ 最終的にはプロのデザイナーによる良し悪しの判断や、ブラッシュアップ が不可欠です ⚫ 本セミナーでは、生成AIを「とりあえず案出しして検討する」ための有効 な活用方法から、実際の業務で使う際の注意点までを解説します 8
9. 生成AIとUX/UIデザインの可能性
10. デザイナーを取り巻く環境の変化 ⚫ かつては手作業だった工程が、ソフトウェアの進化によって効率化され てきた ⚫ テクノロジーの進化に伴い、デザイナーの役割も変化している ⚫ 生成AIは、単なる効率化ツールではなく、アイデアの創出という知的作 業をサポートするパートナーとなりつつある 10
11. AIが持つ「無限の組み合わせ」という力 ⚫ AIは過去の大量のデータから、人間には創造できない組み合わせや、 多数のバリエーションを生み出してくれる ⚫ 例）複数のキーワードを掛け合わせて、新しいソリューションを100個考えても らう ⚫ 例）最近のトレンドの観点を取り入れた課題の解決方法を提案してもらう ⚫ UIの領域では、配色、レイアウト、コンセプトのラフ案を素早く作れるよう にサポートしてくれる 11
12. デザイナーの役割の変化 ⚫ AIが反復作業や初期アイデアの量産を担うことで、デザイナーはより本 質的な課題解決に集中できる ⚫ ユーザーインタビュー、戦略立案、UIの作り込みなど、人間的な感性や コミュニケーション能力が求められる領域に注力できる 12
13. UX/UIデザインと生成AIの関わり方
14. UX/UIデザインの代表的な流れ 14 UX/UI Design Process UX/UIデザインプロジェクトを実現するための代表的な流れ 理解 共感 アイディア 出し プロト タイプ作成 テスト リリース 評価分析 UI デザイン インタビュー アンケート 市場調査 競合調査 ペルソナ作成 カスタマー ジャーニーマッ プ作成 インサイト分析 ブレイン ストーミング ユーザー フロー図作成 ムードボード 作成 ペーパープロト タイプ作成 ワイヤー フレーム作成 コンセプト動画 作成 ロールプレイ ビジュアル デザイン作成 ロゴデザイン ユーザビリティ テスト アクセシビリ ティ評価 ABテスト ヒューリス ティック評価 データ分析 ユーザーからの フィードバック 分析 改善方針検討 デザインガイド ライン作成 要求定義 要件定義 設計・テスト 運用 ITプロジェクト
15. UX/UI Design Process UX/UIデザインプロジェクトを実現するための代表的な流れ 理解 共感 アイディア 出し プロト タイプ作成 テスト リリース 評価分析 UI デザイン インタビュー アンケート 市場調査 競合調査 ペルソナ作成 カスタマー ジャーニーマッ プ作成 インサイト分析 ブレイン ストーミング ユーザー フロー図作成 ムードボード 作成 ペーパープロト タイプ作成 ワイヤー フレーム作成 コンセプト動画 作成 ロールプレイ ビジュアル デザイン作成 ロゴデザイン アクセシビリ ティ評価 ヒューリス ティック評価 データ分析 ユーザーからの フィードバック 分析 改善方針検討 デザインガイド ライン作成 ユーザビリティ テスト ABテスト 生成AIは万能？？ 15 AIに頼めばできる
16. 生成AIは万能？？ 16
17. UX/UI Design Process UX/UIデザインプロジェクトを実現するための代表的な流れ 理解 共感 アイディア 出し プロト タイプ作成 テスト リリース 評価分析 UI デザイン インタビュー アンケート 市場調査 競合調査 ペルソナ作成 カスタマー ジャーニーマッ プ作成 インサイト分析 ブレイン ストーミング ユーザー フロー図作成 ムードボード 作成 ペーパープロト タイプ作成 ワイヤー フレーム作成 コンセプト動画 作成 ロールプレイ ビジュアル デザイン作成 ロゴデザイン ユーザビリティ テスト アクセシビリ ティ評価 ABテスト ヒューリス ティック評価 データ分析 ユーザーからの フィードバック 分析 改善方針検討 デザインガイド ライン作成 生成AIは万能？？ 17 精度はイマイチなところが多い
18. AIと作業分担のポイント 18 • AIにも苦手な部分はある • 例）本質的な洞察や共感や、非言 語的なコミュニケーション • 例）否定的な意見を述べる 注意 • AIが苦手なところは人の手でやる • AIに案を出してもらう • 人の手で精度を上げ、仕上げる ポイント
19. AIと人の作業分担 ⚫ 効率よく精度を上げるためには、AIと人とで作業を分担する ⚫ では、どのように作業分担をすべきか？ 19 TASK TASK TASK TASK TASK TASK TASK TASK TASK TASK TASK TASK TASK TASK TASK TASK
20. 作業分担の一部紹介 20 UX/UI Design Process 理解 共感 アイディア 出し プロト タイプ作成 テスト リリース 評価分析 UI デザイン インタビュー アンケート 市場調査 競合調査 ペルソナ作成 カスタマー ジャーニーマッ プ作成 インサイト分析 ブレイン ストーミング ユーザー フロー図作成 ムードボード 作成 ペーパープロト タイプ作成 ワイヤー フレーム作成 コンセプト動画 作成 ロールプレイ ビジュアル デザイン作成 ロゴデザイン ユーザビリティ テスト アクセシビリ ティ評価 ABテスト ヒューリス ティック評価 データ分析 ユーザーからの フィードバック 分析 改善方針検討 デザインガイド ライン作成 AIを使うと効率化できるところ、 人が手で行う方が良いところをご紹介します 今日ご紹介するところ
21. 【作業分担】ペルソナ作成 23 情報収集 情報提供の内容やSNS, Web上のデータから 情報を集め分析 初期プロファイル作成 バリエーション作成 情報提供 インタビューなどから得られた 価値観やニーズを入力 スタート リアリティをもたせる（肉付け） 価値観・感情の共感 チームや関係者への共通理解 戦略との紐付け
22. 【作業分担】ペルソナ作成 24 情報収集 情報提供の内容やSNS, Web上のデータから 情報を集め分析 初期プロファイル作成 バリエーション作成 情報提供 インタビューなどから得られた 価値観やニーズを入力 スタート リアリティをもたせる（肉付け） 価値観・感情の共感 チームや関係者への共通理解 戦略との紐付け AIは、大量のデータからパターンを見つけ出 し、効率的にプロファイルを構築することに優 れている
23. 【作業分担】ペルソナ作成 25 情報収集 情報提供の内容やSNS, Web上のデータから 情報を集め分析 初期プロファイル作成 バリエーション作成 情報提供 インタビューなどから得られた 価値観やニーズを入力 スタート リアリティをもたせる（肉付け） 価値観・感情の共感 チームや関係者への共通理解 戦略との紐付け ペルソナの本質である「感情の理解」や「共感」は、 人にしかできない AIが作成したデータを見るだけではなく、自らの思考 でペルソナを作り上げることで、チームの全員が生き たユーザーの姿としてペルソナを理解できるようにな る 複数のペルソナがいる場合、戦略的に注力したいペ ルソナや、特に配慮が必要なペルソナを決める。
24. 【実践例】社内システム検討 26 【実践例の前提条件】 下記の新しいサービスを検討中です。 ターゲットユーザーはIT企業の新入社員です。 社内にはたくさんの資料があります。 例えば労務規則や、職種ごとに必要な心得やナレッジ、業務に必要なツールの説明や承 認フローなど、ドキュメントが社内に紙の書類として保管されていたり、社内の共有サー バー内にExcelやWordなどのドキュメントファイルとしてたまっています。 このたくさんの資料をすべて電子化し、いつでも簡単に検索ができるような社内ドキュメン ト検索システムを作ります。 人 この前提条件をプロンプトに入れ、 Geminiにペルソナを作ってもらいました
25. 【実践例】社内システム検討のペルソナ ⚫ ペルソナ ⚫ 名前: 山田 健太（ヤマダ ケンタ） ⚫ 年齢: 23歳 ⚫ 職業: IT企業のシステムエンジニア（新入社員、入 社3ヶ月） ⚫ プロフィール ⚫ 大学で情報科学を専攻し、IT業界に強い憧れを 持って入社 ⚫ 新しい技術を学ぶことに意欲的で、研修後、開発 チームに配属された ⚫ 真面目で責任感が強い一方で、周囲に「こんな初 歩的なことを聞いてもいいのだろうか」と遠慮しが ちな一面がある ⚫ 性格 ⚫ 真面目で、与えられたタスクを完璧にこなしたい ⚫ わからないことは自分で調べたいが、どこから手を つけていいか迷いがち ⚫ 先輩や上司に質問するのをためらうことがある ⚫ 抱えている課題 ⚫ 業務で必要な情報や社内ルールがどこにあるか 分からず、探すのに時間がかかる ⚫ 情報が紙やExcelなど、複数の場所に散在している ため、探すたびにストレスを感じる ⚫ 調べたい情報があっても、キーワードが分からず 検索に苦労する ⚫ 先輩社員に質問するタイミングが掴めず、自己解 決を試みるが、結局時間がかかってしまう ⚫ 利用するサービス ⚫ Google Chrome ⚫ Slack、Teams ⚫ GitHub、Jira ⚫ Office系ソフト（Excel、Word） 27 Gemini
26. 【実践例】社内システム検討のペルソナ ⚫ ペルソナ ⚫ 名前: 山田 健太（ヤマダ ケンタ） ⚫ 年齢: 23歳 ⚫ 職業: IT企業のシステムエンジニア（新入社員、入 社3ヶ月） ⚫ プロフィール ⚫ 大学で情報科学を専攻し、IT業界に強い憧れを 持って入社 ⚫ 新しい技術を学ぶことに意欲的で、研修後、開発 チームに配属された ⚫ 真面目で責任感が強い一方で、周囲に「こんな初 歩的なことを聞いてもいいのだろうか」と遠慮しが ちな一面がある ⚫ 性格 ⚫ 真面目で、与えられたタスクを完璧にこなしたい ⚫ わからないことは自分で調べたいが、どこから手を つけていいか迷いがち ⚫ 先輩や上司に質問するのをためらうことがある ⚫ 抱えている課題 ⚫ 業務で必要な情報や社内ルールがどこにあるか 分からず、探すのに時間がかかる ⚫ 情報が紙やExcelなど、複数の場所に散在している ため、探すたびにストレスを感じる ⚫ 調べたい情報があっても、キーワードが分からず 検索に苦労する ⚫ 先輩社員に質問するタイミングが掴めず、自己解 決を試みるが、結局時間がかかってしまう ⚫ 利用するサービス ⚫ Google Chrome ⚫ Slack、Teams ⚫ GitHub、Jira ⚫ Office系ソフト（Excel、Word） 28 Gemini • ペルソナとしての精度は高いが、AIは現状の課 題や問題点ばかりに注目している • 共感やニーズの深掘りに必要な、このペルソナ は何に喜びや価値を感じるのか？が抜けている • 本当にこのような人物像で合っているか、プロ ジェクトメンバーやステークホルダーの意見を出 し合って、リアリティを高めることが重要
27. 【作業分担】カスタマージャーニーマップ作成・インサイト分析 29 複数ペルソナのジャーニーマップ作成 異なるシナリオのジャーニーマップ作成 共通する「つまづき」の抽出 対象とするペルソナを決める ジャーニーのシナリオを定義 ジャーニーの初期案生成 スタート 自らペルソナになりきって修正・補足 より深いインサイト分析 改善施策の優先順位付け
28. 【作業分担】カスタマージャーニーマップ作成・インサイト分析 30 複数ペルソナのジャーニーマップ作成 異なるシナリオのジャーニーマップ作成 共通する「つまづき」の抽出 対象とするペルソナを決める ジャーニーのシナリオを定義 ジャーニーの初期案生成 スタート 自らペルソナになりきって修正・補足 より深いインサイト分析 改善施策の優先順位付け 複数ペルソナ・複数シナリオといった時間がかかる作 業をAIにやってもらう。 改善すべき共通の課題を自動で特定してもらう。
29. 【作業分担】カスタマージャーニーマップ作成・インサイト分析 31 複数ペルソナのジャーニーマップ作成 異なるシナリオのジャーニーマップ作成 共通する「つまづき」の抽出 対象とするペルソナを決める ジャーニーのシナリオを定義 ジャーニーの初期案生成 スタート 自らペルソナになりきって修正・補足 より深いインサイト分析 改善施策の優先順位付け どのペルソナのどのシーンを可視化するのか、目的 とスコープを明確に定義する必要がある なぜペルソナは不満を感じたのか？この行動や思考 の本音は何なのか？といった、AI分析では届かない 深い洞察を導き出す ユーザー価値や開発コスト、ビジネス的戦略などを 総合的に判断して、UX/UIの改善案や機能開発の優 先順を決める
30. 【実践例】社内システム検討のカスタマージャーニーマップ 32 【実践例のシナリオ】 新しいプロジェクトにアサインされ、開発に必要な特定のツールを使用することになった。 ツールを利用する上で注意すべきことや、社内のルール、過去のトラブル事例を確認する 必要がある。 しかし、ツールの情報は多岐にわたり、どこから手をつけていいか迷っている。 人 このシナリオをプロンプトに入れ、 Geminiにカスタマージャーニーマップを作ってもらいました
31. 【実践例】社内システム検討のカスタマージャーニーマップ 33 段階 行動 思考・感情（心の声） 課題/タッチポイント 改善ポイント（To Beへの示唆） 1. 課題認識 新規プロジェクトにアサインされ、Dツールを 使用することになる。 「Dツールか…初めて使うな。何に気を付ければいいん だろう？」 （期待・不安） タスクアサイン、ツール利用指 示 ツールに関する必要情報の提示。 2. 情報探索開 始 まず、Dツールの公式ドキュメント（Webサイ ト）を探す。 「まずは公式のマニュアルで基本的な使い方を把握しよ う。」 （積極性） 外部Webサイト、ツールの公式 ドキュメント 社内ドキュメントへの適切な誘導。 3. 探索失敗① 公式ドキュメントは一般的な情報が多く、社内 独自のルールや過去のトラブル事例は見当 たらない。 「使い方は分かったけど、社内での運用ルールや落とし 穴みたいなのはどこに載ってるんだろう？」 （迷い） 外部ドキュメント、社内固有情 報の欠如 社内独自情報の集約と提示。 4. 社内情報探 索 社内ポータルサイトや共有サーバー内の 「ツールマニュアル」フォルダを探し始める。 「きっと社内用の資料があるはずだ。先輩たちはどうやっ て使ってるんだろう？」 （探求心） 社内ポータル、共有フォルダ、 既存の命名規則 検索システムへの統合。 5. 探索失敗② 複数の関連しそうなファイルが見つかるが、 タイトルからでは内容が分かりにくく、情報が 分散している。古いバージョンのドキュメント も見つかる。 「『Dツール運用ガイド』、『Dツールよくある質問』、『Dツー ル注意事項』…どれが一番新しいんだ？そして、トラブ ル事例はどこに？」 （焦り・混乱） 複数のドキュメント、古い情報、 情報の分散 情報の集約、最新版の明示、関連 情報の紐付け。 6. 自己解決の 限界 短時間で目的の情報にたどり着けず、時間 だけが過ぎていく。 「このまま探し続けても効率が悪いな。もう誰かに聞くし かないか…。」 （ストレス・諦め） 時間浪費、情報発見の困難さ 効率的な検索手段の提供。 7. 最終手段 チームの先輩社員に「Dツールの社内ルール や過去事例がどこにあるか」を尋ねる。 「すみません、Dツールのことで教えていただきたいので すが…。」 （申し訳なさ・遠慮） 口頭での質問、先輩社員 人に聞かずに自己解決できる環境。 8. 情報発見 先輩が「実はこれ、別のプロジェクトで使って た時のWikiにまとめてあるんだよ」と、あまり 知られていない場所のURLを教えてくれる。 「Wikiですか！ありがとうございます！まさかそんなとこ ろに…。」 （安堵・驚き） Wikiページ、先輩の経験/知識、 隠れた情報源 情報の一元化と検索性向上。 9. 情報確認・ 理解 Wikiの内容を読み込み、注意点やトラブル事 例、社内ルールを確認する。 「なるほど、この設定に気を付ければいいのか。過去に も同じようなミスがあったんだな。でも、この情報にたどり 着くのが大変だった…。」 （学習・効率への疑問） Wikiページの内容、社内ノウハ ウ 知識共有の仕組み。 10. 次の行動 へ Dツールの利用を開始し、開発業務を進める。 「次からは、もっとサッと情報を見つけられるようになりた いな。」 （改善への期待） 開発タスクへの移行 恒常的な情報アクセスの改善。 Gemini Geminiのジャーニーマップはテーブル形式で 表現される 各々のジャーニーマップのフォーマットに合わ せる必要がある 行動ひとつひとつの文章が長く、 理解しづらい
32. 【実践例】新規社内システム検討のカスタマージャーニーマップ 34 Dツールを 使用するよ う指示され る Dツールの 公式サイト でマニュア ルを調べる 社内のポー タルサイト を探す Think 大体の使い 方は分かっ た こんなこと 聞いて怒ら れないかな 社内の利用 制限とかあ るのかな？ なんで必要 なことがま とまってな いんだよー DO 困ったら社 内wiki探 せって先輩 言ってたか ら、ここに あるだろ 先輩に社内 ルールがど こにあるか 尋ねる どうしよう、 いつ聞こう 社内の共有 サーバーを 探す 似たタイト ルのファイ ルがいっぱ いあるけど、 開かないと 内容が分か らん 気をつける ことあるか な？ 似たツール なら使った ことあるけ ど、使い方 一緒かな？ Insight 新規プロ ジェクトにア サインされ る 社内wikiの URLを教え てもらう 社内ルール のwikiを見 る よし！初め ての実プロ ジェクト頑 張ろう！ ミスなくで きるかなー スケジュー ル思ったよ りタイトだ なんで検索 で引っ掛か らなかった んだ？ カテゴリー 全然違う 初めて使う な 聞いたらす ぐだった 実践の期 待と、失 敗の恐れ 人に聞きたいが 聞いて怒られるのが怖 い 効率よく情報がほしい お客さん怖 そうだなー 先輩忙しそ うだし、ま ずは自分で 調べよう 何年も前か ら更新され てない 注意事項が 書かれてな いけど大丈 夫か？ これは公式 サイトに 載ってる情 報と一緒だ トラブル事 例どこ？ ファイル検 索だけ1日 無駄にした すごい時間 を無駄にし た 関連する情 報は別リン クなのか 社内ルール けっこう厳 しいな Dツールを 使ってみる 間違わない ように、 さっきの wiki参考に しながら設 定しよう もっと簡単 に情報が見 つかるよう にならない かな やっと使え るように なった 自分で解決したい 時間を無駄にしたくない 必要な情報の 提示 適切な誘導 社内独自情報 の集約 検索システム への統合 最新版の明示 関連情報の紐 付け 効率的な検索 手段 自己解決でき る環境の整備 情報の一元化 人 一つの行動に対して、いくつもの 思考が同時に存在する インサイト分析はペルソナの人 物像や行動、そのときの感情を よく深く洞察した上で人が行う 1つのカードに行動は1つ ずつ書く
33. 【作業分担】ワイヤーフレーム作成 35 必要な要素や機能を入力 最適なレイアウトの理由の明確化 レイアウトのバリエーション生成 スタート ユーザーフローの検証 開発要件や制約の整合 人の手でブラッシュアップ 論理的な情報構造を考慮した配置 アクセシビリティの検証
34. 【作業分担】ワイヤーフレーム作成 36 必要な要素や機能を入力 最適なレイアウトの理由の明確化 レイアウトのバリエーション生成 スタート ユーザーフローの検証 開発要件や制約の整合 人の手でブラッシュアップ 論理的な情報構造を考慮した配置 アクセシビリティの検証 一般的に「よし」とされているレイアウトやコンポーネ ントを使った案を作成してもらう 要素のサイズ、配置の推奨など、ガイドラインを満た しているかを初期段階でチェックすることが可能
35. 【作業分担】ワイヤーフレーム作成 37 必要な要素や機能を入力 最適なレイアウトの理由の明確化 レイアウトのバリエーション生成 スタート ユーザーフローの検証 開発要件や制約の整合 人の手でブラッシュアップ 論理的な情報構造を考慮した配置 アクセシビリティの検証 なぜそのレイアウトが最適なのかを言語化する 一般的に良しとされる構造以外に、ユーザーの感情 や特有の使い勝手を考慮したものを選定する 開発の制約を考慮したデザインに変更する必要があ る
36. 【実践例】社内システム検討のワイヤーフレーム 38 【実践例のワイヤーフレーム】 検討中の新しい社内システムのワイヤーフレームをPNG画像で作成してください。 なお、以下の機能を盛り込んでください。 ・最新版の明示 ・社内独自情報の集約 ・検索システムへの統合 ・効率的な検索手段 ・関連情報の紐付け 人 この条件をプロンプトに入れ、 Geminiにワイヤーフレームを作ってもらいました CJMから抽出した機能
37. 【実践例】社内システム検討のワイヤーフレーム 39 Gemini トップページ（検索開始画面） 検索結果画面
38. 【実践例】社内システム検討のワイヤーフレーム 40 Gemini 頑張って作ってくれたのは 分かるが、日本語も変だし、 もうちょっと精度の高い ものが欲しい…
39. UIデザイン・開発支援ツール 41 生成AIを活用したUX/UIデザイン・開発支援ツール v0 (Vercel) Figma Make (Figma) 精度の高いワイヤーフレームを作るのにおすすめ
40. UIデザイン・開発支援ツール 42 Figma Make (Figma) ⚫ 特徴 ⚫ コードファーストなAIデザインツール ⚫ プロンプトを入力すると、React（Next.js + Tailwind CSS） のコードを直接生成 ⚫ 生成られたUIはそのまま本番環境で動かせるレベル ⚫ 得意なこと ⚫ プロトタイプではなく、すぐ動くUIを試作できる ⚫ デベロッパーが多い環境（スタートアップ、プロト開発）に 向いている ⚫ 弱み ⚫ 純粋なビジュアルデザイン（見た目の微調整）には弱い ⚫ デザイン専門職が使うにはコード寄りすぎる ⚫ v0→Figmaへのデザインデータ移行はできない（今のとこ ろ） v0 (Vercel) ⚫ 特徴 ⚫ Figma上で動く「デザインプロセス支援AI」 ⚫ プロンプトからワイヤーフレームやUI案を生成してキャン バスに配置 ⚫ 生成されたデザインはFigmaで修正・共同作業が可能 ⚫ 得意なこと ⚫ デザイナーが普段のFigma環境で使える ⚫ ビジュアルデザイン寄り（レイアウト・配色・ワイヤーフ レーム） ⚫ 弱み ⚫ 生成物は見た目の案であって、動くコードにはならない ⚫ 実装とのつなぎ込みは別途必要 ⚫ 無料プランではできることが限られている
41. 【実践例】 v0でワイヤーフレームを作成 43
42. 【実践例】 Figma Makeでワイヤーフレームを作成 44
43. 【作業分担】ビジュアルデザイン作成 45 ブランド価値の体現 デザインの一貫性の統合 配色やスタイルのバリエーション生成 感性的な微調整と仕上げ アイコンや画像などの アセットの自動生成 初期の品質チェック 最終的な品質チェック
44. 【作業分担】ビジュアルデザイン作成 46 ブランド価値の体現 デザインの一貫性の統合 配色やスタイルのバリエーション生成 感性的な微調整と仕上げ アイコンや画像などの アセットの自動生成 初期の品質チェック 最終的な品質チェック 人が持つ過去の成功・失敗経験から 避けがちなパターンも提案してくれる 色のコントラスト、文字の視認性などが基本 的な基準を満たしているかを自動チェックし、 修正のヒントを提供してくれる
45. 【作業分担】ビジュアルデザイン作成 47 ブランド価値の体現 デザインの一貫性の統合 配色やスタイルのバリエーション生成 感性的な微調整と仕上げ アイコンや画像などの アセットの自動生成 初期の品質チェック 最終的な品質チェック ブランドの哲学、価値観、ターゲットユーザーの感情に最も 深く響くものを選定し、その理由を明確に言語化する 単なる「綺麗」ではなく、「このブランドらしさ」をデザインに 落とし込む 既存のデザインシステムやガイドラインに完全に合致する ように調整し、プロダクト全体のビジュアルに一貫性をもた せる 色の微妙なトーン、要素間のスペース、インタラクションの 細かなタイミングなど、ユーザーの「使い心地」や「美的な 満足度」を決定づける、データでは測りきれない感性的な 微調整を行う
46. ビジュアルデザインの適用 48 ビジュアルデザインを適用してもらいました v0で作成したWF Figma Makeで作成したWF
47. 【実践例】 v0でビジュアルデザインを作成 49 ダークモードを提案してくれたが、 コントラスト比が強すぎて目が疲れ てしまう 無料プランでもここまでできる サイドナビゲーションとメイン領域 の境目がわかりづらい 全体にメリハリがなく、単調な印象 を受ける カードに薄く背景色を敷くなどして エリアを明確にする 文字の大小差を広げて重要な文言 と、補助文言を明確化する
48. 【実践例】 Figma Makeでビジュアルデザインを作成 50 崩れていた箇所を修正してくれた 色の数が多いため、本デザインで 配色の調整が必要 全体的に色が薄く、業務システム としては見づらい印象 テキストの項目が多いため、ご ちゃついて見える 一覧画面に表示する項目は減ら し、重要な情報だけに絞って表示 する工夫が必要
49. 【実践例】アクセシビリティチェック 51 以下URLのデジタル庁のアクセシビリティ観点での留意点を参考に、このデザインのアク セシビリティをチェックをしてください。 https://design.digital.go.jp/foundations/color/accessibility/
50. 【実践例】 Figma Makeでサービスロゴデザインを提案 52 ロゴのコンセプトや意図も軽く説明を 入れてくれた 仮ロゴや、低コストで開発したい時、 また社内のシステムとしては使用で きる
51. UIデザインでの活用まとめ ⚫ GeminiはUIデザイン作成には向かない（ChatGPTも同様） ⚫ テキストベースでの提案やアドバイスをしてくれるが、画像で見せるアウト プットは苦手 ⚫ 特に日本語がおかしく、実業務では使えないレベル ⚫ v0とFigma Makeは、初期案としては十分使えるレベルまで仕上げてくれ る ⚫ コード生成をゴールとするなら、v0がおすすめ ⚫ デザインの細かな作り込みをゴールとするなら、Figma Makeがおすすめ ⚫ いずれにせよ、ユーザーの「使いやすい」を最大化するためには、仕上 げは人の手で行う必要がある ⚫ アナログなUIが最適解の場合もある ⚫ 業務システムの場合、業務に特化した特殊なUIを作るケースが多い 53
52. AIは「道具」であり「パートナー」 ⚫ AIは、UX/UIデザインの「効率化」と「質の向上」に大きく貢献するが、最 終的なUIがユーザーにとって本当に使いやすいかを判断し、微調整する のは、やはり人の役割 ⚫ AIはあくまでも人間の思考を深めるための「道具」 ⚫ 人が意図を持って使いこなすことが重要 ⚫ 「このAIの提案はなぜ良いのか？」「ユーザーの課題解決につながる か？」と常に問いかけながら進めることが重要 54 個人の得意な部分は 人が行う方が早く クオリティーも高い
53. 生成AI利用時の注意点（権利・品質）
54. 著作権・肖像権の問題 ⚫ 業務でAIを利用する際には、様々な注意すべき点がある ⚫ AIが学習したデータには、著作権で保護されたものが含まれている可能 性がある ⚫ 生成された画像が既存の著作物と酷似していないか、常に確認する必要が ある ⚫ AI生成物は著作権が認められない場合がある ⚫ 簡単な指示（プロンプト）を与えるだけで、AIが自動で結果を出力するなど、 人による創作的な意図や寄与がほとんど認められない場合、その生成物に は著作権が認められない可能性が高い ⚫ 商用利用の際は、各生成AIツールの利用規約を必ず確認する ⚫ サービス規約により、商用利用やクレジット表記の条件が異なる ⚫ AIでの生成物は“たたき台”として利用し、最終成果物は人が仕上げる のが安全 56
55. 品質と倫理などの問題 ⚫ AIは完璧ではない ⚫ 意図しない不自然な画像や、倫理的に問題のある内容を生成する場合もある ⚫ 不正確な情報や偏見に基づいたデザインが生まれる可能性も ⚫ 品質のばらつき、誤情報のリスク ⚫ プロンプトの質やAIモデルの性能、学習データの偏りによって大きく変動する ⚫ AIが学習したデータにない情報や、古い情報を、あたかも事実であるかのように 自信を持って生成してしまうこともある ⚫ 社外秘情報を入力すると情報漏洩につながる ⚫ 会社が推奨・許可している生成AIツールを使用する ⚫ 機密情報、個人情報、取引先に関わる情報などを生成AIに入力しない ⚫ AIが生成したコンテンツを鵜呑みにせず、必ず人間の目で事実確認を行うこと を忘れてはならない 57
56. まとめ
57. ⚫ 生成AIは早くて便利だが、デザインプロセスを自動化するものではなく、 発想を広げるためのツール ⚫ 非デザイナーの方が生成AIを使って作った成果物がユーザーニーズと マッチしているかの判断に迷った場合は、デザイナーに聞くのがベスト ⚫ デザイナーが担う大切な最終工程は以下4つ 今日のまとめ 59 ①共感と洞察 ユーザーの潜在的なニーズや感情を読み解 く力 ②戦略的思考 ビジネス目標とユーザー課題を結びつけ、プ ロダクト全体の体験を設計する力 ③コミュニケーションと調整 チームや社内外の関係者と連携し、ビ ジョンを共有する力 ④最終的な品質保証 細部の調整、アニメーション、アクセシビ リティなど、プロダクトを完成させるため の緻密な作業
58. 今日のまとめ ⚫ 弊社には UXUIデザイナーに加え、システム開発エンジニアやITコンサ ルタントも揃っております ⚫ 『システム開発におけるAI活用セミナー』も開催しており、AIを活かしたプ ロジェクト支援も可能です ⚫ UX/UIデザインを学びたい、実践できる人材を育てたいというお客様へ のコンサルティングも行っています ⚫ 今日紹介したようなUX/UIデザインの各工程における生成AIの活用方法や ツールの選定に関するコンサルティング、ツールを使いこなせる人材を育成 するための伴奏支援なども可能です ⚫ AIの導入やデザイン活用に不安がある方は、ぜひ弊社にご相談ください 60