on the Android design team here at Google.

リッチ・フルチャーです

At this year's Google I/O conference

今年の Google I/Oカンファレンスでは

we introduced material design.

マテリアルデザインを発表しました

A new visual language for creating

文字表現 スケール 色 ポジショニングによって

bold graphic interfaces driven by typography, scale, color,

大胆な グラフィックインターフェースを作成する

and position.

新しいビジュアル言語です

For me, one of the most exciting things about material design

マテリアルデザインの 素晴らしい点の1つは

is how it takes these classic principles of print design

プリントデザインの基本法則 という伝統的なものを

and brings them to life.

最新の形で蘇らせたことです

The materials take energy from the user, from their finger,

マウスクリックやタッチといった ユーザーの指先による操作から

from their mouse click, their touch and they take that energy

マテリアルに生命を吹き込み そのエネルギーを

and use it to transform and to animate.

転換して表現します

Today, I'm going to talk about how

今日は バーチャルな世界での

these virtual materials of paper and ink

紙やインクという仮想物質が 現実の物質界におけるそれらより

pack much more power than their real world

強力な能力を発揮できる

meatspace counterparts.

仕組みについて説明します

Now every pixel drawn by an app is

アプリに描かれるすべてのピクセルは

a dot of ink on a piece of paper.

一枚の紙の上の 一滴のインクです

Paper has no color, but ink can be any color,

紙は白く インクは何色にもなり得ます

and ink coloring is how all content is displayed,

インクに色を付けると それがアプリのコントロールや

whether that's the controls of your app,

画像または再生中のビデオなど

an image, or even a video that's playing.

すべての コンテンツの色になります

Paper can be a variety of widths, the x-axis,

紙のサイズは X軸の幅とY軸の高さを

and heights, the y-axis.

あらゆる大きさに設定できます

It can even fill the entire display, such

画面全体を塗りつぶして

that you can't see the edges of that paper,

紙の端が見えないようにしたり

or it could shrink down to just be the size of a single button,

ボタン1つの大きさまで 紙のサイズを縮めたりもできます

you know, no larger than a 48 by 48 dpi square touch target

ボタンの大きさは 48x48dpi以下の四角形か

or standard target sizes.

標準のターゲットサイズになります

Ink doesn't have any of those restrictions.

インクには そのような制限は一切ありません

It can be any size, so long as it fits within that paper.

紙の範囲内であれば どんな大きさにもできます

You've got to have something to actually apply that ink to

ただし インクを見えるようにするには

so that it can be seen.

インクを適用する対象物が必要です

Paper has an absolute fixed thickness of 1 dpi.

紙には 1dpiという 固定された厚みがあります

That's equivalent to a 35 pound weight piece of paper,

これは紙の厚みでいうと 35ポンドに相当しますので

so kind of a light card stock.

薄めのカードストックくらいです

Now when you add ink, you're not changing that thickness.

インクを追加しても 紙の厚みは変わりません

This isn't a kind of paint that's

ここでのインクは 何層も塗り重ねて

building up layer and layer and layer and making it

厚みが増すということはありません

thicker and thicker.

紙は常に1dpiであり ゼロになることもありません

The paper itself is always that 1 dpi thick, it's never zero.

それはホログラムです

That would be a hologram.

そして 空洞でもありません 物質です

And this isn't hollow, this is material.

立体感というのが

That sense of tactility is vitally

このシステムではきわめて重要です

important to the system.

形については 紙は四角形である必要があります

In terms of shapes, paper wants to be a rounded rectangle,

長方形や正方形

whether that's a rectangle, or a square,

円形も 非常に丸い丸い四角形の

or even a circle, which is just a really, really,

1つです

really rounded rectangle.

三角形にはできません

It doesn't want to be a triangle.

星などの デコボコの形にもできませんし

It doesn't want to be a concave shape, like a star,

アプリのアイコンの形にもできません

or the shape of your app icon.

インクの場合は このような制限はありません

Now ink doesn't have these restrictions.

どんな形にもでき

It can be any shape and it can cover

どんな形にも 塗りつぶすことができます

all those things you want it to be.

以上が基本原則ですが これらのマテリアルを

Those are the basic principles, but how

より複雑な構造の中で どのようにして表示したり

do all these materials live and move

