kubell Creator's Note

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

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

読者になる

Material Designの部内勉強会が……終わった!

勉強会の様子(写真)

雨続きで部署のみんなうんざり、という中ひとり「梅雨らしくていいじゃない」と雨擁護派の守谷@emim)です。

デザイン部は今月から、よりサービスへのデザインの責任を重く担った部署になるべく、プロダクトデザイン部に名称変更がおこなわれました。時を同じくして、約1年前より進めていたMaterial Designの部内勉強会が完了しました。

今更、Material Design勉強会?

今更ではないんです。前述の通り、1年前くらいから進められていました。

時期的には、2018年5月におこなわれたGoogle I/O 2018にてあらためてMaterial Designについての発表がおこなわれた頃。UIデザインに関する部分では、Material ThemingやMaterial Tools Suiteの発表がありました。

material.io

material.io

material.io

それまで、部署の定例ミーティングでアクセシビリティやツールに関する勉強会などをおこなっていましたが、この頃、より実務に近いことを学ぶ場にしようと模索していた時期でもあり、Material Designがちょうど良さそうだったため、勉強会テーマ候補に含まれました。

また、2014年にMaterial Designが発表されてからそれまで、日本のデザイナー/デベロッパー向けの日本語訳資料も提供されていました。しかし、この2018年のアップデートを機にその日本語訳も一気に古いものとなってしまっていました。

最新情報をいち早く取得するには、自分たちで訳してしまった方が早いのでは、という狙いが始まりでした。

どうやった、何やった

Material Designサイトキャプチャ
出展:Material Design - https://material.io/

とはいえ、Material Designのすべてをまるまる輪読などしたわけではありません。

Material Designは、Material System、Material Foundation、Material Guidelinesの3項目に分かれており、主に

  • Material System:Material Designというものについての概要
  • Material Foundation:概念や考え方の解説
  • Material Guidelines:より実装時に参照するような数値などが含まれた「ガイドライン」

とそれぞれ内容が異なっています。

このうちMaterial Foundationを26項目に分解し、それぞれ週1回(長くなる場合には2回に分けるなどして)翻訳内容や考え方についての疑問点などを共有しながら、Chatworkであればどのような使い方/解釈をしたらいいのかを話し合いながら進めました。だいたいの担当回数にすると、1人おおよそ5回担当くらいのイメージです。

1人で読み進めていたら一通りの解釈だけにとどまったり、人によっては右クリックでGoogle翻訳された日本語を流して終えていたかもしれません。毎度、「他のメンバーに解説する」いうことを踏まえ、理解を深めた上で説明担当の回に臨んでいたように思います。

また、Material Design自体を「必ず◯◯しなくてはいけない、◯◯するべき」絶対のルールとして見ていたというより、よくできたシステムでは「こういう時には◯◯という基準を設けている」ことを吸収するというイメージで学んでいっていました。そうすることで、自分たちがノンデザイナーに向けたドキュメントを書く時に必要な情報がどういったものかということを理解できました。

学んだことによる効果・感想

Material Design勉強会担当表のキャプチャ(一部)

一通り済ませてから、勉強会の振り返りをおこないました。

よかった点は概ね、

  • チーム全員で取り組んだことで基礎概念への理解が深まった
  • ひとりではなかったので最後まで挫折せずにすんだ
  • 定期的に勉強する習慣がついた
  • ドキュメントがまとめられたため、あとから入ったメンバーも内容の確認ができた

などが各人から挙げられました。

改善したい観点はそれぞれバラバラでしたが、

  • 翻訳で終えてしまうことがあった
  • 自分の担当回を忘れたり業務に追われることで、スキップすることがあった

などが出ていました。

個人的には、以前よりSpecs(Material Guidelines以下Componentsの各項内に含まれる、より数値的なガイドライン)を参照しながらUIデザインをすることは多々あったのですが、その数値になっている詳細な理由などを理解できたことが大きな収穫でした。それまでの「こういうものである」というガイドラインの値に対して、「こういう概念のもと、こういう設計になっている」というのがわかりました。それによりAndroidのUI設計がしやすくなったり、他プラットフォームのUI設計の参考にしたりできています。

また、Theming Editorなどは当時、効率的にSketch上でコンポーネント作成をする際の技法の参考などにもなりました。

振り返りでも次回以降の勉強会ネタが上がってきているので、Chatworkに活かせる勉強会を引き続き続けて行こうと考えています。ちなみに、次回以降のテーマはまだ未定です。

余談

部署の定例ミーティングのアレ

定例持ち込みお菓子の写真

さて皆様、お気づきいただけたでしょうか。

プロダクトデザイン部の定例では毎度お菓子を用意しています。これはMaterial Design勉強会からではなくかなり前、2016年頃からおこなっている施策です。毎度、誰かしらの用意したお菓子やお土産で、Take it easyの意識で色々な議題に向かっています。

どうしても固くなってしまう話しや勉強会、真剣すぎる話しが多めの定例ミーティングにおいて、ちょっとした息抜きがないと議論が混濁してしまうことがあります。それを回避するために、ミーティング手法であるワールドカフェの概念を参考にできないものか、と発案/採用されたものです*1

部署定例ミーティングでは、会社からの伝達事項や部署での使命などについて真剣に話し合う他、もちろん勉強会でもとても頭を使います。

脳に糖分を摂取しながらの議論と、リラックスできる場作りにミーティングw/tお菓子、オススメです。

*1:本来のワールドカフェの手法は、少人数の複数グループに分かれて一定時間で議論を煮詰め、別のグループに持ち帰ってさらなる議論を展開する、というものです。私達が参考にしたのは「リラックスした雰囲気において、人は良い意見が出せるようになる。そのための場作りという意味のカフェ」という点のみです。