こんにちは。グッドパッチUIデザイナーの金谷です。
最近、ChatGPTで話題沸騰のAI。機械学習、ディープラーニングなどの技術の進歩が著しく、自然言語処理、画像認識、音声認識などの分野で、驚異的な精度と高速な処理能力を発揮しています。
ChatGPTにいろいろな「仕事」をさせる実験が流行っていますが、私自身もAIに負荷が高い（面倒）な作業を肩代わりしてもらえないか、実験をしてみたくなりました。
個人的な願いですが、AIの活用によって業務効率が飛躍的に向上するといいなと考えています。より創造的なタスクに時間をかけられ、品質の高いものを生み出せたり、人間が意思決定をする上で、十分な情報や条件がすぐにそろったり。
というわけで、デザインのワークフローにおけるどんな課題を解決できるのか、順に追って考えてみたいと思います。
目次
Webアプリ・モバイルアプリデザイナーのワークフローごとに面倒な作業を挙げてみる
まずは、自分の仕事の中から面倒な作業を挙げていきます。自身の経験則から大変な作業だと思っているのは、以下の3種類です。この中でAIが得意なのは、1と2だと考えています。
- アイデア量が必要な作業
- 時間がかかる作業
- 正確で細かな作業
0. 競合調査
まずは競合製品やサービスの調査ですね。主な業務としては、以下になります。
- （競合分析）競合製品やサービスの調査を行い、その特徴や価格、販売チャネルなどを把握する
- （ターゲットユーザーの調査）ターゲットユーザーの属性や行動パターン、ニーズなどを調査し、プロダクトのデザインや機能に反映させる
- （マーケットトレンドの調査）業界のトレンドや市場規模、成長率、市場シェアなどを調査し、プロダクトの展開戦略やマーケティング戦略に反映させる
このうち「競合分析」については、ChatGPTの支援が期待できそうです。そのまま使用すると2021年時点のデータになってしまうのですが、プラグインを使用することで最新のデータを取得できるようになります。株価や最新のニュースを取得できるので、競合やトレンドの最新情報を聞くことができるでしょう。
「ChatGPT」がプラグインに対応、ネットの最新情報を利用可能に
1. プロジェクトの理解と要件定義
主な業務は以下ですが、AIを使うと効果的なのは「ペルソナ」周りの話だということが分かりました。
- クライアントやステークホルダーからの情報収集
- ターゲットユーザーとビジネス目標の明確化
- ユーザーストーリーやペルソナの作成
▼ペルソナの作成
まずはペルソナの作成から。これはChatGPTで作成してもらえました。以前、給与計算の業務アプリケーションの案件を担当していたので分かるのですが、これはなかなか筋がいいです。
すでに行ったユーザーテストを覚えてもらった上で、ペルソナを作成する方法もこちらの記事で紹介されているので、ご興味のある方はぜひどうぞ。また、ペルソナを複数人作って、課題に感じている内容を議論させる、といったアイデアなども考えられます。
▼業務やユーザーのジャーニーを書く
先ほど作ったペルソナを基に、1日の流れを作成できます。「カスタマージャーニーマップ（※）」を作った上での課題の深掘りも可能です。
課題を深掘るなどしていけば、「リーンキャンバス（※）」を書くこともできるでしょう。業務シーンにまつわる具体的な質問を繰り返すことで、ペルソナもどんどん成長していきますから、質問を重ねるほど精度の高い答えを返してくれるようになります。
給与計算において致命的な計算ミスを防ぐためにどうしてるかインタビューしてみたり
▼ユーザーインタビューの実施
また、作成したペルソナに呼びかける形でさまざまな質問ができます。人相手では聞きづらい内容を質問したり、詳しく聞きたいことを何度でも聞くことができるのです。アポの調整から、場の雰囲気作りといった点など、インタビューは気を遣うことも多いでしょうが、その負荷から解放される、というのはメリットになるはずです。
2. ユーザーフローの設計
このフェーズで発生する主な作業は以下の通り。先ほど作成したペルソナにまつわる部分は、引き続きAIの効果が期待できます。
- タスク分析やユーザーシナリオの作成
- ユーザーフローダイアグラムの作成
- コア機能の特定
▼業務やユーザーのシーンから、ユースケースを設計する
先ほど作ったカスタマージャーニーマップの中で、どうしても理解が浅くなってしまう部分もあるかもしれません。そんなときはAIの出番。特にソフトウェアで業務を行う場合、ユースケースを設計してもらうと良いでしょう。例えばこんなふうに。
正直、これはすごい。ちょっと感動してしまいました。代替フローという形で、異常系まで具体的に書いてくれています。これが最終的な正解のUI設計にならずとも、まずはこれがあればUIが書けるので、難しいドメインのプロダクトだとしても、初速が何倍も早くなるはずです！
3. ワイヤーフレームの作成
このフェーズで主に挙げられるのは以下の作業ですが、正直AIにお願いするには難しい、荷が重い部分だと感じました。
- スケッチや低保守ワイヤーフレームの作成
- レイアウト、UIコンポーネント、ナビゲーションの設計
- プロトタイプの作成（オプション）
▼壮大なアプリケーションのナビゲーションの再設計、サイトマップ生成
これはYouTubeのようなWebサービスでは可能でしたが、例えばジョブカンやZOZOTOWNでは生成してもらえませんでした。業務アプリケーションはまず無理でしょう。
サイトマップを書いた上でのナビゲーションのリニューアルなども、人間の手が必要な領域なのではないかと思います。言葉や要素の抽出はできても、組み替えたり決めたりするのはAIにはまだ難しそうです。
4. UIデザインとビジュアルデザイン
- カラーパレット、タイポグラフィ、シャドウ、アイコンの選択
- ハイフィデリティモックアップの作成
- デザインシステムやUIライブラリの使用
- ロゴデザインの作成
- ブランドステートメントの作成
▼ UI設計 (実装をそのまま開始できるレベル)
UIを正しく書いてくれる方法は現時点では存在しませんが、チェックリストを生成してもらったり、テスト設計をしてもらうことは可能です。
チェックリストを生成しておけば、デザイナーが必要なすべての要素を考慮できるようになります。デザイナーはアクセシビリティ、カラー、テキスト、一貫性、ユーザビリティなどの重要な要素をカバーすることで、素早く土台となるクオリティをそろえることができます。
▼ロゴデザイン / パッケージ / LP / ブランドステートメントのアイデア出し
これについてはChatGPTではなく画像生成ツールの「Midjourney」が頼りになりそうです。細かい要件が決まっていればそれらの言葉をプロンプトに入れて、アイディエーションができるかも。
筋の良さそうなものを選んでベクター変換して調整すれば、いくつか使えそうなものもありました。
ブランドステートメントのアイデア出しもしてもらえそうなので、デパ地下によくあるお気に入りのお惣菜屋の RF1 – アール・エフ・ワン – の新しいブランドラインができたと仮定して書いてもらいました。
なかなかいい感じですね、特に2つ目は結構好きです。ちょっと「刺激的」が言葉そのままで使われてしまったのが微妙ですが、アイデア出しとしては充分なのではないでしょうか。
▼デザインガイドラインの執筆
タブコンポーネントのガイドラインを書いてもらった後、より詳しくタブコンポーネントとセグメントコントロールコンポーネントの使い分けについて教えてもらいました。内容としては異論もそこまでなく、また、あくまでガイドラインですし、必ずしもこれが適用されるわけではないので、十分使えそうな内容でした。
プロダクトならではの思想が影響する部分は、人間が記述する必要がありそうですが、時間がだいぶ短縮されるのではないでしょうか？
▼条件によって、大量に分岐するUIの設計
UIを正しく書いてくれる方法は現時点では存在しないので、今ある解決策で頑張るしかなさそうです。パターン化であったり、インタラクティブなプロトタイプ設計など。
▼カラースタイルの生成
プライマリーカラーを指定し、パレットを提案してもらった上で、セマンティックトークンの例も作ってくれました。
セマンティックトークンの命名は所々微妙ですが全く使えないわけでもないです。このままjsonファイルに変換してもらい、Tokens Studio For Figma を使用すれば、もしかするとFigma上でちまちまカラースタイルをイチから作らなくてもいいかもしれないですね。
▼テキストスタイルの生成
こんな感じでChatGPTに指令をすればいけます。
Font sizeの基準値が14pxの日本語のWebアプリケーションがあるとします。プロダクトで使われる全てのテキストスタイルを考案してください。なおフォントは「M PLUS 1」を使用してください。1rem=14pxとします。
font-size, line-height, font-Weight, letter-spacingの4項目を定義してください。
いい感じですね。きちんと生成してくれました。
▼カラー、テキスト、シャドウスタイルを正しく当てる@Figma
これは厳しいです。素晴らしいプラグインがあるのでそれで頑張りましょう。ファイルで使用されているフォントやサイズ、カラーなどを全て参照でき、既存のスタイルを一気に当てることができます。
5. プロトタイピング
プロトタイプを実際に操作してもらうのは、もちろん実際の人間でないと無理なのですが、それ以外の部分で意外とAIの出番がありました。
- インタラクティブプロトタイプの作成
- ユーザーインタビューやフィードバックの収集
- デザインの反復改善
▼ユーザーテストの書き起こし、まとめ、意見のグルーピング
ユーザーテストに人間が必要なのは先ほど述べた通りですが、問題はその後です。テストをしたのはいいものの、書き起こしやまとめといった業務が結構大変なのではないかと思います。
この分野については、Open AI社が提供しているWhisperが精度では勝るらしいです。
ただ、ChatGPTの要約の精度には少し疑問です。実際に私が書いた記事のリンクを送って要約してもらったところ、一番伝えたいポイントがうまく入っていませんでした。要約しやすい内容をしゃべってくれるとも限らないので、インタビュアー自身の解釈は必ず加えたほうが良さそうです。
文字起こしAI「Whisper」を誰でも簡単に使えるようにした超高精度文字起こしアプリ「writeout.ai」使い方まとめ、オープンソースでローカルでも動作OK
音声ファイルを簡単に文字起こし&要約！WhisperとChatGPTで実現する方法
6. 実装時のコラボレーション
最後はエンジニアメンバーとの実装中のやりとりですが、ここもAIを活用するのは難しい印象です。主な作業は以下の通りですが、例えば、コミュニケーションについては、ディスカッションの途中でアイデア出しを頼むことはできるかも、くらいでしょうか。
- エンジニアメンバーとのコミュニケーション
- デザインアセットのエクスポートと共有
- 開発進捗のフォローアップとデザインの品質管理
▼仕様（機能要件）をバックログとして、スプレッドシートに書く
これも難しいでしょう。先ほどユースケースを書いてもらいましたが、あれはまずUI設計を初速を上げて書くための土台というニュアンス。機能要件は、今まで設計してきたUIを構造的に理解していないと書くことが難しいです。
プロダクトならではの文脈も必要。何よりも正確で厳密である必要があります。ここはかなり骨が折れる作業だと思うのですが、私は現時点でAIを用いた解決方法を見つけられませんでした。
「デザイナーの仕事はAIに奪われるか？」の答えはNO
長くなりましたが、ここまで読んでいただきありがとうございました。
ざっとプロダクト設計のプロジェクトにおける面倒な作業を挙げ、それぞれに対するAIでのアプローチを探ってみました。とりあえず、リサーチフェーズは10倍くらいスピードが上がるんじゃないでしょうか。
とはいえ、足を動かして人間の目で体感するリサーチも重要だと感じます。UXデザインやパッケージデザインは、私自身がメインで行っていない分野ですし、より専門性を持った方にアプローチしていただいた方が良いのだろう、と思っています。
こういうことをしていると、「AIにデザイナーの仕事は奪われるのか？」という問いが必ず出てきますが、私はNOだと考えています。
「なぜこれを作りたいのか」「なぜこういう姿勢のプロダクトなのか」「本当に作りたいものはこれなのか」──。
プロダクトの設計をする上では、多くの意思決定をチームで行う必要があります。決め方を決めることが大変な場合も大いにあります。プロダクトやチーム全体の方向性を定めるためには、AIが提案してくれた多くの選択肢やアイデアの中から人間が選び取って決めていくことが不可欠だと感じます。
今後、実際に案件で活用した失敗 / 成功事例をまた共有できればと思います。
当記事ではAIがワークフローにどのような影響を与えるかを探求しましたが、こちらの弊社メンバーのnoteではユーザーインターフェースの未来に対する影響を紹介しています。ぜひご覧ください。