インターフェースデザインのポイント

人間の認知能力

デバイス
ディスプレイ
ソフトウェア

視覚的な情報表現
構成
理解を促すデザイン

デバイスの特性

デバイス、繊細な操作、情報量

PC
ホバーインタラクションが予測しやすい

SP
ホバーがない

タブレットPC
マウス　ホバー可、クリック、ドラッグ
タッチパネル　ホバー不可、タップ、ピンチ、スワイプ

すぐ使えるXD Tips vol.1 – ホバーのインタラクションをデザイン編

ディスプレイの特性

PC　距離遠い　視覚大きい　全体の情報が見えるようでないとストレス
SP 　距離近い　視覚小さい

アスペクト比
PC　ウィンドウ操作可
SP　フルスクリーン

タブレットのマルチウィンドウ
スプリットビュー、ピクチャ・イン・ピクチャ

スクロール/スワイプ
基本上下の動作
PCの左右方向はやりにくい

SPの「戻る」、「ホーム」
iPhoneX〜　ホームボタンない　戻るはアプリレベル
Android　戻るはOSレベル

ソフトウェア

ソフトウェア（アプリ、ブラウザ）　OSの種類に影響受ける

ブラウザ
・手軽
・制約多い
・動きが遅い場合も

アプリ
・開発コスト、労力かかる
・素早い

人間の認知能力

色は多すぎないようにする
他と異なるものに色を付ける（マウスオーバー時に色を変えるなど）

形
統一されたデザイン　歯車、虫眼鏡のアイコンなど

動き
スクロール、読み込み中など

ストレス
頭脳的な労力　文章読むなど
身体的な労力　スクロール、入力するなど

インタラクションの必要性
ストレスに見合ったインタラクションか見極める

視覚的な情報表現

ラスターデータ　解像度に依存する

高解像度のディスプレイ
AppleのRetinaディスプレイ

物理解像度：1920px*1080px　ドットバイドット
理論解像度：@２x（２倍の解像度）

文字情報
画像化せずになるべくテキストで

ベクターデータ
SVG(Scalable Vector Graphics)　大きさを変えられるベクター画像

画像フォーマット「SVG」とは？デザインでの活用ポイントと使い方

動画
横長（16:9）が多いがSP普及により縦長も増加

構成

階層の深さ理解を促すナビゲーションが必要
位置関係
インタラクション

カテゴライズ、ラベリングのポイント
階層の深さ
具体的
抽象的

現在位置
– パンくずリスト
– カレント表記

テキスト差別化
– ウェイト　ボールド、イタリック
– 大きさ
– 色
– 装飾

コンテンツを探す操作
– ビューの切り替え　リスト/画像表示
– ソート
– 選択肢のフィルタリング

インクリメンタル（無限）スクロール
SNSのフィードなど

ページネーション
比較的じっくり情報を探す状況が向いてる

カルーセル
おすすめして紹介したい内容に向く
横向きスクロール

パンニング
インクリメンタルパンニング
Google Mapなど

理解を促すデザイン

わかりにくいと感じられる原因
– 全体像が把握しにくい
– 操作の規則性・予測可能があるかどうか

視覚的な演出のインタラクション
開く、重なる
– ハンバーガーメニュー
– スライド
– アコーディオン
– オーバーレイ

広がる
– インレイ

マイクロインタラクション
パスワード入力時の●が増える動作など

リッチデザイン/スキューモフィズム
現実世界のものをメタファー
・時計　アナログ時計
・テキスト　紙のメモ用紙　など

ミニマリズム
装飾を排除
コンテンツ自体が目立つようになる

フラットデザイン
平面的でシンプル

マテリアルデザイン
Googleが提唱するミニマリズムデザイン
平面的でありながら奥行き感もある

https://hnavi.co.jp/knowledge/blog/material-design/

UIの詳細なデザインガイドライン

Apple / Human Interface Guidelines
Google / MATERIAL DESIGN
Microsoft / Fluent Design System