#68「書籍『デザインシステムの育て方』からの学び 前編」

加藤: 皆さん、こんにちは！ミツエーリンクスの加藤です！

佐竹: 佐竹です！

加藤: はい、今回もミツエーテックラジオやっていきたいと思います。ミツエーテックラジオは、株式会社ミツエーリンクスのスタッフが、Webデザイン、Webフロントエンドなどの、Web技術に関するニュースやツールをシェアするポッドキャストです。今回は去年発売された『デザインシステムの育て方 継続的な進化と改善のためのアプローチ』という本を紹介しつつ、当社での取り組みなども交えながら、お話していきたいと思います。

佐竹: よろしくお願いします！

加藤: よろしくお願いします。この本はDan Mallさんという方が書かれた『Design That Scales』の日本語訳になります。Dan MallさんはDesign System Universityというデザインシステムのオンラインコースなどを提供しているWebサイトの運営などもされている方です。

佐竹: はい。私は、当社のコーポレートサイトや採用サイトのリニューアルでもデザインシステムを取り入れてみたんですね。で、デザインシステムというと範囲が広いので、追々話しながらどういうことをやってみたのかなどはご紹介したいと思いますが、結果的に言うと取り組んでみて良かったなとは思ってます。ただ、実際に取り組んでみると想定していなかったこととかもあったりしたので、今後取り組んでいくためのヒントを話しながら見つけたいと思っています。

加藤: はい。デザインシステムの取り組み方はたくさんあるがゆえに、どこから始めればいいか分からないっていう人もたくさんいそうですよね。そういう方々の参考になればと思います！

佐竹: noteというサービスに監訳者 長谷川恭久さんの試し読みまえがきや、長谷川さんご自身のサイトに発売時のコメントもありましたので、本に興味がある方はこちらもおすすめです。

加藤: では早速書籍の紹介をしたいと思います。まずチャプター1「デザインシステムが必要なわけ」ではデザインシステムとはなにか、デザインシステムの一般的な利点、誰のために作るのかということが書いてあります。ちなみに著者の定義では“デザインシステムとは、組織がデジタルプロダクトを一貫して効率的かつ楽に作成するために必要な最小限のコンポーネントとガイドラインを含む、パッケージ管理およびバージョン管理されたソフトウェアプロダクトである。”と書かれていました。

佐竹: んーちょっと難しいですね。

加藤: そうですね。次のチャプター「デザインシステムの基礎」にも“デザインシステムの共通の定義はデジタルデザインの業界全体でまだ定まっていない。”と書かれていて、まぁ今「デザインシステムとはこれだ！」っていう定義をするのはちょっと難しそうですね。

佐竹: はい。本の中でも“絶対的な定義を決めて境界をはっきりさせるよりも、もっと幅広く、包括的に構えたほうがいい”ということで7種類のデザインシステムが提示されていました。ということで7種類言いますね。えー「ブランドのアイデンティティと視覚言語」「プロジェクト」「ツールとテンプレート」「デジタルプロダクト」「プロセス」「サービス」「実践」の7つです。

加藤: はい。さらにいうとチャプター3ではデザインシステムを構成する部品として「UIキット」「コンポーネントライブラリ」「ガイドライン」「レファレンスサイト」「デザイントークン」「ウェブサイトやアプリケーションなどのデジタルプロダクト」の6つが紹介されています。これだけ種類があると「デザインシステム」という言葉の受け取り方もやっぱり人によって違うだろうなとは思いますよね。

佐竹: そうですね。例えば当社の採用サイトのリニューアルではスタイルガイドやデザイントークンなんかも作成したんですけど、これは7つの分類では「ツールとテンプレート」に該当するんですかね。

加藤: うーん、一番当てはまりそうなのはそうですよね。ただやっぱりデザインを作る過程で、理念とか、コンセプトも含まれると思うので「ブランドのアイデンティティと視覚言語」とかにも当てはまりそうですね。

佐竹: あーなるほど。ということは、デザインシステムは7つの分類をそれぞれ単体で考えるだけではなくって、組み合わせもあり得るということなんですかね。んーなんかそうすると、デザインシステムの定義が広い分どう進めていくのがいいのかわからなくなりそうかなってちょっと思ってしまいました。

加藤: はい。そうならないためにも、この7つの分類から、まず自分たちが取り組むべきものを選ぶといいと書かれていました。

佐竹: なるほど。プロジェクトには、まぁ期限もあるので、一気にすべてやるのは難しいといいますか、んー今回のリニューアルでも7つ全てはやりきれなかったなーと思っていたんですけど、ということは全部やりきるっていうことより、自分がどのデザインシステムに取り組んでいるか理解しながら進めるっていうことがポイントになりそうですかね。

加藤: そうだと思いますね。こういう分類とか構成要素の一覧が出てくると、とにかく全部やりたくなるかもしれないんですけど、デザインシステムを作ること自体が目的にならないように注意しないといけないかなとは思いますね。あとはプロジェクトに関わる他のメンバーも、同じ認識を持つところも大事かなと思います。

加藤: ちなみに採用サイトでデザインシステムを取り入れたのはどういう目的があったんでしょうか？

