Study Report ２３ / 『Appleのガイドラインから学ぶOS別のデザインテーマの違い』

1day1study

どうもJBです。

今回は、「Appleから学ぶOS別のデザインテーマの違い」についてです。

前回までは、IOSのインターフェイスデザインに関して記事を何個か書かせていただきましたが、今回は、OSの違いによって、デザインのテーマがどう違うのかを見ていきたいと思います。

これを理解することで、アプリ制作が少しやりやすくなると思います。

OSの種類

大きく分けてAppleのOSは４種類あります。
最新機種のディスプレイサイズも表記しておきますが、理解しなくても大丈夫です。

①watchOS ( AppleWatch )
display
Apple Watch series5     324 x 394px ( 40mm) ~ 368 x 448px ( 44mm ) 

②iOS ( iPhone, iPad )display
iPhone11 SE ( 第2 )   1,334 x 750px ( 4.7inch )
iPhone11 Pro             2,436 x 1,125px ( 5.8inch )
iPhone11                     1,792 x 828px ( 6.1inch )
iPhone11 Pro Max     2,688 x 1,242px ( 6.5inch )

iPad ( 第7 )                 2,160 x 1,620px ( 10.2inch )
iPad mini ( 第5 )         2,048 x 1,536px ( 7.9inch )
iPad Air ( 第3 )           2,224 x 1,668px ( 10.5inch )
iPad Pro ( 第2 )          2,388 x 1,668px (11inch )
               ( 第4 )          2,732 x 2,048px ( 12.9inch )

③MacOS ( MacBook, iMac )
display
Mac Book 　      2,560 x 1,600px ( 13.3inch ) ~ 3,072 x 1,920px ( 16inch )
iMac                    1,920 x 1,080px ( 21.5inch )
iMac ( 4K,5K )   4,096 x 2,304px ( 21.5inch )~5,120 x 2,880 ( 27inch )

④tvOS ( AppleTV )
display
画面サイズは家庭により様々

OSによる違い

①watchOS

デザインテーマ
軽量な相互作用
：ユーザーが最も気になるコンテンツや情報に焦点をあて、素早くアクセス＆閉じることのできるようにする。

全体的なデザイン
：ハードとソフトの境界線をぼかし、画面上の操作をシームレスなものとする。
例）他のデバイスとの連携

個人的なコミュニケーション
：UIはユーザーの存在によって調整される。他のデバイスよりもデバイスと関わりを密接なものとする。使用方法を
例）使用方法を個人でアレンジできる。画面のデザインや向きなど

設計原則
一目でわかる
：普通の時計を見るように、watchを継続的に見ている時間はとても短い。その間にユーザーが欲しい情報を提供する必要がある。最新の情報をより見やすく、そしてシンプルにする必要がある。

実用的
：実用的なものは、提供する情報に注意を払い、バックグラウンドタイムに最新の情報を更新し（アプリを開かなくても一般的なタスクを処理する）、そして、ユーザーが情報に簡単にアクセスできるようにする。

レスポンシブ
：ユーザユーザーの操作に応答してアプリが何をしようとしているのかを理解しフィードバックする。画面の起動と読み込みにかける時間を最小限にする必要がある。

まとめ
AppleWatchでは、画面の継続して見る時間が短いことから、ユーザーが欲している情報の「最新の情報」に「素早くアクセス」することができ「伝えたい情報が明確」であることが大切だと感じました。その為に他のデバイスとの互換性や、見せたい情報の取捨選択はとても重要な課題だと思います。

②iOS

デザインテーマ
明快さ
：機能に重点を置き、シンプルでわかりやす表現で伝える。重要なコンテンツにを強調し双方向性を持たせる。

尊敬
：滑らかな動きと鮮明で美しいインターフェイスはコンテンツに良い影響を与えます。また、ベゼルやグラデーション、ドロップシャドウは最小限に抑えることでコンテンツが強調され風通しの良いインターフェイスを実現する。

奥行き
：明確な視覚レイヤーとリアルな動きが階層を形成することでユーザーに活力を与え、理解を容易にすることができる。タッチと発見可能性で、ユーザーの喜びを高めることで機能や追加コンテンツへのアクセスを可能にする。トランジションでコンテンツの切り替え時に奥行きを与え、

設計原則
美的整合性
：アプリの外観と動作と機能と人の感情にどの程度統合されているか。

一貫性
：よく知られた要素を使用することで使い慣れた標準とパラダイムを提供し、人々の期待通りの機能と動作を提供する。

直接操作
：直接操作をすることで、自分の行動の結果をすぐに見ることができる。そうすることで、人々を引きつけ理解を容易にすることができます。

フィードバック
：動作の証明や、現状の進行度や結果をユーザーに提供し続けることで、アクションの結果を明確にすることができる。
例）エレベーターが今どの階にいるのかを数字が光ることで教えてくれる。

メタファー
：スキューモフィズム。現実世界の要素に似せることで、操作を直感的にイメージし理解することができる。
例）デスクトップとは、机の上に並べられた書類や道具を元にイメージされた。それがデスクトップメタファーである。

ユーザーコントロール
：OSは様々なアクションを支援してくれるが、基本的には、人がコントロールしているということを忘れてはいけない。行動の抑制や自動化も必要な要素ではあるが、自分で操作しているという感覚を持たせることも必要である。

まとめ
小さな領域で様々なアプリや機能を使用するデバイスでは、平面ではなく立体的な動きと、奥の広がりを意識することで小さな領域でも大きな領域での使用感を得ることができるのだと思いました。

③MacOS

デザインテーマ
フレキシブル
：タスクに対しての操作をユーザーがカスタマイズし柔軟にタスクに対処できるように様々な変更や方法を可能にする。
例）画面サイズの変更や表示非表示、再配置など

広大
：幅広いサイズの追加ディスプレイに対応する必要がある。幅広いインターフェースコンポーネントを利用し、フルスクリーンモードのような没入型機能をサポートすることで価値を提供することができる。

できる
：ハードとソフト両方に優れている為、シンプルでニッチなユーザーの幅広いニーズに対応するような、機能とワークフローを提供することが可能です。

集中
：現在のタスクに焦点を当てて集中できるようにデザインされている。
例）視覚的なコントラスト、半透明、大きなドロップシャドウによりアクティブと非アクティブのウィンドウを区別することができる。

まとめ
大きな画面領域とカスタマイズ性に優れた機能を持つので、ユーザーが使いやすいように自分なりにアレンジすることができる。また、集中する為の細かいデザインにより、さらに操作環境をよくしてくれる。とても作業向きなプラットフォームと言えるでしょう。

④tvOS

デザインテーマ
接続されている
晴れ
没入型

AppleTVについての解説なので、今回は説明を省きます。

学び

それぞれのOSでそれぞれの特徴がしっかりと見えました。
画面領域の大きさや使用用途に応じてそれにあったデザインテーマと機能でそれぞれの価値を見出していると感じました。
Apple watchでは、最小限でどれだけの情報と操作性を提供できるか。
iPhoneでは小さい領域でどれだけ空間的な広がりを持たせれるか。
Macでは、様々な領域サイズをユーザーがカスタマイズできるように。
デバイスの使用環境を理解し、それにあった価値提供していると改めて思いました。

一言まとめ

「Appleはデバイスを経由してユーザーの行動を補助し生活をより豊かにする。」

以上

最後まで読んでいただきありがとうございました。

詳細はこちら↓

拝見記事

https://developer.apple.com/design/human-interface-guidelines/tvos/overview/themes/