デザインシステムを構築する時が来ました！ それぞれの目標や課題に合わせて、システムを構築する基本をご案内します。システムをゼロから構築する場合でも、既存のものから始める場合でも、それを活用することができます。
デザインシステム102: デザインシステムの構築方法を共有
アートワーク: Cynthia Alfonso
丁寧に作られたデザインシステムは、一体感のある、スケーラブルで効率的なデザインを作りたいチームにとって強力なツールです。共有言語を確立し、再利用可能なコンポーネントのライブラリを構築することにより、デザインシステムは製品全体の一貫性を生み出します。さらに、ワークフローの迅速化にもつながり、チームがユーザーの問題解決に集中できるようになります。
前回の記事で基本について学びましたが、デザインシステムの力を十分に活用するには、それを効果的に構築して実装する方法を知る必要があります。ただ言うほど簡単ではありません。このガイドでは、デザインシステムを構築するプロセスを明確で実践的な手順に分解します。原則の定義や、デザインアセットの作成また整理といった基礎構築に関するベストプラクティスや実際の例を取り上げて、チームを強化し製品をより良いものにするシステムを作る方法を見ていきます。
こちらはデザインシステムを始めるためのシリーズの第2部です。第1部もご覧ください: デザインシステムの基本: デザインシステムとは?
ステップ1: 基礎を築く
デザインシステムがあなたのチームや組織にとって有益な理由はさまざまです。コンポーネントやパターンを作成する前に、なぜデザインシステムを構築するのか、どのような問題を解決したいのかを理解することが重要です。製品が異なるプラットフォーム間で一貫性がなかったり、更新を手動で行わなければならないために余計に時間がかかっていることが理由でしょうか。もしくは、コラボレーションを容易にしたい、全員が同じ認識を持つようにしたい、新しいチームメンバーがすぐに参加できるようにしたい、などの要望があるのでしょうか。
理由は何であれ、時間を取って下記の重要な質問に答えることで、自分の目標を明確に定義しましょう。
- なぜデザインシステムが必要なのですか？
- それが解決する具体的な問題は何ですか？
- それらの問題を解決することに成功したかどうかはどのように判断しますか？
この短いビデオでは、Jesse Showalter氏がデザインシステムが重要であり、組織が本当にそれを必要としているかどうかを知る方法について、Dan Mall氏と対話しています。
デザインシステムは、あらゆる規模や経験レベルのチームに役立ちます。実際、複雑なエンタープライズレベルのデザインシステムが全員にとって必要なわけではありません。初心者であったり、キャリアの初めの段階であったり、少数のブランドや製品に取り組む小規模なチームの場合、再利用可能なテンプレートやコンポーネントをいくつか持つシンプルなシステムがあれば、ワークフローを効率化し、一貫性を維持することができるでしょう。プロジェクトやチームが成長するにつれて、デザインシステムは変化するニーズに対応するように進化するものです。
重要なのは、複数の製品を管理する包括的なシステムを構築する場合でも、小規模なチームのために再利用可能な要素をシンプルに集めたものを構築する場合でも、あなたの特定の状況に合ったシステムを構築することです。一つのデザインシステムが全てに合うわけではありません。デザインシステムは幅広いニーズに対応し、フリーランサーから大企業まで、誰にでも有用なものです。
この初期段階では、デザインシステムが組織にとって何を意味するか、そしてなぜそれに投資するのか、全員が同じ理解を持つことが最も重要です。
現状の棚卸しをする
目標を整理したら、現在の製品の状況を精査しましょう。まず、現在使用しているさまざまな要素を収集してカタログ化しましょう。色、タイポグラフィ、アイコン、コンポーネント、パターンなど、何でも構いません。ここではスクリーンショットが大変便利です。異なるプラットフォームやデバイス上で製品の見え方をキャプチャし、インタラクティブな状態や代替バージョンも含めるのを忘れないでください。おそらく、デザインシステムの出発点として役立つパターンや一貫性が見えてくるでしょう。
整理して評価する
棚卸しをしたら、その内容を理解していく必要があります。まず、スクリーンショットや例をカテゴリー別に整理してください。そして、一歩引いて全体像を評価しましょう。現在のデザイン言語はどのようになっていますか？ 標準化や効率化の機会はありますか？
一貫性のなさ、冗長性、または製品が分断されたように感じる箇所に注意してください。これらは、より統一されたデザインシステムがあれば、ユーザーエクスペリエンスを改善できる可能性があることの兆候です。
旗振り役を見つける
デザインシステムの構築はチームの取り組みであるため、早いうちにアドボケイトを募集し始めましょう。デザインの一貫性に情熱を持つ人、またはデザインシステムの経験がある人を探してください。デザインチームに限定せず、開発者、プロダクトマネージャー、カスタマーサポート、そしてビジネスの他の分野で働いている人々にも声をかけてください。多様な視点を得ることで、デザインシステムが製品全体や組織全体のニーズを満たすことができるようになります。そして忘れないでください、成功したデザインシステムの多くは、一人のチームから始まります。自分自身がその旗振り役となることを恐れないでください。
アプローチを選ぶ
デザインシステムの構築には、主に2つのアプローチがあります。カスタムソリューションをゼロから作るか、既存のフレームワークを採用して必要に応じて適応させるかです。それぞれに長所と短所があります。
ゼロから構築すると、システムを独自の要件に合わせることができますが、それには初めにより多くの時間とリソースが必要です。既存のフレームワークやオープンソースシステムを使用すると、より早く立ち上げることができますが、特定のユースケースに合わせるためにより多くのカスタマイズが必要になる場合があります。
これに関しては、正解も不正解もありません。どちらのアプローチを取るべきかは、チームの能力や余力、および長期的な目標次第です。小さくスタートして、時間とともに進化させていくこともできます。
会社の目標に合わせる
そして、デザインシステムの取り組みが会社の全体目標と一致していることを確認してください。タイミング、リソース、リーダーシップの賛同をどう得るか、といった要因を考慮しましょう。これまで調査をしてきたことがここで役立ちます。調査結果を活用して、デザインシステムがどのように主要なビジネス目標の達成につながるかを示しましょう。
デザインシステムには継続的な投資が必要であり、利害関係者のサポートを早期に確保することが重要です。システムを具体的なビジネス上の利点に結びつけることが、リソースと支持を得るための手段として有効です。例えば、市場投入までの時間の短縮やユーザーエクスペリエンスの向上などが挙げられます。
切り替えをお考えですか？ デザイナーアドボケイトのClara Ujiieの「Figmaにシームレスに移行するためのインサイダーガイド」では、Figmaへの移行に役立つリソース、ヒント、ツールを紹介しています。
指針となる原則を定義する
基盤が整ったら、次はデザインシステムを形作り始めましょう。早い段階で行うべき最も重要なことの一つは、指針となる原則を定義することです。これらはシステムの北極星として機能し、システムが成長し進化していく際に、全員の足並みを揃えることができます。原則は、システムを活用する目的と価値を明確にし、すべての決定が組織の広範な目標に結びつくようにします。覚えやすく、実践的ないくつかの原則を作り、簡単に参照また適用できるようにしましょう。
理想的には、最初から原則を明確に定義するべきです。しかし、実際には、原則はプロセスの後半になって出てくることがよくあります。あるいは、システムが成熟するにつれて原則が進化していくこともあります。それでも問題ありません。重要なのは、原則ができたら、誰もがそれを認識し、それに合意していることです。それによって、将来の決定がはるかに明確になります。
このシリーズは、デザインシステム入門コースに基づいています。そこでは、Habitzチームが彼らのコアとなる原則を確立し、それらを具体的なデザインガイドラインに変換する過程を追っています。
以下は、効果的なデザイン原則を作成するためのいくつかのヒントです。
- 「なぜ」から始めましょう。この原則を支える、核となる信念や価値観は何ですか？
- 具体的にしましょう。現場でこの原則を適用するための具体的な例やガイドラインを提供しましょう。
- 実行可能な内容にしましょう。原則は具体的に実践されるべきであり、単なる文書化された意図にとどまるべきではありません。
アクセシビリティがチームの中核的な優先事項であるとしましょう。包括性を考慮したデザインの原則には、異なる視覚と聴覚能力を考慮することや、コントラストと可読性をテストすること、最新のアクセシビリティ基準に従うことなどのガイドラインが含まれるかもしれません。より具体的で実行可能な内容が良いです。
チームと一緒に、こちらの FigJam テンプレートを使用して原則となるものを見つけましょう。
活用するべきは、組織内の豊富な知識です。これをデザイン原則の基盤として活用しましょう。会社内の既存のリソースやガイドラインを見直してみてください。ブランド基準、声のトーンのガイド、マーケティング戦略、あるいは顧客サポートの手引書などが該当します。これらを出発点として活用し、クロスファンクショナルなパートナーと協力して、全体像に沿った原則を策定しましょう。目標は単なる一般的な原則を作ることではなく、特定の組織や製品を支える、独自の優先事項や信念を明確にすることです。
ステップ2: 基盤を定義する
デザインシステムの基盤とは、ベースとなる必須のビジュアルおよび機能的要素です。これには、アクセシビリティ、色彩、タイポグラフィ、アイコノグラフィ、イラスト、寸法などの重要な側面が含まれます。これらの要素は協力して、人々が使いやすく理解しやすい、強固で一貫したデザイン言語を作り出します。
Stashがどのように顧客から信頼される金融プロダクトを構築しているかについて学びましょう。StashはFigmaコンポーネントとDittoを使用して文章の更新を迅速に行っており、作業を20%高速化、12,000時間以上を節約しました。
デザインを全ての人にアクセシブルにする
アクセシビリティとは、能力に関係なく、誰もが製品を使用し理解できるようにすることを意味します。これは誰もが責任を負うものであり、デザインシステムの原則の中心的な部分であるべきです。デザインシステムを作成する際には、フォントサイズ、色の対比、コンポーネントのラベル付けや整理などの要素を考慮してください。アクセシビリティ基準に準拠した製品体験を作る際に、デザインシステムのアセットがどのように、そしてなぜ使用されることを伝えることが重要です。初めからアクセシビリティを優先し、明確なガイドラインを提供することで、誰もが楽しめるより包括的な製品の基盤を築くことができます。ただし、アクセシブルなデザインシステムを持っているだけで、自動的にアクセシブルな製品が作れるというわけではありません。それには、チーム全体がコミットをし、継続的な取り組む必要があります。
StarkのContrast & Accessibilityプラグインを試して、アクセシビリティのワークフローを効率化しましょう。Figmaコミュニティでプラグインを探し、またWebコンテンツアクセシビリティガイドラインに従うことで、色のアクセシビリティを確保しましょう。
相性の良い色を選ぶ
色はデザインにおける強力なツールです。感情を呼び起こしたり、視覚的に興味を引きつけたり、人々の注意を導いたりすることができます。デザインシステムのために色を選択する際には、限定しすぎない、かつ圧倒しすぎないバランスのとれたパレットを目指してください。異なるモード（ダークモードなど）やさまざまな製品での色の見え方を考慮して、一貫したブランド体験を作りましょう。
Untitled UIの究極のカラーパレットシステムをチェックしましょう。意図的に、綺麗に整理されたカラースタイルのセットであり、どんなブランドやプロジェクトにとっても最適な出発点です。
カラーパレットをシンプルにするためには、チームの既存のデザインを見て、類似した色をまとめましょう。たとえば、プライマリボタンに使用する色の数を減らすことで、デザインをより清潔で直感的に感じさせることができます。一般的な目安としては、中性色を60%、プライマリカラーを30%、セカンダリやアクセントカラーを10%にすることです。
ブランドに合った、読みやすくて目を引くタイポグラフィを選ぶ
タイポグラフィは、デザインの基盤の重要な要素の一つです。ブランドの個性に合った、読みやすくて、うまく機能するフォントを選びましょう。文字間隔、太さ、行の高さなどの詳細に注意して、文字が快適に読めるようにしましょう。タイプスケールを定義する際には、一貫したフォントサイズと行の高さのセットを決めます。一般的に、基本サイズは16ピクセル程度で設定されます。また、タイプスケールを、意図された使用方法に応じて「ディスプレイ」や「タイトル」などに分類するか、より原始的に命名することもできます（たとえば、「見出し-100」など）。
エレベーションを活用して視覚的な階層を作る
エレベーションは、影、レイヤー、透明度を用いて、デザインに奥行きと順序を作ることを指します。例えば、カードはページからわずかに浮き上がって見えたり、ダイアログボックスは影を使って他のすべての要素よりも浮かんでいるように見えたりすることで、焦点を集めることができます。固定されたナビゲーションバーに微妙な影をつけたり、ナビゲーションドロワーにはインセットシャドウをつけたりすることで、ページとの相対的な位置を示すこともできます。エレベーションは、デザインを構造化し、どの要素が主要であり、どれが副次的であるかを直感的に理解させるのに役立ちます。
一貫性と意味のあるアイコンを作る
DesignSystems.comで、イラストレーター兼アイコンデザイナーのBonnie Kate Wolf氏によるアイコノグラフィの完全ガイドを見てみましょう。
アイコンは、アイデアや行動をすぐに伝える、小さい視覚的なシンボルです。よく設計されたアイコンシステムは、ブランドのアイデンティティを強化し、ユーザビリティを向上させます。アイコンが明確で一貫性があり、異なるスタイルでも意味が変わらないようにすることが重要です。アイコングリッドを使用して、サイズと配置に一貫性があるようにしましょう。また、説明的な名前や検索できる名前を付けて、見つけやすく使いやすくしましょう。
Microsoftチームが自社製品においてFluentアイコンシステムをどのように使用しているかを見てみましょう。Fluentアイコンには、角を丸めた形状や簡略化された形状があり、通常のものと塗りつぶしのものがあります。
バリアブルとスタイルを使ってトークンを適用する
私たちのデザインシステムコースの一環である、トークン、バリアブル、およびスタイルの適用に関するレッスンをご覧ください。
バリアブルとスタイルの違い
Figmaのバリアブルは色などの単一の値を保持しますが、スタイルはグラデーションなどより複雑な情報を保持し、詳細で多層的なデザインに適しています。詳細はこちらです。
Figmaでは、バリアブルとスタイルを使用して一貫性のあるスケーラブルなデザインシステムを作成できます。バリアブルとスタイルは、デザイン全体で再利用できるコア要素を定義するのに役立ちます。これらは一般的に、次の2つの主要なタイプに分類されます。
- プリミティブ: これらは、色、間隔、サイズなど、デザインシステムの基本的な構成要素です。これらはデザインの基礎を形成しますが、直接コンポーネントやレイアウトには使用されません。
- セマンティック: これらは、バリアブルやスタイルの使用方法に意味のある文脈を与えます。たとえば、「color-background-warning」という色のバリアブルは、緊急性や潜在的な危険を伝えます。セマンティックバリアブルは、主にプリミティブな値を裏でエイリアス化しますが、生の16進数コード、数値、または文字列も使用できます。
バリアブルやスタイルを命名する際には、明確で一貫した規則を使用することが重要です。デザインシステムの貢献者であるNathan Curtis氏は、ベース（色やサイズなど）と修飾子（バリアントや状態など）を組み合わせて、理解しやすく使いやすい名前を作成することを提案しています。目標は、チーム全体がより効率的にコミュニケーションを取って作業できるように、共有の規則を作成することです。
Figmaチュートリアル「バリアブル入門」を視聴して、バリアブルがどのように機能し、どのようにそれらを用いてデザイントークンを表し、異なるモードやテーマに対応すべきかを学びましょう。
レイアウトグリッドとスペーシングを使って視覚的な調和を作る
レイアウトグリッド、スペーシング、サイズ（これらの総称は「空間システム」と呼ばれる）は、デザインを一体化させる目に見えない接着剤のようなものです。これらは、製品を洗練されたものに感じさせる構造、一貫性、視覚的な調和を作り出します。
- レイアウト: デザインが異なる画面サイズやデバイスにどのように適応するかを定義し、すべてのプラットフォームで一貫した体験を生むようにしましょう。
- グリッド: 列グリッド、ベースライングリッド、およびモジュラーグリッドを使用して、要素を一貫して配置し、明確な視覚的階層を作りましょう。
- スペーシング: 一貫したスペーシング単位を定義し、要素間の距離を制御することで、バランスの取れた、読みやすいレイアウトを作りましょう。
レイアウトの骨格を作成するために使用できるさまざまなタイプのグリッドがあります。
- 列グリッドは画面を垂直のセクションに分割し、要素を整列させやすくし、異なるデバイス間で一貫した外観を維持するのに役立ちます。
- ベースライングリッドは、要素間の垂直スペーシングを制御し、通常、テキストのベースラインに沿っています。
- モジュラーグリッドは、列と行の両方の分割を組み合わせて、より複雑なレイアウトのための柔軟な構造を作ることができます。
DesignSystems.comで、Hightouchのプロダクトデザイン部門責任者であるElliot Dahl氏から、スペーシング、グリッド、およびレイアウトに関する詳細を学びましょう。
数字の8がデザインシステムでよく現れる理由は何でしょうか？ それは至ってシンプルです。ほとんどのデバイスのブレークポイントは8で割り切れるため、8がグリッド、スペーシング、タイポグラフィにとって理想的な基本単位となります。
効果的なスペーシングは、デザインの要素間の視覚的な階層と関係性を構築するために重要です。一貫したスペーシング単位を使用することで、製品全体の調和とバランスをとることができます。
レスポンシブデザインは、さまざまなデバイスを考慮して画面を構築するアプローチであり、それぞれのデバイスで最適な視覚的体験ができるようにするものです。
デザインシステムが事前に構築されたレイアウトコンポーネントとテンプレートを提供することで、チームはレスポンシブで適応性のあるデザインをより効率的に作ることができます。これらのコンポーネントは、異なる画面サイズでレイアウトがどのように変更されるかを決定する、一連の事前定義されたブレークポイントで構築されています。たとえば、デザインシステムには、キーメッセージや製品を示す「ヒーロー」コンポーネントが含まれる場合があります。さまざまな画面サイズに対する異なるレイアウトバリエーションを提供することで、ヒーローが常にちゃんと表示され、ビジュアル階層を維持することができます。これにより、チームはレスポンシブレイアウトの各課題毎に新しい解決策を考え出す必要がなく、優れた製品固有のデザインを作成することに集中できます。
反論: グリッドは本当に必要でしょうか？ デザインシステムアーキテクトのDonnie D’Amato氏が、グリッドを用いない考え方を主張しています。
しかし、システムを持っていても、誰もが完璧にそれを使用することができるわけではありません。それはレシピ本を持っているのと同じです。それは非常に役立ちますが、料理をする人が指示に従って美味しい料理を作れるかが重要です。そのため、デザイナーが空間システムを理解し、受け入れることが非常に重要です。デザイナーが一貫したスペーシングとレイアウトの重要性を理解すると、ユーザーにとって見栄えが良く、心地良いデザインを作ることができるようになります。
Figmaのデザインシステム機能、たとえばレイアウトグリッドやスタイルなどは、チームがすべてのプロジェクトで一つの空間システムに準拠するのを大幅に容易にしています。グリッド、スペーシング、レイアウトコンポーネントに関する唯一の信頼できる情報源を提供することで、Figmaは皆が共通認識を持ち、その空間システムを一貫して適用することを可能にしています。その結果、製品やブランドとのインタラクションがどこで発生しても、一貫性のある統合的で直感的なユーザーエクスペリエンスが生まれます。
結局のところ、空間システムは非常に貴重なツールですが、その効果はデザイナーがそれを正しく使用するかどうかにかかっています。デザイナーに空間システムの利点を教え、一貫して使用するよう奨励することで、チームはその全ての可能性を開放することができます。
忘れてはいけないことは、空間システムはあなたのデザインをインスパイアし、ガイドするためのものであり、あなたの創造性を制限するものではないということです。空間システムをあなたの仕事に適用する際には、常にユーザーのニーズと体験を最優先に考え、ガイドラインを厳格なルールのセットではなく、役立つ枠組みとして使用しましょう。
ステップ3: Figmaでデザインシステムを構築する
Figmaでのデザインシステムを構築する際に重要なことは、プロジェクト全体で一貫性のある、効率的でスケーラブルな働き方を作ることです。それは、チーム全員が統一感のあるデザインを作成するために使用できる一連のブロックを作成するようなものです。以下のガイドは、始めるのに役立つ手順を示したものです。
既存のデザインを詳しく見る
初めに行った精査を思い出してください。すべての既存のデザインを見て、それらを個々の要素に分解しました。それを再度見直しましょう。まず、バリアブルとスタイルを定義してください。これは、あなたのデザインの基本的な構成要素のようなものです。これには、色、フォント、間隔、レイアウト、および影のような特別な効果などが含まれます。事前に定義されたスタイルを作成することで、チームの誰もがすべてのプロジェクトで一貫して同じデザイン要素を使用するようにできます。
このFigmaのヒントでは、デザイナーアドボケイトであるLauren Andresが、コンポーネントプロパティが何であるか、またそれらの作成方法について説明しています。
コンポーネントプロパティは、コンポーネントの変更可能な部分です。特定のデザインプロパティにそれらを結び付けることで、他の人がコンポーネントのどの部分を変更できるかを定義できます。
次に、コンポーネントを定義しましょう。コンポーネントは、デザイン全体で再利用できる、事前に作成されたビルディングブロックのようなものです。ボタンやアイコンなどの単純なものから、モーダルやナビゲーションバーなどのより複雑な要素まで、さまざまなものがあります。これらのコンポーネントを、最も基本的なパーツに分解し、それからより複雑な構造に組み立てていきます。
明確で一貫した名前を付ける
コンポーネントやバリアブルの名前を付ける際には、それらの見た目やコーディング方法ではなく、その機能を反映する名前を選ぶことが重要です。これにより、理解しやすく正しく使用できるようになります。意味や目的を反映する名前を選択する、セマンティックな命名を行ってください。たとえば、アラートメッセージには「color-warning」、アプリのメイン背景色には「surface-primary」といった具合です。カテゴリーやバリエーションなどの詳細を名前に含めることも重要です。例えば、セカンダリヘッドラインの色には「color-text-secondary」を使用します。
ネーミングの大文字と小文字に関しては、いくつかの異なるアプローチがあります。ハイフン（例：「primary-button」）とキャメルケース（例：「primaryButton」）が最も一般的に使用される傾向があります。どの命名規則を使用すべきかわからない場合は、開発チームと話し合い、組織内の既存の慣習にも合わせることができるかを確認しましょう。
Figmaライブラリを整理する
ビジネスの認証を支援するテクノロジー企業であるOnfidoが、どのようにしてデザインシステムチーム、プロジェクト、ファイルの整理をしているか、聞いてみましょう。
Figmaの素晴らしい点の1つは、異なるファイルやプロジェクト間でライブラリを共有できることです。これにより、チームの全員が、今何に取り組んでいるかに関係なく、同じスタイルやコンポーネントのセットにアクセスできます。
ライブラリをセットアップする際は、チームに最適な構造を考えましょう。全員が常に同じ「信頼できる情報源」から作業できるようにするために、すべてを1つのファイルにまとめたほうがよいかもしれません。あるいは、プロジェクトの異なる部分ごとに複数のファイルに分割することを好むかもしれません。チームがどのように協力して働きたいと思っているか、またデザインチームと開発チームの両方がどのようにライブラリを使用するのかを考えてみましょう。
デザインシステムを構築するためのガイダンスをお探しですか？ FigmaデザイナーアドボケイトのLuis Ouriachによるこのコミュニティファイルをチェックして、チーム、プロジェクト、ファイルのデザインシステムをどのように構築するかに関する推奨事項を見てみましょう。
思い出してください、Figmaでのデザインシステムの構築は継続的なプロセスです。これは、チームやプロジェクトとともに成長し進化するものです。まず、強固な基盤を築き、チームの全員が貢献し、デザインを時間とともに改善することを奨励してください。システムが成熟するにつれて、それはあなたのワークフローにとって不可欠でかつ進化し続けるものとなり、集合的な専門知識と創造性が注ぎ込まれます。
Figmaでデザインシステムを構築する際の詳細について知りたい場合は、手順の解説と下記のビデオをご覧ください。
✉️ ニュースレターに登録して、デザインシステムに関するさらなるヒントやアイデアを入手しましょう！
他に質問や学びたいトピックがある場合は、Twitterで@figmaにツイートしてください。いつでもお手伝いします！ Figmaのデザインシステム機能を活用することで、どのようにチームが一貫性を確保し、デザインを拡大し、開発との整合を維持することができるかについて詳しく学び、デモをリクエストしましょう。
