新しくなったMaterial Designのココに注目！最近のUI要素・コンポーネントのデザインや使い方がしっかり学べる
Post on:2018年5月11日
sponsors
先日開催されたGoogle I/O 2018で、Material Designは大きくアップデートされました。
ロードマップによると、今回のアップデートを皮切りに、これからも毎月リリースされ、Material Designはその表現力を高める機能を充実していくとのことです。
Material DesignはGoogleが提供するオープンソースのデザインシステムで、Webサイトやスマホアプリのデザインから実装まで幅広く利用できます。
Google I/O 2018でアナウンスされた大きなポイントは、3点。
- Material Themingはテーマを使用して、開発者がプロダクト全体でユニークなスタイルを一貫して体系的に表現できるようになりました。
- ワークフローを効率化する3つのツールがリリースされました。
Material Theme Editor, Material Design Gallery, Material Icons - コンポーネントのガイドラインで、デザインをカスタマイズできます。
その他の新機能はロードマップにまとめられているので、新しく加わったガイドラインや注目しておきたいドキュメントを紹介します。
トップページでは、Material Designをダイジェスト的に知ることができます。
まずは新コンテンツ、効果的な密度を備えたUIを作成するためのテクニック。
コンテンツが適切な密度でレイアウトされていると、非常に読みやすく、コンテンツの優先順位が判断でき、より多くのコンテンツやアクションが利用できます。
情報量が多いコンテンツ、リストや表やフォームなどでは密度をコントロールすることで、ユーザーは劇的に使いやすくなります。
逆に、アラートやダイアログなど、ユーザーに警告するコンポーネントに密度を適用してしまうと、注意を喚起する能力が低下してしまいます。
密度はタッチ・クリックの操作に対しても慎重にデザインする必要があります。
タッチする要素は小さくても48x48dpのサイズが必要で、要素間は8dpのスペースが必要です。マウスでクリックする要素はそれより小さく、24x24dpのサイズがあればクリックが十分にできます。
テキストの密度も非常に重要です。
行間のスペースであるline-heightを適切にすることで、テキストの可読性は劇的に向上します。line-heightを引き締めたい時は、ベースラインのグリッドに4dpを加えます。
Material Designには、他にもWebサイトやスマホアプリのUIをデザイン・実装する際に役立つノウハウやテクニックが満載です。
ブレイクポイントをどのように定義するか、悩む人も少なくないかもしれません。最近の主流はカラム数を3種類、4カラム・8カラム・12カラムを使用し、スマホの垂直・水平、タブレットの垂直・水平、デスクトップのスクリーンサイズを定義します。
コンポーネントもスクリーンサイズとデバイスタイプに基づいて、デザインのパターンを適合させることができます。単にサイズを変化させるだけでなく、要素の形状やレイアウトも最適化された例が豊富に掲載されています。
Material Designで特徴的なものの一つがカラーです。
Material Designではプライマリとセカンダリのカラーを選択し、それぞれの明度を変化させ、明るい色と暗い色を使用します。
カラーは、UI要素・コンポーネントに一貫性のある意味のある方法で適用されます。
Webサイトやスマホアプリで使用されるさまざまなUI要素・コンポーネントについての説明も充実しています。
そのUI要素の定義をはじめ、適用されるアニメーション、アクション、デザイン、スペックなど、勉強になる情報が満載です。
コンテンツを区切り、グルーピングする区切り線など、見落としがちな要素もしっかりした解説が掲載されています。
区切り線にもさまざまなタイプがあり、適切に使用することで、効果的なUIをデザインできます。
実装では、Android, iOS, Webごとにその実装方法のドキュメントが掲載されています。
ツールも充実しています。
「Color Tool」ではMaterial Designのカラーを簡単に作成して、利用できます。
作成したカラーは、アクセシビリティの確認を忘れないようにしなとですね。
新しくリリースされた「Theme Editor」はSketchのプラグインとして利用でき、Material Designのテーマを作成し、カラー、形、タイポグラフィにスタイルを変更してシンボルライブラリを作成できます。
ギャラリーでは、Material Designの実際の使用例を見ることができるので、インスピレーションが沸いてくると思います。
sponsors
