【UIデザイン】デザインシステムの原則からUIデザインを考える（Material Design 3）
デザインシステムの原則からUIデザインを考える（Material Design 3）
スマホアプリやWebサイトを開発する時に、ユーザーが使いやすいようにUIデザインを考える必要があります。
みなさんはUIデザインを考える時にどんなことを基準に考えていますか？
デザインシステムにはユーザーの使いやすさについて原則が示されていて、原則に則ったUIデザインが行われています。
この記事の目的は、デザインシステムの原則を知り、UIデザインを考える基準を増やすことです。
デザインシステムの原則とは
世の中に公開されているデザインシステムを確認すると、多くのデザインシステムが原則を定めていました。
原則にはプロダクトやサービスの軸となることが記載されていて、提供する体験に統一感を持たせることを目的にしているようです。
また、デザインシステムについて詳しく説明されている書籍[1]には以下のように記されています。
重要なのは、原則がどれほど効果的にデザイン思想を統一し、クリエイティブ面の方向性をチームに広められるかです。本書で言うところのデザイン原則とは、チームにとっての優れたデザインの本質をとらえた共有のガイドラインであり、同時に優れたデザインの作成方法に関する指南書です。
Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド | アラ・コルマトヴァ 著, 佐藤伸哉 監訳
原則はデザインシステムを構成する重要な要素のひとつで、デザインの方向性を示しています。
定めた原則に則りUIデザインを行うことで、チームが同じ方向を向いて一貫性のある開発を実現することができるようです。
つまり、原則に基づいたUIデザインは、基準や方向性から乖離していないか明確にします。
Material Design 3の原則
今回、確認するMaterial Design 3はドキュメントやデザインリソース、開発に必要なライブラリが公開されているデザインシステムです。
Material Design 3では、Foundationsという項目で、原則が定められています。
Foundations inform the basis of any great user interface, from accessibility standards to essential patterns for layout and interaction.
訳）アクセシビリティの基準から、レイアウトやインタラクションに不可欠なパターンまで、あらゆる優れたユーザーインターフェースの基礎となる情報を提供します。
Material Design 3とは
Material Design 3（MD3）は、Googleが開発したデザインシステムです。
AndroidやGmailなどのGoogleアプリで利用されていて、モバイル、デスクトップ、ウェブなど、さまざまなデバイスに対応しています。
Accessibility
人間の身体的な特徴を理解したうえで画面設計を行うことについて記載されています。
余分な設計を不要とし、ユーザーが対象を理解し操作するコストを減らすことが可能です。
小さなボタンは、（当然のことながら）操作しづらいので、十分な大きさを確保したボタンが操作しやすいと示されています。[2]
Content design
UIに使用するテキストは誰でも理解できるテキストにすると記載されています。
テキストで何かを理解させるためには、画像に対して適切な代替テキストを使用したり、ユーザーが使用する言語の違いに気をつけたりすることが必要です。
他にも、人の目線が移動する経路を理解することで、コンテンツの構成やレイアウトをわかりやすくできると示されています。[3]
Adaptive design
アダプティブデザインとは、さまざまなデバイスや画面サイズに対応したデザインのことです。
端末によって、ディスプレイサイズも異なりますし、アプリの表示に使用できる領域が異なる場合もあります。
たとえば、iPhoneのHome Indicatorや折りたたみ式デバイスなどは、端末ごとのディスプレイ仕様に留意する必要があります。
モバイル端末ではひとつのカラムで表示しますが、横幅の広いデスクトップ端末などでは、複数のカラムでコンテンツを表示する場合があります。画面遷移や操作に応じて、注目するアイテムの表示サイズを切り替えることでユーザーが素早く理解できることを示しています。[4]
Customizing Material
さまざまなプロダクトでブランドカラーやコンセプトカラーを、取り入れたいケースがあるかと思います。
Material Design 3では、開発者が任意のカスタマイズを可能にするデザインであることが示されています。
Material Design 3ではColor Systemが用意されていて、強調色やユーザーの注意を促す警戒色の利用方法が記載されています。
このColor schemesは、開発者が任意のカラーで再マッピングすることが可能になっているので、ブランドイメージやユーザーの設定が反映しつつ、視認性が下がることを防ぎながらプロダクトに反映できることが示されています。[5]
Design tokens
デザイントークンは、Material Designのカラーやフォントなどの値を定義したものです。
デザイントークンを定義することで、プロダクト全体の統一感を実現し、エラーメッセージなど注意を促す色を統一するなど、ユーザーにわかりやすいUIを提供できることを示しています。
Material Design 3では、3種類のデザイントークンが用意されています。
このデザイントークンを任意の値に更新することで、プロダクト全体でUI設計を更新したり、部分的に値を変更することを可能にしています。[6]
Interaction states
Interaction statesとは、ユーザーが要素に触れる時や、操作する時に変化する要素の状態のことです。
ユーザーの操作に応じて状態が変化することで、プロダクトの動作状況をユーザー視覚的に伝達できます。
ユーザーに視覚的に状態を伝えることで、ユーザーは手を動かさずに目的を達成するための操作を選択できます。
インタラクションデザインを知る
ソフトウェアの画面で状態変化を利用することで、人間が操作しやすいデザインを実現します。
このアプローチ方法はインタラクションデザインと呼ばれていて、実現することでユーザーの体験を向上させることができます。
IxD プラクティスの中心にあるのは、「適切なインタラクティブ要素の選択によって人間関係の感覚を高める」という概念です。
Material Design 3では選択している状態か、押されている状態か、ドラッグしている状態か、ボタンの状態を表現する方法が示されています。[7]
他にも、操作の可否を示す状態もあるので、視覚的に動作状況を伝達するUIデザインを実現しています。
デザインシステムの原則を知り、UIデザインを考える基準を増やせたか
この記事では、デザインシステムの原則を確認して、その原則がUIデザインの基準になっていることを確認しました。
デザインシステムの原則に則ったUIデザインは、基準が明らかです。
「使いやすさ」について、原則を基にしたチームの協議や主観に頼らない検討を実現します。
今回は、Material Design 3を確認しましたが、他にも公開されているデザインシステムが多くあります。
ぜひ、他のデザインシステムも確認し、どのような基準でUIデザインが行われているか考えてみましょう💡
ユーザーが使いやすいプロダクト開発を実現するために、ぜひデザインシステムの原則を参考にしてみてください。
🌱 オマケ
今回、デザインシステムの原則を確認しましたが、他にもUIデザインの判断基準にできる分野がありました。
HCI（ヒューマン・コンピューター・インタラクション）について、参考になる記事があったのでオススメです。
Discussion