[&] Google SPAN - Material Design Panel Nick Butcher, Dave Chiu, Yuin Chien, Sharon Correa, Bethany Fong

Google SPAN
Material Design Panel
Nick Butcher, Dave Chiu, Yuin Chien, Sharon Correa, Bethany Fon

material design
3つのオフィスで働いています。
Dave: Dave Chiu @scoobyfoo
私はシニアインタラクションデザイナー
グーグルで3年半、Android の Gmail やコアデザインチームで、
マテリアルデザイン言語の開発に携わっていました
さまざまなスケールがあります。商品、エコシステム、
それによってデザインのユニークな見方がえることができたとおもいます。

デザインシステムをマテリアルデザイン、
インタフェースを作るものも Material と言っています。
マテリアルというのは三次元のスペース、ライティング、
影がはいることの一貫性で、関係性を理解できる、
一貫性のあるところで、インタラクションできるのです。
関連し、連動しているのです。

メニュー、カード、責任をもって、
グーグル外のデザイナーも、
エコシステムの中の一貫性は、
階層と、モーションに力を置いていています。
デザインのガイダンスの基礎を提供しています。

重要なことにフォーカスできるように。
コンポジション、構成要素が包括的にあって、
コンテンツ、ブランドのモーションの関係、
影があるのは、恣意的に行っているわけではありません。
デザイナー同士の対話ができるためのもの。
より良いコラボレーションができます。
すぐに協業できます。

Yuin Chien @yuinchien
わたしは、デザイナーをしています。５年まえ、NYオフィスです。
ラリーペイジがCEOになった時期でした。
マテリアルデザインを統合し、デザインのガイドラインを作り、
チームが成長し、マテリアルデザインとなりまいた。
デザインスペック、グーグルフォントに貢献しています。
興味深いと思われるのは、プロダクトデザインにどう適用するのか？
グーグルフォントが事例になっています。

オープンソースのWebフォントから始まり、
Googleフォントの再構築を行い、
プロジェクトをデザインしています。
Icon
サンセリフ、大文字のFに
マテリアルのアイコンフォント、
Color
明るい赤を選び
プロダクト機能の機能と関連づけられています。
赤として、ビジュアル要素としてあくしょんを意味します。
Girid
グリッドデザイン、で一貫したデザイン、
いろいろなスクリーンサイズに買えることができます。
Components は、
美しい部品、ブロックのように素早く組み合わせて使うことができます。
かなり沢山のテストをして、今の形になっています。
ユーザーの動きから考えています。
モーションは、重要な意味を果たしています。
Sharon Correa @Charoncorrea

デジタルデザインはモーションがデザインのプロセスに重要になっている。
４つの原則についてまとめてみました。
カーブ、動き、コレオグラフィー、これらのガイダンスを紹介しています。

Principles
動くものであり、反応するもの

Material
現実の世界からインスピレーションを、摩擦、
自発的に動くものでは無い。
マテリアルを意識しており、周りにあるもの、
マテリアルについて意志、ユーザーの意志に反応し、
意図的なものでもある。

Choreography は、
ユーザーの考えを動きにもっていくもの。
動きが無いと関係性がわかりません。
ちょっとアニメーションがはいると、何がトリガーで何になるのか、
ユーザーをアプリの間、じゃまされたと思わずに、動き、

レスポンシブに反応し、タップによって、動くことがわかる。
階層がわかる、弧を描くようなモーション
認識する、どこかを持ち上げて、広がることで、
同じパスラインで動いている。
意図的である、共有要素を使って、
ユーザーが見るべきところに連れていってくれます。

３つの異なるアプリを紹介します。
アプリでのユーザーの体験を一体で、関連づけることができます。

モーションをどうコードに適用しているのか。

Nick Butcher
デザイナー、エンジニアです。ロンドンで働いています。
DevRel 5年働いてきました。
去年は新しいデザインリレーションのチーム、
外部のデザイナーと一緒にはたらきます。
両方のチームで共通しているのは、
外部の人達と働く、フィードバックをもらって、質問に応えて、
マテリアルデザインを作れるようにしています。
ブログや、会議で情報共有しています。

Show dont tell という話しです。
plaidapp.io
github.com/nickbuthcer/plaid
すべての素材は github で公開しています。
重要な原則について、カバーしていますので、
モーションの使い方に触れています。
実際のアプリを作る時に、インタラクションするものを
作ることができます。
原則が理解してもらえて、サポートできるようにしていきます。
それから、トランジションについて触れていきます。

標準のスクリーン、
すぐにアニメーション、シャドウがでてきて、インクスプラッシュ
すぐにフィードバックがあって、リスとアイテムが出てきて、
プロファイル写真がトランジションして、ナチュラルな弧を描くようになっています。
そうして、ユーザーがうまくスムーズ、シームレスに動けるようになっていあす。
トラジションを使ったもの、
非常に一貫性を持っています。
アプリケーションのどこに居るのかが明確です。
元のところに戻ることができます。

これがトランジションの例なのですが、
どうコーディングすれば良いのか？
共有する上で、開発者がどう作っていくのか？
インタラクションが重要。
自然で理解しやすい、本能的にできるものが
ユーザーフレンドリーに。
皆さんの支援ができれば良いと思っています。

共通点、つがう点を
これらの要素を繋いでいるものは？

