kubell Creator's Note

ビジネスチャット「Chatwork」のエンジニアのブログです。

ビジネスチャット「Chatwork」のエンジニアのブログです。

読者になる

勉強会レポート I/O Extended 2018 Shibuya (Material Design Only!!) に行ってきた

Design Event

こんにちは。デザイン部の @cw-marikoです。最近は社内の部活動で企業対抗駅伝に初出場し、5kmを28分のタイムで無事に完走してきました。

さる5月25日に、株式会社グッドパッチさんが主催されたMaterial Designに特化したイベント、I/O Extended 2018 Shibuya (Material Design Only!!)に参加させていただきました！弊社からはcw-moriya（@emim）もTwitter枠で参加させていただいたので、当日のツイートもぜひご覧になってください。
勉強会は、Google I/O 2018で発表されたMaterial Designについて、Googleや他社からのゲストも交え登壇者が発表し、後半に質疑応答という形式のものでした。

5月8日に大幅にアップデートがされたMaterial Designについて、どんな発表がされるのかワクワクしながら勉強会に向かわせていただきました。私はブログ枠での参加だったため、簡単に当日の様子と、それぞれの発表に対する感想を書き連ねていきたいと思います。

目次

発表内容

Material update

スピーカー：鈴木 拓生さん（Google合同会社/Developer Relations Japan Lead）

ざっくりまとめ

  • 今回Google I/O 2018で発表されたMaterial Designのアップデート内容について
  • Material Themingによって、様々なサービスに合わせたデザインが可能になった
    • 以前のMaterial Designを使うと、どうしてもGoogleっぽいアプリになてしまうデメリットが解消された
    • デザインを縛りたいわけではなく、デザイナーが本来注力すべきところ（ユーザー体験、ヒーローイメージなど）に力がいれられるようにしたかった
    • インタラクティブなガイドラインにしたかった
  • Material Design Suites（Material Theme EditorやGalleryなど）
  • Material Design Componentsなどの紹介

感想

  • 割と衝撃だった大幅なMaterial Designの変更の意図が、直接Googleの方から聞けたのがよかった
  • 最適なテキストフィールドを作るため、ランダムなテストを途方もない回数をテストした事実に脱帽

UIデザイナーのためのMaterial Designの理解と実践

スピーカー：蔡 漢翔さん（株式会社グッドパッチ/UI Designer）

ざっくりまとめ

  • 実際にMaterial Theme Editorのデモをしてくださいました
    • Color、Typography、Sketchシンボル組み合わせによるコンポーネント
  • Material Theme Editorを使うとAtomic Designのパターン、エレメントが自動生成される
  • Material Designは、UIの基礎が分かれば誰でも美しいアプリが作れるためのデザインシステムである
  • 日本語フォントへの対応は、もう一息なところがある

感想

  • Material Theme Editor、見るだけでも大変高機能
    • 実際にChatWorkのカラー、タイポグラフィーでも試してみたい！と思った
  • Google I/O 2018のWi-Fiパスワードは「Make good things together」であり、このうち一番大事なのは「together」部分なのでは、と主張する蔡さんの考えが好きです

Material Theming対応の前に知っておきたい、エンジニア側の対応コスト

スピーカー：瀬戸 優之さん（株式会社ノハナ/Androidエンジニア 兼 アプリデザイナー）

ざっくりまとめ

  • エンジニア目線でのお話
  • Material Design Components（MDC）を導入するには、まずエンジニア側の準備が大変である
    • MDC for Mac iOSは導入ハードルは低めだが、アップデートが大変多い
    • MDC for Androidは導入が大変
  • GalleryはZeplinのように使える、今後に期待
  • Material Themingに対応する際には
    • エンジニアにまず相談を！
    • アップデートに注目しましょう

感想

  • エンジニア！ということで難しい話がくるのではと構えていましたが、非エンジニアにも理解できるような内容に仕上げてくださっていたので、分かりやすかったです
  • ChatWorkでも導入時には必ずエンジニアに相談します！Togetherが大事ですね。

Material Design の設計思想を探る

スピーカー：丸 怜里さん（株式会社グッドパッチ/Application Designer）

ざっくりまとめ

  • Apple畑（iOS、macOSを主に専門とされてきた）デザイナー 兼 ディベロッパーの目線からを交えた、思想設計を探る話
  • Material Designの今回のアップデート
    • 追加となったデザイン原則は「柔軟な基盤」と「クロスプラットフォーム」
    • 追加となったゴールは「ビジュアルの柔軟性」

感想

  • iOSとAndoridの似ているUIを比較するパートが興味深かったです
    • Backdropとセミモーダルビューの似て非なる部分など
  • Material Themingは、今までの厳格さをぬぐってくれる柔軟性を持ったデザインの仕組みであるということで、今後メジャーになってくるかもしれない、電子ペーパーなどのデバイスにも対応するであろう未来に期待したいと思いました