動かしたりできるのでしょうか

within a more complex structure.

そこで Z軸となる 奥行きの活用について

Well, we need to start by talking about depth,

お話しましょう

and that means embracing the z-axis.

すべての端末には 物理的なZ軸の奥行きがあります

Now every device has a physical z-depth.

ハンドヘルド端末の場合は 前面のガラスから

For a handheld device, it's that distance

手のひらに触れる 端末の背面までの距離が

between the glass on the front and the back of the device

奥行きです

that rests on the palm of your hand.

この奥行きによって 紙の挙動が決まるため

Now that depth controls how paper can behave,

紙にとって 端末の奥行きは重要です

so paper wants to respect that devices depth.

紙がひっくり返ることは ありません

It doesn't want to be able to flip over

紙をひっくり返そうとすると

because if it were to do a move like that well,

紙が動いたときに 端末の前面のガラスか

that paper is going to start to move

背面の金属に ぶつかることになります

it's going to bonk against that glass on the front

紙を ひっくり返せるようにしてしまうと

of the device or against the metal on the back.

紙が端末の前面と 背面の細い隙間の中にある

You can't execute that move and maintain that sense

という感覚を維持できなくなります

for the user that it's inside that device.

これが 紙のフリップを採用しない理由です

Just between those front back slots.

紙には影があり

That's why we don't do paper flips.

この影は Z軸上の位置によって決まります

When we have paper it casts a shadow

通常 紙は四角形で表示されます

and that shadow is based on its position within z.

今こうやって わたしの手をカメラの前で

Now paper is generally presented as square to the user.

前後させているように

Just like I'm moving my hand back and forth in front

紙もユーザーに対して 同様の動きを見せます

the camera here.

2枚の紙が 少し重なっている場合

Paper moves to the users eye in the same fashion.

このように影を落とします

Now paper will cast a shadow when two pieces of paper

前の紙には 光源が当たりますが

slightly overlap, like that.

後ろの紙には すべての光源が当たらないため

One in front has a light source in front of it,

後ろに影が映ることになります

the paper behind it isn't getting all of that,

紙は四角形であるべきで

so it's getting a shadow on the back.

影はインクとして 描かれるのではなく

We like to keep the paper square.

紙に印刷されたもので あるべきです

We like to make sure that the shadow isn't something that's

これは システムの光源モデルがもたらす

being drawn as ink, that's being printed on the paper.

位置関係によって生じます

It comes about because of the physical relationship,

紙は固体です

because of the lighting model that the system gives you.

ユーザーが紙をタッチするとき

When we have paper, it's solid.

指が紙を 通り抜けることはありません

When the user reaches out and touches it,

単純 に触れることができるだけです

the user can never press through the paper.

ただし 触れたときの反応は 何パターンかあります

It just kind of makes contact and it's there.

1つは ユーザーの指が紙に近づいて

Now we do respond to the user in a couple of ways though.

タッチすると 紙が少し持ち上がって

One is that as the user approaches the paper

指に吸い付くように見えます

and they make that touch, the paper

ユーザーの指が ガラスに触れると

will rise to kind of meet them.

今度は紙が 指に向かって動くことで

So there's this illusion of the glass here, your finger comes

吸い付くような 錯覚を起こせます

down on the glass and the paper completes that motion by coming

たとえば こう考えてみてください

forward to meet the user's finger.

指先を 水面に向けて下ろしていくと

You might think about it as imagine your finger

近づくにつれ水面に反映して

kind of pointing down on a reflecting surface of water

最後には指と水が触れ合います

and as you get closer and closer it sees it's reflection,

指先が水面に触れたときに

and those two touch together.

水の表面張力が壊れて

The way that ink responds is like the ripples that

円形の美しい さざ波が映し出されますが

would happen on the water, as I hit

インクの反応は このさざ波のようなものです

that surface I break the surface tension of the water,

このように

I get this pleasant circular rippling that occurs out of it.

ユーザーが 紙に触れたということだけでなく

That's what we do in the ink to kind of communicate that

紙の上の どの要素をタッチしたのかを

not just that you've made contact with the paper,

インクを通して表現しています

but which of the particular elements, ink elements

モーションは 重要な要素の連続性を

on the paper you've touched.

確立して 強調することで実現します