コラボレーションだと思います。
一緒に行う、
いったんわかれても、協業できる、一貫性を持たせることができる。
いろいろな要素ができるのですが、コラボできる。

マテリアルデザインが基盤です。
マテリアルデザインはシステムでも使われています。
どう作られていて、進化する中で、
さまざまな法則があります。
デザインに関わる部分、技術的な部分。

マテリアルデザインは、
グリッドカラーなど、ここでは、基礎となるルールがある。
UIの基本、実際の世界を統治しているもの、
そこで、それが基盤となっています。
それによって、整合性が保たれている。
インタラクションについても、最終的につくるものも、包括的で、
最終形、
全体をみなが一貫性を保っていける。

あるいは、基盤がありますが、マテリアルデザインと、
良いデジタルデザインとは違いますか？
デジタルデザイナーが意思決定していくのが良いこと？

ぐっとデザインというのは、法則をどう実装していくのか？
ランダムよりは一貫性を持たせた方が良く、
理解を深めて行けるのです。
マテリアル言語が定義さてていて、基礎になって、
法則をもっていることで、なにがはまってなにがはまらないののが解るので、
貢献様相となり、まとまりとなっている。

グッドデザインというのは、もちろんいいもので、
つかいやすいものですが、
どう適用するのか？いいデザインはまた別のレイヤー
他でもどう活用できるのかはまた別のこと。

コンポーネント、意識決定のところ、
マテリアルデザインによって、時間に余裕ができて、より対話ができる。
どういった対話ができる？
どういった対話が生まれることをのぞむのか？

ユーザーのニーズが何なのか？適切に対応する。
標準を適応するだけじゃなくて、
さまざまな文化が、あるのか、使かたも世界中で違うので、
世界中でスケールするように提供できればと思っている。

プロダクトデザインに対応しているから、
まあ、ある意味、ユーザーがどう見るのかをテストしています。
ボタンが何なのかわからないと言われることがあります。
何度もテストしなければいけません。
マテリアルデザインに対応することで、
美しく、モーションも良い方法で埋め込まれている。
レイアウトも、ビジュアル的にも、
システム側と協業することを楽しんでいます。
どうしたらユニークになるのか？どうイノベーションがあるのか？

抽象的なアイデアを現実化しなければいけない。
どこでも機能するもの、デザイナーの対象は何なのか、
ニーズがなんなのかで工夫をこらして、デザインすることが重要。

水のなかの魚のようなイメージ、
なかなか説明しにくい。
水の説明、ルールを説明しなければいけない。

デザインシステムを作ることと、製品を作ることは違うのか？
考え方の違いは？

もっと、大きな範囲で見ています。
凄く遠くから見る感じです。
このガイドラインがあるから、これを適応するということではなく、
いろいろ選んで使っていく感じです。
意識しながら、最終的なストーリーを考えながらつくっています。

このブランドだけ、この製品だけではなく、
そういう観点で考えてデザインしています。

いつも、ソリューションを作ろう、問題解決するよう、
皆に勧められるよう、特定の事象だけなのかを
頭の中で考えています。
もっと話すべきで、広めるべきものなのか、今回のものなのか。

プロセスについて。
どうやって新しいアイデアが現実になるのか？

モーション関係のこと、いろんなアイデアは最初の頃に生まれます。
使えるのかどうか、考えながら、
他のデザインと差別化するのがモーションで、
違うことがやりたいと思っている。

技術的な制限はあるが、インタラクション、モーションデザインで、
良い緊張が生まれています。
ビジュアルからくることもあるし、インタラクションから
新しいことが生まれること、
現実も、技術的に可能かどうかも常に考えています。
できないことばかりではなく、やりとりが常に発生しています。

デザインプロセス、
ボードがあって、そこでいろんなモックアップを用意する感じですが、
アイデアを出し合って、うまくいかないものを選んでいく。
デザイナーもいれば、モーションデザイナーもいれば、
みんながそれぞれいろんなアイデアを出していくのです。
話しをして、皆が意見をだして貢献していくのです。
良いアイデアがそこから広がっていきます。

そういったところから外れて話しができる、必要な会話ができるところから、
アイデアが現実化していく。
スケッチしたり、やりとりをしたりして、アイデアが生まれてくるのは素晴らしい。
いろんなプロセスから生まれてくる。

それぞれ綺麗なスクリーンがでていますが、詳細なデザインを作るわけではないといっていますが、
どんな詳細を取り入てていますか？

イージングのカーブを細かく、キーフレームだけではなく、
300msec の間にトランジションを行わなければいけない、
メカニカルではなく、オーガニックにしたい。

なぜこれがこのように動くのかを考えています。
とくていのサーフェイス上で動くには理由があって、
どう動くのかのロジックを考えます。

デザインは砲塔に細かいところが需要で、シンプルさ、
かならず理由があるはずです。色にも意味、関連する意味があるハズです。
一貫しなければいけません。
なんで、これは、こうなっているのか？
ランダムなのか？　調整されているのか？
その一貫性が、どういう意思決定なのか、意見を持つべきだと思います。

細かいのは間の部分、一つから二つのところに移動するときには、
何か意味がある。チャンスをつかって、ユーザーを連れていく。
テクノロジーを使い易くする。「間」にはチャンスがあって、
ユーザーにいろいろ体験させることができると思います。