フォーカスしたいもの
デザインシステムはGoogleやAppleなど、海外の大企業が活用し始め、その有用性が認知され導入する企業が増えてきました。
実際、大企業に勤めている場合やそれに関わる場合であれば、デザインシステムを用いることが当たり前です。しかし、そうでない場合はデザインシステムに触れることがないのが普通です。
今では、日本でもデザインシステムを活用している企業が多く存在します。
今回の記事では、デザインシステムを活用している国内企業および海外企業の活用事例を紹介いたします。
どの企業もサービスの提供が軌道に乗り、事業が拡大したタイミングでデザインシステムを導入している場合がほとんどです。
デザインシステムの導入を検討している方は、各企業のデザインシステムの紹介記事を読んで頂き、どのような経緯や問題点、導入した結果などをチェックしデザインシステムの有用性を確認してください。
デザインシステムとは？
デザインシステムとは、
- デザインの概念や原則などをまとめたドキュメント
- 概念や原則を具体的なデザインに落とし込むためのスタイルガイド
- UIコンポーネントライブラリ
- 上記の管理、運用ルール
- コード化されたUIコンポーネントの管理ツール
など、デザインを作り上げるためのあらゆる要素で成り立つ「仕組み」をまとめたものを指します。
今まで、デザインのトンマナなどにより一部のデザイナーにだけ依頼しなければいけなかった場合であっても、デザインシステムを用いることでプロジェクトに関わる多くのメンバーに情報を共有し、問題なく作業することが可能となります。
日本国内デザインシステムの活用事例
まずは日本国内のデザインシステムをご紹介します。
メルカリ(Design System Web)
メルカリにデザインシステムが導入されたのは、2019年の夏頃。割と最近になって導入されました。メルカリのサービス開始が2013年7月だったので、6年後に導入されることとなりました。
名称は「Design System Web」です。
https://engineering.mercari.com/blog/entry/20210823-8128e0d987/
サイバーエージェント（Spindle）
サイバーエージェントはAmebaというブログサービスを主体とした企業です。アメーバブログは著名人のブログがあり、ご存じの方も多いのではないでしょうか。
Amebaが誕生し、15年経ったタイミングでデザインシステムを導入する運びとなりました。名称は、「Spindle」です。
https://developers.cyberagent.co.jp/blog/archives/31641/
SmartHR（SmartHR Design System）
株式会社SmartHRがサービス提供している「SmartHR」は、人事労務の効率化を徹底追及したクラウド人事労務ソフトです。
「SmartHRらしさ」を表現するための基準や素材をまとめたデザインシステムとして、「SmartHR Design System」が導入されました。
すべての人に、一貫したSmartHRのイメージと体験を届け、今までのSmartHRとは違った特別な体験を届ける時のガイダンスにもなります。
LINE（LINE Design System）
今では日本人のほとんどが使用しているといっても過言ではないコミュニケーションアプリ。
LINEの全体デザインを構成する要素やUXなどの統合ガイドラインが、「LINE Design System」という名称のデザインシステムです。
ZOZO
ZOZOといえば、ファッション通販サイトのZOZOTOWNが有名であり、ご存じの方も多いでしょう。
UI/UXの維持および改善に重きを置いたデザインシステム導入案で、これによりユーザーが実際にWebサイトを訪れた時に不満を感じることをなくし、管理者側はデザインシステムで決まっていることを遵守しながらUI/UXを意識し続けることが可能となりました。
https://techblog.zozo.com/entry/zozotown-uiux-pj-building
Wantedly
Wantedlyはビジネスに特化したSNSで、求人者と求職者をマッチングするためのツールともいえるサービスです。
Wantedlyのデザインシステムの目的を以下のように掲げています。
“「プロダクト・デバイスをまたいでも・誰がデザインしても体験やブランドとしての一貫性を保つ」「デザインの生産性を向上させ、デザイナー エンジニア 間コミュニケーションを改善することで、ユーザーに価値を届ける速度を向上させる」”
https://www.wantedly.com/companies/wantedly/post_articles/302873
Yahoo!JAPAN（SAYA）
日本ではナンバーワンの人気を誇るポータルサイトのひとつ。今では検索エンジンだけでなく、ショッピングサイトやオークションサイト、記事コンテンツなどあらゆる情報やツールがYahoo！で確認できます。
Yahoo!JAPANが運用しているデザインシステムの名称は「SAYA」です。
https://techblog.yahoo.co.jp/entry/20190828739980/
GMOペパボ（Inhouse）
GMOペパボは、GMOインターネット株式会社を親会社に持つ、「ロリポップ！」や「カラーミーショップ」など多くのWebサービスを運営する会社です。
GMOペパボのデザインシステムの名称は「Inhouse」です。
海外のデザインシステムの活用事例
では、次に海外企業のデザインシステムをご紹介します。
Google（Material You）
Googleのデザインシステムといえば「Material Design」でしたが、その次の段階に進化させたものとして誕生したのが「Material You」です。
Material Youの特徴として、ユーザー自身がUIデザインをカスタム可能で、ユーザー自身のスタイルに合わせられるようになっています。
https://material.io/blog/announcing-material-you
Uber
Uberはアメリカの配車サービスで、一般のドライバーが自分の車にお客さんを乗せて送り届けることで収入が得られるサービスです。
デザインシステムを導入したというより、コーポレート・アイデンティティを一新したといえる内容ですが、デザインシステムとしても十分に通用する内容となっています。
https://developer.uber.com/docs/riders/guides/design-guidelines
Spotify(Encore)
音楽の定額配信サービスとして、誰でも一度は聞いたことのあるサービス「Spotify」。スタートアップ時にはデザインシステムは導入しておらず、アプリをリリースの際にも、デザインの基準などが一切ありませんでした。
Spotifyを1回限りのプロジェクトにするのではなく、長く親しまれるサービスにするため、デザインの一貫性を徹底したシステムを導入。更新を何回も行い、誕生したデザインシステムが「Encore」です。
https://spotify.design/article/reimagining-design-systems-at-spotify
Salesforce（Lightning Design System）
Salesforce社は、同名のクラウド型ビジネスアプリケーションを提供しており、目的に合わせて様々な製品を組み合わせて利用できるプラットフォームとなっています。
Salesforceのデザインシステムの名称は「Lightning Design System」です。
https://www.lightningdesignsystem.com/
Apple（Human Interface Design）
Appleと言えば知らない人はいないほどのテクノロジー企業であり、iPhoneやiPad、Apple Watchなどの製品の開発・販売を行っています。
Appleのデザインシステムの名称は「Human Interface Design」といい、Googleのデザインシステムと比較されやすいデザインシステムですが、メニュー構成は大きく異なっています。
https://developer.apple.com/jp/design/
Audi
Audiはドイツのバイエルンに本社を置く自動車メーカーで、車にあまり興味がなくても、CMなどで知っているという人は多いのではないでしょうか。
Audiはデザインシステムとして公表はしていないものの、コーポレート・アイデンティティとして公開されているものがデザインシステムとしても機能するものとなっています。
https://www.audi.com/ci/en/renewed-brand.html
Ｍicrosoft（Fluent Design System）
MicrosoftもAppleやGoogleなどと同様、誰もが知っている会社です。
アメリカ合衆国のワシントン州に本社を構え、ソフトウェアの開発や販売を行っています。
Microsoftが近年公開したデザインシステムの名称は「Fluent Design System」といいます。
デザインシステムの活用事例まとめ
このようにデザインシステムを導入し活用している企業は国内外に多く存在します。
各社のWebサイトから様々なデザインシステムの誕生および導入の経緯を確認すると、事業の拡大がその背景に多くあるように感じます。
自社でデザインシステムの導入を検討している方は、デザインシステムを導入するメリットを各社がどういった経緯で導入に至ったのかをチェックし、ひとつの判断材料としてはいかがでしょうか。
デパート採用情報
株式会社デパートでは一緒に働く仲間を募集しています