質疑応答タイム

Q.マテリアルデザインを日本語環境のサービスにもっと浸透させるには？

  • 西洋のグリッドシステムが多く、西洋の文化に影響を受けすぎていると思った
  • 単に縦書きサポートなどではなく、アジアの人にとって使いやすいデザインシステムは何かを考えなくてはいけないと思っている
    • ユニクロやラーメン屋など、非言語的なものはアメリカで成功しているので
  • デザインで世界を超えていきたい

Q.Material Designの進化でデザイナーの役割も変化するのか

  • Material DesignはGUIのデザインのフレームワークとして機能するはず
  • 今回の変更でデザインに柔軟性も出せるようになった
  • Material Designを意識しすぎるとデザインに制約が出るのではなるのではという心配がある
    • ゲーム画面など、ビジュアルが重視されるメディアは気にしすぎてはいけないかもしれない
  • デザイナーの役割は変わってくると思う
    • 車輪の再開発をすることがなくなる
    • オンボーディング、ヒーローイメージ、ロゴなどに力がかけられる
  • Googleのデザイナーはビジュアルデザイナー、UIデザイナー、インタラクションデザイナーなど細分化されている
    • なかでもインタラクションデザイナーは使用者の性格まで変えることをゴールにしているため、フィールドワークも積極的に行っている

Q.Flutter絡みの話が聴きたいです

  • Alibabaが一番よく使っている
  • Unityのアプリ版のようなもの
  • UIがFlutterぽくはなるので、細かいところには手は届かない
  • 日本はAndroidとiOS両方作らなくてはいけない特殊な国なので、まず第一のデザインとしてFlutterを使うのはよい手段なのでは

Q.新しいデバイスのデザインについて

  • Googleでは、今まで服のデザインをやっていたデザイナーがデバイスのデザインをやっていたりする

Q.Material Themingの事例で、もうちょっといいものはないのでしょうか

  • AirbnbはMaterial Designコンポーネントを一切使っていないが、デザインとしてはとてもよく踏襲している
    • Material Themingが出る前に設計されたものなのに、すでにMaterial Themingを使っていたという感じ
  • 去年のMaterial Design Awards受賞作がヒントになるのでは

Q.マルチバイト文字のレイアウトが崩れます

  • Issueをあげてください！

Q.Sketch Pluginのロードマップは？

  • SketchだけではWindowsでのデザインに対応できないため

Q.Pickerがなかったことになっている？

  • GoogleAndroidチームとMaterialデザインチームは別々で、お互いをあまり把握していない
  • アーカイブは見ることができますので…

Q.Material Designのバリューとは（ビジネス、デザイナー、エンジニア視点で）

  • UIデザインの初心者にもよい教科書となっている
  • GUIのデザインが体系的に整理されたので、本来のユーザー体験の方に時間がさけるようになった
  • 今回の柔軟性で、新しいデバイスのスクリーン（電子ペーパーとか）にも合わせられるようになったのでは
  • エンジニアに実装が大変なデザインが降ってくることも減った
  • 「Make good things together」の「Together」のところだと思う

Q.iOS Human Interface Guidelinesはどの程度意識してデザインしたのか

  • Androidとデスクトップ、iOSとデスクトップというのがあるので、どっちに寄せるかというよりは、Webとの関係でユーザー体験が乖離しすぎないデザインにしている
    • なのでAndroidにもiOSにも完全に寄っていないのです
    • 初期はiOS用のガイドラインを作っていました

Q.テキストフィールドのテストは、どのデバイスでテストをしたのか

  • 全部のデバイスでテストしていると思う

懇親会

  • サプライズでピザとお酒などが用意されていました！
  • ですが、翌日が駅伝の日だったため、ベストな記録のために泣く泣く帰らせていただきました…
  • 余談ですが、当日の駅伝完走後の様子ですf:id:cw-mariko:20180529094658j:plain

全体を通した感想

デザイナーがMaterial Designについて理解を深める場というものが珍しく、内容も大変充実したイベントでしたので、ぜひI/O 2019後にも開催していただきたいと思いました！
自分にとってやはり衝撃が大きかったのは、Extended FABとBackdropでした。
使える場面があれば、自社のアプリケーションにもうまく適用していきたいと思います。

最後に

今月から始まった新たな試みでありますが、ChatWorkのデザイン部では週1回のMaterial Design勉強会を開催しています。Material Design全般に言える考え方・基本ルールを学ぶことに集中 する会で、ボリュームのあるMaterial Designだけあって、今現在で全26回が予定されています (ﾟдﾟ)!!
ChatWorkのデザイン部は、常にアップデートが行われるガイドラインに、いつまでも柔軟に対応していけるデザイナー集団でありたいと思っています。