#33「デザインシステム輪読会から得た学び」
デザインシステムの輪読会について取り組んだ目的や、得た学びをもとにWeb制作会社が取り組む意義などについてお話しました。
※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。
- 橋本
- こんにちは！
- 田村
- こんにちは！
- 橋本
- ミツエーテックラジオは株式会社ミツエーリンクスのスタッフがWebデザイン、 WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアするためのポッドキャストです。
司会は橋本が務めさせていただきます。今回のゲストはアートディレクションチームの田村くんです！本日はよろしくお願いします！ - 田村
- よろしくお願いします！
- 橋本
- 田村くんは自分の同期で、以前ゲストとして来てくれた大塚くんに引き続き、2人目の同期ゲストになります。では最初に簡単に自己紹介をお願いします！
- 田村
- はい！アートディレクションチーム、略してADチームに所属しているUIデザイナーの田村と申します！普段の業務はお客様からご依頼いただいたWebサイトのリニューアルとか、新規デザインの提案を行っています。本日はお招きありがとうございます！どうぞよろしくお願いします！
- 橋本
- はい！よろしくお願いします！今回のテーマは「デザインシステム輪読会から得た学び」なんですが、まずはじめに輪読会を行うことになった経緯について田村くんの方から、軽く説明をお願いできますか？
- 田村
- はい。近年、Webサービスを提供している多くの企業が、独自のデザインシステムをオンラインで公開しています。例えば、クラウド人事労務ソフトを開発しているSmartHRのDesign Systemは業界内でも有名ですね。海外だとPinterestとかAdobeとか、それと企業だけではなくアメリカやイギリス政府機関も公開しています。あとは日本国内だとデジタル庁も取り組み始めましたね。
当社でもこれまでガイドラインやWebサイトを構成するUIパーツまたは役割別にまとめたモジュール一覧の提供を行ってきましたが、そこに今のトレンドであるデザインシステムを取り入れることで、もっとお客様のビジネスに貢献できるサービスが提供できるのでは？と考えて、デザインシステムについての知見を深めるべく取り組みを始めました。 - 橋本
- はい、ありがとうございます。やっぱりまず最初に社内のデザイナーと開発者で共通認識を持つことが大事だと思ったので、デザイナーと開発者で一緒にデザインシステムに関する書籍をもとに輪読会を開催することにしました。今回はその輪読会について、そして輪読会から得たナレッジを共有していきたいと思います。
今回の輪読会では「Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド」を対象書籍として採用しました。基本的には自分と田村くんで輪読会の進行役を務めてきたわけですけど、どうでしたか？ - 田村
- そうですね～、普段の業務では経験できないことでしたので、楽しかったですし、あと開発者目線とデザイナー目線を交えて議論ができたのはいろんな発見があったので良かったです。
- 橋本
- 確かに、自分もデザイナーの方がどうやって企業のビジョンとかブランドをデザインとして表現しているのかとか、その過程を細かく知れたのはすごく貴重な機会だったなと感じます。
- 田村
- はい。それ以外にも輪読会の前準備だったり、当日のファシリテーターだったりと、まだ経験が少ない全体を仕切るといった部分も良い経験になりました。
- 橋本
- そうですね。輪読会の進行については、一般的なものだとその会の中で読む範囲と読む担当の人を決めて読み進めつつ、気になったところを議論する、みたいなイメージがあると思うんですけど、今回は事前に全員に読んできてもらって各章の担当の人だけ資料を作ったうえで、当日内容の共有と議論といった形で、2章ごとの計5回の開催として進めてきました。
- 田村
- はい、今回対象にした書籍が割と概念的な内容が多かったので、この進め方は成功だったんじゃないかなーと思います。多分会の中で読み進めながら議論しちゃうと、理解するのに時間がかかって、議論どころではなかった気がしますね。
- 橋本
- 確かにそうですね笑
輪読会に参加いただいたメンバーからも、デザイナーと開発者が集まって、サイト内の各パーツの見た目だったり構成要素について書籍の内容を基にしながら話す場を持てたのが良かった、という好評な意見も頂きました。
では続いて、書籍から学んだことを基に、デザインシステムの概要について触れていこうと思います。書籍の中ではデザインシステムとは、「デジタルプロダクトの目的を達成するために首尾一貫したルールで編成された、お互いに関連付けられたパターンとその実践方法」と定義されています。 - 田村
- よく似たようなもので、デザインについて定義したスタイルガイドや、UIコンポーネントをまとめたライブラリツールが挙げられると思うんですけど、それがデザインシステムではないということですよね？
- 橋本
- そうですね。デザインシステムがプロダクトのデザインルールを正しく管理する仕組み全体であるのに対して、パターンライブラリとかデザインガイドライン、スタイルガイドラインなどは、デザインシステムを構成するいち要素であり、いち手段であるという感じですね。
- 田村
- なるほど。取り組みをするにあたって、Webに公開されているいろいろなデザインシステムを見たりしたんですけど、デザインシステムを構成する要素が全然違っていたのが気になってたんですよね。
- 橋本
- デザインシステムはデジタルプロダクトの目的を達成するためのものなので、サービスやプロダクトによって達成したい目的というのが変われば、デザインシステムを構成する要素も変わるということなのかなと思います。
あと書籍でよく述べられていたのは、チーム内で持つ共通認識の大切さですね。これがないとデザインシステムとして成り立たないですし、デザイナーと開発者などの職種間での議論ができなくなってしまいます。 - 田村
- そうですね。デザインシステム作成後もその共通認識をもって運用をしていくので、新しいパーツを作成する際にデザインと設計にかかる時間を短縮できたりと、意思決定が速くなりますし、それが結果的に低コストでの運用につながるとも述べられていましたね。
- 橋本
- そうですね。そういったデザインシステムの利点などを書籍を通して理解できたんですけど、田村くんは何か、書籍の内容やそれ以外で議論し足りないこととか気になったことってあったりしますか？
- 田村
- そうですね～、ひとまず目標としていたデザインシステムに関する共通認識をそろえるための前提知識は得られたんですけど、書籍ではサービスだったりプロダクトにおいてのデザインシステムといった内容がメインだったので、当社のようなWeb制作会社がデザインシステムをどう活用すべきか、といったところはもっと議論したかったですね。
- 橋本
- そうですよね。1つ思ったのは、デザインシステムを取り入れることによるメリットの1つとして属人化が防げて、共通認識があれば誰でも更新とか運用作業ができるっていうことが挙げられると思うんですけど、社内の運用案件でも、デザイナーとかディレクターなどのほかの職種の方が作業しても品質を落とすことなく作業できるようになる、っていうのは魅力的かなと思いますし、当社で掲げている「運用ファースト」という考えにもマッチしているんじゃないかなと思います。
- 田村
- なるほど。デザインシステムを導入するタイミングとしては新規構築の時から運用することを考えて、デザインシステムを取り入れておいてもよさそうですかね？運用時のコストカットや品質の維持に影響があるかもですよね？
- 橋本
- そうですね。もちろんプロジェクトを進める間に何度もブラッシュアップをしたりと、作業の工程自体は増えると思うんですけど、先ほど利点として話した意思決定の速さが、開発スピードや品質の維持につながってくると思います。
あとは、タイミングとして運用が始まっているものに関しては、リニューアルなどの現行のサイトを見直すタイミングでデザインシステムを取り入れるなどすると良いかもしれないですね。 - 田村
- あー、確かにそうですね。ただやっぱり、お客様のサイトのデザインシステムとなると最終的にはお客様の判断によると思うので、デザインシステムがあった方がお客様から何か新規の依頼があっても意思決定が早くなったり、かつ低コストで運用できますよといったことは伝えてみるといいかもしれないですね。
橋本くんからも何か、感想とか気になったことってあります？ - 橋本
- 1つ気になったのは、デザインシステムを外部に公開している意味、みたいなところですね。結構ブログなどで導入しました～って感じで書かれてること多いじゃないですか。
- 田村
- そうですね。デザインシステムそのものを公開している企業もあれば、あとはFigmaのデータを公開している企業などいろいろありますよね～。
- 橋本
- そういうのってユーザーに誤った使い方をさせないために、同じデザインシステムを使って共通のUIやルールに沿って開発する、いわばGoogleのMaterial Designを使ってAndroid向けのアプリを開発する、みたいな感じでないと、公開しても活用されないんじゃないかなーと思うんですけど、どういった意図で公開はしてるんですかね？
- 田村
- いや～、ちょっと僕自身デザインシステムの構築に携わったことはないので、どうしてかはわからないですけど、おそらく一般の人とかじゃなくて、同業者の方々に向けて情報を発信しているのかな～と思ってます。書籍にもデザインシステムの構築が組織のミッションやビジョン、あとブランドといったところに深く関わってくるといった内容のものがあったので、公開することでそれに共感した方々が、その会社のデザインに対する姿勢を知ることができるのかなーと思います。
- 橋本
- あー、なるほど。確かに、デザインシステムを見てこの会社の考え方は自分に合っているなとか、面白そうだなと感じてもらえた結果、リクルートにつながる可能性っていうのはありそうですよね。
- 田村
- そうですね。あとこれは書籍に書いてあったことなんですけど、デザインシステムに携わる社員の人たちが「しっかりと外部に公開できるものを作れている！」とか、あと「同業者の人たちも弊社のデザインシステムの考えを見て、いろいろ学んでくれているだろう」っていうモチベーションの維持などにもつながるみたいです。
- 橋本
- なるほど。情報発信だったり、社内のモチベーションの維持だったりと、活用するのが社内だけだったとしても公開するメリットというのは色々あるんですね。ありがとうございます！
はい、ということで今回は「デザインシステム輪読会から得た学び」についてお話しました。 今後も職種を交えて、デザインシステムの活用法について話していこうと思います。 - 田村
- 個人的にデザインシステム自体を運用していく面白みもありそうだなと思ってます。同じ目標に向かって議論しあったりコミュニケーションしたりするのがより強固なチームを築きあげたり、サイトやサービスの成長過程に合わせて、デザインシステムも進化し続けるので、組織の変遷を見ていくことができて、すごく楽しそうです！
- 橋本
- いいですね！チーム全体の成果物としてやりがいがありそうだなっていうのは自分も思います！
最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。
また、このPodcastはApple Podcast、Google Podcast、Amazon Music、Spotify、YouTubeで配信していますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐ視聴できます！こちらもぜひご活用ください。「#ミツエーテックラジオ」でご意見、ご感想、こんなこと話してほしいというリクエストなどもお待ちしております。 それでは今日はこの辺で！ありがとうございましたー！ - 田村
- ありがとうございました！