Now motion is all about establishing and emphasizing

紙は 3つの軸上のどこでも移動できます

the continuity of important elements,

X Y Zのどの軸上でも 動かすことができます

and the paper to move across any of those three axes.

さらにマテリアルは 移動できるだけではありません

We can move along x, it can move along y, even along the z.

この不思議な操作感の要因の1つは マテリアルが変化する様子

Now material can do more than move.

にあります

Part of the magic of the experience comes from a way

それは 従来の宇宙の物理法則の枠に

that materials can change.

とらわれない画期的な方法です

The ways that they're not bound by these boring physical laws

紙は X軸とY軸ともにサイズ変更できます

of the known universe.

インクは 紙と同じ動きをする必要はなく

So paper can change its size in both the x and y position.

インク独自の動きが可能です

And ink can do its own thing, it doesn't

たとえば 紙のサイズを変更して

have to do exactly what the papers doing.

インクのサイズは変えずに 新たにできた空白を活用して

So you can do things like to have a piece of paper resize,

リフローさせたりできます

and have the ink remain the same size but just re-flow to take

あるいは 紙と同じ比率で インクも拡大させたり

advantage of that new spacious real estate.

紙のサイズはそのままで インクだけを拡大したり

Or you could expand and have the ink expand at the same rate.

縮小したりでき 紙とインクは

Or you could leave the paper at a fixed size

完全に独立しています

and have the ink just grow or shrink within that.

紙の幅と高さは 個別に変更できます

They're completely independent.

対称である必要はなく 非対称でも構いません

Now you can change the width and height of paper differently.

これは変換の際に 非常に重要なので

They don't have to be symmetric, they can be asymmetric.

非対称を強くおすすめします

And that's really important for when we do transformations.

この例では

We strongly encourage this.

縦長のオブジェクトは より長く見え

So in the example over here that you're seeing,

横長のオブジェクトは より幅広く見えます

you are seeing tall objects be made to feel taller.

なぜ非対称が 重要なのかというと

Your seeing wide objects made more broad.

位置は変わらず サイズが変わるものと

Now why is this asymmetry important?

Z軸上で 動いているものの違いを

Well it helps the user understand

ユーザーが 捉えやすくするためです

the difference between something that's resizing and staying

Z軸上で動く場合は 近づくにつれ

in that place, and something that's moving within z.

縦横が同じ比率で変化するため 対称であるといえます

If I move within z, that's kind of the same as symmetric scale,

非対称にサイズを変える場合は

as you get closer is growing in both aspects at the same rate.

そのコンテンツが 実際は同じZレベルにあると

By doing re-sizes asymmetrically,

ユーザーに伝えることができます

we're letting the user know OK, that content is actually

動きによって ユーザーに 伝わる内容が変わります。

staying up at that same z level.

紙は 形を変えることができますが

The movement is a different signal to them.

開始時と終了時の形は

Now paper can change between its shapes,

前述の 基本の四角形であることが

but it does like to kind of start at and return

理想です

to those core shapes we talked about

X軸で変化する紙のように

before, those rounded rectangles.

紙を分割したり 結合したりでき

And like some kind of x mutant paper,

切り離したものを 寄せ集めて

paper can split or can join, those materials can

元の形に戻すことができます

heal together, they can regenerate,

紙の作成や破棄には 常にモーションが付きます

they can kind of connect back up.

紙は別々の方法で 表示したり消したりできます

Creating or destroying paper is always associated with motion.

その動きは独立しており

Now paper can enter and exit in different ways.

スタイルは主に3つあります

Those can be independent.

1つの場所で紙を作成して 同じ場所で紙を破棄したり

There's three main styles.

表示したのとは別の方法で 消すこともできます

You could just kind of create paper in place

あるいは 紙のクローンを 作成することも可能です

and destroy it in place, you can have it enter one way

1枚目の紙の クローンである2枚目は

and exit a different way, or you can actually

移動させることができ

have paper kind of clone, so there's

1枚目の上に重ねると 元の1枚の紙に

one piece of paper clones and creates a second one which

戻ります

can then move, and then it can rest back down

このような複数の紙の 動き方については

and heal and just become one piece of paper again.

2種類の並べ方があります

So how do multiple pieces of paper interact with each other?

1つ目は シームと呼ばれるもので

