デザインシステムが明文化する、拡張可能なWebサイトの骨格とは？事例もあり！

同じ目標に向けてだれかとデザインを共有したい場合に、目で見てすぐに伝わるようなものが用意されていると便利ですよね。

デザインの共有を行いたいとき、デザインルールを明示化する方法があります。今回は「デザインルールの共有」をするデザインシステムについて書きました。

デザインシステム（Design System）を構成するもの

デザインシステムとは、デザインのガイドラインとしてデザインの調和を高めるためのルールです。デザインガイドラインと異なるポイントは、より広範囲に影響を及ぼすところ。デザインチームの中でのみ機能するものではなく、チームをまたいで相互依存する標準化されたプラットフォームとして機能するガイドラインです。

たとえ、異なるチームが見てもどのようにデザインをすれば一貫性を保てるのか、要件はなにかを理解できるようにまとめられている必要があります。このガイドは、さまざまな企業や人に見られることを想定して作ります。

そのために製作者の私たちがすべきことは、デザインの要素を洗い出してすべて記載する必要があります。見やすさを保ちつつ、ルールの明文化を行います。デザインシステムが最も有益なのは開発チームです。デザインシステムは開発の効率をよくしますが、開発の効率だけではなくUXにも気を配ってチームの要望を聞くように心かけてください。

では、デザインシステムがどのようにどんな要素でどのように作られているのかご覧ください。

1. 使用可能なツールを定める

チームごと、プロジェクトごとで違うツールを使うことはめずらしくありません。そのため、使用するツールに関してもガイドで定めてください。

プロジェクトのリサーチからデザイン、開発から検証に関わるだれもが使用するツールを把握できているかの確認が必要です。使用するツールは全員の合意の上で決めてください。

2. フォルダの命名規則を定める

デザインシステムは、フォルダ構成の命名規則も定めます。作業をしやすいようにフォルダ構成もルールに基づいた管理を行います。命名規則を設けて明文化し、目的のファイルを見つけ出すのを簡単にします。チームごとに最適な方法や名前を使用してください。

3. ドキュメンテーション

決定事項やルールをガイドに明文化します。共通言語を作ることで、視覚的にしか説明しづらかったデザインの議論がしやすくなります。デザインシステムに関する情報はすべて記載するのが望ましいです。

UIに関する情報は、スタイルガイドに落とし込む

上記を踏まえて、UIのデザイン要素を明確にします。使用されているボタン、見出し、アコーディオン、タブなどのコンポーネントをスクリーンショットと文章を共に記載します。

UIデザインと文章がまとまったものをスタイルガイドと呼びます。デザインシステムほど総体的にまとめられたガイドではありませんが、スタイルガイドだけでもデザインの共有には役に立ちます。スタイルガイドはデザイナーとエンジニア、エンジニア同士のコードの共有に活かされるケースが多いです。

スタイルガイドが提供する価値は、「UIデザインの一貫性を保つ」「どのような変更が行われるのか予測可能にする」ことです。ほかにも、大きな組織での作業の場合は、上司を説得させる資料にもなるでしょう。

ツールボックスの共有、グリッドシステム、タイポグラフィーなどテキストなどスタイルに関する情報を明記すると変更や追加にも強くなります。

命名規則を予め決めておくと、レイヤーやコンポーネントを使用する際に迷う必要がなくなり効率的です。さらに、命名規則を統一することで共通認識も生まれます。

パターンライブラリーの明示化は最も効果的です。デザインの要素やコンポーネントがどのような依存関係か、外観に影響を与えているものを明記します。デザインを分解してグループ化されているということは、再利用可能なスタイルとしてルールの共有ができるということでもあります。

デザインルールの明文化で一番大きな恩恵を受けるのは、実装するエンジニアです。「デバイス毎の差分」「エンジニアによって違うUIへの解釈」「実装後の手戻り」のような問題が減ります。

しかし、スタイルガイドを作成は製作者のためだけではありません。ビジネスやブランドにも影響を与え、エンドユーザーに影響を及ぼしています。

デザインシステムのメリット

UIの枠を超えて、デザイン全般の規則を定めたものが、デザインシステムです。冒頭でご紹介したように、デザインシステムは、デザインの調和を高めるもの。
製作が楽になること以外にも、ブランド、ビジネス、ユーザーへのメリットがあります。

