【レポート】I/O Extended 2018 Shibuya (Material Design Only!!)
こんにちは。ノゾエ(＠conoito)です。
先日、Goodpatchさま主催の勉強会にお邪魔してきました。
概要
何についての勉強会？
Material Designについて学ぶための勉強会。
特に、最近行われたGoogle I/O 2018に参加した方々による、そこで発表された新しい情報をベースにしたもの。
Material Designとは？
デバイスがどれだけ多様化しても対応できるように作られた、全デバイスに適用できる統合フレームワーク。Google社が作ったよ！
勉強会、実は初参加です。
一般枠応募で無事当選を果たしました。わーい！うれしい！
書かないと忘れてしまうので、自分の勉強用にnote書きますが、雑です。
妄言が入っていたりするかもしれないです。間違っていたらコメントよりこっそり教えてください。
「Material update」-Google合同会社│鈴木 拓生さん @taquo
Googleの方です。パワーを感じる〜。当日のスライドはありません🙄
そもそもMaterial DesignはGoogleの社内用に作られたもので、
でもそのおかげで、Material Designを存分に活かしたアプリはもれなくGoogleっぽいアプリになってしまう…
でも、このたびMaterial Themingが発表されて、デザイナーのクリエイティビティをより活かせるよう、より自由度高くフレームワークを活かすことができるようになりました。とのこと。
▼どう新しくなったの？がなんとなくわかる動画
とはいえ、自由度の上がったMaterial Themingを存分に活かせよ！ではなく、Material Themingをそれぞれ適したものにカスタマイズしていこうねという感じらしいです。
現に、Material Design Awards 2017で取り上げられているアプリたちは、Material Designに従順というより、うまく生かして上手にカスタマイズしているものたちが多いそう。
車輪の再開発を私たちが行わなくていいように、もっと他のことにクリエイティビティを発揮できるように、Material Designがあるんだよ〜とのことでした。
とはいえ常に新しくアップデートされるMaterial Designを把握するの大変😇精進します
「UIデザイナーのためのMaterial Designの理解と実践」- 株式会社グッドパッチ│蔡 漢翔さん @hanhsiang
ショートカットキーの使い魔すぎて、隣で見ててよくわからないらしいです。（懇親会で主催者のKeitaさんとお話した時に聞いた）
Material Designをどう捉えて活用すればよいか？をものすごくわかりやすく噛み砕いて説明してもらいました。実務に活かせる実用編も！
特にMaterial Designの理解フェーズ（P.1〜P.17）のお話の中で「なるほど！」と思ったのが、
Material＝デザインシステム
というお話。
「でもデザインシステムって何だ…？🤔」てなると思うのですが、料理のシーンで上手に例えられていて
シェフが、キッチンや調理器具、レシピ、食材を使って、料理を作るとしたら、MaterialDesignは料理教室的な立ち位置にあって
料理教室で、料理の基礎さえわかれば、誰でも自分の家に美味しい料理を作ることができる。
これをちゃんと置き換えると
デザイナー/デベロッパが、デザインシステムを使って、アプリ/サイトを作るとして、
MaterialDesignで、アプリ/サイトの組み立ての基礎さえわかれば、誰でも自分のサービスで素敵なアプリを作ることができる
との解釈。
だから、料理教室で教わったことを大いに活かせばおいしいごはんができるように、MaterialDesignを大いに活かせば素敵なアプリが作れる！わーい！
MaterialDesignがどんな風に使われたくて存在してるのかめっちゃ理解したお話でした。
この概念を元に、実務に活かすとこうなった！の話を、Sketchを使ったDEMOと共に聞くこともできました。（P.18〜）
当日のスライド：https://speakerdeck.com/hanhsiang/uidezainafalsetamefalsematerial-designfalseli-jie-toshi-jian
「Material Theming対応の前に知っておきたい、エンジニア側の対応コスト」-株式会社ノハナ│瀬戸 優之さん @seto_hi
デザイナー：Material Themingよさみ〜！早速つくろう！エンジニアさ〜ん！対応してください！
エンジニア：えっ
という、エンジニアさんによる、Material Themingに係る対応コストのお話です。
発表されたばかりの現段階で、既にすごい数のissueが上がっておりアプデ予定もりもりなので、安定を待たず早速全部対応というのはエンジニアさん的にも厳しそう。
ですがその中でもBottom NavigationやBottom App Barなど、すぐ使えるコンポーネントもあるらしいです。（P.25〜P.27）
アップデートに注目しつつ、準備をしておいて、会社としてベストなタイミングで対応を狙うことをおすすめするとのことでした。
当日のスライド：https://speakerdeck.com/seto_hi/material-themingdui-ying-falseqian-ni-zhi-tuteokitai-enziniace-falsedui-ying-kosuto
「Material Design の設計思想を探る」-株式会社グッドパッチ│丸 怜里さん @usagimaruma
iOSのエンジニアさんが、Material Designの話をするという興味深い回。Material DesignとiOSインターフェイスについて、設計思想の考察と比較についてのお話をいただきました。
Material Designの新しいBackdropが、
iOSにあるセミモーダルビューと類似しているっぽい。
というお話では、
構造としては前景と背景に分かれていて似たものになっているが、背景レイヤーと前景レイヤーとの主従関係が逆になっていたりして、設計思想という視点で見ると同じとは言えなさそうな気〜という考察があったり。
また、モーションがもたらす価値として、
非文字言語での対話
動きによって意味を与える
時間軸に沿った状態を表現
未来を示唆
↑の具体的事例（P.41〜P.60）も、具体例を交えて解説があったり。
そう考えると、たしかに無意味なアニメーションって、ゲームを除くとそんなに効果的とは言えないものがある気がするのは確かに。と思った途端に、作ったものに対する記憶が蘇ったりもしました。
「見た目が同じ！じゃあ同じ！」「動かしたらなんか可愛い！いい感じ！」では片付けられない様を学んだのでした😇
当日のスライド：https://speakerdeck.com/usagimaru/thinking-material-design
🍕🍕🍕
会場で気になった発言
Material Designはもともと、GoogleのiOS向けに開発されたフレームワークだった。（Google合同会社│鈴木 拓生さん）
えっそうなの？？👀👂
感想
普段は業務を通してMaterialDesignの勉強をする感じですが、やはり自分で情報を掘り出して頑張って頑張って理解するよりも、ごりっと勉強会に参加したほうが話早いみを感じました。
MaterialDesignがどう新しくなったのかと、そもそもの概念の理解がより深まる素敵な勉強会でした。
懇親会では、会場でお会いした方とお話が盛り上がってしまいピザを食べ損ねましたが、食べ損ね同士で唯一残ったピザをシェアするという謎の初体験もできました🍕笑
ありがとうございました🙏
＼生存確認／
