UIデザイナーが理解すべきプラットフォーム原則とは

本記事はUIデザイナーがプラットフォーム原則を理解し学習する必要性と意義についてまとめたものです。初学者には勉強の仕方・勉強する意義自体がわかりにくい領域だと思うので、その助けになれば幸いです。

プラットフォーム原則とは

デジタルプロダクトの世界においては、OSなどのプラットフォームでベンダーが公式に推奨しているルールなどについて指すことが多いです。アプリケーショを作成する上でのUIコンポーネントや挙動、その他の標準仕様についてをまとめたものです。Appleが提供している Human Interface Guideline やGoogleの Material Design などがこれにあたります。

Human Interface Guidelines | Apple Developer Documentation

Material Design

プラットフォーム原則を学習する意義

UIデザイナー、UXデザイナー、デジタルプロダクトデザイナーなどと呼ばれる人たちに求められるスキルは多岐に渡り、ただアプリケーションの画面を形にすることだけだと力不足と扱われやすいです。情報設計、ライティング、戦略、調査分析、認知心理学、、、等々、上げるとキリは無いですが、その中でも、作成するアプリケーションのプラットフォーム原則を理解していることはとても重要です。以下のような理由が挙げられます。

コストに大きく影響する

標準仕様・コンポーネントに準拠していれば開発上もデフォルトのSDKやコンポーネントを使用できますが、オリジナルのUIはフルスクラッチで作ることが必要になったりします。標準のUIを無視して好き勝手に作成したり、必要以上に凝りすぎてしまったデザインは意味のない手間をエンジニアに強要することになります。

たとえばiOSアプリでもよく見かけるハンバーガーメニューは公式UIでは無いため、専用に実装することになります。可能であればTabBarやその他の解決方法を模索すべきです。

逆にAndroidの例としては、iOSのように背景ぼかしができない制約があったりします。（厳密にはがんばってレンダリング処理を自作すればできるかもしれませんが、ゲームアプリなどで無い限り現実的で無いでしょう。）

使い勝手に影響する

iOSユーザーはiOSアプリの挙動に、AndroidユーザーはAndroidの挙動に慣れています。ガチガチに標準パーツだけを使えば必ずユーザビリティが向上するわけでもありませんが、デザイナーが独自のUIを発明する場合は必要性や効果をよく検討すべきです。

デザイン効率が上がる

デザイン作業で無駄に悩むことがだいぶ減り、時間短縮にもつながります。どういう時どのコンポーネントを使うのか、が理解できていればチームでのコミュニケーションでも齟齬がなくなります。

勉強の仕方

とりあえずは公式ドキュメントを読まないと話になりません。モバイルアプリのUIデザイナーなのであれば、Human Interface Guideline や Material Design を必ず一度は通しで読むべきですし、デザイン作成時に何度でも参照しに行くことになります。両方ともに英語ですが、かなり平易でわかりやすいので、Google翻訳を使いながらでも十分読めるます。

Human Interface Guideline

Human Interface Guidelines | Apple Developer Documentation

Appleが提供するデバイスそれぞれについて、UIのルールや挙動についてまとめたものです。

ただし、Material Designほど標準コンポーネントについて詳しく触れていません。開発者と密にコミュニケーションをとって学習したり、理想を言えばデザイナーも一度Xcodeを触ってどんなコンポーネントが用意されているか見てみると良いでしょう。

Material Design

Material Design

Google が提供する、現実世界の物理法則を元に構築されたデザインシステムのガイドラインです。勘違いされやすいですが「Androidのデザインルール」でなく、WebやiOS等での利用も想定されています。

コンポーネントのルールやドキュメントが厳密な分、ガイドラインに則ったデザインがしやすく、またその分似たようなデザインになりがちです。それを解決するために Material Themeing というガイドラインも提供されています。

Sketch ライブラリ

iOS、Androidそれぞれに公式のSketchライブラリが提供されています。(AndroidはSketchプラグインから作成する必要があります。) それらのシンボル構造や命名規則を研究してみるのもかなり理解につながります。
- https://developer.apple.com/design/resources/
- https://material.io/resources/theme-editor/

なによりも大事なのは理解しようとする姿勢

プラットフォーム原則は当然、iOSやAndroidに限られた話ではありません。大事なのは一時的な知識ではなく、作成するプロダクトのプラットフォームを理解しようとする姿勢です。たとえば、Mac OS、Windows、ブラウザ、カーナビゲーション、TVアプリ、ゲーム等々、場合に応じてルールや使用文脈は大きく変わります。その際に、

▶ 公式の情報・ドキュメントを読むこと

▶ 細かくエンジニアとコミュニケーションを取り、開発上の制約をできるだけ知ること

▶ 実際のプラットフォームに触れ、理解すること

▶ PC画面上でのデザインだけではなく、実機（もしくはそれに近い環境）で逐次デザインを確認すること

等の姿勢が重要になってきます。また、プラットフォーム原則はアップデートされていくものであり、逐次公式の情報を確認することが必須です。例えばHIGやMaterial Designであれば、以下のページから更新情報を確認できます。定期的に見に行くのが安全でしょう。
- https://developer.apple.com/design/whats-new/
- https://material.io/whats-new/

▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼

以上です。駆け足で書いた記事なので、細かいところは不親切になっているかもしれません。私自身勉強中の身でありますので、補足や訂正等ありましたらご指摘いただけると助かります。