There's two key types of arrangements.

2枚の紙の幅が 完全に一致する場合

The first are seams, which are created

共通する辺が くっついた状態になります

when two pieces of paper share the full width of an edge.

この場合 2枚の紙は同時に動きます

It's like they're stitched together at a common side.

この2枚はくっついているため 1枚の紙として動きます

Now when papers meet at a seam and joins in that way,

2つ目はステップです

it moves together.

2枚の紙が Z軸上の異なる位置にあり

They're actually connected so they'll move as one.

重なっている場合 前述したように影が落とされるのが

The other is a step.

ステップです

When we have two pieces of paper with different z positions that

この2枚の紙に 関係性はありませんので

overlap and you get that shadow we talked about, then

それぞれ 独立した動きが可能です

you've created a step.

ステップがよく用いられるのは ツールバーで

These two papers don't have a relationship to each other.

1枚の大きな紙の上に ステップがあり

So they can move independently one of the other.

ステップの下の紙を スライドできるような場合です

A very common way that we'll see a step

これを少し変化させることもできます

is for a toolbar, where you have a step above a larger, usually

ツールバーにもう1枚の紙を シームとしてつなぎあわせ

a larger, sheet of paper the can slide under it.

ツールバーを Z軸上で持ち上げます

Now there are variants to this.

下の紙の動きを表現するために 浮かび上がらせて

You might start with the toolbar and the other piece of paper

スペースを作るのです

seamed together and have the toolbar just rise within z,

またはその逆で Z軸で後ろに動かして

just as it needs to accommodate the motion underneath,

他方の紙が上に来るようにして 下の紙を隠すこともできます

so it could lift to make room.

さらには 2枚をつなげたままにして

Or you can reverse that, it could move backwards in z

下の紙が ツールバーを押し上げて

and the other piece of paper could come up and cover it.

画面の外に出し 下の紙のみを

Or finally, you could just kind of leave them seamed together.

画面に残すこともできます

The other piece of paper pushes a toolbar up

紙が ツールバーの上を通過する場合は

and it just pops off and then you only

ツールバーから 紙に付けられたアクションを

see the other piece of paper present.

分割してしまわないように

When paper passes over a toolbar,

気を付けてください

it's important that you not split

必ずそのアクションが どちらかの紙に

any of the actions the toolbar might

残るようにしてください

contain with a piece of paper.

他の紙の場合と同様に

You want to make sure that the actions are

ツールバーの サイズも変更できます

on one side or the other.

はじめは縦長の状態で ユーザーのスクロールに合わせて

And one last note about toolbars,

短くしていったり その逆にすることもできます

just like any piece of paper, they can resize.

覚えておいていただきたいのは

So they can start tall and as the user

ツールバーが その2つの位置にきっちりと

scrolls they can shrink up, or you can reverse that motion

止まるようにすることです

as they move the other way.

真ん中で止まってしまうのではなく

The one thing you'll want to keep in mind

小さいサイズから大きいサイズ またはその逆に

is that it's best have the toolbar snap between those two

明確に動くようにします

positions.

紙の もう1つの特徴的要素は

Instead of just getting stuck in that middle ground

フローティングアクションボタンです

between them, you want to kind of crisply move

これをFABと呼びます

to the smaller or larger sizes.

シームになっている紙の 両方の内容に関連する場合は

Another signature element in paper

FABはシームの上に またがるように表示でき

is the floating action button.

または ステップになっている紙 つまりZ軸でより前にある紙に

We nickname it the FAB.

関連する場合は ステップの上に またがることができます

A FAB can straddle a seam if it relates to the content of both

必ずしもFABは

of the pieces of paper that are meeting at that seam,

何かにまたがるわけではありません

or it can straddle a step if it relates to the piece of paper

シームやステップでない場合もあります

that's creating the step, the one that's more forward in z.

ただの1枚の 紙の上に置いたり

Now, you don't have to put in a FAB,

邪魔にならないよう 角に置いたり

a straddle point like that, it doesn't

紙の上ならどこにでも配置できます

have to be on a seam or step.

FABを置くためだけに

It could just be on a piece of paper,

シームやステップを作るのは

conveniently tucked away in a corner, or really anywhere

避けてください

within that paper surface.

シームやステップの関係性は