ブランドの価値向上に関するメリット

視認性が上がる

デザインシステムは、製品やサービスのパーソナリティを形成します。
独自の性格やアイデンティティを与えることで、人に認識されやすくなります。

たとえば、FacebookのLikeボタンは、Facebookらしさを演出しています。
サービスの外へ切り出して表示していても「Facebook」であることが伝わります。

一貫性が保たれる

一貫されたデザインは、UXにも影響を及ぼしています。
デザインが不安定なUIを想像すると、使いにくさの想像は簡単につくのではないでしょうか？

ほかにも、インタラクションが一貫性を保つことも大切です。一貫性を失った視覚表現を避ける意図としても、ガイドのルールは守るようにしてください。

ブランドの真正性をアピールできる

Mediumの拍手ボタンはほかのサービスでは見ないユニークなものです。このような一貫性が、ブランドとしての認知に影響を及ぼしています。

ユーザーへのメリット

使いやすさ、楽しさを提供できる

使いやすさや楽しさをデザインするのは難しい作業です。機能を認識し実行することの一貫性を保ち、簡単なタスクを通じてユーザーとやり取りをすることはUXの質は高めます。

ビジネス的なメリット

効率とコストを最適化できる

デザインシステムは製作者以外にも、デザインに関係した作業を行っているチームの人へ効率的にデザインの情報を共有します。それは、製品の作成や修正を簡単にしています。ガイド通りに作ることで、全ての製品の統一感を保っています。

デザインのガイドラインを作成してから、現在に至るまで運用し続けていることで評価の高いAirbnbを例に説明します。Airbnbのデザインリーダーは、デザインシステムの目指すことをこのように述べました。

より美しく使いやすいガイドを作成すると、再利用可能なクロスプラットフォームのコンポーネントとして利用できます。私たちは効率的な作業のためにも、デザインを統一させるために明確なデザインシステムを望んでいました。

デザインシステムが共有されて以来、エンジニアはインターフェースの実装よりも内部の仕組みのようにコア部分のロジックを実装することに集中する時間ができました。その結果、開発の効率は上がりました。

安定性と柔軟性が高まる

デザインシステムは、関わる人にとってわからない情報を明らかにする資料として機能しています。
将来的な運用も視野に入れて作り、繰り返し変更を行うことで安定した情報源としての価値を発揮します。デザインシステムは変更されてはアップデートされていきます。

デザインシステム静的なルールとアトムのセットではなく、進化し続けるデザインシステムではなければなりません。― Airbnb デザイン責任者 カリーサーリネン

イノベーションを起こしうる

デザインシステムは、プロダクトやアプリケーションにも利益をもたらします。
デザインシステムはUXの基盤を作り出し、イノベーションの土台を提供しています。

デザインシステムの例

次は、Atlassianのデザインシステムを例にして説明します。

Atlassianのデザインシステム

Atlassianは、デザインシステムをランディングページとして公開しています。
ブランド、マーケティング、製品、ロゴの扱いをはじめとした規約や色、イラストが記載されています。

Atlassianのデザインシステムドキュメンテーションは、あらゆる関係者と共有するのに効率的に機能します。全体のことを考えながら、Atlassianの文化を共有しています。
このデザインシステムは、頻繁に更新されています。アクセスすると「What’s new?」で更新を確認することができます。

Atlassianでは、ダウンロード可能なUI kitも配布しています。使用フォントのダウンロードが可能で、これらのデータからも細部へに払っている意識が垣間見えます。グリッドシステム、フォントに関する詳細もしっかりと文章で共有されています。

ブランドでは、Atlassian製品がもたらしたメリット、製品に反映させるべきこと、テキストに関するルールを明記しています。Atlassian製品はこのパーソナリティによって認知度と信頼性を高めています。

まとめ

デザインシステムは長期的に運用する視点で作成し、制作チーム以外との共有もできる状態であることが理想的です。

デザインシステムはブランドイメージの形成と保持に繋がります。ブランド認知が必要なサービスのデザインや、会社全体のデザイン統一に役立つことでしょう。

そのほかに、デザインシステムの参考リンクをいくつか紹介します。興味があれば、参考にしてください。

• Shopify
• IBM
• Airbnb
• Microsoft
• Trello
• Salesforce
• Apple

（翻訳：Yuri Tanaka）