kubell Creator's Note

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

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

読者になる

勉強会レポート「デザインのシステム化について」Bonfire Design #3 に行ってきた

こんにちは。デザイン部の @cw-marikoです。オフィスに13鉢ある観葉植物の世話と観察が、最近の密かな楽しみです。(会社の部活動で園芸部の部長もやっています)

さる4月20日に、ヤフー株式会社さんが主催された勉強会/交流会イベントBonfire Design #3に参加させていただきました!勉強会のテーマは「デザインのシステム化について」でした。
ChatWorkでもデザインシステムは導入し始めていて、現在はガイドラインのドキュメントやSketchのライブラリ、LP用のフレームワークを運用しています。

勉強会はブログ枠での参加だったため、簡単に当日の様子と、それぞれの発表に対する感想を書き連ねていきたいと思います。
会場はヤフー内にあるオープンコラボレーションスペースLODGEでした。とても素敵な場所です! f:id:cw-mariko:20180425162425j:plain

目次

発表内容

全社デザインシステムとサービスの付き合い方

スピーカー:鹿山 玲子さん(ヤフー株式会社/デザイナー)

  • 新卒3年目、Yahoo!ニュースのデザイナー

ざっくりまとめ

  • Yahoo!ではRiffという自社のデザインシステムを使っている
  • 古くからあるYahoo!ニュースには20年分のデザインが蓄積しており、デザインを揃えていくのが大変
  • デザインシステム導入を通して、ニュースアプリでもSketchのUIキットテンプレートが作ることができた

感想

  • ChatWorkも7周年を迎えたプロダクトなので、アップデートの反面、デザインの負債もたまってきているため親近感を覚えた
  • 既存のデザインに新規のデザインシステムを当てはめるのはちょっと大変

デザインマネジメントとデザインシステムの関係

スピーカー:小林 信也さん(レバレジーズ株式会社/デザイナー)

  • 転職して3ヶ月目

f:id:cw-mariko:20180425170200j:plain

ざっくりまとめ

  • システムだけをアップデートしても本質は変わらない
  • 組織、人と人の関係や意識も変える必要がある
  • 眼の前にある課題を解決するわけではなく、その先にある本質的な課題を捉える
  • デザインシステムを自分ごととして捉えてもらうために、デザイナー以外にも社内啓蒙をした
  • 最初に決めるのはビジョンと最低限のルールのみ
  • 少しずつ小さなところからはじめる

感想

  • 本質的な課題を捉えるという思考は、普段私が行っているプロダクトの改修にも通ずる大事なものだ
  • ChatWorkでは、以前アクセシビリティの重要性について全社的に社内啓蒙をおこなったことがあるが、その時のような感じでデザインシステムの社内啓蒙もぜひやりたい
  • 最初からガチガチにルールを作らず、議論してルールをアップデートしていくのはチームにとっても大変よいことだ

小さく始める新規事業のデザインシステム

スピーカー:藤井 謙士朗さん(クックパッド株式会社/デザイナー)

  • 新卒2年目

f:id:cw-mariko:20180425170130j:plain

ざっくりまとめ

  • 新規事業コメルコ(マルシェアプリ )のリードデザイナーかつ唯一のデザイナー
  • 時間のリソース不足などがあるのでザインシステムを作った
  • TrelloがNachosでデザインシステムを全公開していることに影響された
  • 時間がないから全部が全部でなく、必要なものだけを作ることにした
  • とにかく小さく始めてデザイン効率を上げていくことがよい
  • 新規事業でもデザインシステムで効率化できる

感想

  • 最初から完成形を目指すのではなく、小さく始めることを心がけることは大事なことだ
  • デザインガイドラインをエンジニアにも活用してもらうことはChatWorkでも行っていて、とても有益なことだと思う

フェーズに応じて育てるデザインシステム

スピーカー:五藤 佑典さん(株式会社サイバーエージェント/エンジニア)

  • マーケティング、デザインの経験者
  • AbemaTVのエンジニア

f:id:cw-mariko:20180425170139j:plain

