はじめに
私の周囲には、つい最近Javaに触れ始めた私など足元にも及ばない、知識豊富で優秀なエンジニアがたくさんいます。
しかし、そんな彼らでも開発の過程で UI/UXの知識が不足しているために、
性能的には非常に優れているのに、ユーザーが使いづらさを感じてしまうプロダクトを作ってしまっているケースがよく見られます。
これは本当にもったいない!!!!
そこでこの記事では、ほんの少しUIを意識するだけで、成果物のクオリティが100倍よくなるための知識を紹介します。
特にエンジニアがUI設計を行う際に意識すべき 基本の3ポイントをUiデザインの教科書という本を参考にまとめるので、ぜひ本も読んでみてください！
UI設計で意識すべき3つのこと
大きく分けるとこの３点になります。
- デバイスを意識する
- 入力手段を意識する
- 画面の違いを意識する
以下で詳しく解説していきます。
1. デバイスを意識する
デバイスは大きく分けると以下の4種類に分類できます。
-
デスクトップ（PC）
-
タブレット
-
スマートフォン
-
TV
そしてそれぞれのデバイスが持つ特徴は以下の通りです。
それぞれの特徴や利用シーンをしっかり理解した上で、UI設計を行うことが重要です。
同じUIを全デバイスに適用するのではなく、デバイスに最適化された設計を心がけましょう。
2. 入力手段を意識する
デバイスごとに、ユーザーがどのように操作するかが異なります。
-
PC（デスクトップ／ノートパソコン）
キーボードとトラックパッド／マウスによって操作する- 特徴①細かな操作が可能
- 特徴②縦スクロールに強いが、横スクロールはやや苦手
- 特徴③ホバー（マウスオーバー）を活用できる
-
スマートフォン・タブレット
タッチパネル（指による操作）によって操作する- 特徴①タップ、スワイプ、ピンチなど多様なジェスチャーが可能
- 特徴②ボタンやリンクは、指の大きさ以上のサイズで設計すべき
- 特徴③基本的には閲覧に適したデバイス
- 特徴④視覚的に、どの要素がタップ可能か一目でわかるように設計する必要がある
※TVの入力手段については本記事では省略します。
3. 画面の違いを意識する
-
距離
ユーザーと画面の距離にはそれぞれ差があります。
距離の差はTV ＞ PC ＞ スマホ・タブレットとなり、距離が離れるほど、文字やUI要素は大きくする必要があります。 -
画面サイズと可変性
各デバイスには以下のような違いがあります。
そのため、PC向けUIはリサイズやレスポンシブ対応を意識することが重要です。スマホ・タブレット・TV：フルスクリーン表示が一般的
PC：ブラウザのウィンドウサイズがユーザーによって自在に変更可能 -
アスペクト比
デバイスごとの画面比率（アスペクト比）も設計に影響します。
特に動画や画像を扱う場合は、アスペクト比に応じた表示崩れ対策が必要です。 -
向き（縦向き・横向き）
スマホやタブレット、TVなどのデバイスでは、画面の向きがUXに大きな影響を与えます。例えば、YouTubeのようなアプリでは、縦向きと横向きで表示内容や操作UIが大きく変化します。
そのため、アプリやWebサイトの設計時には「どちらの向きで使われるか」「切り替えに対応するか」を設計段階から考慮する必要があります。
おわりに
今回紹介したポイントを押さえるだけでも、UI設計の質は大きく向上します！
「機能は作ったけど、なんか使いづらい」と感じるプロダクトには、UI/UXの視点が欠けていることが非常に多いです。
少しの意識で、ユーザーにとって圧倒的に使いやすいプロダクトが作れるようになります。エンジニアとしてもう一段ステップアップするためにも、ぜひUIの基本を身につけましょう^^