はじめに
近年、生成AIの進化によって、プロンプト一つでそれらしい画面を瞬時に出力できるようになりました。しかし、ここには大きな落とし穴があります。AIが生成するUIに頼り切り、エンジニアがその設計思想を検証しないまま実装すると、ユーザーにストレスを与えるUIを量産する危険性があるのです。見た目だけが美しく、操作性の考慮が欠落したUIは、プロダクトの価値を落としかねません。
AIが何でも生成できるようになった今こそ、エンジニア自身がデザインの原理原則を理解し、AIを正しく導く設計思想を持つ必要があります。
初回のテーマは「シグニファイア」です。駅の改札やドアのノブが、説明書きがなくとも「どう扱うべきか」を伝えているように、UIにおいてもロジカルな「サイン」の設計が不可欠です。今回は、物理世界の成功例をUIに落とし込み、ユーザーを迷わせないための視覚的ヒントの実装方法について解説します。
AIが作る画面で起きる「押されないボタン」
機能を完璧に実装したはずなのに、なぜかユーザーがそのボタンに気づかず、問い合わせが止まらない——。エンジニアが直面するこのトラブルは、技術力不足ではなく、操作の「手がかり」となるシグニファイアの欠如によって起こります。
シグニファイアとは、画面内の要素が「どのように操作できるか」をユーザーに直感的に伝えるための視覚的な合図のことです。
具体的な画面を見ながら説明しましょう。あるエンジニアが、AIに「ホテル予約の予約確定画面を作って」というプロンプトを入力したところ、このような画面が出力されました。
画面内には、獲得予定ポイント、適用中のクーポン、おすすめのオプションプラン、キャンセルポリシーなど、ユーザーのメリットになる情報がしっかりと盛り込まれています。一見すると、それらしく整った画面ができているように思えます。
しかしリリース後、ユーザー行動ログを確認すると、必要な情報の入力が終わってから、「予約確定ボタン」を押すまでに、かなりの時間を要していることが判明しました。
「予約確定ボタン」は、右上に大きく配置されていたものの、結果的に「押されないボタン」になっていたのです。
行動ログを確認したところ、クーポンやキャンペーンなどの主要アクション以外の要素が画面内で目立ってしまっており、ユーザーが予約確定に進む前に別ページへ遷移したり、主要アクションに戻らないまま離脱したりするケースが発生していました。その結果、「予約できていないではないか」というクレームにつながったり、コンバージョン率を落としたりする可能性が生まれていました。
エンジニア側は、ユーザーを混乱させたいわけではありません。しかし、AIは過去のWebデザインに多く見られるパターンをなぞりやすいという特性があります。加えて、デザイン知識のない曖昧なプロンプトでは、画面の最終目的よりも「見た目が整っていること」や、収集した情報を過剰に詰め込んでしまう傾向もあります。
AIを活用する際は、指示の出し方を工夫するだけでなく、出力されたUIの検証にも細心の注意が必要なのです。
ユーザーを導く「シグニファイア」とは何か
では、ユーザーを迷わせないためには何が必要なのでしょうか。そのカギとなるのが「シグニファイア」です。
UIにおけるシグニファイアとは、ユーザーに「ここは操作できる」「こう扱えばいい」と伝える視覚的なサインのことです。よく混同される「アフォーダンス」と合わせて、物理世界の例で考えてみましょう。
たとえば、ドアにドアノブがついていれば、私たちはそれをつかんだり、回したりできるものだと理解します。「アフォーダンス」は、対象物の形状や状態から読み取れる「可能な行為」のことです。
一方で「シグニファイア」は、その行為をどこで、どのように行えばよいかを伝える合図やヒントを指します。平坦なドアの中で一つだけ出っ張っているドアノブは、「ドアを開けたいならここを回せばいい」というヒントを具体的に示しているパーツです。
では、先ほどの予約確定画面をもう一度確認しましょう。必要な情報はすべて載せてありますが、どれが予約確定のボタンなのかがすぐにわかるでしょうか？
シグニファイアの本質は「集団から一つ外して目立たせる」ことにあります。複数の要素がある中で、主要なアクションだけを視覚的に際立たせ、「ここを押すんだよ」というサインを明確に発することが重要です。シグニファイアには、ボタンの形、色、影、余白、ラベル、アイコン、カーソルの変化などが挙げられます。
先ほどの画面では、色付けをしている箇所が多く、「目立つドアノブがたくさんついているドア」状態です。こうしたUIでは、ユーザーにとって「必要なボタン」が埋もれてしまうのです。
