こんにちは！熊野です。
このブログをご覧頂いているみなさんはデザインシステムという言葉をご存知でしょうか。海外では多くの事例があり、様々なシーンでデザインシステムが取り入れられていますが、日本では事業会社や一部大企業しか導入されていないイメージがあります。

今回はデザインシステムとは何なのか？国内の事例も紹介しつつ、入り口の一助としてこの記事を参考に頂ければ幸いです。

デザインシステムとは？

デザインシステムとは、かなり簡略化して説明すると素早いサイクルでデザインを作る骨子のようなものです。UIをコンポーネントと呼ばれるパーツ化し、デザインチームやエンジニアとの共通言語として扱う事でプロダクトのデザインを一貫性のあるものに保つ事が可能です。更に、近年のエンジニアリング手法としてメジャーなアジャイル開発とも相性がよく、デザイナーとエンジニアの共同作業が必要なシーンでデザインシステムを導入する事により、より素早いPDCAサイクルを回す事が可能になります。

アプリ開発にデザインシステムが重要な理由

アプリやWebサービスはリリースした後どのようにPDCAを回して行くかが重要です。せっかくリリースしたサービスも素早く改善を回してビジネスに繋げなければ何の意味もありません。しかし、実際の開発の現場には様々なステークホルダーが存在し、その意見をまとめてプロダクトにアウトプットしていくのは容易ではありません。

開発現場の課題を解決するため

アプリ開発の現場は複数のデザイナーやエンジニアが協業しながら進める事が多いです。異なる言葉を扱う者同士が共通して認識できる指標＝デザインシステムを導入する事により、開発者のみならず経営陣も巻き込んだイニシアチブが取りやすくなるのでは無いでしょうか。

一貫性を持った体験＝UXを届けられる

上記で触れたように、開発者が共通言語としてデザインシステムを導入する事で、GUI（グラフィック・ユーザー・インターフェース）のブレがなくなり、より一貫性を保った体験＝UXを提供できると考えます。更に、開発者同士の意思疎通もスムーズになるので、各ステークホルダーの心理的安全性が高まり、パフォーマンスも良くなる事でしょう。

参考にしたい国内のデザインシステム事例

Codeal Design Guideline

即戦力の副業ワーカーをスカウトできるCodeal社がデザインシステムを公開されています。国内でもまだデザインシステムそのものを公開されている企業は少なく、かなり参考になるのではないでしょうか。

デザインシステムの設計とアクセシビリティの実現

クラウド会計システムで有名なfreee株式会社による登壇資料です。会社の成長〜5年間での成長フェーズの開発現場で起きた事やデザインシステムを導入し、アクセシビリティを担保していったのかをかなり詳細に公開されており、大変勉強になりました。

（全て視聴するにはcrash.academyへの会員登録が必要です。）

新規事業から大規模事業まで！デザインシステムへの向き合い方とは？ – Bonfire Design #3 レポート

ヤフー株式会社が主催されている、Bonfireという勉強会で「デザインのシステム化について」をテーマにした回のまとめ記事です。新規事業から大規模事業において、いつ、どういったタイミングでデザインシステムを取り入れたか、導入した時の成功・失敗例等がまとめられており、今回記事を書くにあたっても大変参考にさせて頂きました。

実際に、どういったシーンでデザインシステムが活かせるか

それでは、デザインシステムを導入する際どういったプロダクトと相性が良いのか考えてみました。

大人数のデザイナー・エンジニアが協業するプロダクト

開発現場において何十人〜何百人規模のデザイナーやエンジニアの目線を合わせるという事は困難を極めます。デザインシステムを導入する事によって、より精度の高い意志疎通を図れるのではないでしょうか。

サービスローンチ後、素早いPDCAを回す必要があるプロダクト

Webサービスは生き物です。経営層の判断を迅速にプロダクトに落とし込むためには効率化が必須です。デザインシステムを導入する事により、業務が効率化され、デザイナーはよりデザインを、エンジニアはコードといったコアな業務に集中する事ができます。結果として良いプロダクトへ成長し、ブランド価値の向上・サービスへの信頼に繋がる事でしょう。

キャンペーンなど、1回で終わりのプロダクトには不向き

キャンペーンなどリリース後の改善が求められないものに関しては、初期の導入コストばかりかかってしまうため、不向きと言えるでしょう。

これまでは事業会社や大企業に多く取り扱わていたデザインシステムですが、小さなプロダクトでも適切な導入をすれば開発コストを大きく下げる事が可能となるのではないでしょうか？UIをコンポーネント化する事でデザインの属人化を防ぎ、より多くのユーザーへプロダクトの世界観＝UXを届けられるのではないかと考えます。

最後に

今回、記事を書くにあたってインターネット上のたくさんの情報を参考にさせて頂きました。ご紹介させて頂くとともに、執筆者の方に深くお礼を申し上げます。

Human Interface Guidelines
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

Material Design
https://material.io/

「Atomic Design」と「Design Systems」〜デザイナーとエンジニアが二人三脚で開発する手法〜
https://inside.dmm.com/entry/2018/05/07/atomic_design_system

結局デザインシステムは何なのか
http://yasuhisa.com/could/article/what-is-design-system/

CI&UIリニューアルしながらデザインシステムを作った話
https://note.mu/nikoko/n/n78c5e09cedbf

デザインシステムを正しく理解しよう。作り方・参考事例のまとめ
https://webdesign-trends.net/entry/9068

弊社においても、予算やプロジェクトのバランスを見ながら適切なデザインシステム導入を心がけていきたいと思います。

最後までご覧いただき、ありがとうございました！

kuma

何歳になっても好奇心旺盛なデザイナーです！兵庫県在中。日々仕事を楽しみながら生きています。