portfolio website

公開されているデザインシステムを集めました

国内外業種問わず、公開してくれているデザインシステムを集めてみました。

Apple – Human Interface Guidelines

URL：https://developer.apple.com/jp/design/human-interface-guidelines/

Google – Material Design

URL：https://m3.material.io/

デジタル庁 – Design System

URL：https://design.digital.go.jp/

SmartHR – SmartHR Design System

URL：https://smarthr.design/

カオナビ – kaonavi Brand Deck

URL：https://brand.kaonavi.jp/

Adobe – Spectrum

URL：https://spectrum.adobe.com/

Microsoft – Fluent2

URL：https://fluent2.microsoft.design/

DENSO – D-EXPERIENCEDESIGN SYSTEM

URL：https://ux.system.denso.info/

Audi AG – Audi CI Portal

URL：https://www.audi.com/ci/en/renewed-brand.html

CyberAgent – Spindle

URL：https://spindle.ameba.design/

LINEヤフー – LINE Design System

URL：https://designsystem.line.me/

GitHub – Primer

URL：https://primer.style/

Salesforce – Lightning Design System

URL：https://www.lightningdesignsystem.com/

Mozilla – Mozilla Protocol

URL：https://protocol.mozilla.org/

Ant Group – Ant Design

URL：https://ant.design/

世界的にも有名な大企業がずらーっと並んでますが、その他にもまだまだたくさん公開してくれている企業さんはあるので、調査を続けたいと思います。（こちらでアップデートしていきます）

公開してくれているのは大変勉強になるので感謝でしかありません。

機能するデザイン：デザインシステムとビジュアルアイデンティティが企業にもたらす成果

仕事で企業のコーポレートサイトやブランドサイトのリニューアルの相談をされることが多いですが、話を聞くと表層的な課題が多いなと感じます。

よく聞く課題

  • デザインが古く感じる
  • UIがわかりづらい
  • ビジュアルがイケてない
  • 営業やマーケティングとしてのタッチポイントを強化したい　などなど

要するに「企業の価値を魅力的かつ効果的に伝えきれていない」という課題。

これらの課題解決には、ターゲットの整理、デザインの刷新、サイトの再設計やUI改善、コンテンツの見直しや拡充といった「サイト戦略の見直し」のアプローチが必要ですが、これだけで終わってしまうと、結局のところ小手先のリニューアルになってしまうと思うんです。

  • なぜデザインが古く感じるのか？
  • なぜUIがわかりづらいのか？
  • なぜビジュアルがイケてないのか？

を深堀ってみると、ブランド戦略における重要な要素である「デザイン」がきちんと定義されていないことが多い気がします。
つまり「企業の価値や資産が正しく管理されていない」という深層的な課題があります。

デザインは企業のアイデンティティを形成し、顧客とのコミュニケーションを強化する役割を果たします。きちんと「デザイン」を定義することで小手先だけじゃない正しい方向にリニューアルできます。
そういったクライアントに僕がよく提案してるのが「デザインシステムの導入」と「ビジュアルアイデンティティの定義」です。

  • デザインシステム
    デザインの原則、コンポーネント、スタイルガイド、パターンなどを体系的にまとめたものです。一貫したデザインを実現するためのフレームワークであり、ブランドの整合性を保つ役割を果たします。
  • ビジュアルアイデンティティ
    ロゴ、カラーパレット、タイポグラフィ、イメージスタイルなどが含まれ、視覚的な表現を構成する要素の集合。視覚的な表現の一貫性を持たせる役割を果たします。

デザインシステムとビジュアルアイデンティティには相互関係があり、どちらか一方だけだと十分に機能しません。

機能するデザインがもたらす成果

  • ブランドコントロールの強化
  • 生産性の向上
  • 円滑なコミュニケーション

デザインが機能することでブランドの視覚的な表現が統一され、一貫性を維持させることができるのため、コーポレートサイトに限らず、広告やランディングページなどすべてのタッチポイントで統一された視覚的表現を提供でき、ブランドコントロールを強化できます。また、デザインシステムとビジュアルアイデンティティが整備されることで、既存のガイドラインやコンポーネントを活用できるため時間とリソースを最適化でき、生産性の向上が見込めます。さらに異なる役割のメンバー（社内外問わず）と共通のビジュアル言語を持つことができるので、円滑なコミュニケーションが実現できチームコラボレーションが向上します。

デザインは単なる装飾ではなく、ブランド戦略においてとても重要な中心的な要素です。デザインを機能させることで小手先じゃない、本質的な課題の解決につながると信じてます。魅せ方が変わると、見られ方が変わり、選ばれ方が変わるって考えてます。

バナナは最も優れたUXデザインを実現した果物だった

バナナは最も優れたUXデザインを実現した果物だった

デザイン会社のビートラックスさんが運営するメディア「Freshtrax」で２０２０年に公開された記事でとても面白いものがあったので紹介します。

CEOであるBrandon K. Hill氏が書かれた記事のようで「バナナは最高のUXだ」というもの。

①　食べる前に洗わなくて良い
②　ナイフを使わなくても皮が剥ける
③　皮を剥くガイドラインが入っている
④　食べる際に手が汚れない
⑤　常温保存が可能
⑥　食べ頃が色でわかる

バナナは最高のUX
バナナは最高のUX – 自然界に学ぶデザイン【バイオミミクリー 】 デザイン会社 ビートラックス: ブログ
皆さんはデザインをする際に、どこからインスピレーションを得るだろうか？他のデザイナーの作品、雑誌広告など、多くは人間が作り出したものからだろう。もちろん人為から教わることは勉強になる。しかし、自然から学ぶ「バイオミミクリー」という方法もここでご紹介しておきたい。

これは「なるほど！」でしかない。これまで何度もバナナを食べてるし、バナナをはじめて知ったときの記憶はないが、今までバナナをUXデザインの視点で考えたことなかった。たしかに最高のＵＸ。

記事中には他にも自然界からインスパイアされた日本の新幹線の話やバイオミミクリーというデザイン手法の話にも触れられているので学びがあります。

自然界にはまだまだヒントがありそうなのと、僕はデザイナーじゃないけど、デザインの仕事に携わる者として、もっと視野を広げて生きていきたいと思えた記事でした。

Photo by Mike Dorner on Unsplash