どうもこんにちはJBです。
先日のGoogle I/Oで新たなデザインガイドラインが発表されましたよっ、ということで、「Material Design」についてあれこれ書いてみたいと思います。

３つの原則とか、大体のことはクラスメソッドさんの記事に書いてあります。

本当に助かります。ありがとうございます。
現実世界のメタファーを使って、ユーザーに対してアクションを分かりやすく提示する、明確な意図を持ってデザイン設計する、という感じみたいです。

全体的にアフォーダンスを意識しています。ちなみにアフォーダンスというのは…

環境が動物に対して与える「意味」のことである。
Wikipedia-アフォーダンス

とのこと。難しくて分からない。これが元々の意味らしいですが…デザインの分野では、

モノに備わった、ヒトが知覚できる「行為の可能性」という意味でアフォーダンスを用いた。
Wikipedia-アフォーダンス

こちらのことを指す様ですよ。「こういう物はこうすればこういう風に動作するだろう」ということを、これまでの体験からすんなり知覚できるようにする手がかり…みたいな感じですかね？違ったらすみません…。
かつてのAppleが推していたスキューモーフィズムも現実世界を模したアフォーダンスでしたが、今回のGoogleが推しているアフォーダンスは、もっと「染み付いた意識下」にほんのりアプローチする感じのスタンスだなーと感じました。
さて、私が「Material Design」で特にアフォーダンスに関わってくるかしらーと感じた部分は、「紙とインクを意識したメタファー」と「アニメーション」です。

「紙とインク」を意識したメタファー

「印刷物の様なデザイン」という意味はもちろんですが、「紙が重なっている様な感じ」を表現しているところが、アフォーダンス重視のデザインっぽいですね。

紙の重なりを表す、Z軸の概念

Z軸の概念を加えることで「オブジェクトの重なり」を明示的に表現します。

ユーザー側に、情報や機能の階層をきちんと把握してもらうことを狙っている模様。

重なりは、シャドウで表現します。Z軸的に上にいけば行くほど、シャドウが大きく、ぼかしが多くかかります。Z軸階層は、z-depthで指定する模様。

紙を意識したマテリアルなので、そんなゴリゴリの立体感を出す訳ではなさそうです。あくまでアフォーダンスで理解を助ける様な感じですね。

紙っぽいパーツ

象徴的なのが「カードデザイン」かなーと思います。デフォルトコンポーネントに新しく追加される様です。
同じ性質だけど、中身が異なるコンテンツを並べたりする時に有効とのこと。まさにカード。テキスト量に合わせて可変してくれたりするみたいです。DribbbleなどのUIコンセプトなんかでも、よく見かけますよね！

また、レイアウト原則でも、折り目（seam）で同階層の領域を分けたり、階層(step)で独立したコンポーネントの重なりを表現したりと、まさに紙が重なった感じをデバイスで表現するように書かれています。
他、「Floating Action」といった新たなパーツが加わっています。サークル型の紙を模したアクションボタンで、独立した動きをするものとして配置されるそう。機能的にしっかり理解して配置しないと、おかしなことになりそうなので注意が必要です。（詳しくはPromoted Actions -Patterns- Google design guidelines）「お飾りでつけちゃだめだよ！」と言われてますし…。

現実世界に溢れている紙媒体を模すと、確かに情報を認識しやすいですね！独立した内容の物は別紙にしたり、折って領域分けたり、表紙が一番上で中身は下で…新たなページは上に重ねて見るよねー…とか。あくまで情報把握を助けるレベルでとどまっているところが、今までと違うところでしょうかね。

アニメーション

いままでのAndroidは、デフォルトが比較的直線チックなアニメーションでしたが…。カスタムアニメーション用のAPIも出てやりやすくなる様ですよ！イエーァァア！！
このアニメーションも、現実の物理的世界を踏襲させます。確かに、現実世界と違う動きを提示されたらアフォーダンスにならないですしね…。詳しくは実際に見てみた方が分かりやすいと思います。

もはや直線の加速はNGの模様です。やはり人間はヌルヌルアニメーションの方が気持ちよく感じるんですね…

意味を持ったアニメーション設計

色々できるからこそ、動きにこだわらねばならないです。例えば…

• 動きの連続性

  行ったり戻ったりと画面遷移する際のモーション設定などですね。遷移や導線が分かる様なアニメーションを求められています。コンテンツのあり方によって、スライドイン／アウトやフェード、エクスパンドなどきちんと意味を持って適応させていかねばいけません。

• 情報ヒエラルキーに基づいたタイミング

  ヒエラルキーの高いものから順番に表示することで、ユーザーに情報の階層などを暗に示すことができます。

• 一貫性のある動き

  同じ様な要素には同じ様な動きをさせてあげなければいけません。アフォーダンスに不必要な複雑アニメーションは、ユーザーの混乱を招くので…。

• アクション起点を意識したアニメーション

  レスポンスアニメーションに関してですが、タップした箇所がアニメーション起点になる…と言った感じ。確かにこれ、例を見ると「ああー」ってなります。

まあ、詳しくはGoogle様の例を見ていただくとして…

どれも徹底してアフォーダンスにこだわってますね！ただ色々動かせる様になったよ！という訳ではないので、制作側の細かい設計が必要になってきます。

全体的に見てみて…

ざっと目を通すと、「おお…何だか厳しくなったな…」という印象です。
LayoutのMetrics and Keylineとかを見ると、余白設定とか文字の行間とかすごい考えられてるなぁ…と思ってしまいます。

他にも、「カードは２dpの角丸」とか「使用する画像としてストックフォトは好ましくない」とか、あら、そこまで言うの？というところもあったりなかったり…。

ともあれ、以前よりもかなりユーザビリティを意識している内容であることは確かです。これからはアフォーダンスを考えたアプリ設計がますます重要になってくると感じました！
それではー！