UIデザインやルール決めで参考にしている「国内」デザインシステム4選＋参考にしたサイト達
どうも！
MoQupの原田です。
以前公開した、「UIデザインやルール決めで参考にしているサイト7選！」の記事がとても好評だったので、それに類して参考になるデザインシステムのサイトをご紹介しますね。
参考にしたリンクも最後にまとめているので、興味があれば是非ご覧ください。
はじめに
僕は先日グッドデザイン賞を取らせていただいた「Uniforce IPO準備クラウド」のUIを作成させていただいているのですが、UI作成の初期段階からデザインシステムを作る事を前提に、サービスUIを作成してきました。
その経験上、サービス開発の初期段階からデザインシステム構築を意識してUIを作成することにメリットしか感じませんでした。
リリースから1年に満たないサービスではあるものの、その意識のおかげでスピード感を持った開発ができていると思っています。
まだまだ成長途中のサービスではあるので、まとめきれていない所や事業の変遷とともに内容も変わっていくところもあるので、詳しい事はデザインシステムがお披露目できるようになってから記事にしようと思っています。
デザインシステムとは
デザインシステムとは、企業のビジョンやブランドアイデンティティなどから「あるべきデザイン」を一貫性をもって提供するために定められたものです。デザインシステムを用いることで、一貫したユーザー体験の提供や業務の効率化を図ることができます。
概要としてはChatGPTにきいてみた通りですが、
実務においては、
・デザイナー同士の共通認識
・エンジニアとの共通認識
・ユーザーへの世界観の提示
・クオリティ均一化
など、「プロダクトやブランド」と「デザイナー以外（エンジニア、ユーザーも含む）」と「デザイナー」の認識を統一して「接続する」役割の物だと思っていて、プロダクトやブランドの考え方や理念と、それを表現する手法をまとめたものだと思っています。
デザインシステムの最終的な目的地は、
誰がデザイン（UIやWebサイト）を作っても同じクオリティで、かつ意図を説明できるようになり、ユーザーに一貫性を持った操作を提供できる事。
だと僕は考えています。
最新のサービスやプロダクトに関わる皆さんが、職種の壁を越えて一つの理念やコンセプトを表現するために「デザインシステム」を作り上げていく未来が生まれると幸せですね。
デザインシステム構築のメリット
他にも簡単にデザインシステム構築のメリットをあげておくと、
・ブランド表現
サービスやブランドの見た目と振る舞い の一貫性を保つ
・ユーザビリティの担保
ユーザーに一貫した操作性を提供する
・デザインアウトプットの効率化
ディティールやコンポーネントの事で悩まず、プロダクトやブランドとして大切な体験にフォーカスできるリソースを捻出する
・複数のプロダクトが与える体験の統一
複数プロダクトをまたいでも、ユーザーに同様の体験や印象を与えるため。
・エンジニアとのフロントエンド開発、コミュニケーションの
・メンテナンスの効率化
と、サービスやプロダクトを作っていく上でメリットが多くあります。
デメリットは、「設計・構築にそれなりの時間が必要で、そのためのリソースを捻出する必要がある」こと以外には特にないのではないかと感じています。
日本国内で参考にしているデザインシステム4選
選定している基準としては、
・海外のデザインシステムに規模やデザインで劣っていない事
・プロダクトやサービスの理念が込められている事
・独自性がある事
・一般に公開されている事
という3つの観点で選別しています。
1. Smart HR
株式会社SmartHRがサービス提供している「SmartHR」のデザインシステムです。
国内のデザインシステムと言えば、SmartHR！というデザイナー界隈の声もよく聞きますし、本当に世界的に見ても完成度の高いデザインシステムだと思います。
「SmartHRらしさ」を表現するための基準や素材を、あますところなくまとめ、すべての人に、一貫したSmartHRのイメージと体験を届け、SmartHRの体験をユーザーに届けるためのガイダンスとして申し分ないものだと考えています。（将来的にはこれを超えるデザインシステムを作りたいですね）
2. Freee
世界を舞台に活躍するデザイン・イノベーション・ファームのTakramがリブランディングを手掛け、そこからFreeeの意思を落としこんだデザインシステム（若干ガイドラインに近いですが）です。
載せるかどうか少し迷ったのですが、ここに各サービスで使用されるコンポーネントや開発技術についてまとめた状態にしたものが、デザインシステムとしては最高峰の物になるのではないか？と個人的には考えています。
3.LINE
皆さんご存知、LINE社ですね。
母体は韓国のNHNですが、開発はほとんどが日本法人で行われたとされています。（この辺の話は深掘りしませんが。。）
「LINEのデザインとユーザーエクスペリエンスに貢献するコンポーネント、インタラクション方法などのガイドラインを統合したもの」として、申し分のないデザインシステムだと思います。
その中でも特に印象的なのがUX ガイドラインで、その中には3つしか項目がありません（確認、選択、モーダル）。いかにユーザーへのフィードバックをシンプルかつ分かりやすいものにするべきか？という意志を感じます。
社内外のLINE サービスを効果的かつ一貫性のあるものにするために作られた、ある種特化した完成度の高いデザインシステムだと思います。
4.Ameba [Spindle]
日本人に一番刺さるデザインシステムはこれなのではないでしょうか？？
実は2023のグッドデザイン賞にも選出されています。
Spindleはすべきこととしないことの判断の指針であり、Amebaをつくるすべての人のために存在します。目に見えるもの、見えないものも、Amebaを通じてユーザーに届く全てのものによって「Amebaらしさ」がつくられることを意識しなければなりません。
日本向けのサービスを作り続けるAmebaだからこそ、日本人の好むメッセージや、デザインにかなりの知見があり、温かみのあるデザインシステムに感じました。
日本の代表的なデザインシステム事例で言えば、一番の成功例だと考えています。
番外編：SanSan
公開されていないので番外編としましたが、今最もデザインシステムに勢いがあるのはSanSanなのではないかと個人的に考えています。
アプリもサービスもSanSanらしさを残しつつ、各サービスの特色が出ていてとても参考になります。
上の記事を見る限りでは社内でデザインシステムが使われているそうなのですが、一度見てみたいものです。
（もし公開されていたら教えていただけると助かります！！）
当初は6選か7選にしようと思ったのですが、この4つが飛び抜けていたので、4選にさせてもらいました。（なんとなくわかってはいたのですがｗ）
やっぱり大規模なデザインシステムで海外のデザインシステムと比較しても見劣りしないものとなると、どうしても余力のある大手企業のデザインシステムになってしまいますが、その辺りはご了承ください。
ただ、完成度の高いデザインシステムが国内にもある事はとても良い事で、自分たちのデザインシステムに必要な事や足りない事を考えながら、これよりも優れたシステムをつくろうという気持ちにさせてくれますね。
まとめ
正直な話、ベンチャーやスタートアップがデザインシステムを作っていく事は合理的ではない部分も多くあります。
本格的に作っていくのはPMF（プロダクトマーケットフィット）を達成してからでも全く遅くないとは思います。
ただ、開発スピードを上げていくためにデザインシステムを作る事は理にかなっているので、30％～40％ぐらいのデザインシステムを作ってPMFまで進んでいくのが正解なのかなと個人的には思っていますね。
・サービスやブランドの理念
・カラー
・ロゴ
・タイポグラフィ
・レイアウト
・余白
などブランドを定義するためのデザイン的な要素は最初に決めておくと良いです。
そして、PMFまでに絶対にやっておきたい事は、
・デザイナーやエンジニアチームが大きくなる前に骨子を整えておく事
・定期的に見直しを行う事
の二つを行っておくと、デザインチームの統制を取りやすくなったり、いつでもデザインシステム作成に舵を切れると考えてます。
デザインシステムを作っていく事は一朝一夕ではなく、プロダクトの成長や市場の変化に影響されることも大いにあります。
PMFが終わっても完成することはなく、常に70～80％程度の完成度のラインで更新し続け、サービスやブランドが終わるその日まで更新が続いていく、おわりのない旅だとも感じています。
ただ、、、楽しいですけどねｗ
また次の記事でお会いしましょう！！
皆様の良きデザインライフを！！
今回参考にしたデザインシステム（リンクのみ）
日本国内
海外（殿堂入り）
Google 「Material Design 3.0」
個人的には、Webサービスのデザインシステムとしては、2.0が最高の完成度だと思っています。
3.0に更新されてからスマホやアプリ主体のUIだったりカスタマイズ性を重視したりとユーザーの環境に合わせてガイドラインを大きく変更しました。
ただ、それでも世界で一番のデザインシステムだと思いますので、一読の価値はあります。
Apple [ヒューマンインターフェイスガイドライン（HIG）]
Salesforce [Lightning Design System]
海外
この記事が気に入ったらサポートをしてみませんか？