Material Design 2月アップデート
みなさん、こんにちは。
今回は2月のマテリアルデザインのアップデートについてまとめました。
内容は以下です。
- アプリのカラーパレットのカスタマイズの例追加
- ダイアログのエラー、テキストセレクション、テキストフィールドラベルの色の仕様追加
- ステッカーシートにテキストフィールドの色、日付のピッカー、ボトムツールバー追加（データはPhotoshop、Illustrator、Sketchで用意されています）
カラーパレットの選択
カラーパレットはブランディングに適したカスタムパレットを使うことで、アプリのカラーパレットが決まります。例えば、単色なのか、白黒なのか、フルカラーなのか。マテリアルデザインカラーパレットには沢山の色が用意されているので、それぞれのUI要素のコントラストがしっかりだせます。
マテリアルデザインカラーパレットの使用
カラースキームがまだないアプリは、マテリアルデザインカラーパレットから色を選ぶことが可能です。プライマリーカラーを決めたらそのパレット内から１〜３色まで選び、アクセントとなるセカンダリーカラーを1色選びます。この下の画像では、紫をプライマリーカラーとして使用していて、緑をアクセントとなるセカンダリーカラーとして使用しています。
プライマリーカラー
プライマリーカラーは、一番広く使われる色です。下の画像では、青をプライマリーカラーとしてヘッダーに使用しています。
プライマリーカラーの選び方ですが、下の画像のように500と書かれた一番上の色をプライマリーカラーに選ぶのをGoogleはおすすめしています。ページやパーツによっては、この色だけではコントラストがはっきりしない場合があるので、あと2色同じパレット内から色を選ぶことが可能です。
セカンダリーカラー
セカンダリーカラーは、関連したアクションや情報を示す時に使われます。こちらもプライマリーカラーと同じように、必要に応じて使い分けできるよう同じパレット内から明るい色と暗い色を選ぶことが可能です。
アクセントカラー
アクセントカラーはフローティングアクションボタンやインタラクティブな要素、または以下の場所に使われます。
- テキストフィールドとカーソル
- テキストセレクション
- プログレスバー
- コントロール、ボタン、スライダー
- リンク
アルターネイティブアクセントカラー（代わりのアクセントカラー）
もし選んだアクセントカラーがプライマリーカラーの背景に対して明るすぎたり暗すぎた場合には、代わりのアクセントカラーを選びしっかりコントラストを出します。下の画像の右側の例では、アクセントカラーは背景と十分なコントラストがとれていないので、この色の使用は好ましくないです。十分なコントラストが取れるよう、アクセントカラーの代わりとなる色を明度を調整して選びます。
カラースペック
ダイアログエラー
ダイアログアクションに、デフォルトのシステムカラーを指定しても良いが、アクセントカラーを使うとダイアログのコンテンツとダイアログアクションの区別がはっきりつくようになります。
テキストセレクション
テキストセレクションには、アクセントカラーを選びます。その時、背景色と文の色のコントラストがあり、読みやすい色であることを確かめます。あるいは、背景色を使うのではなく、アウトライン化、テキストの加工などで表現することも可能です。
テキストフィールドラベル
テキストフィールドも同様にカラーパレットを反映させます。テキストフィールドとテキストカーソルには、アクセントカラーを選び、エラーには、赤やオレンジなどの暖色を選びます。
ステッカーシートとアイコン
今回のアップデートで、ステッカーシートに暗い背景の場合のステータスバー、アップバー、ボタンツールバー、カード、ドロップダウンメニュー、サーチ欄、ディバイダー、サイドナビ、ダイアログ、フローティングアクションボタンなどの例が追加されました。
以上が2月のアップデートとなります。