【デザインシステム入門】導入理由やSONICJAM式デザインシステムとは

SONICJAMの松澤です。

普段はプロデューサー/UXデザイナーとして、Webサイトの企画に携わっています。本日は、最近デジタル庁が取り組みはじめたことでも話題になっている「デザインシステム」について書いてみようと思います。

すでにLINEやSmartHRなど多くの大手企業やサービスで利用されているこの仕組みですが、記事を読んでいる方の中には、「デザインシステム」という言葉自体初めて聞く方もいらっしゃるかもしれません。

今回お届けする記事では、そんなデザインシステムの入門編。

そもそも「デザインシステム」とはどのような考え方なのか、どのような問題を解決してくれるのかなど、みなさんが抱える課題感や疑問に対してお応えできるよう、なるべくわかりやすく5つのポイントで説明させていただきます。

1. そもそもデザインシステムとは？
2. デザインシステムはこんな課題を解決する！
3. さいきん話題の理由
4. 実は多様性のあるデザインシステム
5. デザインシステムを導入するには
   

デザインシステムとは、ひとことで言えば「統一性をもって、よいデザインを提供する仕組み」。企業やサービスのデザインを誰でも再現できるように構造化し、考え方やデザインの使い方、組み合わせ方のルールを明確に定義したもののことです。

デザインシステムの構成要素は、解釈によってさまざまですが、最低限の定義として以下の3つを含むことが重要となってきます。

①基本原則
企業やサービスのブランド戦略、ブランドプロミスをどのようにデザインとして解釈するかを決めるルール

デザインシステムを持つことによって、企業やサービスは具体的にどのような恩恵を得ることができるのでしょうか？ ここでは大きく4つのメリットにわけて紹介します。

① ブランドの一貫性を保つ

デザインシステムが持つ最大のメリットは、ブランドがたいせつにするトーン＆マナーやトーンオブボイスといったクリエイティブ基盤のルールを崩すことなく、一貫性を持ってブランドが表現したいアウトプットを制作できることにあります。

この一貫性に必要なのは、競合との差別化や顧客の体験価値、自社の強みなどを表現に置き換えるために原則化したルール。デザインシステムでは、まず最初にブランドの考えを基本原則に落とし込む必要があるため、その後の制作ではデザインシステムに則ったアウトプットを続ける限りはブランドの統一性を保つことができるのです。


② Webサイトの更新が迅速かつ容易に

デザインシステムを導入することは、複数の部署が自社やサービスのWebサイトを更新する企業では、非常に大きな工数削減と効率化に繋がります。

デザインシステムによってルール化されたデザインパーツがあれば、自社サイトを更新する際にCMSのコンポーネントというかたちで、コーディングやデザインの専門知識がなくても実装できるように設計することが可能です。思いついたアイデアや急を要するニュースを担当者がすぐにWebサイトに反映し顧客に発信するなど、すばやいトライ＆エラーができるようになるため、効果検証のスピードが格段に早まります。

またWebサイトのリテラシーがあまりない担当でも運用できるようになることや、Webサイトの仕組みやデザインに気を取られることなく、純粋に発信するコンテンツの質や顧客との関係に集中できるようになることも大きな利点です。

③ コンテンツ資産のルール管理

デザインシステムで組まれたコンテンツは、テンプレートとして保存しておくことができるため、もしWebサイトの仕様が変わったり改修があった場合でも、既存のコンテンツをそのまま引き継ぐことが可能です。

たとえば数年後に大規模なリニューアルを控えている場合、コンポーネントルールに則っているものは、コンポーネントに含まれる要素をそのままにデザインの見直しを行うことで、日に日に増大していくページの移行もスムーズに進めることができるのです。

④ユーザビリティ・アクセシビリティの向上

コンポーネント化することがすべてのユーザビリティの解決になるわけではありませんが、デザインシステムの中にすでに効果が認められているUI/UXやWebマーケティングのノウハウを組み込むことで、ユーザビリティを考慮した設計をパーツ単位で考える必要はなくなります。

