design-systems

デザインシステム

Figma や Airbnb などの企業でデザインシステムを構築した 4 人のプロダクトリーダーのフレームワークを活用して、デザインシステムの構築と拡大を支援します。

支援の方法

ユーザーがデザインシステムについて支援を求めた場合：

1. ニーズを評価する - 一貫性、スピード、またはその両方のどれが必要なのか、またデザインシステムを導入する適切な段階にいるかを判断します
2. 範囲を定める - コンポーネントライブラリ、デザイントークン、ドキュメントのどれが必要なのか、またはそのすべてが必要なのかを明確にします
3. 導入しやすさを考慮して設計する - デザイナー以外の人でも正しく使えるほど、システムを使いやすくする方法を支援します
4. 進化に備えて計画する - システムを長期にわたって保守し、進化させる方法を案内します

基本原則

コンセプトと制作を分ける

Bob Baxley：「ブロックフレームを確定させれば、代理店に渡して、彼らが何をすべきか正確に理解しているので、高解像度の完成デザインを 1 日で仕上げてもらえました。」低忠実度の「ブロック図」でコンセプトのロジックを固めてから、デザインシステムを適用して、高忠実度の成果物をすばやく作成します。

デザインシステムはエンタープライズへの拡大を後押しする

Claire Butler：「プロから組織向けプランやエンタープライズプランにアップグレードする主な理由の 1 つがデザインシステムです。これこそ、私たちが注力した重要なことでした。」デザインシステムの実践者は、組織の拡大における重要な社内推進者です。

アセット自体が使い方を示すべき

Jessica Hische：「ロゴをデザインするとき、いつも目指しているのは、極めて熟練したデザイナーでなくても上手に使えるほど、簡単に使えるロゴをデザインすることです。」複雑さより使いやすさを優先し、アセット自体の構造を通じて、ユーザーに適用方法を「教える」ようにデザインします。

フラットデザインは進化している

Brian Chesky：「フラットデザインは終わった、あるいは終わりつつあると思います。色や質感、立体感、より豊かな触覚フィードバックのある世界へと戻っていくでしょう。」インターフェースデザインは、フラットな美学から、より立体的で触覚に訴える、AI を活用した体験へと移行しています。

ユーザーを支援するための質問

• 「現在、最も大きな不統一の問題は何ですか？」
• 「このデザインシステムを使うのは誰ですか？デザイナーだけですか、それともエンジニアも使いますか？」
• 「デザインシステムの導入状況と成功を、どのように測定しますか？」
• 「システムを長期にわたって保守し、進化させるためのリソースはありますか？」
• 「最初にリリースできる、最小限の実用的なバージョンはどのようなものですか？」

注意すべきよくある間違い

• 早すぎる構築 - パターンを体系化できるほど十分に蓄積する前に、デザインシステムを作成する
• 過剰な設計 - 正しく使うために、熟練したデザイナーが必要となる複雑なシステムを構築する
• オーナー不在 - 保守を担当する専任リソースなしでデザインシステムを作成する
• 導入の軽視 - 誰にも実際には使われない、美しいシステムを構築する
• 静的なシステム - 継続的に進化させるのではなく、デザインシステムを「完成済み」と見なす

詳細

4 人のゲストによる 4 つの知見については、references/guest-insights.md を参照してください。

関連スキル

• デザインレビューの実施