ざっくりまとめ

  • デザインシステムを使うには、サービスに必要な箇所だけを仕組み化すればよい
  • Atomic Designを採用した
  • メリット:一方通行に依存した階層化された設計手法なので、仕様変更に耐えうる
  • デメリット:全体から作っていく通常のデザインのプロセスと真逆だから難しい
  • デザインとコードに最低限の順序を与えるシンプルなスタイルガイドでスタートした
  • デザインシステムを作ることによって、デザイン変更はデザイナー自らコードを修正できるようになった
  • AbemaTVはマスメディアになりたかったので、情報アクセシビリティに配慮した
  • まずは色のアクセシビリティから始めた

感想

  • (ChatWorkでも実施していますが)デザイナーがGitHubを使ってコードまで変更できるシステムはやっぱりいいな
  • デザイナーとエンジニアでフェーズに応じて育てていくデザインシステムって素敵だな
  • 色のアクセシビリティ、ChatWorkでホットな話題!
  • Atomic Designは恥ずかしいことに実はしっかり理解していなかったのだけれど、とても説明が分かりやすかった

デザインシステムの海で3年間もがいてみて

スピーカー:森本 恭平さん(ヤフー株式会社/フロントエンドエンジニア)

  • 全社デザインシステム「Riff」を作った
  • 暗闇ボクシング中毒

f:id:cw-mariko:20180425170151j:plain

ざっくりまとめ

  • 全社デザインシステムRiffは、主にSketchを使っている
  • ベンチマークをBootstrapを意識して作っていたが、Bootstrapはデザインシステムに向いてなかった
  • UIライブラリは作業の効率化用でコードだけでもOKだが、デザインシステムはデザインを言葉で伝えることが重要
  • ヤフーではYahoo!ニュース、Yahoo!ショッピング、ヤフオク!などで色もデザインもばらばらで統一が難しい
  • 例えば、赤色は通常アラートを意味するが、コマースだとセールの意味をなす
  • 森本さん曰く必見、神資料のスライド(Design System as a Product @ Frontrend Vol.8)
  • デザインには単性型、中央集権型、連合型があるが、今回は連合型にした
  • どういうメンバーが何を作るために集められているかを考える
  • 自社のデザインはこうあるべきというのが決まっていない段階では始めるべきではない
  • デザインシステムの運用は人の運用でもある

感想

  • ヤフーさんくらい巨大な企業で、新しく全社横断デザインシステム作るのは非常に大変そう
  • しかしデザインシステムがないと、大量にあるサービスに統一感が生まれにくいので必須、がんばるしかない!

交流会

f:id:cw-mariko:20180425162458j:plain

  • お酒とお寿司が出ました!ごちそうさまでした
  • 見知らぬ人だらけの空間はとても緊張しがちなのですが、ヤフーの方々がフランクに話しかけてくださり、とても楽しく過ごせました
  • 出席者の中には同じようなデザインに対する課題を抱えている方が大勢いらっしゃった
  • ChatWorkのデザイナーです、と名乗ると「チャットワーク使ってます!」と答えてくださる方がたくさんいらして、とても嬉しかった!!

全体を通した感想

  • セッションごとにヤフーの若手社員さんによるグラフィックレコーディングが行われており、その出来も素晴らしかった f:id:cw-mariko:20180425162446j:plain
  • デザインシステムは始めは小さなステップから取り組んで、少しずつ周りを巻き込んでいくやり方が有効
  • デザインのシステム化には終わりはなく、常に本質的な課題を見つめながらアップデートしていくもの

最後に

色々な会社での事例を聞くことができて、とても勉強になりました。
ChatWorkのデザインシステムも、まだ完成形とは言えません。しかし、いきなり最初から完成形を目指すとその工程も大変でチーム全体が苦しくなってしまいます。私たちはスモールステップで、引き続きデザインシステムをアップデートしていきたいと思いました。

また個人的な野望で、自社でデザインの勉強会を開催する夢もできました。遠くない未来に実現したいところです!

おまけ

帰りの出口まで、ヤフーのエンジニアさんにご親切に案内いただきました。かわいいキャラクターも発見。
何から何までありがとうございました! f:id:cw-mariko:20180425162508j:plain