佐竹: はい。私が採用サイトのリニューアルでデザインシステムを取り入れた理由はあのー当社の広報Blogの記事にも少しコメントしたのですけど、この本に“調査会社フォレスターの2016年のレポートによると一貫したユーザー体験を提供できる企業は収益が24%増加する”ということが書かれていたので、当社の求人に応募してくれる人が増えるのではないかなーと考えたからですね。

加藤: Webサイトを訪れたユーザーが迷わず気持ちよく操作できれば、コンバージョンにつながりやすいっていうのはまぁそうなんだろうなとは思いますよね。

佐竹: そうですね。それに加えて本には“いいガイドラインはやるべきこととやってはいけないことを教えてくれる。”と書いてありました。ちょっと本からは脱線しますが、やってはいけないこともちゃんと示すことで、これまで意図せずダークパターンを採用してしまったようなサイトも、防げるんじゃないかなと思っています。ダークパターンもかなり注目されてきていますし、マーケティング目的でデザインシステムを用意するっていうこともおすすめしたいですね。

加藤: なるほど。以前「思わぬダークパターンにご注意を」っていう回でもダークパターンについてはお話しましたね。確かにデザインシステムが一貫した体験の提供を通じてユーザーを手助けするのであれば、マーケティング戦略の1つとして捉えてもいいかもしれないですね。

加藤: 続いてチャプター4「お墨付きにまつわる誤解」では、“デザインシステムを作れば、やがてみんなが作ったものを使ってくれるというのは夢物語”だと書いてありました。これはなかなか耳の痛い話ですね。

佐竹: ですね。中でも私が共感した箇所は“プロダクトチームはすでにぎりぎりの納期に間に合わせるので手いっぱいになっている。だから新ツールの学習に時間や精神的労力を注ぎ込み、今の仕事のペースを遅らせるなんてありえない”という箇所ですね。

加藤: デザインシステムを取り入れれば一貫性が増す、というような理屈とか、その価値は誰もが理解できるポイントだとは思うんですけど、これまでのやり方を変えることに抵抗があるとか、まずは目の前の課題に取り組まないといけない、みたいなことはどうしても起きちゃいますよね。

佐竹: 起きますね。まさに私が行き詰まっているところでもあるんですけど、サイトの一貫性を保つにはデザインのルール化が不可欠ですよね。で、デザインシステムを取り入れていないプロジェクトの場合は、デザインの見た目を忠実に再現するように作りますけど、デザインシステムを取り入れたプロジェクトではデザインがなぜその色だったりサイズだったり挙動なのかというのをプロジェクト関係者間で共通認識としてもって、ルール化することでサイトの一貫性を保ちますよね。

加藤: そうですね。

佐竹: なので、デザインシステムを取り入れていないプロジェクトに比べると認識合わせやドキュメント化などに時間がかかってしまうんですが、プロジェクトには決められた期限とコストがあるので、そこは超えられないんですよね。

加藤: んーたしかにそうですね。デザインシステムは軌道に乗ってテンプレートが形になれば効率が上がって制作時間が短縮できますけど、その、ある程度形になるまではやっぱり手探りで作業しているところもありますし、時間的なコストは通常のプロジェクトよりかかっちゃいますね。

佐竹: はい。取り組む側としても、良い取り組みとわかっていても、実績がないのでどれだけの効果を出せるかだったり、どのくらいのコストがかかるのか提示しにくいので、既存プロジェクトと同じコストの範囲内でちょっとずつ取り組みを行ってみて効果を検証するという流れになると思います。

加藤: はい。社内のプロジェクトだったら、まースケジュールとかもまだ融通はききやすいですけど、やっぱりお客さまの案件とかだとデザインシステムを作るための時間をスケジュールに組み込むっていうのはちょっと難しいかもしれないですね。

佐竹: はい。ただ、デザインシステムを取り入れるメリットを考えると、案件にも取り入れていきたいと思ってはいて、どうしたらそれが可能になりますかね。

加藤: はい。やっぱりデザインシステムを1つのプロジェクトとして軌道に乗せるのは一般的にもかなり難しいようで、いま佐竹さんが話してくれたような悩みが、このチャプター4にも書かれていました。じゃーどうすればいいのかっていうのが、このあとのチャプター5「パイロットプロジェクト」から書かれているのですけど、ちょっと長くなってきたので、今回はこの辺にして、続きは次回ご紹介したいと思います！

加藤: ここまで『デザインシステムの育て方』という書籍について当社の取り組みを交えつつ紹介してきました。個人的にはプロダクトとしてのデザインシステムという観点が抜けていたのでそこが大きな気づきでしたね。あとはやっぱり、なぜデザインシステム作るのかが大事ですね。

佐竹: はい。新しい取り組みをするときにその取り組み自体に集中するあまり最終的な目標を忘れがちになってしまうことがあります。なので、個人的にはフィードバックのフェーズで、なぜデザインシステムに取り組むのか、取り組んだ先にどのようなユーザー体験をもたらすことができるのかっていうのを考える時間を持つようにしたいと思いました。

加藤: 最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。 また、このPodcastはApple Podcast、Amazon Music、Spotify、YouTubeで配信していますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐ視聴できます！こちらもぜひご活用ください。「#ミツエーテックラジオ」でご意見、ご感想、こんなこと話してほしいというリクエストなどお待ちしております。 それでは今日はこの辺で！ありがとうございましたー！

佐竹: ありがとうございました！