UI/UXデザイン入門

2-1. デバイス

  • UIデザイン
  • UXデザイン

UIデザインをする上で、どんなデバイス上のUIであるのかはとても重要になります。このレッスンではそれぞれのデバイスの特徴を知り、UIデザインをする際に意識すること・注意することを学びます。

公開日:2021/10/18最終更新日:2021/10/18

1.デバイスとは

デバイスとは何でしょう?

デバイスは「装置」という意味を持ちます。昨今においては、私たちが普段触れているスマートフォンやパソコンなどの電子機器などを指す言葉として利用されています。

2.様々なデバイスの種類

デバイスには様々なものがあります。私たちがよく触れているデバイスとして以下のものが挙げられます。

  • スマートフォン
  • パソコン
  • タブレット
  • テレビ

また、街の中にも様々なデバイスが活躍しています。

  • 駅の券売機
  • コンビニの端末(Loppi、Famiポートなど)
  • 商業施設のフロア案内のタッチパネルディスプレイ
  • セルフレジ

このように私たちが生活する上で様々なデバイスに囲まれていることがわかります。

3.デバイスの特徴

デバイスによって特徴や違いは様々です。今回はスマートフォン・パソコン・テレビを例に特徴や違いを紹介します。

入力装置

デバイスにはユーザーが入力するための装置があります。以下のように、デバイスごとにその入力装置は異なります。

  • スマートフォン:タッチパネル、ボタン
  • パソコン:キーボード、マウス、トラックパッド
  • テレビ:リモコン

スマートフォンなどのタッチパネルは指で直感的に操作することができます。
しかし指で画面の一部が隠れてしまうため表示物の位置には注意が必要です。また指で押すことのできるボタンサイズを確保する必要があります。


Photo by Priscilla Du Preez on Unsplash https://unsplash.com/photos/tBypczR1CFI

一方、パソコンのマウスはスクロールで縦の移動がとても容易にできます。またポインターの操作が簡単であり細かな移動もできるため、小さな表示物でもポインターを対象に移動させることが可能です。


Photo by Liam Briese on Unsplash https://unsplash.com/photos/wB7V7mhufy4

デバイスの入力装置にはこのように様々な特徴があります。その特徴を意識してUIをデザインする必要があります。

画面の大きさと距離

表示物を映す画面にもデバイスごとに特徴が出ます。画面の大きさや比率を各デバイスで比較してみます。

スマートフォン:16:9(縦)、機種により大きさは異なるが手で持てる大きさ
パソコン:ウィンドウサイズが可変
テレビ:16:9(横)、様々な大きさが存在

画面の比率や大きさは画面内のUIパーツの大きさや配置に影響を及ぼします。

また、この大きさによって注意しなければいけないこととしてユーザーとデバイスの距離があります。

スマートフォンは手で持つことからユーザーの目から近い距離で操作を行います。そのため、表示物が多少小さくても視認が可能です。


Photo by Thom Holmes on Unsplash https://unsplash.com/photos/Lrfw0U_o9I0

一方、テレビの場合、スマートフォンと比べるとユーザーの目から遠い距離で操作を行います。表示物が小さい場合、ユーザーは視認できない恐れがあります。


写真AC https://www.photo-ac.com/main/detail/4215167

このように、大きさやどれくらいの距離で操作を行うかを考えた上でUIデザインを行う必要があります。

OS

スマートフォンやPCにはOSと呼ばれるアプリケーションを動かすための基本システムが搭載されています。

スマートフォンではiOSやAndroid、PCではMacOSやWindowsなどがあります。このOSによって基本のUIデザインは異なります。また、それぞれのOSにデザインガイドラインと呼ばれるUIのお約束事があるため、それを守りUIデザインを行う必要があります。

4.まとめ

デバイスの特性を理解した上でUIをデザインすることは、ユーザーに適切であり快適な操作を提供することに繋がります。UIを制作する際は是非挙げた特性を意識してみてください。

次のレッスンでは画像解像度について学びます。

理解度チェック







このレッスンの著者