公開されている日本企業のデザインシステムをまとめてみたよ
はじめに
UIデザインについて勉強しようとすると、必ずデザインシステムについて目を通しておく必要があります。
デザインシステムを導入することで、一貫性のあるデザインが実現できるため、ユーザビリティの向上はもちろん、デザイナー・エンジニア双方にとって開発効率が上がります。
「事業を立ち上げたばかりだから...」「スモールスタートで開発に関わるメンバーが少ないから...」といった理由で、まだデザインシステムなんて無くても問題ないよね...と、考える企業は未だに多いかと思います。
ですが、個人的にはむしろ、事業が大きくなってからでは負の遺産が膨れてしまい、どんどんデザインシステムの構築は後手に回りがちになるのではないかと思っています。
というのも、デザインシステムの構築自体は、直接的に売上に影響するものではないので、なかなか経営陣や開発以外の部署の方々には理解されがたいものです。
そのため、どうしても優先度を下げられることも多いという現状があります。
なので、工数が最小限で済む小規模の段階でこそ、デザインシステムを構築しておくことは、将来的に生産性の向上につながると思っています。
そこで、世の中に公開されている日本の有名企業のデザインシステムをご紹介します。
今回、日本企業に特定した理由は
翻訳が大変で途中で読むのを挫折した…
ターゲットが日本人だから日本企業で使われているルールを参考にしたい
HIGやマテリアルデザインなどの有名どころはある程度読んだけど、他にもどんなものを知っておくと良いか知りたい
みたいなニーズが私自身にあったんですが、あまりそういった記事は見当たらなかったので、じゃあ自分で作っちゃえ！って感じです。
※個人的な備忘録のつもりで本記事を執筆しております。
もし解釈や理解がズレていたらすみません。
1.SmartHR Design System
バックオフィスのSaaS企業「SmartHR」が公開しているデザインシステムです。
誰でも！効率よく！SmartHRらしく！作るためのルールがまとめられています。ロゴやカラー定義、推奨フォント、さらには営業資料のテンプレートまで揃っています。
ちなみに、SmartHRらしい文書を書くためのtextlintなんてものも公開しています。（チームメンバーのスキルや熱量が合うなら、ぜひ全て模倣したいものです…）
私も現在SaaS系企業のインハウスデザイナーなので、非常にお世話になっています。
UIデザインだけでなく、バナーやサービスサイト、パンフレットやホワイトペーパーのデザイン、どれもクオリティが高いので、まず「SmartHRはどんな感じで作っているのかな…」とまず初めに参考にしてみると良いかもしれません。
2.Spindle(Ameba)
サイバーエージェントのAmebaのデザインシステムです。
Amebaのデザイン原則は敬意・軽快・情緒・歓迎であり、特にアクセシビリティに関するルールが非常に参考になります。読み込み速度などのパフォーマンスチェックリストや改善する具体的な方法なども書かれており、とてもユーザーに寄り添っている印象があります。
さらに、ブランドボイスといった、プロダクトの人格的なものも定義されていて、読んでいて面白かったです。
あと、あのコロンとしたAmeba Sansは個人的に可愛くて大好きなフォントです。
3.Inhouse（GMOペパポ）
GMOペパボのデザインシステムです。
Inhouseは、minneやカラーミーショップ、ロリポップなどのGMOが提供しているサービスの各々が持っていたデザイン原則やカラーパレット、コンポーネントなどで重複しているものを整備して、共通基盤のデザインシステムを開発しようという考えの下、生まれたデザインシステムです。
「Flavor」という上書き可能なデザイントークンシステムを採用しており、テーマカラーやフォントなどを上書きするだけで、デザインシステムを維持ながらも、ブランドカラーを出したUIデザインを実現できるというものになっています。
そのため、GMOらしい個性を出したい！というよりも、どんなサービスにも適用しやすいデザインシステムといった印象が強いです。
4.LINE Design System
LINEのデザインシステムです。
LINEを使っていない日本人はほぼいないのでは？というほど浸透したツールなので、直感的に操作しやすいUIを実現できるのではないかと思います。
LINEのデザインシステムの原則は、親しい人との親密なコミュニケーション（CHAT FIRST）をコアバリューとしています。そのため、ユーザーのコミュニケーション体験をさらに良くするための工夫が数多く提案されています。
また、サービスの利用者を「ユーザー」と呼ばず、できるだけ具体的に表現し、目の前にいる相手に話しかけるような言い回しが、個人的にはとても素敵だなと思いました。
5.Cookpad Apron
クックパッドのデザインシステムです。
元々、クックパッドにはSaraというCSSベースのUIフレームワークが存在しているようで、こちらをベースに改良したデザインシステムがCitrusと呼ばれるものだったそうです。
そして、このCitrusを改良し、できたものが現在使われているApronだそうです。
Apronには、カラーやタイポグラフィー、コンポーネントの他、プロダクトのブランドコンセプトやグラフィックの構成や写真素材の表現方法なども詳しくルール定義がされており、ドキュメントが充実しています。
（社外向けのものは一部公開が制限されているみたいですが）
ちなみに、クックパッドというプロダクトは、「前向き」「創造的」「信頼感」の人格を持っているそうですね。
たしかにクックパッドって、たくさんのレシピを眺めているだけでも楽しい気分になりますよね。
シーズンに合わせてアプリアイコンやスプラッシュも頻繁に変化していて、アプリを起動する度にワクワクします。
6.デジタル庁 Design Sysyem
デジタル庁のデザインシステムです。
figma Communityで公開された時、SNSなどで話題になっていましたね。
各府省庁が個別に構築しているwebやアプリなどのUIを統一することが主な目的で、ユーザーエクスペリエンスの向上、開発・運用の効率化を目指して作成されたデザインシステムです。
まず、パッとみた時に「めちゃくちゃわかりやすい」と感じました。
見た目はBootstrapに近い印象がありますが、全年齢誰もがわかりやすいUIを考えようとすると、このようなデザインシステムになる気がします。
どこの企業も同様だと思いますが、内製化するタイミングってどうしてもスパゲティ状態のUIを紐解く地道な作業が必要になるので、こうした取り組みを公開するまでの道のりは相当険しいものだったのだろうなと思います。
特に、行政だけに、各方々のステークホルダー（特に上層のおじいちゃん達）とのコミュニケーションが大変だっただろうなと思います…（運用フェーズでもまた色々ありそうですし）
しかし、多くの人が使う行政サービスのUIを改善していくのは非常に意義を感じるのではと思います。
ちなみに、にデジタ
ル庁の公式サイトは、このデザインシステムを踏襲して制作しているので、かなり見やすかったです（しかもフロントはReact…どうせWordpressでしょとか馬鹿にしてすみませんw）。
シンプル過ぎる感もありますが、行政のサイトへの訪問目的は、何か特定の情報を知りたくて訪問しているケースがほとんどなので、その情報にたどり着くまでの動線をいかにわかりやすくするかがミッションだと思います。
なので、オシャレさや面白味は不要なのではと個人的には思うので、非常に良いサイトデザインだと思いました。
7.ラクスル kamii
ポスターやノベルティ印刷で有名なラクスルのデザインシステムです。
企業ロゴのCMYKカラーが非常に印象的ですよね。
こちらもパーソナリティーが明示されており、フレンドリー、配慮、意欲的の3つの掲げています。
ラクスルのサービスサイトはmicroCMSと、Nuxt.jsで開発させているようで、ガイドラインにもVUE COMPONENTSという項目がありました。
まだ中身はなかったのでこれから公開に向けて準備しているのだと思います。
ラクスルはネイティブアプリは無いので、基本的にwebサイト向けの設計になるかと思います。
おまけ
Figma公式のまとめサイト。
こちらは主に海外サービスが多いですが、HIGやマテリアルデザインはもちろん、マイクロソフトやアトラシアンやgithub、IBMなどのデザインシステムがまとまっています。
有名どころのデザインシステムを抑えたいって方はぜひチェックしてみると良いかもしれません。
さいごに
とはいえ、開発メンバーのスキル感や上長の理解や社内政治など、なかなか理想通りの運用ができるとは限りませんよね..
理想を追ったらキリがありませんし、厳格に決め過ぎてしまっても、誰も守れず形骸化するのがオチなので、今のフェーズで採用すべきことを優先事項としてまとめ、チームメンバーで話し合いながら、少しずつアップデートしていくのが良いかと思います。
ガイドライン警察になってしまう人と、場当たりでやりたい人と…メンバーの温度感のズレが生じてギスギスしてしまわないように…平和なドキュメントを提案したいものですね。
この記事が気に入ったらサポートをしてみませんか？