その他

20140627-material-0

Google I/O 2014で発表された「Android L」は「Material Design」と呼ばれるデザインで作られています。このマテリアルデザインとはどういったものなのか、Googleは開発者向けのページで解説しています。
このページには多くのサンプルもあるので、単純にAndroid Lがどういった見た目や動きになるのか、開発者でなくてもそれを知ることができます。



マテリアルデザイン

まず、Material Designのページより見ることができるAndroid Lのスクリーンショットを見て行きましょう。これだけでもAndroid Lがどういったものになるのか掴めると思います。

コンタクト

20140627-material-3

アプリや状態によってステータスバーの色が変化

マップ・ナビ

20140627-material-4

Gmail

20140627-material-5

右下の+ボタンが印象的です。

カレンダー

20140627-material-6

ずいぶんカラフルになりました。

20140627-material-7

アクションバー部分にも背景画像が適用されており、広く見えます。

テキスト入力

20140627-material-8

キーボードもフラットに。

テキスト選択

20140627-material-9

選択して出てくるポップアップメニューにさらにメニューボタンが表示されていますね。

設定関連

20140627-material-10

20140627-material-11

アルバム

20140627-material-12

音楽プレイヤー

20140627-material-13

カードスタイル

20140627-material-14

1つ気をつけて欲しいのは、これらはあくまでマテリアルデザインの説明だったり例として掲載されたものです。これがそのまま次のGmailアプリのデザインになるかといえば、それはわかりません。

次はマテリアルデザインの、より細かい内容を見ていきます。

アニメーション

マテリアルデザインはフラットデザインですが、そこに影をつけたり、操作に反応するアニメーションを付けることでリアリティを出しています。
これまでも簡単なアニメーションはありましたが、より現実味を持たせるために細かいところまでこだわっています。

次の画像はその例の1つで、左はいい例、右は悪い例です。

20140627-material-1
左:いい例 右:悪い例

悪い例では画面の中央から次の画面が出てきています。
いい例ではタッチしたポイントから飛び出すように次の画面が表示されます。この方が、動きに連続性があるのでユーザーにとってわかりやすいですね。

タイポグラフィ

Android 4.0(Ice Cream Sandwich)の頃から標準フォントとしてRobotoが使われてきました。この最新版がダウンロードできるようになっています。
Typography – Style – Google design guidelines

また、アプリ内でのテキストの使用について、その大きさや色、行間などが細かく決められています。

20140627-material-15

アイコン

20140627-material-16

アイコンについては、以前からガイドラインのようなものはありました。マテリアルデザインでも、どういったものにすべきかが書かれています。

画像

画像の使い方についても1つ1つ例を出しながら解説しています。
この下の画像、どこが違うかわかりますか?

20140627-material-17
左:いい例 右:悪い例

画像の上にかかっているシャドウが、右側のほうが濃くなっています。これでは重すぎるとのことです。

レイアウト

20140627-material-18

マテリアルデザインはフラットですが、そのレイアウトは階層を意識する必要があります。

20140627-material-19

20140627-material-20

その階層ごとにどういったシャドウをかけるのか、数値で示されています。
なるほど、こうしてみるとだんだん浮きあがっているように見えますね。

スイッチ・ボタン類

スライダー

20140627-material-21

20140627-material-22

チェックボックス

20140627-material-23

ラジオボタン

20140627-material-24

スイッチ

20140627-material-25

マテリアルデザインで何を目指すのか

20140627-material-26

ここまで載せてきたもの以外でも、メニュー項目の幅や高さなども細かく数値で定められています。

こういった明確なデザインの指標を示すことで、それに従うだけで統一された美しいデザインができあがります。AppleのiOSのアプリでは昔からこういったガイドラインをまとめており、それが「iOSアプリはUIがいい」と言われる要因の1つになっています。今後はAndroidでもオシャレなアプリが増えてくるのではないでしょうか。

このマテリアルデザインはスマートフォンだけでなく、タブレットやウェブ、そしてAndroid AutoやAndroid Wearといった様々な機器で使われます。こういったサイズがバラバラなものでも、統一したデザインを持つことでより見やすく、よりわかりやすくなります。
今回のGoogle I/OでGoogleは、Androidが単なるスマートフォン向けのOSではなく、あらゆる機器に対応するプラットフォームとすることを示しました。マテリアルデザインは、そのすべてを統括するためのデザインなのでしょう。

関連情報

Introduction – Material Design – Google design guidelines







関連記事




タグ: , , , , ,

※お手持ちの端末や環境によりアプリが利用できない場合があります。
※ご紹介したアプリの内容はレビュー時のバージョンのものです。
※記事および画像の無断転用を禁じます。


 

Facebook

トップヘ戻る