デザインシステムは近年ますます複雑化しています。現代のデザインプロセスでは、製品の作成に関わるすべてのチーム間で詳しくない人は意味がわからないと思うので、わかりやすい言葉に置き換えましょう。市場投入までの時間が製品開発において重要な役割を果たす場合、デザインチームはプロセスを最適化し、ユーザーエクスペリエンスを犠牲にすることなく迅速に製品を作成しようと努めます。 これを実現するために、プロダクトチームはデジタル製品のデザイン方法を変更し、デザインプロセスをより透明で予測可能にするためにデザインシステムを導入します。 この記事では、デザインシステムの概念と新しいデザインシステムを構築するための重要なステップを探ります。
デザインシステムが突然人気になった理由は何でしょうか？
それは、デザインシステムがまさに言われている通りに効果的だからです。このブームは本物です。デザインシステムを会社に取り入れると、さまざまな利点があります。
- 市場投入までの時間短縮 デザイン要素を均質化されたコンポーネントに分割することで、デザインシステムは全体のプロセスをより効率的にします。計画、デザイン、テスト、およびコーディングのすべてが合理化され、時間の無駄を減らします。
- ユーザーエクスペリエンスと顧客満足度の向上 デザインシステムは、ユーザーが好きなものと嫌いなものを追跡しやすくします。ユーザーが好む要素を保持し、嫌う要素を排除することで、すべての製品が顧客の好むUX要素を使用することを保証します。
- 社内コミュニケーションの向上 標準化されたドキュメントとして、デザインシステムは誤解の量を最小限に抑えます。すべてのメンバーが同じ情報を共有することで、混乱を避けることができます。
- すべての製品での一貫性 忠実な顧客は、すべての製品、アプリ、およびサイトに一定の品質を期待しています。同一のコンポーネントを使用することで、すべての製品で一貫した品質と使い慣れた操作性を提供できます。
- バージョン管理の問題が減少 異なる製品で同じバグを更新するのは煩わしく、時間がかかります。デザインシステムを使用することで、一度更新すればすべての発生箇所に反映されます。
デザインシステムとは？
デザインシステムとは、再利用可能なコンポーネントの集まりであり、明確な実践に基づいて製品チームがより迅速に製品を作成できるようにするものです。デザインシステムは、製品チームが製品をデザインおよび開発するための唯一の信頼できる情報源と考えることができます。
多くのデザイナーは、デザインシステムに何を含めるべきかについて悩んでいます。組織ごとに異なるニーズがあり、すべてのデザインシステムが使用すべき要素の普遍的なリストを提供することは不可能です。しかし、多くのデザインシステムには共通する要素があります。
コンポーネントとパターン
コンポーネントはデザインの機能的要素であり、デザインシステムのビルディングブロックと考えることができます。コンポーネントが組み合わさってライブラリを形成し、デザイナーが製品を作成するときに参照し使用します。
パターンは、コンポーネントを使用する際にデザイナーが参照するための構築マニュアルの役割を果たすプロトコルです。
スタイルガイド
スタイルガイドは、グラフィックスタイル（色、フォント、イラストレーション）とその使用法に焦点を当てた成果物です。スタイルガイドは、ブランドの価値観を考慮して作成されるべきです（例えば、コール・トゥ・アクションボタンなどの機能要素にブランドカラーを使用する）。
デザイン原則
デザイン原則は、チームが意味のあるデザイン決定を行うのを助ける指針となるルールです。デザイン原則は、デザインチームの共有信念を反映しています。
これらの要素を組み合わせることで、デザインシステムは一貫性のあるユーザーエクスペリエンスを提供し、効率的なデザインおよび開発プロセスを実現します。
デザインシステムを構築するための3つの一般的なステップ
ステップ1: 基礎を築く
デザインシステムを成功させるためには、まずしっかりとした基盤を築くことが重要です。デザインシステムがチームや組織にとって有益な理由は多岐にわたりますが、コンポーネントやパターンを作成する前に、デザインシステムを構築する理由と解決したい問題を明確に理解することが重要です。
例えば、製品が異なるプラットフォームで一貫性を欠いていると感じたり、更新作業が手動で時間がかかるプロセスであることに気づいたかもしれません。あるいは、コラボレーションを容易にし、全員が同じ情報を共有できるようにしたり、新しいチームメンバーが迅速に仕事を始められるようにしたいと思っているかもしれません。
理由が何であれ、以下の重要な質問に答えることで目標を明確に定義する時間を取りましょう
- なぜデザインシステムが必要なのか？
- 具体的にどのような問題を解決するのか？
- その問題が解決されたかどうかをどうやって確認するのか？
デザインシステムは、あらゆる規模や経験レベルのチームにとって役立ちます。現実には、すべての人が複雑なエンタープライズレベルのデザインシステムを必要とするわけではありません。初心者やキャリアの初期段階にいる場合、または少数のブランドや製品を扱う小規模なチームで働いている場合は、少数の再利用可能なテンプレートとコンポーネントを含むシンプルなシステムだけで、ワークフローを合理化し、一貫性を維持するのに十分かもしれません。プロジェクトやチームが成長するにつれて、デザインシステムもニーズの変化に合わせて進化させることができます。
重要なのは、あなたの特定の状況に合ったシステムを作成することです。複数の製品を管理するための包括的なシステムであれ、小規模なチームのための再利用可能な要素のセットであれ、デザインシステムは一律のものではありません。フリーランサーから大企業まで、誰にとっても役立つものです。
この初期段階では、デザインシステムが組織にとって何を意味し、なぜそれに投資するのかについて全員が同じ認識を持つことが最も重要です。
既存の要素を整理する
目標が定まったら、次に既存の製品の状況を詳しく見ていく時期です。現在使用しているさまざまな要素（色、タイポグラフィ、アイコン、コンポーネント、パターンなど）を集めてカタログ化しましょう。ここではスクリーンショットが非常に役立ちます！異なるプラットフォームやデバイスでの製品の例をキャプチャし、インタラクティブな状態や代替バージョンも忘れずに含めてください。そうすることで、デザインシステムの出発点となるパターンや一貫性に気づく可能性が高くなります。
組織し評価する
在庫を手に入れたら、次は見つけたものを整理して理解する時期です。まず、スクリーンショットや例をカテゴリに分けて整理します。その後、一歩引いて全体像を評価してみましょう。現在のデザイン言語はどのようなものですか？標準化や合理化の機会はありますか？
不整合や重複、製品が断絶している部分に注意を払いましょう。これらはしばしば、より一貫したデザインシステムがユーザーエクスペリエンスを改善する兆候です。
推進者を見つける
デザインシステムの構築はチームの努力が必要ですので、早めに推進者を見つけることが重要です。デザインの一貫性に情熱を持っている人や、デザインシステムの経験がある人を探しましょう。デザインチームだけに限らず、開発者、プロダクトマネージャー、カスタマーサポート、その他のビジネス領域で働く人々にもアプローチしてみてください。多様な視点を得ることで、デザインシステムが特定のグループだけでなく、製品全体や組織全体のニーズを満たすことができます。そして、多くの成功したデザインシステムは、一人のチームから始まることを忘れずに。自分自身で推進することを恐れないでください。
アプローチを選ぶ
デザインシステムの構築には、ゼロから構築する方法と、既存のフレームワークを採用してニーズに合わせて適応する方法の2つの主要なアプローチがあります。それぞれに長所と短所があります。
ゼロからの構築は、システムをユニークな要件に合わせて調整できますが、初期により多くの時間とリソースが必要です。既存のフレームワークやオープンソースのシステムを使用すると、より迅速に立ち上げることができますが、特定の使用ケースに合わせて追加のカスタマイズが必要になる場合があります。
正しい答えはなく、チームの能力、リソース、長期的な目標によって異なります。小さく始めて、時間をかけて進化させることを恐れないでください。
会社の目標に合わせる
最後に、デザインシステムの取り組みが全体の会社の目標と一致していることを確認してください。タイミング、リソース、リーダーシップの承認などの要素を考慮しましょう。初期の監査結果がここで役立ちます。デザインシステムがどのように重要なビジネス目標をサポートするかを説明するために、これらの結果を活用してください。
デザインシステムは継続的な投資を必要とするため、ステークホルダーのサポートを早期に確保することが重要です。市場投入までの時間短縮やユーザーエクスペリエンスの改善など、具体的なビジネス上の利益にシステムを結びつけることで、必要なリソースと承認を得るのに役立ちます。
指針を定義する
基盤が整ったら、デザインシステムを形作り始める準備が整います。最も重要な初期ステップの一つは、指針を定義することです。これらの指針は、システムの北極星として機能し、システムが成長し進化する中で全員が一貫性を保つのに役立ちます。指針は、システムを駆動する目的と価値を確立し、すべての決定が組織の広範な目標に結びつくようにするべきです。覚えやすく、実行可能な声明を少数作成し、簡単に参照し適用できるようにしましょう。
効果的なデザイン原則を作成するためのいくつかのヒント：
- 「なぜ」を考える この原則を推進する核心となる信念や価値は何か？
- 具体的にする 原則を実践する際の具体例やガイドラインを提供する
- 実行可能にする 原則は文書化された意図だけでなく、具体的な実践に変換されるべき
例えば、アクセシビリティがチームの主要な優先事項である場合、包括性を考慮したデザインに関する原則には、視覚や聴覚の異なる能力に対応するガイドラインや、コントラストと可読性のテスト、最新のアクセシビリティ基準に従うことなどが含まれるかもしれません。具体的で実行可能な原則ほど効果的です。
組織内の知識の豊富さをデザイン原則の基礎として活用しましょう。会社内の既存のリソースやガイドライン—ブランドスタンダード、声とトーンのガイド、マーケティング戦略、カスタマーサポートのプレイブックなど—を見て、これらを出発点として使用し、クロスファンクショナルパートナーと協力して、全体像と調和するようにしましょう。目標は単なる一般的な原則を作成することではなく、特定の組織や製品を駆動するユニークな優先事項と信念を明確にすることです。
ステップ2: 基盤を定義する
デザインシステムの基盤は、その基礎を形成する重要な視覚的および機能的要素です。これには、アクセシビリティ、カラー、タイポグラフィ、アイコン、イラスト、寸法などの重要な側面が含まれます。これらの要素が協力して、使いやすく理解しやすい強力で一貫したデザイン言語を作り出します。
デザインを誰にでも利用可能にする
アクセシビリティとは、誰もが自分の能力に関係なく製品を使用し理解できるようにすることを意味します。これは全員の責任であり、デザインシステムの原則の核心部分であるべきです。デザインシステムを作成する際には、フォントサイズ、カラーコントラスト、コンポーネントのラベル付けと整理方法などの要素を考慮してください。アクセシビリティ基準に適合する製品体験を作成する際には、デザインシステムの資産がどのように、またなぜ使用されるべきかを明確に伝えることが重要です。最初からアクセシビリティを優先し、明確なガイドラインを提供することで、すべての人が楽しめるより包括的な製品の基盤を築くことができます。ただし、アクセシブルなデザインシステムがあるからといって、自動的にアクセシブルな製品が保証されるわけではありません。これは継続的な努力が必要であり、チーム全体のコミットメントが求められます。
うまく組み合わさるカラーを選ぶ
カラーはデザインにおいて強力なツールです。感情を喚起し、視覚的な興味を引き、注意を導くことができます。デザインシステムのカラーを選ぶ際には、あまり制限されず、また圧倒されないバランスの取れたパレットを目指しましょう。カラーが異なるモード（ダークモードなど）やさまざまな製品でどのように見えるかを考慮し、一貫したブランド体験を維持します。
カラーのパレットを簡素化するために、チームの既存デザインを確認し、類似の色合いを統合します。たとえば、主要ボタンに使用する色の数を減らすことで、デザインがよりクリーンで直感的に感じられるようになります。目安として、60%を中立色、30%を主要色、10%を補助色またはアクセント色にするのが良いでしょう。
読みやすく、ブランドに合ったタイポグラフィを選ぶ
タイポグラフィはデザインの基盤のもう一つの重要な要素です。読みやすく、ブランドの個性に合い、互いにうまく組み合わさるフォントを選びます。文字間隔、ウェイト、行の高さなどの詳細に注意を払い、快適な読みやすさを提供します。タイポグラフィのスケールを定義する際には、通常16ピクセルの基準サイズを周りに設定し、一貫したフォントサイズと行の高さを確立します。また、フォントスケールを用途別（「ディスプレイ」や「タイトル」など）に整理するか、もっと原始的な名前（「heading-100」など）を選ぶこともできます。
高度を利用して視覚的な階層を作成する
昇降とは、シャドウ、レイヤー、透明度を使用してデザインに深さと秩序を作り出すことを指します。たとえば、カードがページからわずかに浮かんで見える、またはダイアログボックスがシャドウを使って他のすべての上に浮いているように見えることで焦点を当てることができます。固定ナビゲーションバーに微妙なシャドウを付けたり、ナビゲーションドロワーに内側のシャドウを使ったりすることで、ページに対する位置を示すこともできます。昇降を使うことで、デザインを構造化し、ユーザーがどの要素が主要で、どの要素が副次的かを直感的に理解できるようになります。
一貫性があり意味のあるアイコンを作成する
アイコンはアイデアやアクションを迅速に伝える小さな視覚的シンボルです。よくデザインされたアイコンシステムはブランドアイデンティティを強化し、使いやすさを向上させます。アイコンが明確で一貫性があり、異なるスタイルであっても意味を保つようにします。アイコングリッドを使用してサイズと配置の一貫性を確保し、説明的な名前と検索用語を提供して簡単に見つけて使えるようにします。
トークンを変数とスタイルを使って適用する
Figmaでは、変数とスタイルを使用して一貫性がありスケーラブルなデザインシステムを作成できます。変数とスタイルは、デザイン全体で再利用可能なコア要素を定義するのに役立ちます。これらは主に2つの主要なタイプに分類されます。
- プリミティブ: デザインシステムの基本的なビルディングブロックであり、色、スペーシング、サイズなどが含まれます。これらはデザインの基礎を形成しますが、コンポーネントやレイアウトには直接使用されません。
- セマンティック: 変数やスタイルがどのように使用されるべきかについての意味あるコンテキストを提供します。たとえば、「color-background-warning」という色変数が、緊急性や潜在的な危険を伝えるために使われることがあります。セマンティック変数は主に背後でプリミティブ値の別名として機能しますが、生の16進コード、数値、文字列を受け入れることもできます。
変数やスタイルを命名する際は、明確で一貫した規則を使用することが重要です。デザインシステムの貢献者であるナサン・カーティスは、基盤（色やサイズなど）と修飾子（バリアントや状態など）を組み合わせて、理解しやすく使いやすい名前を作成することを提案しています。目標は、チーム全体が使用できる共通の規約を作成し、効率的にコミュニケーションと作業を行えるようにすることです。
レイアウトグリッドとスペーシングを使って視覚的調和を作成する
レイアウトグリッド、スペーシング、サイズ（総称して「空間システム」）は、デザインを一体化する目に見えない接着剤のような役割を果たします。これらは、構造、一貫性、視覚的調和を生み出し、製品を洗練されたプロフェッショナルなものに感じさせます。
- レイアウト・デザインが異なる画面サイズやデバイスにどのように適応するかを定義し、すべてのプラットフォームで一貫した体験を確保します。
- グリッド・カラムグリッド、ベースライングリッド、モジュラーグリッドを使用して、要素を一貫して整列させ、明確な視覚的階層を作成します。
- スペーシング・要素間の距離を制御し、バランスの取れた読みやすいレイアウトを作成するために、一貫したスペーシングユニットを定義します。
レイアウトの基盤を作成するために使用できる多くの種類のグリッドがあります。
- カラムグリッド・画面を縦のセクションに分割し、要素の整列を容易にし、異なるデバイス間で一貫した外観を維持します。
- ベースライングリッド・要素間の垂直方向のスペーシングを制御し、通常はテキストのベースラインと整列させます。
- モジュラーグリッド・カラムと行の両方の分割を組み合わせて、より複雑なレイアウトのための柔軟な構造を作成します。
効果的なスペーシングは、デザインの要素間の視覚的階層と関係性を作り出すために重要です。一貫したスペーシングユニットを使用することで、製品全体に調和とバランスを生み出します。
事前に構築されたレイアウトコンポーネントやテンプレートを提供することで、デザインシステムはチームがレスポンシブで適応性のあるデザインをより効率的に作成するのを助けます。これらのコンポーネントは、異なる画面サイズでレイアウトがどのように変化するかを決定する一連の定義済みのブレークポイントを備えています。たとえば、デザインシステムには「ヒーロー」コンポーネントが含まれており、主要なメッセージや製品を表示します。さまざまな画面サイズに合わせた異なるレイアウトバリエーションを提供することで、ヒーローが電話でもデスクトップコンピュータでも常に素晴らしく見え、視覚的階層が維持されるようにします。このアプローチは、チームがレスポンシブレイアウトの課題ごとに再発明することなく、優れた製品特有のデザイン作成に集中できるようにします。
しかし、システムを持っているだけでは、誰もが完璧に使用できる保証はありません。それはレシピブックを持っているようなもので、非常に便利ですが、シェフが指示に従って美味しい料理を作るのはシェフの仕事です。だからこそ、デザイナーが空間システムを理解し、受け入れることが非常に重要です。デザイナーが一貫したスペーシングとレイアウトの重要性を理解することで、ユーザーにとって見た目や感じが良いデザインを作成する可能性が高くなります。
Figmaのデザインシステムの機能（レイアウトグリッドやスタイルなど）は、チームがすべてのプロジェクトで空間システムを守るのをずっと簡単にします。グリッド、スペーシング、レイアウトコンポーネントのための単一の信頼できる情報源を提供することで、Figmaは全員が同じページに留まり、空間システムを一貫して適用するのを助けます。その結果、ユーザー体験がどこで製品やブランドとやり取りしても一貫して直感的に感じられるようになります。
結局のところ、空間システムは非常に価値のあるツールですが、その効果はデザイナーが正しく使用するかどうかに依存します。デザイナーに空間システムの利点を教え、一貫して使用するよう促すことで、チームはその完全な可能性を引き出すことができます。
空間システムは、デザインを制限するのではなく、インスパイアしガイドすることを目的としています。空間システムを作業に適用する際には、常にユーザーのニーズと体験を最優先にし、ガイドラインを厳格なルールではなく、役立つフレームワークとして使用してください。
ステップ3: Figmaでデザインシステムを構築する
Figmaでデザインシステムを構築することは、プロジェクト全体で一貫性があり、効率的でスケーラブルな作業方法を作り出すことにあります。これは、チーム全員が統一感のあるデザインを作成するための「積み木」を作成するようなものです。以下は、Figmaでのデザインシステム構築に向けたステップバイステップのガイドです。
既存のデザインを詳しく見直す
初期の監査で、すべての既存デザインを見て、それを個々の要素に分解したことを覚えていますか？今こそ、その作業を再度確認する時です。以下のステップで進めましょう。
- 変数とスタイルを定義する
変数とスタイルは、デザインの基本的な積み木のようなものです。これには、色、フォント、間隔、レイアウト、シャドウなどの特別な効果が含まれます。プリセットのスタイルセットを作成することで、チーム全員がプロジェクト全体で同じデザイン要素を一貫して使用できるようになります。 - コンポーネントを定義する
コンポーネントは、デザイン全体で再利用できるように作られた積み木のようなものです。シンプルなボタンやアイコンから、モーダルやナビゲーションバーのような複雑な要素までさまざまです。これらのコンポーネントを最も基本的な部分に分解し、それからより複雑な構造に組み立てます。
明確で一貫性のある名前を選ぶ
コンポーネントや変数に名前を付ける際には、見た目やコードの書き方ではなく、機能を反映した名前を選ぶことが重要です。これにより、理解しやすく、正しく使用することができます。以下のポイントを考慮してください。
- 意味を反映する名前を使う
名前はその要素の意味と目的を反映するようにします。例えば、「color-warning」は警告メッセージ用、「surface-primary」はアプリの主要な背景色用に使います。カテゴリやバリエーションも名前に含めるとよいでしょう。例えば、セカンダリーヘッドラインの色には「color-text-secondary」という名前を付けます。
- 命名規則を選ぶ
命名ケースにはいくつかのアプローチがあります。ハイフン（例：「primary-button」）やキャメルケース（例：「primaryButton」）が一般的です。どの命名規則を使用するか不明な場合は、開発チームと話し合い、組織内で使われている既存の規則に合わせると良いでしょう。
Figmaライブラリを整理する
Figmaの優れた点の一つは、ライブラリを異なるファイルやプロジェクト間で共有できることです。これにより、チーム全員がどんな作業をしていても同じスタイルやコンポーネントにアクセスできます。
ライブラリを設定する際には、チームに最適な構造を考えましょう。一つのファイルにすべてをまとめて、全員が常に同じ場所から作業することを選ぶか、プロジェクトの異なる部分ごとに複数のファイルに分けることを選ぶか検討してください。チームの作業スタイルや、デザインチームと開発チームのライブラリの使用方法を考慮に入れると良いでしょう。
Figmaでデザインシステムを構築する際のポイント
デザインシステムの構築は継続的なプロセスであり、チームやプロジェクトとともに成長し進化していくものです。強固な基盤を作り、チーム全員に貢献を促し、デザインの実践を時間とともに改善していくことを奨励しましょう。システムが成熟するにつれて、それはワークフローの重要な一部となり、チームの専門知識と創造性が反映されたものとなります。
関連記事
カテゴリー：
