Material DesignとHuman Interface Guidelinesについて

スマホアプリのデザインにはGoogleが作ったMaterial DesignとAppleが作ったHuman Interface Guidelineがあります。両者のデザインの概要と違いについて、この記事で説明していきたいと思います。

Material design

Material Designは、Googleが構築した新しいUIデザインフレームワークです。

現実世界の素材をメタファーとして、物理的な法則に則った表現を原則として設計されている。

デザイン原則

マテリアルをメタファーとする(Material is the metaphor)
- オブジェクトの表示や影の付け方、モーションの反映について、物理的な世界とそのテクスチャを基にしている
大胆に、生き生きと、意図的に(Bold, graphic, intentional)
- 重要なコンテンツやユーザーが選択したコンテンツは画面いっぱいに表示するなど大胆に強調して表示する
- 見出しなどに適切なタイポグラフィや強調表現を用いる
モーションに意味がある(Motion provides meaning)
- ユーザー操作に対してユーザーの注目を集め、体験の連続性を感じさせる適切なモーションをつける
柔軟に対応できる基礎(Flexible foundation)
- マテリアル(素材)という概念やレイアウトのルール、タイポグラフィ、色、モーションといった基礎的な原則を元にUIコンポーネントを構成しているので、カスタマイズしてブランド表現ができる
クロスプラットフォーム
- Android、iOS、Flutter、及びWebで共通のコンポーネントを使用することができる

メタファーの基本は紙とインク

紙について
- ボタンやTabBar(Bottom navigation)、画像や情報を表示するカードなどは厚さ1dpの紙オブジェクトでできているというイメージ
- アプリのデザインはリアルの紙同様、UIコンポーネントを複数重ねたり、配置することで構成される(z軸を持った空間)
- 現実とは異なり、Material Designの紙オブジェクトは伸縮可能で、複数の神のオブジェクトを結合することができる
インクについて
- 紙オブジェクト状に表示される文字や色、画像などはインクによってかかれているイメージ
- 紙オブジェクトに応じて、それに合わせて移動する
- 紙オブジェクトをはみ出してインクが表示されることはない
- 現実と異なり、インクの色は自由に変更でき、紙オブジェクト上で伸縮したりうごかしたりすることができる

Motion

有益で意味があるように(Infrmative)
- 要素間のの位置関係や階層関係を表したり、その要素が操作可能であることを表す
- アクションがあったときインタラクションをわかりやすく示す
注目させる(Focused)
- 不要な部分に気を散らさないように使用し、重要な部分に注目させるようにする
表現力豊かに(Expressive)
- 階層を示す
- 状態を示す
- ユーザーにわかりやすく学習させる
- キャラクター付けをする

Human Interface Guidelines

Human Interface GuideLinesは、Appleがインターフェースデザインの設計思想やデザイン原則をまとめたデザインのガイドラインです。

iOSのUIコンポーネントのグラフィックはコンテンツを第一として、ナビゲーションなどの操作を補佐するUIコンポーネントが必要以上に目立たないようにするという思想からできている。Material Desingnと比較して、フラットデザインと呼ばれることもある。

デザイン原則

目的にあった美的整合性(Aethetic Integrity)
- デザインはアプリの目的・コンテンツに沿った整合性のあるものにすべき
一貫性のあるデザイン(Consistency)
- アイコンやテキスト、トランジションなどのデザイン要素は常に一貫性を保つべき
直接的な操作感(Direct Manipulation)
- 直接コンテンツを操作できるようにしてユーザーが自然とアクションできるようにすべき
フィードバックの提供(Feedback)
- 画面の変化や操作方法、コンテンツの関係性などをユーザーが正しく認識し、理解できるようにすべき
メタファーの利用(Metaphors)
- アプリ内のオブジェクトやアクションに対して、ユーザーが経験したことのあるメタファーを用いることで、学習の敷居を下げるべき
ユーザーの操作・意思決定を第一にする(User Control)
- ユーザーの操作を第一にして、望ましくない結果(確認や警告アラート)は最小限にするべき

UIコンポーネント

iOSのUIコンポーネントは以下の３つで構成されている

Bars：画面の階層を案内したり画面に対するアクションを提示したり、アプリ内の様々なセクションに素早く切り替えるためのBar
- 具体例）NavigationBar、TabBar
Views：項目が複数並ぶViewやタイル状に並べたViewのほかにも、アラートダイアログやアクションの選択肢を提示するViewなど、画面のベースとなる基本的な要素
- 具体例）TableView、CollectionView、ActionSheets
Controls：実際にアクションを行うためのインターフェースとなる細かいパーツがある。
- 具体例）ボタン、スライダー、ラベル、テキストフィールド

iOSとAndroid、アプリの違いと注意点

iOSとAndroidではデザインの思想的な部分だけでなく、OSレベルでの機能的な差異があるので、デザインや開発にあたって、注意するポイントがあります。

バックボタンと戻るための操作
- iOSアプリでは前の画面に戻る時、左上にあるナビゲーションバーのバックボタンをタップして戻れるようにする
- Androidアプリでは前の画面に戻る時、左上のバックボタンとは別にOSレベルでの機能として、画面の下部にバックボタンがある
パーミッションの取り方
- iOSアプリでは特定の機能を使用する直前の段階でユーザーに許可を求めるダイアログを表示する
- Androidアプリではアプリをダウンロードした段階で許可を得たことになるパーミッション(Normalパーミッション)と、iOSと同じように個別でダイアログを表示して許可をとる必要のあるパーミッション(Dangerousパーミッション)の２種類がある
アプリが対象とする機種のOSバージョン
- iOSのユーザーは比較的新しいOSバージョンであることが多いが、Androidはかなり古いOSのデバイスを使ってるユーザーも多い

AndroidとiOSのどちらを先にリリースすべきか？

一昔前までiPhoneがソフトウェア的にもハードウェア的にも完成度が高く、ユーザーが多かったです。

近年、Androidのソフトウェアとハードウェアもかなり完成度が上がってきたのと、iOSデバイスが高価になってきたことから、Androidのシェアが伸びてきています。

現在、iOSとAndroidではマーケットの状況が異なります。

(出典：https://shiftasia.com/ja/column/2022年6月スマートフォンosシェア/#:~:text=日本では引き続きiOSが,が拡大しています。)

年代別では、10代〜20代といった若い世代が特にiPhoneを利用しており、30代以上がAndroidを利用している傾向にあります。

(出典：https://k-tai.watch.impress.co.jp/docs/news/1409116.html#:~:text=年代別にみると、iPhone,57.0％となった。)

このことから、アプリをどういった層に向けて提供したいかによってどちらのOSを選択するかは変わりそうです。

また、初期の段階はクロスプラットフォーム(React, Flutterなど)で開発して両方のアプリを提供するのも１つの手です。

まとめ

Androidエンジニアの僕は、iOSのHuman Interface Designについてなかなか触れる機会がなかったので、調べてまとめてみました。デザインのコンセプトや思想の違いについて知れたことで、普段触れているAndroidとiOSのUIの違いについて理解が深まりました。
また、最近、Material DesignのホームページがMaterial Design 2からMaterial Design 3に変わったので、その違いも調べてまとめてみたいと思います。

参考