こんにちは！グッドパッチUIデザイナーのharuです。
この記事では、2024年時点の最新のリサーチをもとに、国内のデザインシステム10事例をグッドパッチの解説つきでご紹介します。
「良いデザインをサポートするための仕組み」であるデザインシステムは、ものづくりの現場において、作り手の共通認識となることで価値を発揮します。「どうすれば、チームに浸透し、ものづくりに一貫性やスピードを生み出すデザインシステムを構築できるのか？」このように悩んでいる開発組織は少なくありません。
こうした悩みに対してグッドパッチがお伝えするのは、「デザインシステムで最も重要なのは、組織とその目的にフィットしているか」ということです。
そこで今回の事例集では、単なる有名どころではなく、「組織や目的にフィットしているな」「こんなデザインシステムあるんだ！」と私が思った魅力的なデザインシステムを紹介します。
「デザインシステムの重要性を頭では理解できたけど、まだなんか掴めない」と感じている方も、以下のさまざまな具体例を見ることで、デザインシステムの活用イメージを膨らませていただけると思います。
※ この記事では、デザインシステムを「良いデザインをサポートするための仕組み」と捉え、正式に「デザインシステム」とは呼ばれていない事例も含めてご紹介しています。
目次
1. Spindle（Ameba）
いけてるデザインシステムといえば
2023年度にグッドデザイン賞を受賞し、デザインシステムのお手本として多くの場面で名前があがるのが、サイバーエージェント社によるAmebaのデザインシステム「Spindle」です。
Spindleがいいデザインシステムと言われる理由の1つは、構成や言葉遣いが簡潔で理解しやすい点ではないでしょうか。どのページも一貫して、概要からだんだん詳細の説明に入っていく流れで統一されています。
また、言葉をしっかりと定義することで、読み手の前提を揃えているのが丁寧だと思います。例えば、「ブランド」「スタイル」「コンポーネント」といった言葉に対して、Spindle上での定義を決めています。
このように理解しやすく精度の高いデザインシステムがあれば、デザイナーやエンジニア個人の能力に依存せず、誰でも一定以上の品質を保ったアウトプットを、効率よく出せるのではないでしょうか。
実際にAmebaでは、Spindleの生産性を計測する実験をしていて、なんと「Spindleを使うと3倍はやく開発できる」という結果が出たそうです。（これはすごい！）
＼Spindleの生産性を計測:緑の丸特大:／
デザインシステムの定量的な効果は・・？
という質問をよくいただくので、Spindleあり・なしでの実装時間を計測してみました:ストップウォッチ:
その結果は・・・
「Spindleを使うと3倍はやく、Amebaらしく開発できる:ロケット:」
ということに:バンザイ::グリーンハート::目が回る:実装の様子は動画でご覧いただけます:ウィンク::再生ボタン: pic.twitter.com/0CJZaUN2cf
— Ameba Design System Spindle (@AmebaSpindle) June 4, 2024
2. デジタル庁デザインシステム
アクセシビリティファーストで、圧倒的な品質を誇る
日本初のデザインシステムとして最も有名な事例の1つが「デジタル庁デザインシステム」です。誰でも無料で利用できるFigmaファイルが配布されており、2024年7月現在、Version1.4.3が最新版です。
デジタル庁のミッションである「誰一人取り残されない、人に優しいデジタル化を。」の実現のために、アクセシビリティを最優先事項に位置付けているのが特徴です。このデザインシステムを利用すれば、アクセシビリティを確保したサイトやサービスの構築に取り組みやすくなります。
また、各コンポーネントや画面デザインに関するルールが、必ず図説とセットで記載されているのがとても親切です。単にルールがわかるだけでなく、間違った使い方やその理由、よくある作例なども一緒に記載されているので、理解しやすく納得感が高いです。
成果物のクオリティだけでなく、デザインシステムそれ自体の使いやすさまで緻密に考慮された、最高品質の事例といえるでしょう。
3. PayPay App Style Guide
https://app-style-guide.paypay.ne.jp/app-styleguide
設計思想がしっかりと反映されたスタイルガイド
「PayPay App Style Guide」は、PayPayアプリのデザインの指針となるガイドラインです。
「Design Philosophy」「Global Rule」「Component」という大きく3つの要素で構成されていて、上位概念が1つ下位のルールのコンセプトとなっている構造がとてもわかりやすいなと感じます。
また、スタイルガイドの中身も、全てのComponentで見出しレベルが揃っていたり、豊富な具体例とともに用法用量が記載されていて、非常に読みやすくクオリティが高いと感じます。
モバイルアプリケーションのスタイルガイドを構築する際には、非常に参考にしやすい事例だと思います。
4. SmartHR Design System
理念の共有に力を入れている
「SmartHR Design System」も、よくお手本とされるデジタルプロダクトのデザインシステムの1つです。SmartHR社は、デザインシステムの立ち上げからの取り組みを「ちいさくはじめるデザインシステム」という書籍にまとめており、こちらも話題を呼びました。
SmartHR Design Systemの特徴の1つは、理念の共有に力を入れている点ではないかなと思います。例えば、
など、組織として大切にしたいことが随所に記載されていて、これらはSmartHRに関わるメンバーに向けた強いメッセージのように感じられます。
SmartHR Design Systemは、メンバーが増えた際のオンボーディングマテリアルとしても大きな価値を発揮するのではないかと思いました。
5. IKYU Design Guideline
https://www.ikyu.co.jp/design_guideline
少ない情報量でも実用性を感じる
「IKYU Design Guideline」は、一休.com、一休.comレストラン、一休.comスパなど、一休が運営する全てのWebサービスを横断的に網羅した、デザインの指針となるガイドラインです。
シンプルな構成で規模は小さいですが、サイト制作者がマストで知りたい情報が網羅されている印象があり、実用性を感じます。
例えば、一休のWebサービスにとって重要な画像素材（施設の写真など）の撮り方や使い方が「Do」「Don’t」の具体例とともに明記されていたり、UIのスタイルガイドや文言ルールも非常に簡潔にまとまっています。
Web予約サービスの中でも、一休のサイトからは一貫して上品な印象を受けます。IKYU Design Guidelineはシンプルなガイドラインながらも、体験の一貫性にしっかりと寄与しているのではないかと思います。
6. freee brand site
ブランドを守り、サービスを拡張させるためのガイドブック
freee社のデザインシステム「vibes」は、アクセシビリティに積極的に取り組んでいることでも有名ですが、今回注目したいのは「freee brand site」です。
freee brand siteには、freeeのブランドの指針となる情報が集まっており、なかでも注目したいのが「Guidebooks」と呼ばれるコンテンツです。
Guidebooksには、ロゴ等のCIだけでなく、イラスト、イベント、展示会、空間、LPなど、あらゆる分野のアウトプットを「freeeらしい」ものにするためのポイントがまとめられているそうです。（内容はfreee関係者しか見ることはできません）
これらはfreeeに関わる外部パートナーに向けた資料となっていて、freeeのブランドを守りながら、さまざまなユーザー接点を展開することに寄与します。
プロダクトの一貫性だけでなく、プロダクトの外でも一貫したユーザー体験を実現するために、非常に役立つシステムだなと思いました。
7. Francfranc Design System Guidelines
https://francfranc.io/design-system-guidelines/
媒体を選ばない柔軟なグランドルール
「Francfranc Design System Guidelines」は、Francfrancの商品に関するコミュニケーションデザイン全般の指針を示すもので、紙媒体やWeb、店舗のPopやサイネージなど幅広い分野に適用できます。
我々がよく見るデジタルプロダクトのデザインシステムとは全然違うので、とても面白いなと思いました。
特に興味深かった「デザインの構成要素をモジュール化する」システムについて軽くご紹介します。
まず、デザインを構成する最小単位として「Design Elements」が定義されています。例えば、ロゴは「Identitiy」、画像は「Image」と呼ばれ、テキスト要素は、内容によって「Title」「Summary」「Details」「Specification（スペック）」などと定義が分かれます。
これらのモジュールを組み合わせると「デザインフォーマット」になります。例えば、「Image（画像）」と「Identitiy（ロゴ）」を組み合わせると、商品を魅力的に見せるための「Image Impact」フォーマットとなります。他にも、商品の魅力と仕様を伝える「Catalog」フォーマットや、商品シリーズを一覧掲載する「Line-up」フォーマットなどさまざまあり、それぞれに利用上の注意点が書かれています。
このようなシステムであれば、物理/デジタルどちらも媒体を選ばずに展開することができます。コミュニケーションデザイン分野のデザインシステムとして非常に優れているなと思いました。
8. D-EXPERIENCE DESIGN SYSTEM（デンソー）
UXに特化したデザインシステム
「D-EXPERIENCE DESIGN SYSTEM」は、デンソーのモビリティ事業において提供するべきUXの指針と規範が明文化された、UXのデザインシステムです。
デザインシステムといいつつ、とてもリッチなサイトでコンセプトムービーがあるなど、外部発信やコーポレートブランディングの要素も強く感じます。
理想的なUXを実現するための「PRINCIPLE」を定めていて、6つの指針と18の具体的な規範で構成されています。
モビリティについて考える上では、車などのハードウェアはもちろん、車体に搭載するソフトウェアやセンシング技術、デバイス連携、さらには走行体験を取り巻く環境など、あらゆる事象を考慮する必要があります。もちろん物凄い数の開発者が関わるでしょう。
こうした幅広い領域同士がバラバラにならないよう、1本の旗を立てるように、「D-EXPERIENCE」という指針が言語化されたのではないかなと思います。
このデザインシステムは、「UX」を軸に会社のサービス開発の指針を示している面白い事例だと思いました。
9. EXPERIENCE JAPAN PICTFRAMS（日本デザインセンター）
https://experience-japan.info/
文化と遊び心の詰まったピクトグラムライブラリ
日本デザインセンターによる「EXPERIENCE JAPAN PICTFRAMS」は、日本の観光を支えるためのピクトグラムライブラリです。
ピクトグラムを「日本のストーリーが詰まった装置」と捉え、オリジナルのピクトグラムに、日本の文化や観光を紹介するテキストをつけて配布しています。
無償で商用利用が可能なので、あらゆるメディアでさまざまな用途に使うことができます。
サイトには使用例も載っていて、観光マップや施設のサイネージ、Webサイトなど、さまざまな場所での活用イメージが湧きます。
この事例からは、「一貫したデザインの素材セットを提供し、用途は使う人に任せる」といったやり方でも、良いデザインをサポートするための仕組み（ある種のデザインシステム）を提供できることがわかります。
10. 無印良品 ワールド・タグシステム
https://www.ndc.co.jp/hara/news/2020/11/post_50.html
デジタル以外のデザインシステム
原デザイン研究所による「無印良品 ワールド・タグシステム」は、無印良品の商品タグのデザインを、世界共通で管理するためのデザインシステムです。
中身は公開されていませんが、無印良品のタグの特徴的なビジュアルや、タグに書かれる文言のルールなどがマニュアル化されていると思われます。
おそらく「無印の商品タグ」といえば多くの人が頭でイメージできるほど、タグは無印のブランドアイデンティティの1つになっているでしょう。
ユーザーから想起してもらえるような印象をつくり展開させるには、デザインシステムが有効だということが改めて感じられる事例です。
組織や目的に合わせて、最適なデザインシステムの形は変わる
今回ご紹介した10個の事例を見ても分かるように、現状、デザインシステムに決まったルールやフォーマット、理想の姿はありません。
どんな要素を含めば「よいデザインシステム」になる、ということはなく、重要なのは、組織やビジネスの形態、目的にフィットしているかどうかです。利用する組織と目的が異なれば、あるべきデザインシステムの形は変わります。
今回の記事で紹介した事例で挙げれば、
- デジタル庁は、あらゆる人がサイトやサービスにアクセスすることを前提に、アクセシビリティを最重要事項の1つとしている
- 旅行やグルメを取り扱う一休.comでは、画像素材がサイトの重要な要素になるため、写真の撮り方や使い方のガイドラインが簡潔にまとまっている
- 実店舗を展開するFrancfrancは、Webサイトやカタログ、店舗のPopやサイネージなどあらゆる媒体に適応できるよう、モジュールを使った柔軟なシステムを構築している
などなど。それぞれのデザインシステムが、目的や意図をはっきりと感じられるものになっています。
自社がデザインシステムを構築する目的は、「デザイナーとエンジニアが同じソースをみて開発したい」なのか、「ユーザー体験に一貫性を持たせたい」なのか、それとも「ブランドを守りながら外部パートナーと連携したい」なのか……デザインシステムを考える際には、組織の現状や課題を踏まえ、「誰が」「何のために」使うものなのかを言語化するところから始めましょう。
グッドパッチでは、デザインシステムの構築支援も行っていますのでご相談ください。
