UIコンポーネント入門

1-1. UI(ユーザーインターフェース)とは

UIデザイン、コンポーネントを学んでいく前にまずは「UI(ユーザーインターフェース)」について、しっかりと確認していきましょう。このレッスンではインターフェースにはどのようなものがあるか、UIとは何か、そしてUIデザインを考える指標について紹介していきます。

  • UIデザイン

公開日:2019/10/01最終更新日:2019/10/15

1.そもそもインターフェースとは

Photo by Alexandre Debiève on Unsplash

インターフェース(インターフェイス、interface)とは英語で境界面、接点を意味します。コンピューターやデザインの文脈で用いられる場合には、大きく分けると

  • コンピューターと周辺機器などの接続についての「ハードウェアインターフェース」(USBやHDMI、MIDIなど)
  • ソフトウェア間での通信、データのやりとりのための「ソフトウェアインターフェース」(APIなど)
  • 機械やコンピューターと人間との接続部分、つまり人間がデバイスを操作したりその結果を受け取るための「ユーザーインターフェース」(UI)

の3つのインターフェースがあります。このレッスンでは、最後の「ユーザーインターフェース(UI)」について紹介していきます。

2.UIとUIデザイン

UIまたはUIデザインという概念はコンピューターが登場した当時から、その体験をより良くし、質を向上させようとしてきた歴史の中でずっと考えられてきました。

コンピューターと人間との接点としてのUIには、テキスト、コマンドラインで入出力する「CUI(Character User Interface)」や今のMacやWindowsで当たり前になっている、ウィンドウ、アイコンなどで操作する「GUI(Graphical User Interface)」、駅の券売機や飲食店の食券販売機などのタッチパネルからスマートフォンやタブレットといった直接触って操作する「タッチインターフェース」や、VRと一緒に注目されている「触覚インターフェース」など多くの種類があり、最近ではスマートスピーカーの普及などにより、「音声ユーザーインターフェイス(Voice User Interface: VUI)」なども話題にされます。

Photo by Luke Chesser on Unsplash

 

現在、一般にUIとして扱われているのは主にGUIやスマートフォンなどにおけるタッチインターフェースの範囲で、具体的にはその操作や情報の表示に関わるナビゲーションやボタン、フォーム、ダイアログやアラートなどのパーツのことを指すことが多いです。UIデザインはこれらを適切に選択し、ユーザーがアクセスしやすいように設計し、デザインすることを目指します。

3.ユーザビリティ

UIデザインにおいて特に重要なのが「ユーザビリティ(使いやすさ)」です。ユーザビリティに関しての標準規格 JIS Z8521 ではユーザビリティを以下のように定義しています。

ある製品が、指定された利用者によって、指定された利用の状況下で、指定された目的を達成するために用いられる際の、有効さ、効率及び利用者の満足度の度合い

つまり、ユーザビリティとはあるWebサイト、アプリのユーザーが目的の操作を行い、必要な情報が得られるための「有効さ」、それが容易に、迷わず、短時間で行える「効率」、そしてその行為の結果、そのサイトやアプリにたいして「満足」する、そのこととして考えることが出来ます。

4.UIデザインの目指すもの

有名なUIデザイン原則には以下のようなものがあります。

  • 一覧性を保つよう努める
  • 普遍的なユーザビリティを提供する
  • 「一連の行動が終わった」という感覚を与えるような対話をデザインする
  • 簡単にやり直しができるようにする
  • 内部の動きが把握できるようにする

(Sniderman 1987, Shniderman &Plaosant 2009)

  • システム状態の視認性を高める
  • ユーザーに主導権と自由を与える
  • 記憶しなくても見ればわかるようなデザインを行う
  • 最小限で美しいデザインを目指す
  • ユーザーによるエラーの認識、診断、回復を可能にする

(Nielsen & Molich 1990)

出典:『UIデザインの心理学—わかりやすさ・使いやすさの法則』

これらの原則は現在でもそう大きく変わるところはありません。
Appleには優れたユーザーインターフェースデザインのための提案「Human Interface Guidelines」があり、Googleも「Material Design」というデザインシステムを提案しています。

Themes - iOS - Human Interface Guidelines - Apple Developerhttps://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

 

WebデザインにおいてもHTMLやCSS, JavaScriptといったフロント技術の進化とともに新しい表現方法が模索・実践され、その中からスタンダードとしてよく使われてきているものがあります。また、スマートフォンがより日常に密接に浸透してくる中、これまで以上にAppleやGoogleのガイドラインにも影響され、そして洗練されてきています。よりよいUI、使いやすいUIをデザインするためにまずはこれらの実例に学んでいきましょう。

理解度チェック

UIコンポーネント入門

1. インターフェースとUI

  • 1-1. UI(ユーザーインターフェース)とは

2. よく使われるUIのパターンとその名称について

このレッスンの著者