会計 freee のUI設計や、プロダクト横断のデザインガイドライン整備を担当している @toofu__ です。ゴールデンウィークは10日間で7回UberEatsを注文し、先日は土日2日間で4回注文しました。
少し間が空いてしまいましたが、ゴールデンウィーク前、4月24日にデザインシステムに関する勉強会『designsystem.tokyo』を、弁護士ドットコム株式会社様と合同で開催しました。 designsystems.connpass.com
designsystem.tokyoって？
昨今、Webサービスやアプリの開発において「デザインシステム」が注目を集めています。「多くの人数で長期間にわたって設計・開発を行う際に、一貫性を保てるようにデザインパターンやルールなどを定めたもの」とされており、公開されているものだと GoogleのMaterial Design や SalesforceのLightning Design System などが有名です。弊社でもその構築を進めていますが、いざやってみるとなかなかに大変です。
去年末にデザインシステムの構築と運用手法をまとめた書籍である『Design System - A practical guide to creating design languages for digital products』の日本語版が刊行されました。それをきっかけに、監訳者の佐藤伸哉さんが旗振り役となり、「日本でデザインシステムの実践を進めている企業が集まり、その知見を交換するコミュニティをつくろう」という目的で生まれたのがdesignsystem.tokyoです。
コミュニティに所属する企業が持ち回りで主催する形で勉強会が行われており、その第2回として弁護士ドットコム様と弊社主催の会を行わせていただきました。
各社のデザインシステム実物を肴に酒を飲む会
弁護士ドットコム様との事前の打ち合わせにおいて決まったことは「各自がつくっているデザインシステムの実物を見ながら議論を行おう」ということでした。デザインシステムはその性質上、企業のプロダクト開発の内情にかかわることが多く、なかなか一般に公開しづらいものであります。しかし現場のリアルな議論をするためにはつくっているデザインシステム実物を囲むことが重要と考えたため、参加者をコミュニティ所属企業に限定して成果物を開示することにしました。
弊社はデザインシステムとしてUI/UXガイドライン「Groove」とUIコンポーネントライブラリ「Vibes」を整備しています。経緯や概要については先日行った弊社主催のイベント『freee Tech Night』で簡単に触れましたが、designsystems.tokyoではその中身であるGrooveの社内Googleサイトや、VibesのSketchファイルおよびStorybookをプロジェクタに映しながら構成について説明させていただきました。
現物をみながら、参加者の方たちと下記のような観点で議論を行うことが出来ました。
- ガイドラインで定義されるべき内容
- アトミックデザインを用いたUIコンポーネントの現実的な運用
- デザインシステムを作成するコストはどのようなロジックで捻出するのか
- 人間を信じるか信じないか
お酒が入っていることもあり、トピックによっては「ウチはこうやってる」「いや弊社は」といった感じで議論が白熱する感じでした。（会自体がクローズなものであったので具体的な中身は書けないのはすみません。気になる方はコミュニティへご参加を！）
弁護士ドットコム様はFigmaを利用した既存UIのインターフェースインベントリを開示してくださり、複数並行しているブランドとデザインシステムの関わり方についての説明をしてくださりました。巨大なインベントリがプロジェクタに映し出されたときのどよめきが印象的でした。
デザインシステムの知見交換したい人はdesignsystems.tokyoへ
弊社でデザインシステム構築に本格的に取り掛かり始めて1年余が経ちますが、まだ完全に運用に乗り切っているとは言えない状況です。参加企業にもそういうところが多く、みんなの知見を合わせてお互いのプロダクトをよりよくしていくのが大事かなと思います。勉強会参加に興味のある事業会社の方がいましたら、designsystems.tokyo公式Twitterアカウントまでご連絡いただくか、connpassのグループでイベント予定をご確認ください。
