「UIはセンスでなく習得可能な技術」--エンジニアが知っておきたい「UI設計」のポイントを原田秀司氏が解説！

UIを単なる「見た目」のことだと誤解している方がいらっしゃいますが、それは少し違います。UIはビジュアルだけではなく、「ユーザーに最適な情報が立体的に構造化されたもの」と認識していただければと思います。

もちろんビジュアルはUIにとって大事な要素の一つですが、UIの設計で最も大切なことは「利用者が行いたいことや、得たい情報などにスムーズにたどり着く」ことであり、ビジュアルだけの問題ではありません。

UIのデザインは先天的に持っているセンスでなく、習得可能な技術だということをまず認識していただければと思います。UIとUXがひとまとめに語られることも多いですし、UIやUXを改善したいという人や企業に話を伺うと、UIやUXについての認識が社内でバラバラであることが多い印象です。

UI/UXに取り組む場合、まずは関係者間で「UI/UXはそもそも何なのか」という認識をそろえることが必要です。そのため私の著書では「UI/UXとは何なのか」について私の解釈であり定義を最初に示しました。

UIとUXは「User」、つまり「人に関わること」を扱う分野です。そのうえで、UIのIは「Interface」であり、UIはユーザーが特定のやりとりをするための「接点」のこと。接点として使うものは、パソコンやスマートフォン、Webサイト、ガスコンロや銀行のATM、アプリのサービスなどさまざまです。

インターフェースをユーザーにとって利用しやすい、わかりやすいものにすることがUIと定義できます。

UXはユーザーが対象となる商品やサービスを知り、関心を持ち、使い、問い合わせや利用などを行い、対象を忘れるまでのすべての体験のことです。UIは対象とユーザーとの間でやりとりされる接点であり、目に見える客観的なものですが、UXはユーザーの体験ですので、目に見えない主観的な「知る」「関心を持つ」「忘れる」など多岐にわたります。

ひとくちにデバイスの画面といってもPC、スマホ、スマートTVなどさまざまです。画面の大きさが異なるとユーザーにとっての使い勝手も違ってきます。大切なのは「UIを設計する際の3つの基本要素」を知っておくことです。

基本要素は大きく分けて3つ、「画面の形と大きさ」、「画面までの距離」、「入力手段」です。UIを考えるときは、まずこの3つの掛け合わせで考えていくと良いでしょう。

テレビはPCより画面が大きいため、多くの情報を表示できそうに思えます。しかし実際はそうではありません。テレビの場合、ユーザーは離れた位置からリモコンで操作するため、細かい文字は読みづらいからです。私も以前、テレビ画面に多くの情報を詰め込んでみたことがありますが、結果的に視認性が悪くなってしまいました。

はい。スマートTVで楽しめるサービスはいろいろありますが、テレビの場合、画面の大きさと距離と入力手段を組み合わせて考えるとシンプルで似たようなUIにならざるを得ません。

はい。入力手段は音声入力以外でマウスやトラックパッドを使う「ポインティング操作」、スマホやタプレットで行う「直接操作」、テレビのリモコンやゲームのコントローラーを使う「フォーカス操作」の3種類があり、手段が異なればUIも異なります。

マウスなどのポインティングデバイスは、PCのように画面との距離が近い環境で、細かい操作を可能にします。特に重要な機能が「ホバー」効果です。カーソルを要素の上に置くと、色が変わったり説明が表示されたりすることで、ユーザーは操作可能な場所を直感的に把握できます。このホバー効果は、PC向けUIデザインにおける重要な要素の一つとなっています。

直接操作とフォーカス操作では、UIの設計アプローチが異なります。タッチパネルなどの直接操作では、操作可能な場所が一目でわかるUI設計が必要です。一方、テレビのリモコンのようなフォーカス操作では、上下左右ボタンで移動するカルーセルの際、現在の選択位置が明確にわかるUI設計が重要になります。

Webサイトは汎用性が高く、ブラウザさえあれば様々なデバイスで利用できるという特徴があります。一方、アプリケーションは特定の目的に特化した専用ツールで、デバイスごとに個別のインストールが必要です。

大きな違いがあります。Webサイトは各ページがURLとひもづいているため、URL構造を意識したUI設計が必要です。一方でアプリケーションの場合は、AndroidやiOSなど、それぞれのOSが持つUIガイドラインに沿った設計が求められます。

UIは人間の生得的な認知能力に基づいて設計する必要があります。特に視覚的な認知特性の理解は重要で、これを活かしたUI設計が効果的です。視覚的な認知特性は、大きくわけて「色」「形」「動き」の3つがあります。

人間には生来の色彩認識能力があります。例えば、0から9までの数字が100個ランダムに並んでいる中で、特定の数字だけに色を付ければ、その数字は一目で見つけることができます。このような人間の視覚特性をUIに活用できるのです。

