Placeholder Image

字幕表 動画を再生する

  • Hi, I'm Rich Fulcher, a designer and manager

    Google Androidチーム デザイナー兼マネージャーの

  • 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.

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

  • And you want to avoid doing things like,

    それらの マテリアルの内容の構造に

  • artificially creating a seam or step,

    従ったものであるべきで

  • just to give your FAB a place to live.

    単なる飾りではありません

  • Those seam and step relationships

    さらに詳しい内容は Googleのガイドラインで

  • should be about the structure in the inner-relationship

    ご覧いただけます

  • of those pieces of material.

    www.google.com/designまたは

  • Not about just having a decorative point.

    www.google.com/specで

  • If you want to learn more, our guidelines

    マテリアルデザインの ガイドラインのすべてと

  • are a great place to start.

    開始に役立つ 豊富なサンプルをご覧いただけます

  • If you go to www.google.com/design

    さらに ステッカーシートや テンプレート アイコン フォントなど

  • or specifically /spec, you can read about all of our material

    ダウンロード可能なリソースも

  • design guidelines, and you'll see a bunch of examples that

    たくさん用意しています

  • can help you get started with this.

    ご視聴ありがとうございました

  • There are also a ton of resources there waiting

    マテリアルデザインを 是非お楽しみください

  • for you to download them, sticker sheets, templates,

  • icons, even fonts are available for you from that side.

  • Thanks for watching and I hope you

  • have a lot of fun designing with material.

Hi, I'm Rich Fulcher, a designer and manager

Google Androidチーム デザイナー兼マネージャーの

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます