みなさんこんにちは。
UIUXデザイナーのa.nです。
今年ももうすぐ終わりますね。みなさん、いかがお過ごしでしょうか？
本年は私がデザインを担当した弊社のモバイル版がリリースされました。
その際に参考にしたデザインシステム、Material DesignとHuman Interface Guidelinesについて見ていきたいと思います。
1.デザインシステムとは
デザインシステムは、良いプロダクトを実現するために「ルール」と「ツール」を定めたものです。
これにはコードスニペットと開発リソースが含まれ、デザイナーだけでなく、開発者も参考にできるものです。
デザインシステムは、コードスニペットと開発リソースが含まれておりデザイナーだけではなく、開発者も参考にすることができるものです。
代表的なデザインシステムにはAdobe SpectrumやIBM Design Language、Microsoft Designがありますが、今回はOSのデファクトスタンダードであるMaterial DesignとHuman Interface Guidelinesに焦点を当ててみましょう。
2. Material Designとは
2014年にGoogleが開発したデザインシステムです。
物理法則に即したオブジェクトや動きをデザインに取り入れ、操作感が手で直接触れているかのような感覚を生み出しています。
3つの原則があります。
3つの原則
1.「紙」と「インク」
ヘッダー、ボタン、カード型のリストなどの要素は「紙」と例えられます。
2.奥行きと重なり
各要素はレイヤー状に重なっており、上下の重なり順が存在しています。
3.自然なモーション
タップした場所を中心に波紋が広がったり、掴んだ要素が浮いたりと、直感でわかりやすいモーションをします。
現実世界に即した、まるで質量があるかのような動きが特徴となっています。
3.Human Interface Guidelinesとは
Appleが提供するデザインシステムで、アプリケーション開発者向けに一連の推奨事項をまとめたものです。
3つのテーマと6つの原則があります。
3つのテーマ
1.明瞭 (Clarity)
読みやすいテキスト、わかりやすいアイコン、控えめな装飾、意味のある動作、コンテンツ間の適切な余白 (Negative Space)、視認しやすい色やフォントを用いて、コンテンツや機能を明確に表現します。
2.控えめ (Deference)
ユーザーインターフェイスは控えめで、コンテンツを主役にし、枠線やグラデーションを最小限に抑えます。
3.奥行き (Depth)
情報の階層構造を奥行きを用いて表現し、ユーザーにわかりやすくします。
タッチ可能かどうかの判断のしやすさ（発見可能性）は、コンテクストを見失うことなく機能やコンテンツへアクセスすることを可能にします。
6つの原則
1.美的完成度 (Aesthetic Integrity)
アプリの外見はそのアプリの目的や機能と、調和の取れたものにします。
ゲーム等のアプリは世界観をだし、ユーザを楽しませ、引き込ませるようなデザイン、実用性のあるアプリはユーザがコンテンツ以外に気の散らないデザインにします。
2.一貫性 (Consistency)
標準コンポーネント等の利用でシステム全体の一貫性を保つことで、機能の理解を助けます。
3.直接操作 (Direct Manipulation)
画面上のコンテンツをタップやジェスチャーなどで直接操作させることで、操作の理解を促します。
4.フィードバック (Feedback)
ユーザが操作した結果何が起きたのかを伝え返すことは重要です。
アクションに対してユーザが認識可能な反応を返し、正しい結果情報を伝えます。
5.比喩の使用 (Metaphors)
アプリケーションで用いられるオブジェクトやアクションに対してユーザーが経験したことのある比喩（メタファー）を用いることで、学習の敷居を下げます。
6.ユーザーによる制御 (User Control)
ユーザーからアプリケーションを制御する権利を奪ってはいけません。
操作の意思決定はユーザーが判断します。
以上今回はデザインシステムのMaterial Design, Human Interface Guidelinesの概要についてお伝えしました。
次回はこの2つのデザインシステムの違いについてお伝えしようと思います！
それでは良いお年をお過ごしください。