またアクセシビリティに関しても、独自にデザインされたコンテンツのアクセシビリティを検証するより、はるかに効率よくアクセシビリティを考慮した設計を実現しやすくなります。

デザインシステムは、すでにこれまでさまざまな企業やサービスでも利用されていましたが、最近になってより話題になっていると感じる方も多いのではないでしょうか？ 私たちは、この背景に最新ツールの登場とオウンドメディアの普及が関係しているのではないかと考えています。

かつてWebのデザイン制作で一般的であったpsdファイルなどでは、それぞれのファイルが独立しており、デザインのルールが崩れやすいことが課題の一つでしたが、figmaやxdなどのツールの普及とともに、構造的に大規模なページを管理するルールの重要性が浸透してきました。

また、さまざまな企業でオウンドメディアが普及しはじめ、1つのWebサイトが持つコンテンツボリュームが大きくなってきたことも、デザインシステムが普及する要因の一端を担っています。ルール化されていないコンテンツの移行はレイアウトが崩れやすく移行のコストも増えるため、これまではデザイン性やユーザーの使いやすさよりも、システム移行のコストを考慮したデザインが優先されることもありました。しかし、そこがデザインシステムとしてルール化されていると、UXにこだわった上で長期的にもコンテンツ資産が活かしやすい、と企業側が気付いてきたのかもしれません。

ここまで読んでくれた方の中には、もしかしたらデザインシステムを導入することで、すべてのデザインが似かよってしまうのではないか、と心配される方もいるかもしれません。しかし、デザインシステムに組み込むUIルールは、企業やサービスごとの“らしさ”をたいせつに、独自のカスタムが可能です。

また、デザインシステムは、コンテンツ（中身）やクリエイティブ（ビジュアル＋メッセージ）を示すことはなく、あくまでもガイダンス（指針）としての機能しか有しません。当然、ガイダンスによらない特殊な機能や要素を有するコンテンツが発生することもありますが、対象に応じUIルールを組み込むことはもちろん、必要に応じてルールを変えるなどときにはルールやガイドライン自体をアップデートしていく余白も重要です。

SONICJAMでは、これまでに多く寄せられたデザインシステムに関するご相談から、大きく以下の3つのケースに応じて、導入支援をさせていただいております。そのうち、とくにAとBはサイトリニューアルなどとセットで実施されるケースが多いものになり、初めて導入される方にもオススメのプランです。0から制作するCのプランは時間的なコストもかかるため、デザインシステムそのものを構築する場合に単体で実施されることをおすすめしております。

A. SONICJAM式デザインシステム

弊社が、どんな企業でも汎用的に使えるように組んだデザインシステムです。自社で完全オリジナルを作成するのはハードルが高いという企業に向けて、手軽に基本的なデザインシステムとして提供させていただいております。またその企業独自の仕組みとなるよう、さまざまなカスタマイズもご相談可能です。

B. スタイルガイドのある企業向け、コンポーネントから入るデザインシステム

すでにCIまわりの規定がしっかりある企業向けのデザインシステムです。デザイン原則などはCIにあるものの、デジタル用のルールができておらず、企業の考え方をデジタルのデザインシステムに落とし込む必要がある場合のサポート方法です。

C. 完全オリジナルデザインシステム

デザインの基本原則の落とし込みからコンポーネントの作成までサポートする、完全オーダーメイドのデザインシステム制作です。ヒアリングや議論を重ねながら、企業やサービスの”らしさ”を最大限に活かした仕組みをつくります。


デザインシステム入門編、いかがだったでしょうか？ この記事で書かせていただいたこと以外にも、デザインシステムにはさまざまなメリットがあります。もっとデザインシステムについて知りたい方や、SONICJAMのデザインシステムの設計サービスに興味を持たれた方は、それぞれのデザインシステムの事例を参照いただいたり、お問い合わせフォームよりお気軽にご連絡くださいませ。