AI時代にUIデザインをどう考えるか

2024年8月16日 14:49

こんにちは、U-NEXT HOLDINGS AI業務改革支援部デザイナーの塩入と山田です！先日、C&R社が主催する「UIデザイン研修：実践的な知識とスキルを学ぶ」に参加し、最新のAI技術を活用したUIデザインの方法について学んできました。本記事では、その内容と学びを皆さんに共有します。

研修概要

研修名: UIデザイン研修：実践的な知識とスキルを学ぶ
研修期間: 2024年7月18日 PM8:00
研修場所: オンライン
登壇者:Jacob Nelson（ジェイコブ・ネルソン）氏は、ワシントン大学で情報管理の修士課程を修了後、デザインR＆DやUX＆PX戦略、デジタルマーケティングの分野で複数のリーダーポジションを務めてきました。　　　彼のモバイルゲームはGooglePlayやAppStoreで高い評価を受け、2018年には「ベストマーケティングチーム」賞を受賞。さらに、PX＆UXデザインに関する出版や、ヘルスケア向けの共同論文も発表しています。

この研修に参加した目的は、当部にて開発している、社内向け生成AI「Buddy」のUX(ユーザー体験)をより良くしていくためです。
素晴らしい機能を、使いやすく提供することが私たちの使命だと思っています！

研修内容
UI（ユーザーインターフェース）デザインシナリオ

研修では、UIデザインを進める際に必要な3段階のデザインプロセスについて学びました。

１，情報デザイン（Low Fidelity）
　　・紙に書く段階です。
　　・スケッチを作成し、情報の優先順位を検討します。

この段階では、具体的なデザインやビジュアル要素はまだ考慮せず、　　　　構造や情報配置に重点を置きます。

２，ビジュアルデザイン（Medium Fidelity）
　　・デザインのフォーマットを決定し、デザインスペースの使い方を
　　　計画します。
　　・ワイヤーフレームの作成やレイアウトの配置、テキストデザインを
　　　行います。

色や詳細な装飾はまだ使用せず、主にデザインの骨格を構築します。

３，ビジュアルデザイン（High Fidelity）
　　・最終的なデザインを完成させる段階で、カラーや詳細な装飾を追加
　　　します。

この段階では、すべてのビジュアル要素を統合し、最終的な製品に近い形に仕上げます。

デザイン解析とテスト

MidjourneyというAI技術を活用した画像生成ツールを使って、UIデザインを生成するプロセスも学びました。

このプロセスのポイントは、まずは大まかな構成を指示して、出力された画像を基に、段階的に詳細まで指示をしていくことです。

この利点は主に下記二つです。

1、最初から詳細まで指示するプロンプトを考えるよりも、大まかなイラストを見ながら詳細な指示を考えたほうが、時間もかからないうえに新しい発想が湧きやすいこと

2、最初から詳細まで指示してイメージと違った場合に、どの指示が違和感を生み出しているのか分かりづらいが、段階的に指示を詳しくしていくと、違和感を生み出している指示が明確になること

実際に、どのようにデザインが生成されていくのかご紹介します。

初期プロンプト: "A mountain landscape at sunrise."

概要: このプロンプトでは、山の風景と日の出という基本的な要素だけを指定しています。結果として、AIは非常に広範なバリエーションの画像を生成する可能性があります。

次のステップ: 生成された画像を見て、次に追加する要素を検討します。「もっと静けさや具体的な要素を追加したい」と感じるかもしれません。

修正プロンプト1: "A serene mountain landscape at sunrise with a clear blue sky."

追加された要素: 「serene（静かな）」という言葉で風景の雰囲気を強調し、「clear blue sky（晴れた青空）」を追加することで、空の状態を明確にしました

次のステップ: 画像を確認し、さらなる要素を追加する必要があるか検討します。例えば、「湖面への反射など、より詳細な自然要素を追加したい」と思うかもしれません。

修正プロンプト3: "A serene mountain landscape at sunrise with a clear blue sky, reflecting in a calm lake."

追加された要素: 「reflecting in a calm lake（穏やかな湖面に反射している）」という要素を加えることで、風景に静かな湖を取り入れ、自然の美しさを強調します。

最終プロンプト: "A serene mountain landscape at sunrise with a clear blue sky, reflecting in a calm lake, surrounded by tall pine trees."

追加された要素: 最後に「surrounded by tall pine trees（背の高い松の木に囲まれている）」を追加することで、全体の景観がより豊かになり、画像が具体的で精度の高いものになります。

ユーザビリティ
AIは人間の心理やビジネスゴールを理解することが難しいため、本当にユーザーが求めているニーズに答えるためには、デザイナー自身のスキルと知識が不可欠であることを再確認しました。

AIデザインの実践

Midjourneyの利用

セットアップと設定、グラフィックスやアセットの生成、UIデザインの生成方法を学びました。
AIが作成した成果物は必ずチェックすることが重要です。

他のAIツール
- 【craiyon】：高画質なAI画像を入手可能
- 【uizard】：スケッチをアップロードしてデザインを生成
- 【pixel cut】：高画質AI画像
- 【nucleo】：アイコン作成

研修での学び/今後の業務への活かし方

今回の研修では、段階を分けてUIデザインを作り上げていくことの重要性と、AIツールを用いて効率的に求めているイラストを生成する方法を学びました。
これからの業務では、各段階ごとチームメンバーと認識をすり合わせて、手戻りがないように進めていきたいと思います。また、AIツールを駆使して各段階にかかっている時間を少しでも短縮できたらと考えています。
そして、なにより実感したのは、デザイナーの世界ではAIに完全に任せることがまだ難しく、まさに「AIとハタラク」ことが求められるうえに、私たちが一流のデザイナーである必要があると感じました。今後も、デザインに関して学んだことを発信していきますので、チェックしてくださいね！

今後の目標

ユーザーのニーズに合致したデザインを効率的に作り上げ、プロジェクト全体の成果を向上させることを目標にしていきます。
また、チームでの協力を強化し、各個人が一流のデザイナーとして成長できるよう、邁進してまいります！
これからも、AIとデザインの融合によって、より良いUX(ユーザー体験)を提供できるよう努力を続けていきます。