UIとは？
そもそも、UIとは何でしょうか？UXという言葉と合わせて解説します。
UX = User experience
UX（ユーザーエクスペリエンス）とは、ユーザーが特定の対象（サービスやプロダクト）を通じて獲得する全体的な顧客体験を指します。この概念は主観的、時間的、および状況的な側面を含み、ユーザーが感じ、経験するすべての要素が含まれます。
UI = User interface
UI（ユーザーインターフェース）は、ユーザーと特定の対象との接点を表します。これは、ユーザーが認識し、使用する対象全体の要素を包括します。UIは、ボタン、メニュー、フォームなど、ユーザーがシステムとやりとりするための視覚的なおよび操作的な要素を指します。
UXは全体的な感情や印象を含む顧客体験を指し、UIはその体験の中でユーザーが直接触れる要素を指します。両者を組み合わせ、ユーザーセンタードな設計を追求することが、成功したデザインと使いやすいプロダクトの鍵です。
優れたUIとは？
最近では、「直感的なUI」という言葉が頻繁に耳にされます。UXの専門家であるSteve Krug（スティーブ・クリュッグ）は、「考えさせないUI」が優れていると唱えています。つまり、「ユーザーが迷わず、考えずに利用できる」ことを意味しています。
このアプローチは、「アクセシビリティ」を基本的な前提として受け入れつつ、UIは感情にも訴えることができます。情報の認識と理解が容易で、操作性が高く、物事がスムーズに進むようなUIは、ポジティブな印象を与え、優れたUXを実現します。
言い換えれば、ベストなUIは、ユーザーにとって操作が容易で、期待以上の体験を提供し、ポジティブな感情を呼び起こすものです。これによって、情報の効果的な伝達や操作のテンポが向上し、結果として優れたUXが実現されるのです。
UIデザインとビジュアルデザインの違い
ビジュアルデザインは、画像や動画などを用いてユーザーに視覚的な印象を提供することを目指すデザインの手法です。一般的に、「デザイン」という言葉を聞くと、このビジュアルデザインに関連するイメージが浮かびます。
一方で、UIデザインはユーザーが直感的に理解しやすく操作できるようにするための設計を指します。UIデザインは機能としての美しさが求められ、装飾だけでなく機能的な要素も考慮されます。そのため、ビジュアルデザインと同様に美しさが重要ですが、UIデザインは機能性を最優先に考えなければなりません。
つまり、ビジュアルデザインは視覚的な魅力を追求する一方で、UIデザインはユーザーの利便性と直感的な操作を考慮しています。どちらもデザインの要素が欠かせませんが、その焦点や目的は異なります。
UI設計と情報設計の考え方について
では、実際にUIの設計を進めていくためにはどのようにしたらよいかを見ていきましょう。
優れたUIを設計するにあたり、案件の要件や課題、ユーザ情報やUXの設計など、多くの情報をインプットし、共感しておくことが前提となります。そしてその情報を元に、実際Webサイト構成やページ内の詳細な構成要素を設計していくこともまた、優れたUIを作っていくために重要な工程となります。
オブジェクト指向とタスク指向
UI設計の重要な前段階として、情報設計を行い画面の構成を組み立てるフェーズが挙げられます。これは、理解し共感したUX設計を、初めて実際の画面に近いものに落とし込んでいくプロセスです。
そこで一つの軸になっていく考え方が、「オブジェクト指向」と「タスク指向」です。
従来からあるユーザーインターフェースの設計論ですが、2020年にソシオメディア株式会社が『オブジェクト指向UIデザイン ― 使いやすいソフトウェアの原理』を発刊し、多くのデザイナーの注目を集めました。現在では、UIデザインの現場で当たり前のように取り入れられるようになりました。
オブジェクト指向
オブジェクト指向UIの基本的な考え方は、「もの」を選んでから「アクション」を起こすというアプローチです。
メリット
- 「もの」に対して自由に「アクション」を選択できること
- シンプルな情報構造により、操作スピードが向上すること
ポイント
人間の基本的な考え方として、「もの→アクション」という流れが自然であるため、ユーザーにとっては思考の進行が自然とされます。例えば、全く何が渡されるかわからない状態で「受け取りますか？」と聞かれても、ユーザーはまず「何を？」と聞きたくなるでしょう。
このアプローチは、ユーザーが直感的に理解しやすく、操作の柔軟性が高まります。ユーザーが自分の意図に従って「もの」に対して適切な「アクション」を選択できるため、使いやすさが向上し、情報構造がシンプルであることが操作スピード向上に繋がります。
タスク指向
タスク指向とは、どのような「アクション」を起こすかを決めてから「もの」を選ぶというアプローチです。
メリット
- ユーザーが行う操作の対象が常に一定である場合
- ユーザーを特定のゴールまで確実に誘導したい場合
- 緊急時など、特定の操作をミスなく行う必要がある場合
「オブジェクト指向の方が良い」といった風潮がある中で、タスク指向にもこれらのメリットが存在します。
（画像：https://www.boy.co.jp/ https://suumo.jp/）
二つの指向の使い分けとしては、まずは、「操作する対象が決まっているか？」を検討し、以下のように使い分けしましょう。
- 決まっている場合 → タスク指向UIが適している
- 決まっていない場合 → オブジェクト指向UIが適している
このアプローチを適切に活用することで、ユーザーが目標に向かってスムーズに操作でき、ユーザーエクスペリエンスが向上します。
オブジェクト指向が良しとされる理由
オブジェクト指向が良しとされる理由は、特にtoCのサービスなどでユーザが行う操作対象の「もの」が複数存在し、その増減が頻繁に発生するケースが多いからです。このような状況では、オブジェクト指向で設計することで、ユーザーが操作する際のストレスを軽減し、スムーズなテンポで目的を達成できるため、UXが向上する期待があります。
一方で、タスク指向で設計した場合には、以下のユーザーおよび開発のデメリットが生じます。
ユーザーデメリット
- 遷移画面数が増加する
- アクションを選ぶ際にさらに「もの」を選ばなければならず、アクションの増加が発生する
開発デメリット
「もの」をタスクごとに増減させていかなければならない。これにより、作成画面が増え、メンテナンス性にも欠ける可能性がある
このような問題点から、オブジェクト指向は柔軟性があり、変動する「もの」に対して効率的で使いやすいアプローチと言えます。
UIデザインの基本4原則
優れたUIデザインを実現していくためには？
情報設計を行いいざUIデザインの工程を進めていく上で、優れたUIデザインを実現していくためにとらえておくべき基本的なデザイン原則があります。
UIデザインについて解説した、ロビン・ウィリアムズの名著『ノンデザイナーズ・デザインブック』によれば、UIデザインの基本原則として以下の4つが挙げられています。
近接
近接とは、関連するものを近づけてグループ化し、異なるグループとは余白などで適切な距離をとるデザイン原則です。このグループ化の概念は、「チャンキング」とも呼ばれます。
「チャンキング」の「チャンク」は「情報のかたまり」を指し、人は近くにあるものを「関係があるもの」として認識します。
これにより、視覚的に関連性のある情報をグループ化することで、ユーザーは効果的に情報を理解しやすくなります。
整列
整列とは、グループ化した要素を特定のルールに基づいて整然と配置するデザイン原則です。
例えば、各要素を左ぞろえや中央ぞろえなどを混在させずに統一することで、まとまりごとに整然と配置します。この統一された整列は、視覚的な秩序を生み出し、ユーザーにとって理解しやすいデザインを提供します。
また、文章を単に羅列するのではなく箇条書きに整理することも整列の一例です。これにより、情報が階層的に整頓され、ユーザーがスムーズに情報をスキャンできるようになります。
コントラスト
強弱とは、要素に優先順位を付け、フォントや色、サイズの変更などを使って他よりも目立たせるデザイン原則です。これにより、適切な強弱を生み出すことで、リズムが生まれ、視覚的な効果をもたらし、ユーザーに心地よい印象を与えることが期待されます。
反復
反復では、似た要素が繰り返される際に、同じパターンを繰り返すことで一貫性を持たせるデザイン原則です。レイアウトや見出しの体裁、色の統一などを通じて、ユーザーがレイアウトに慣れ、内容の理解にかかる負荷を減らすことが目的です。
たとえページが変わっても、ヘッダーやタイトルのデザインを統一することは、UIデザインの基本とされています。この一貫性をもたせたルールのことは、「トーン＆マナー」とも呼ばれ、ユーザーにとって視覚的な統一感を提供します。
これらの基本原則を意識的に取り入れることで、ユーザーエクスペリエンスを向上させ、効果的で魅力的なUIデザインを構築することが可能です。
視覚的なUIデザインの手法
UIデザインの潮流
現在の主流なUIデザインは、過去のUIデザインが基になり、発展されています。UIデザインの歴史を知ることで、トレンドだけでなく、プロダクトやサービス、ターゲットユーザー、デバイスなどの環境に応じて、効果的なUIデザインの選択肢を持つことが重要です。
スキューモーフィズム
スキューモーフィズムは、UIデザインの初期である1980年代後半から2000年代にかけて流行した表現手法です。iOSでもiOS 7まで採用され、実物に近い質感や奥行きを表現しました。金属や木目のテクスチャなど、現実のものをリアルに再現することが特徴で、ユーザーが操作をイメージしやすい点もメリットとされていました。
しかし、スキューモーフィズムは次第にデメリットが顕在化。リアルな表現には手間や時間がかかり、処理が重くなることが課題となりました。こうした理由から、スキューモーフィズムはフラットデザインに取って代わられ、シンプルで軽快なデザインが主流となりました。
（出典元:https://smartphoneblogging.com/ios-picture-galleries/ios-6/）
フラットデザイン
2010年代に入ると、スキューモーフィズムに代わり、フラットデザインが採用される事例が増えました。Windows 8（2012年）やiOS 7（2013年）などがその代表例です。スキューモーフィズムのリアルな質感とは対照的に、フラットデザインは立体感を排し、平面的かつシンプルで洗練されたデザインを特徴としています。
フラットデザインのメリットとして、作成が容易で処理も軽量であることが挙げられます。しかし、平面的すぎるためメリハリが不足し、ボタンの位置が分かりにくいといった欠点もありました。また、シンプルなデザインは他のものと似た印象を与えがちで、表現の幅が狭いという課題も存在し、一見つくりやすそうなデザインも、無駄をなくして洗練されたものに仕上げるには、高い技術が求められました。
こうした課題に対処するために、フラットデザイン2.0が登場しました。これは、フラットデザインのシンプルさを生かしつつ、重要な要素にシャドウやグラデーションなどを取り入れ、立体感を加えたものです。
（出典元:https://dribbble.com/shots/947782-Freebie-PSD-Flat-UI-Kit）
マテリアルデザイン
マテリアルデザインは、Googleが2014年に提唱したデザインの概念です。その名前は「物質的なデザイン」を意味し、現実世界の物理的法則に従い、影や物の動きなどを表現して、ユーザーの直感的な操作を助けることを意味しています。
基本要素は、実際の印刷物を模したもので、紙とインクだけで構築されます。このアプローチは、画像の配置や余白の使い方、色の選択などを印刷物に近づけ、ユーザーが情報を理解しやすくすることを目指しています。色に関しては有彩色4色までに制限され、シンプルで統一感のあるデザインが特徴です。
また、マテリアルデザインはアニメーションを活用し、意味のある動きを加えることで視覚的変化を生み出しています。これにより、フラットデザインのシンプルさを保ちつつ、感覚的な操作を可能にしました。
フラットデザイン2.0と似たようなデザインになることもありますが、あくまでフラットデザインを認識させやすくするのが目的です。マテリアルデザインのような明確なガイドラインは設けられていないなど、両者のアプローチはまったく異なります。
（出典元:https://design.google/）
Fluid Interfaces
『Appleが推奨するFluidインターフェースのコンセプトは「A tool that feels like an extension of your mind」、つまり「自分の思考の延長のように感じるツールとして振る舞う」です。人間はどう考えてどう動くのかを観察し、UIもそのように振る舞うべきという考え方です。』
「Redirectable UI」という考え方 by dely.design
2017年にiPhone Xが登場し、それに伴いAppleが提唱したのが「Fluid Interfaces」と呼ばれるiOSの新しいインターフェイスデザインです。
このデザインの特長は、「流れるような操作性」と「思考の拡張」であり、ユーザーが一連の操作を快適に行えるようにデザインされています。
例えば、iPhone Xではホームボタンがなくなり、アプリを終了させるためには画面下から上にスワイプします。この際、スワイプを開始しても途中で指を下に戻すことで操作がキャンセルでき、ホームボタンの0か1かだけでなく、その中間の動作も含まれます。これにより、デバイスを身体の一部と感じさせ、ユーザーの思考スピードに追従する自然な操作感が生まれます。
ニューモーフィズム
ニューモーフィズムは、スキューモーフィズムから余分な装飾を省いたデザインを指します。このデザインは要素が背景と一体化しており、一枚の板で構成されているかのような奥行きがあります。ただし、同色の背景と要素が統一されているため、コントラストが弱く、ボタンなどが見づらいというデメリットがあります。昨今重要視されている、アクセシビリティの観点からは採用することが困難とも言えるでしょう。
今後、ARやVRが普及する中で、主流のシンプルなデザインから、よりリアルなニューモーフィズムがトレンドとなる可能性もあります。ただし、まだ多くのサービスやプロダクトがこのデザインを採用しているわけではありません。
（出典元:https://dribbble.com/shots/15281102-Newmorphism-Design/attachments/7034291?mode=media）
クレイモーフィズム
クレイモーフィズムとは、粘土（clay）のような質感で丸みがあり、背景から浮いていて立体感のあるデザインのことです。クレイモーフィズムと似たデザインに、ニューモーフィズムというものがあります。両者には、以下のような違いがあります。
クレイモーフィズム：背景から独立して浮かんでいる ニューモーフィズム：背景と同化しつつ立体感がある
クレイモーフィズムを取り入れているサイトは、現状ではまだ多くはありません。また、クレイモーフィズムを活用するWebサイトでも、その多くは、質感のあるイラストとしての使い方になります。
ユーザーをひきつけるような立体感のあるデザインや近未来的なデザインを目指すなら、クレイモーフィズムを背景やボタンに導入してもよいでしょう。
（出典元:https://dribbble.com/shots/17325605-Task-Management-Mobile-App-Claymorphism-UI）
グラスモーフィズム
グラスモーフィズムは、すりガラスを重ねたようなぼかし質感が特徴です。透けた背景が層の奥行きを際立たせ、デザイン自体は2013年から存在していましたが、2020年に「macOS Big Sur」での採用で注目を浴びました。
ダークモード
ダークモードは、スマートフォンなどでも一般的に搭載されている機能で、ディスプレイ背景を黒を基調とする画面に切り替えるモードです。Webサイトの場合、ライトモードのデザインに加え、ダークモードのオプションを提供して、ユーザーが好みに応じて変更できるように設計します。
ライトモードとダークモードのどちらが目に優しいかについては議論が続いていますが、背景が暗いWebサイトは写真や動画が鮮明に見えるといった理由から、ダークモードが目に優しいとされることもあります。
また、真っ白な画面面積が多いと反射が起こり、目の疲れに繋がりやすいと言われています。ユーザビリティの観点から好まれない場面があるため、その際は背景をグレーに調整するなどしてやわらかさを考慮するのがよいでしょう。
左が通常のライトモード、右がダークモード。
まとめ
UIの概論からはじまり、UIデザインについてもさまざまな手法を紹介しましたが、優れたUIとは、「ユーザーが途中で迷わず、考えずに済む」というのが大条件です。優れたUXを追求するには、素晴らしい情報設計とUI設計が不可欠です。これらが見事に調和することで、利用者がサイトやアプリを心地よく操作でき、求める情報や機能にスムーズにアクセスできるようになるでしょう。
株式会社デパートでは、さまざまな業界・サービス開発におけるUIデザインの事例がございます。
お気軽にご相談ください。
|
Webマーケティング、Web制作に関することなら
|
UI開発の一例
株式会社ポプラ社｜"こどもが本好きになる”小・中学校向け電子書籍読み放題サービス『Yomokka!（よもっか!）』
デパート採用情報
株式会社デパートでは一緒に働く仲間を募集しています
