After Having AI Create Multiple Design Variations, the Biggest Value Was Discovering My Current UI's Weaknesses

はじめに

「今のUIデザイン、もっと良くできるんじゃないか？」

アプリを開発していると、そう感じる瞬間があります。でも、具体的にどう改善すればいいのか、自分一人で考えていると行き詰まることも多いです。

また、僕自身はデザイナーではないので、そもそも考えてもアイデアが出てこない場面も多々あります。「もっと良くしたい」という気持ちはあるのに、引き出しが足りない。

そんな中、友人の UX デザイナーと話していて見つけた方法が、AIに同じ機能の画面を、複数のバリエーションで作らせるというやり方です。

具体的には、既存画面の機能要件をAIに伝えた上で、「同じ機能を、まったく別のデザインで作ってほしい」と依頼します。すると、自分では思いつかなかったレイアウトや表現が出てきて、今のデザインを見直すきっかけになります。

この記事では、この方法で得られるメリットと、僕が実際に感じた気づきについてお話しします。

コピー（文言）の比較ができる

同じ機能を別パターンで作らせると、まず気づくのが言葉の違いです。同じ機能でも、パターンごとに異なる言い回しが出てきます。

ボタンのラベル、見出し、説明文など、同じ機能でもAIはパターンごとに異なる言い回しを使ってきます。それを並べて見ると、「あ、この言い方のほうがわかりやすいな」「今のアプリの表現、ちょっと分かりにくいかもしれない」といったことに気づけます。

普段、自分が書いた文言をそのまま使い続けていると、それが最適かどうかの判断が難しくなります。しかし、複数の文章を横に並べて比較すると、良い・悪いの判断がしやすくなります。

一つの表現だけを見ていても「これでいいか」としか思えないものが、比較対象があることで初めて「こっちのほうがいい」と判断できるようになる。これは、実は大きなメリットだと感じています。

UIの表現レパートリーを知れる

同じ機能要件でも、それをどう画面に落とすかは一通りではありません。

message-top

たとえば、「3つの選択肢からユーザーに1つ選んでもらう」という要件を考えてみます。今までは、他のアプリを参考にして縦にチェックボックスを3つ並べるレイアウトにしていました。しかし、AIに複数パターンを出させると、横並びのボタンで表示したり、プルダウンメニューにまとめたりと、まったく別のアプローチが出てきます。

横並びにすれば縦幅が節約できて、画面全体の見通しが良くなる。プルダウンにすれば、選択肢が増えてもレイアウトが崩れない。それぞれに異なるメリットがあります。

こうしたUIの引き出しを増やせるのが、複数バリエーションを作らせることの大きな価値だと思います。自分の中にあるパターンだけで設計していると、どうしても似たようなレイアウトに収束してしまいます。他のアプリを参考にしようとしても、そもそも今見ているアプリのレイアウトが自分の作りたい画面と同じ構造だと気づけなかったり、「なぜこのUIにしているのか」まで読み取れず、スルーしてしまうことも多いです。AIに別の可能性を直接見せてもらうことで、選択肢の幅が広がります。

比較して初めて見える、今のデザインの良し悪し

複数のデザインを並べると、今のデザインのメリット・デメリットが浮き彫りになります。

「今のレイアウトのほうがシンプルで見やすい」と確認できることもあれば、「この部分は別パターンのほうが操作しやすそう」という発見もあります。一つのデザインだけを見ていると気づけなかった改善点が、比較することで見えてきます。

たとえば、対象を選択する画面で、上部に3つの選択肢を表示するレイアウトがあったとします。スクロールの必要性や画面の見やすさを考えた時に、3つの選択肢をどう配置するかで、ユーザーの印象は大きく変わります。コンパクトにまとめたほうが良いのか、あえて大きく見せて選びやすくしたほうが良いのか。こうした判断は、比較してみないと見えてこないです。

「もっとこうしたほうがいいんじゃないか」というアイデアは、比較対象があって初めて生まれるものだと感じています。

おわりに

AIに同じ機能のデザインを複数パターンで作らせる。やっていることはシンプルですが、得られるものは多いです。

文言の比較ができて、より伝わる表現に気づける
UIの引き出しが増えて、設計の選択肢が広がる
今のデザインの良し悪しが、比較によって明確になる

「今のUIデザインをもっと良くしたい」と感じている方は、ぜひ一度試してみてください。自分のデザインを客観的に見直す、良いきっかけになると思います。