2つの重要なポイントがあります。1つは色の数を抑えること、もう1つは適切な色の組み合わせを選ぶことです。色を増やしすぎると識別効果が低下します。基本は白・黒・グレーの無彩色を基調とし、重要な箇所に有彩色を1〜2色加える程度が効果的です。また、明度差の活用も有効です。さらに、配色によってブランドイメージを想起させることもできます。

人間は、同じ形が並ぶ中で1つだけ異なる形があると、自然とそこに注目する特性があります。例えば、フォーカス機能では選択した項目を大きく表示することで、ユーザーの現在位置を視覚的に示します。つまり、統一された要素の中で一つだけ差異を設けることで、意味を持たせるのです。

UIにおける動きの設計は使いやすさを大きく左右します。動きには「注目」「理解」「演出」という3つの役割があり、最も重要なのは「理解」です。

その通りです。iPhoneの設定画面を例に説明しましょう。日付変更時の画面遷移では、画面が右からスライドして重なり、前の画面が「戻る」ボタンとして左上に表示されます。この一連の動きは1秒未満で完了し、ユーザーは画面の階層構造を直感的に理解できます。

はい。このような動きによって、ユーザーは「どこからどのように移動してきたか」を体感的に理解できるようになっています。

そうですね、動きをつけることで面白さやカッコよさを表現することもできます。一例として、Xの「いいね」機能のハートマークのアニメーションは、凝った動きで演出効果を高めています。演出は必須ではありませんが、ブランドの差別化や独自性の表現に効果的です。

ユーザーにとって何がわかりにくいのかを知っておくと良いと思います。UIの分かりにくさは主に「場所」「操作」「状態」の3つに分類できます。特に「場所」に関する問題が半数以上を占めています。これらの要素を理解することが、より良いUI設計につながります。

あるレストランのタブレット注文システムを例に説明しましょう。このシステムでは、現在地の表示がなく、画面遷移の導線も不明確でした。

そのため、ユーザーは目的のページに行くために毎回トップページに戻る必要があり、ディナーメニューを探しているのにランチページに迷い込むといった問題が発生していました。

その通りです。このシステムには2つの大きな問題がありました。1つはナビゲーション構造の一貫性が欠如していること。もう1つは、一般的に左上に配置される「戻るボタン」が右上にあったことです。それらの改善点を反映すると、次のようになります。

このように、現在位置が不明確で、直感的な操作ができないUIは避けるべきです。

オンラインミーティングアプリを例に挙げると、自分のマイクがオンかオフか判断できないような状況です。つまり、システムの現在の状態が明確に示されていない状態を指します。

この場合は、「状態」と「操作」を分けて表現することで解決できます。ボタンが「状態」と「操作」のどちらを表しているのか、両者を混在させず片方に絞ることで、状態と操作がわかりやすくなるというわけです。

はい、既存の共通概念は尊重すべきです。「戻るボタン」は左上、「閉じるボタン」は右上といった慣習的な配置には重要な意味があります。ユーザーはこれらの配置に慣れているため、新たな学習が不要です。逆に、これらの慣習を無視すると、ユーザーに余計な学習負担を強いることになります。UIの基本原則の一つは、学習の必要性を最小限に抑えることです。

エンジニア出身の私の経験から言えば、エンジニアは機能の実装を優先する傾向があります。しかし、機能が「動く」ということと「使いやすい」ということは、別の問題なんです。

例えば、機能は正しく動作するものの、その機能を使うためのスペースが見つけにくかったり、使い方がわかりにくかったりすることがよくあります。特に最近は、フロントエンドとバックエンド両方を担当するエンジニアが増えていますが、API連携や技術的な実装に注力するあまり、ユーザー視点での使いやすさが後回しになりがちです。

機能を「重要度」で分類し、優先順位をつけることが効果的です。主要な機能は目立つ位置に配置し、補助的な機能は適切に分割して配置するといった工夫が必要です。

典型的な例として、Webフォームの操作があります。ユーザーが情報を入力した後、「戻るボタン」を押したときにデータが全て消えてしまうケースがあります。エンジニアは、そのような場合でもデータを保持する仕組みを実装することで、ユーザーのストレスを軽減できます。「このような操作をしたらフラストレーションを感じるだろう」という場面を事前に予測し、技術的に解決することが重要です。

UIにおいて重要なのは、最先端の技術より「枯れた技術」です。つまり、社会に浸透し、ユーザーが習熟している技術です。最先端の技術は往々にして使いづらく、学習コストが高くなります。むしろ、成熟した技術を適切に活用することで、より使いやすいUIが実現できます。

「デザインは生まれつきの才能ではなく、習得可能なスキルである」ということを強調したいですね。私自身、理系出身のエンジニアからUIの専門家になった経験から、これは確信を持って言えます。エンジニアの皆さんには、自信を持ってUIデザインに取り組んでいただきたいと思います。