【25日目】「はじめてのUIデザイン 改訂版」備忘録 4-1
iOSとAndroidの違いや、WEBサービス、タブレット、ウォッチ、TVアプリなど個人的に一番気になっていたことが書いてある章なので楽しみ( ･∀･)
それにしてもなかなかツール作業まで辿り着きませんなぁ・・・
※この記事は「はじめてのUIデザイン 改訂版」を参考にまとめたもので、イラスト等も全て同書を参考・引用して作成しています。
4.UIが機能する環境を学ぶ
UIがデザインされる場所は主にアプリとWEBの2つ。
アプリには大きく分けてiOSとAndroidがありそれぞれガイドラインが存在している。
プラットフォームごとに特徴があり適したUIデザインがある。
【この章のゴール】
・iOSとAndroidの基本的なデザイン、思想について理解する
・スマホアプリ開発に必要な基本的なことについて知る
・webサービスならではのデザインについて理解する
・タブレットやウォッチデザイン、TVのアプリデザインについて知る。
4-1. スマートフォンアプリのデザイン
タッチ、タップ、ダブルタップ
タップはタッチパネルの基本操作。PCで言うクリック。
iOSではAndroidに比べて押しやすいようになっている。
ボタンの要素は基本縦横44px、最低でも30px以上の大きさの確保を推奨。
Touch Start ：画面に触った状態
Touch Move：画面に触ったまま動かした状態（ドラッグともいう）
Touch End：画面から指を離すこと
の操作に分解できる。
インタラクションを考えるときはタップした時の挙動だけでなく、タッチした時はどうなのか、話した時はどうなのか、といことも考えると良い。
ダブルタップ：画面を2回続けてタップする操作
ダブルタップ＆ドラッグ：2回目のタプの時にそのまま上下左右にドラッグする操作
例）
・ダブルタップ：画像などをズームしたい時（iOS）
・ダブルタップ＆ドラッグ：マップアプリで縮尺を変更したい時に上にドラッグで広域表示、下にドラッグで詳細表示される
タッチ＆ホールド
画面の要素に触れてそのまま触れ続ける操作方法。（ロングタッチとも呼ばれる）
例）
・Home画面でアプリアイコンをタッチ＆ホールドすると編集モードに移行する（iOS）
・リストやタイル表示された写真をタッチ＆ホールドするとその要素が選択された状態になり選択・編集モードに移行。選択・編集モードの際に指を離さずドラッグすると範囲選択される（Android）
フリック、スワイプ、スクロール
フリック・スワイプはどちらも似たような動作で画面にタッチしてから指を上下左右に振るような操作。
スクロールや画面内の要素を起点にさっと細かく動く動作をフリックといい、リスト要素を左右に動かして裏に隠れていたアクションボタンを表示したり画面の端から左右に動かして前の画面に戻るような操作をスワイプという。曖昧なところもあるので厳密に考える必要はなさそう。（iOS）
画面の端からスワイプする動作＝エッジスワイプは、同じ操作でも
OSによって違う操作になるので要注意。
iOS→前の画面に戻る操作
Android→ドロワーの表示
iOS
左端から：前の画面に戻る操作、右端から：次の画面に進む操作、上端から：通知の表示、下端から：コントロールセンターの表示
Android
左端から：スワイプがナビゲーションドロワーの表示、上端から：通知の表示、下端から：コントロールセンターの表示
Androidの画面下部にナビゲーションバーがあるようにiOSのiPhone XやiPhone11では下部にHome Indicatorというホームボタンの代わりになるものが表示されている。
そのため下端から上へのスワイプだけに限らず下部付近で左右にスワイプするような操作はHome Indicatorの操作と重なって誤動作することがある。
そのため、画面下部ですワイプするような操作はさせない設計にすることが必要。
※iOSとAndroidで同じ動作でも違う操作になることがあるので注意が必要！！
ピンチ
2本の指で狭めたり広げたりする操作をピンチイン、ピンチアウト、という。画像やマップを拡大したり縮小したりする操作に使う。
直感的な拡大縮小を表現できる。
ドラッグ＆ドロップ
iPadではアプリ間のデータの受け渡しが直感的にできる仕組みとしてドラッグ＆ドロップが利用できる。
写真やテキスト、ドローイングなどのデータを扱うiPadアプリではドラッグ＆ドロップの機能に対応しておくことで、ユーザーの利用の幅を広げることができる。
マルチタッチジェスチャー
iPadを中心に複数の指での操作もOSの標準的な操作に割り当てられている。
OSの設定でオフにできるが、デフォルトでオンになっているのでアプリ専用のジェスチャーとして使うのは避けた方が良い。
・4本or5本指で左右にスワイプスする → 1つ前に使ったAppに切り替える
・4本or5本指で画面をピンチインする → ホーム画面に戻る
・4本or5本指で下から上にスワイプ → Appスイッチャー画面の表示（起動しているアプリの一覧が表示される画面）
3Dタッチ、フォースタッチ
最近のiPhoneシリーズに搭載されており、画面に加えられた圧力の大きさを感知し、それに応じた画面の表現ができる機能。
特に画面を押し込んで何かアクションをする操作をフォースタッチを呼び、この機能全体を3Dタッチと呼ぶ。
iPhoneXRでは感圧センサーが搭載されていないので3Dタッチの代わりにHaptic Touchという操作に置き換わっている。
操作がロングタッチと同じで同じ箇所をタッチし続けることで動作する。
振動によるフィードバックがありロングタッチより短いタッチで動作するのが特徴。
シェイク
デバイスを小刻みに振る操作もiOSのガイドラインに紹介されている。
主にキャンセルを意味する操作。コメント入力をキャンセルしたり、アンドゥ操作のショートカットとして利用する。
シェイクは意図せず誤作動することも多く、利用できることがわかりにくくユーザーが混乱する可能性がある。
またこの動作はオフ設定にできるのであくまでショートカットの1つとして考えておくのが良い。
キャンセル以外の目的で利用されることもある。
（例：LINEの友達になる手段 → シェイクジェスチャーと位置情報やローカル通信などを組み合わせて同時間帯に近くで同じように操作しているユーザーを見つける仕組み）
iOSのデザイン環境
Apple Human Interface Guidelines
Apple Human Interface Guidelines
2018年時点で
・macOS用のデスクトップアプリ
・iPhone、iPad用のOSアプリ
・watchOSアプリ
・tvOSアプリ
のガイドラインが公開されている。
・アイコンやナビゲーションバーなどの細かいUIパーツに関すること
・アニメーションや画面遷移などのユーザーインタラクション（相互作用）に関する内容
・Design Princiles（デザイン原則）としてデザインに対する大局的な指針
例
→アプリ全体としてユーザーに一貫した体験を提供すること
→フィードバックやユーザーが直接操作できる感覚を提供すること
が重要であると掲げている。
→アプリの目的は1つにしてシンプルに
など体験設計に踏み込んだ項目が重要視されたこともある。
Human Interface Guidelinesのデザイン原則
・目的にあった美的整合性（Aesthetic Integrity）
アプリの目的・コンテンツに沿った整合性のあるデザインにすべき。
問題解決ツールはわかりやすく素早く解決にたどり着くようなシンプルなUIにした方がいいし、ゲームは楽しい気持ちにさせるアニメーションやインタラクションが重要になる。
・一貫性のあるデザイン（Consistency）
アイコン・テキスト・トランジション（画面遷移時に使われる効果やアニメーション）などのデザイン要素は常に一貫性を保つべき。
（システム内で一度学んだことをを踏襲することでユーザーが新たに学習することを減らし操作のハードルを下げる）
・直感的な操作感（Direct Manipulation)
ユーザーが自然にアクションできるような直接コンテンツを操作できるようなアクションを採用する。
例：アイコンの並び替えは操作ボタンより直接指でドラッグして移動できるようにすべき。
・フィードバックの提供（Feedback）
ユーザーのアクションに対して結果（フィードバック）を提供することで、画面の変化や操作方法、コンテンツの関係性などをユーザーが正しく認識し理解することができる。
・メタファーを（ある物事を別の表現で例えること）用いる（Metaphors）
アプリ内のオブジェクトやアクションに対してユーザーが経験したことのあるメタファーを用いることで学習の敷居を下げることができる。
例：画面からはみ出た要素があると、そこは諏訪イプして移動可能だと認知させることができる。
・ユーザーの操作（意思決定）を第一にする（User Control）
ユーザーからアプリケーションを制御する権利を奪ってはいけない。
ユーザー操作に対して必要以上に確認や警告のアラートを提示することは避ける。
ユーザーの操作を第一にしつつ望ましくない結果は最小限にするような適切なバランスを見つけるようにする。
ガイドラインの原則や指針は標準的な設計方針・思想ではあるが、必ずしも全てを原則通りにしなければならないというものでもない。
ですが世の中の多くのアプリはほぼこのガイドラインを起点として設計されています。
UIパーツなどの表層的な部分だけでなくなぜこのようにデザインされているのかを読み取り、理解することが重要です。全てのUIを標準通りにせずとも、ガイドラインの意図を汲み取り、アプリにあったUIデザインに生かすことができるでしょう。
iOSの基本的なUIコンポーネント
UIコンポーネント=「画面上に表示するUIのパーツ」の総称。 具体的には、ボタン・チェックボックス・ダイアログ（ポップアップ）・テキストフィールド（文字入力欄）などがあり、「共通のパーツ」として使用される。
iOSのUIコンポーネントのグラフィックはAndroidのMaterial Designと比較してフラットデザインと呼ばれることもあるが、これはコンテンツを第一として、ナビゲーションなどの操作を補佐するUIコンポーネントが必要以上に目立たないように、という思想からきている。
基本的なiOSアプリはほとんどがBars・View・Controlsという3つに分類されるUIコンポーネントで構成されている。
ガイドライン内での分類と簡単な紹介↓
・Bars
画面の階層を案内したり画面に対するアクションを提示するNavigationBarや、アプリ内の様々なセクションに素早く切り替えるためのTabBarなどが紹介されている。
近年解像度とともにデバイス自体のサイズが大きくなったこともあり、より手元で切り替え操作がしやすいTabBarを使用したアプリが多く見られる。
ただし、タブで複数機能を並べておくことが良いとは限らない。
ユーザーがほとんど利用することのない項目をたくさん並べても単に操作の邪魔になってしまうので、ユーザーの本来の目的に集中できるようなUIデザインを心がける。
・Views
項目が複数並ぶTableView、タイル状に並べたCollectionViewの他にも、アラートダイアログ、ActionSheete（アクションの選択肢を提示するもの）が紹介されている。
画面ベースとなる基本的な要素でiOS全体として統一的な機能を提供するもの。それぞれの役割とどのようなシーンで利用するといいかは理解しておく。
ActionSheetsとは異なるが、似たような形式で表示されアプリ特有の機能を持たせたUIコンポーネントやポップアップ的にViewを表示する反モーダルなどもよく見かける。ActionSheetsなどの標準のViewの設計を理解することでオリジナルのUIを考える時にも参考になるでしょう。
・Controls
ボタン・スライダー・ラベル・テキストフィールドなどの実際にアクションを行うためのインターフェイるとなるパーツの紹介。
普段見慣れたものでも正しい名称がアプリ開発の際に他のデザイナーやエンジニアとの共通言語になるので正しく覚えておくと良い。
例）
複数のドットで表示位置を示し左右に移動可能なUI → Page Controls
ボタンが複数連なった切り替えのUI → Segmented Controls
iOSデバイスの画面サイズ
iOSデバイスの種類はスマートフォン、タブレット、ウォッチなど。
ここではスマートフォンとタブレットの画面最右について、デザインを考える上で気をつける点について記載。
近年のスマートフォンは9：16のワイドスクリーンがほとんど。
1：2のアスペクト比のスマートフォンもトレンドとなってきている。
最近は画面サイズが大きくなっており、手元（片手）でそう探しやすいかどうかについては気をつけておくべき。（iPhoneSE以外）
・上の方のタッチ操作が難しくなる
・そのためアプリ内で頻繁に利用するアクションや重要なナビゲーションは下部のタップしやすい位置に配置したり、ナビゲーションにTabBarを利用するなどしてアクセスしやすいUIを心がける。
iPhoneの画面サイズは大きく分けて、320、375、414ptに分けられる。
人は画面サイズによって目とディスプレイの距離を自然と変えて見ている。
大きな画面のデバイスのバイアはマージンを少し広めにとったりテキストサイズを大きくして読みやすくしたりしてデザイン的な配慮を加えることが推奨されている。
画面が小さいデバイスではテキストを小さくすることはしない。
注）普段iPhoneXなどの大きな画面サイズ向けのデザインをしているとiPhoneSEで見た場合要素が複雑に見えたり、コンテンツ領域が著しく狭くなってしまうことが起こる。iPhoneSEをサポート対象にするとこめた場合にはそのことにも配慮しながらデザインを検討する。
デザインを検討するときは小さな画面サイズから検討することがおすすめ。
小さな画面で必要最低限の構成要素を検討した上で、広い画面でそれを補う要素を追加すると言う流れが最もスムーズ。
（iPhoneXやPlus、iPadなどの大きな画面にした場合も頭に入れながら進める）
アプリに使用する画像はそれぞれにあった解像度のものを用意する。最近のiPhoneのピクセル密度は2,３倍なので少なくとも3倍サイズの画像を用意する。
iPadはスマートフォンの2倍以上の画面サイズになることもある。
スマートフォンの場合は通常Portrait（縦持ち）で利用することが多いが、iPadの場合はLandscape（横持ち）で利用することが多い。
iPhoneアプリのデザインを元にコンテンツを大きくするような対応ではなく、コンテンツの一覧性を高めたりレイアウトを1カラムにして表示領域とは別に階層的なナビゲーションを表示してアクセシビリティを高めたりするなど、広い画面を活用したデザインにする必要がある。
また、iPadには画面を分割して2つのアプリを表示できるMultitasking機能があるので、サイズごとに断片的に考えるのではなく画面サイズに合わせて柔軟にレイアウトしてくれるAutoLayoutなど使用してどんなサイズにも適応できるような設計をするのがベスト。
中途半端ですが今回はここまで。
この記事が気に入ったらサポートをしてみませんか？