見出し画像

今更？いや今から！Googleマテリアルデザインを読み解く#1

潮汐(うしお)

少し期間が空いてしまいましたが、今回からはGoogleのマテリアルデザインを読み解きながら、前回までのAppleのガイドラインと比較したりして書いて行きたいと思います！

それでは早速行きましょう！

こんな人におすすめ

  • Googleのマテリアルデザインを読み直したい

  • マテリアルデザインの他の見解をしりたい

  • デザイナーの卵を応援したい(頑張ります！)

目次はこちら



アクセシビリティとは

アクセシビリティとは、すべての人が製品やサービスを利用できるようにするための設計原則。

目的:
視覚障害、聴覚障害、運動障害、認知障害などの障害を持つユーザーを含む、すべてのユーザーが製品を使いやすく、快適に利用できるようにすること

マテリアルデザインのアクセシビリティ

マテリアルデザインは、アクセシビリティをデフォルトの設計値として採用しています。
そのため、マテリアルコンポーネントは、包括的な製品設計を支援しています。

アクセシビリティの原則

  1. 個人を尊重する: すべてのユーザーのニーズを満たすために、デフォルトのエクスペリエンスにカスタマイズ可能な機能を導入します。

→例）テキストのサイズや色を変更できるようにすることで、視覚障害を持つユーザーも製品を使いやすくすることができます

2.後ではなく前に学ぶ: ソリューションを定義する前に、さまざまな能力や人生経験を持つユーザーのニーズを理解することに時間を投資します。

→例）ユーザー調査やユーザーテストを行うことで、ユーザーのニーズを把握することができます。

3.出発点としての要件: WCAG によって確立された最小要件を満たすことを目標にしながら、アクセシビリティ標準を創造的に適用します。

→例）音声読み上げに対応することで、聴覚障害を持つユーザーも製品を使いやすくすることができます

ユーザー補助技術とレイアウト・タイポグラフィー

ユーザー補助技術=キーボード、スクリーンリーダー、点字ディスプレイなど、障害を持つ方がテクノロジーを利用しやすくするためのツールです。

重要ポイント:

  • ユーザー補助技術の主な種類: キーボード、スクリーンリーダー、スイッチ入力などがあります。

  • 階層: ナビゲーションが簡単で、ユーザーがアプリ内の位置と重要な情報を理解できるように、視覚的・テキスト的な手がかり (色、形、テキスト、動き) を活用します。


  • タッチとポインターのターゲットサイズ: 小さなタッチターゲットに苦労するユーザーのために、ターゲットサイズを48dp以上にすることを推奨します。


  • ターゲット間隔: ターゲット間に8dp以上のスペースを確保することで、情報密度と使いやすさのバランスを図ります。


  • フォーカス順序: 視覚レイアウトに沿った入力フォーカス順序を設定し、重要な要素から重要でない要素へと移動できるようにします。


  • 書き方: スクリーンリーダーが情報を正しく読み上げるために、アクセシビリティテキスト (説明的なラベル) と代替テキスト (画像の説明) を適切に記述します。


  • 必須要素と非必須要素: 視覚的に重要な要素はコントラスト比を確保し、色覚障害などのユーザーにも配慮します。


色とコントラスト

重要なポイント:

  • 色は、アプリのムード、トーン、重要な情報を伝えるのに役立ちます。主要色、サブ色、アクセント色をアクセシビリティを考慮して選択しましょう。


  • 十分なコントラストは、視覚障害のあるユーザーがアプリを利用しやすくします。テキストや要素間の適切なコントラスト比を維持しましょう。


  • W3Cは、本文テキストと画像テキストのコントラスト比として3:1以上を推奨しています。


  • ボタンコンテナなど一部の非テキスト要素は、背景とのコントラスト比が3:1以上である必要があります。


  • 密集した要素 (ボタングループなど) は、背景とのコントラスト比が3:1必要ですが、独立した要素 (FABなど) はそれほど厳密なコントラスト比は必要ありません。


  • ユーザーがテキストサイズを拡大できるように設計しましょう。UIは最低200%のテキスト拡大に対応する必要があります。


テキストの拡大

  • テキストの拡大は、視覚障害のあるユーザーや大きな文字を好むユーザーのために重要です。


  • デバイスのOS設定やアプリ内オプションでテキストサイズを調整できるようにしましょう。


  • テキストサイズを拡大しても、要素のレイアウトや機能は維持する必要があります。


  • デバイスOSでテキストの拡大が制御できない場合は、1.5倍や2倍などの倍率を使ってユーザーがテキストサイズを調整できるようにしましょう。


  • テキスト以外のコンポーネント (プログレスバー、チェックボックス、ラジオボタンなど) は、テキストの拡大の影響を受けません。


テキスト拡大時のデザインの注意点:

  • テキストを含まないコンポーネントのサイズを変更しない

  • コンテナサイズを大きくする、レイアウトを調整する、スクロールを有効にする、ツールチップを追加するなど、テキストの重なり、切り取り、省略を防ぐ方法を取り入れる


まとめと比較

今回はGoogleのマテリアルデザインとAppleのデザインシステムの｢アクセシビリティ」を比較します！

構造

  • マテリアルデザインでは、ランドマークと見出しの役割を定義するために、ARIA（Accessible Rich Internet Applications）の役割を使用します。

  • Appleのデザインシステムでは、ランドマークと見出しの役割を定義するために、独自の役割を使用します。


GoogleのマテリアルデザインとAppleのデザインシステムは、どちらもアクセシビリティを重視したデザインシステムです。しかし、両者にはいくつかの表記の違いがあります。

フロー

  • マテリアルデザインでは、タブストップの順序を定義するために、ARIAのrole属性を使用します。

  • Appleのデザインシステムでは、タブストップの順序を定義するために、独自のrole属性を使用します。

要素

マテリアルデザインでは、ラベルの付け方について、以下のようなガイドラインを定めています。

  • ラベルは、要素の意味や目的を簡潔に説明します。

  • ラベルには、要素の役割は含めません。

  • 装飾的な要素には、ラベルは必要ありません。


Appleのデザインシステムでは、ラベルの付け方について、以下のようなガイドラインを定めています。

  • ラベルは、要素の意味や目的を明確に説明します。

  • ラベルには、要素の役割を含めることができます。

  • 装飾的な要素には、ラベルは必要ありません

Googleと比べてAppleは独自のルールや役割があることが分かりました。
これはGoogle(Android)がオープンソースであることが大きく起因しています。
以下オープンソースについてまとめたものです。

Android オープンソース プロジェクト（AOSP）

Androidの開発にかかわる関係者、プロセス、ソースコードのことを指します。
AOSPは、Googleが中心となり開発を進めているオープンソースプロジェクトです。オープンソースプロジェクトとしてのAndroidの目標は、「あるプレイヤーが他のプレイヤーの技術革新を制限したり制御したりすることを防ぐ」ことにあります。
AOSPを通じて公開されたAndroidは、AOSP上で改良・改善され、レベルアップ（マイナーバージョンアップ）がさらに行われます。
オープンソースとは、ソフトウェアを構成しているプログラム「ソースコード」を、無償で一般公開することです。そうすることで誰でもそのソフトウェアの改良や再配布が行なえるようになります。

Appleはブランドとして確立し、Googleは全体でレベルアップを目指す。どちらも目的があってデザインや機能性の向上を推進していることがわかりました。ただデザインはきちんとそれぞれの考えや画面を考慮して作る必要がありますね！

今日はこの辺で、お疲れ様でした！

この記事が気に入ったらサポートをしてみませんか？