1. なぜ、デザインシステムであるべきか。
主に、プロダクトデザインは４つのプロセスで構成されます。
Discover
- デザインリサーチ
- インタビュー
Define
- データ分析
- カルチャー理解やデザインアイデア
- コンセプト定義・レビュー
Develop
- デザインFIX
- プロトタイピング・開発
Deliver
- プロダクト共有
- ユーザー検証
- テスト・フィードバック
- 修正・補完
Define
- Moodboard：コラージュ形式のイメージタイポグラフィ、アイコンUIサンプルをビジュアル的な要素として集めて分析するデザインテクニック。特定の雰囲気をより簡単にグラフィックアイデアを共有することができます。Airbnbの場合、生き生きしてるけど、活動的過ぎない、明確であっても、固過ぎない、柔らかいけど、幼稚ではないカラー・アイコン・雰囲気を集めてムードボードを作ります。
- UI Style Guide：Airbnbブランドロゴとカラーフォントがどれだけよくマッチングしているか、プロダクトに可読性のいいフォントを探すための簡単なUI要素をサンプルテストを行います。ムードボードとモックアップの間の段階で行います。これらをする目的は、問題を解決する前にディテールな作業を減らすためでもあります。
- モックアップ：実際イメージを実装するディテールな作業。例えばチームメンバーにデザイナーが1人だったら、ムードボード作業から始めてスタイルガイドまで作業するに難しいことはないはずです。だが、メンバーが10人、100人規模で、各デバイスサイズに沿ってデザインするとしたら、おそらく同じような結果になるかもしれませんが、各チームがそれぞれの方向性で実装するため、統一性が崩れてしまう可能性が高いです。例えば、各チームで決済関連フロー、プロダクトディテールフローをそれぞれ実装すると考えてみましょう。果たして、ボタン・タイポグラフィのようなルールが同一になるのでしょうか。この問題は会社規模が大きくなるほどシンクロされる比率が大きくなるしかないです。それにiOS/Androidなどでより細分化され、よりディテールにユーザーのニーズを解決しないといけなくなったらどうなるのでしょう。メンバーたちは、競馬場の馬のように眼帯をかけて各チームだけのスプリントに向かって走るしかありません。
Airbnbも例外ではありませんでした。どんな共通のルールもなく、各チームのユーザーの要求に沿って前に進むだけでした。スプリントプロセスを通し、素早くアップデートすることだけに重点を置くようになりました。その結果、
コーナRadius数値がバラバラになり、いくらブランドカラー(Rausch：Airbnbのブランドカラー)を設定しても、各チームでは適当にこのカラーっぽいのをスポイドで選択して使ってることもありました。
Twitterもですね。今のTwitterになるまでデバイス別にカラーもバラバラ、アイコンすら統一されてないことがわかります。
まとめると、デザインプロセスの問題点は下記のように起こります。
- プロダクト製作チームが小規模でなく、大規模の場合はプロダクト全面の統一性を持ちにくい。
- 各チームがそれぞれ違う機能のリストFlowを作るとき。
- 各自別々のデバイスに対応するとき。
- 業務の速度が速すぎるため、他のチームとのデザイン統一性を合わせる時間がないとき。
結局、各チームのそれぞれのボタンやカラーパレットになる
なぜ、このような問題が発生するのか？
- ますます複雑で多様なスタイルになるプロダクト：Airbnbの場合、宿泊だけにフォーカスすることでなく、経験もフォーカスしようとのアイデアや、高級マンションなどのプロジェクトでビジネスを広げて、プロジェクトごと別のデザインを当てはめました。ビジネスの拡張によってデザイナー増加、そして協力も難しくなりました。
- 多様なビジネスに合わせて各自別のデザインをするようになる。
- 成長するプロダクトとデザインチームの規模
- ますます増え続けるビジネスによる増加するデザインチーム
- スピードアップを求める開発サイクル
- デザインQA(れニュー)をする時間の不足：ほとんどのプロダクトが速度の速い開発サイクルを回して、ユーザーに合うサービスを提供するように努力してます。が、その結果、他のチームと共有したり、どうやってデザインを合わせるかのミーティングはすっぽかして前に進めてしまいます。
- 成熟されるデザインマーケットと、ユーザーの高まる期待値：このような問題を解決するためにシステムを作って共有し、根本的な問題を解決してワークFlowを改善しようと考え、デザインシステムが登場。
デザインシステムの登場
誰が作ろうが、簡単でシンプルなプロセスになっています。統一性があります。綺麗で、速いです。
デザインシステムも同様です。デザインシステムは明瞭な基準に従ってリユースされるコンポーネントです。
デザインシステムの目的
- ファウンデーション(Foundation)：一番基本となる単位(カラー、デザイン、タイポグラフィ、アイコン、モーションなどのスタイルとアセット)。
- コンポーネント(Components)：機能性、リユースが可能な単位。Foundationの組合。
- テンプレート(Template)：目的のあるコンポーネントとファウンデーションの組合。
- ページ(Page)：特定のテンプレートたちの例で構成されたレイアウト。
デザインシステムは継続的にアップデートすべきです
デザインシステムを作ったら、フィードバックが出ます。プロダクトリリースしてユーザーのフィードバックをもらうように、デザインシステムにも同様に進化させていかないといけません。
デザインシステムがアップデートされることによって、デザインシステムが適用された画面も一括にアップデートすべきです。
システムの規則をよく頭に入れることが何より大事です。適切なタイミングで適切なコンポーネントを統一に使用されないといけません。単純にUIステッカーを配ることと当時に、ユーザービリティガイドと、ルールが提供されないといけません。規則とガイドとルールが主観的でないようにすることが大事です。徹底的に客観的で、規則的でなければいけません。それにより、全ての理解関係のユーザーが理解しやすくなることが大事です。
デザインシステムの課題
デザインシステム自体もアップグレードをし続けます。
デザインクリエイティブがしたいということが実現可能になります。全てのデザイナーとエンジニアがボタンのカラーや、ダイアログをどうアニメイションするかを悩む時間を短縮し、よりユーザーへの悩みに集中させるようになります。コンポーネントのディテールを作る前に、ユーザービリティに集中できます。
- 一貫性(Consistency)
- リユース(Resuability)
- 迅速化(Velocity)
- 革新的なアイデアに集中できる時間を稼げる(Gain time to focus on the innovative ideas)
- すでに作られているデザインとセットアップ(Given design, set-up)
- リミテーション、フレキシブルではない(Limitaion, inflexible)
デザインシステムの新しい定義
デザインシステムはたったのコンポーネントの集まったツール、JSON codeの集まりではありません。デザインシステムは組織にある全ての人たちの凝集力のある文化を一緒に作っていくシステムであります。それはたった一つの決まった献身的なチームの努力だけで完結されるものではありません。
2. Airbnbデザインシステム
他社のデザインシステム
- Googleマテリアルデザインシステム：2014年オープン、とても多いガイドラインを策定、デザインシステム系のバイブルと呼ばれている。
- IBM Carbonデザインシステム：Googleと違って、デザイナーエンジニアのための共通ガイドラインで構成されている。Usageやデザイン情報、ガイドラインが簡潔。
- Polarisデザインシステム(Shopify)：アメリカEC系３位の企業。web,android,iOSなどのコードをみることができる。
Airbnbデザインシステム
以前のAirbnbは60名の超えるデザイナーが作業したため、一貫性もなくなり、Featuredやプラットフォームごとバラバラなデザインになりました。デザイナーだけではなく、エンジニアも各自方式のコードで作業をしました。その結果、プロダクトは複雑になり、多様なデバイスと規模が拡張することにより、デザインディレクションをするに難しくなりました。
- アクセシビリティに対する悩み：もし、アクセシビリティを考える会社であれば、その会社はデザインに対して深刻に悩み、グローバルユーザーたちを尊重しているに間違い無いと思います。Airbnbにはアクセシビリティチームがあるくらい、ユーザーのアクセシビリティを慎重に考えています。
- アクセシビリティとは：ユーザーの身体的特性、地役、性別、歳、知識レベル、技術体験などの制限事項を考え、可能であれば、多くのユーザーが楽に利用できるよう、プロダクトを作って提供する。それを評価する時使う言葉であります。視覚、聴覚、嗅覚、知覚を考えて、他の人と同等にウェブの探索や、パソコン、モバイルを使って恵沢をうけるようすることがアクセシビリティの目的です。
それらの理由で、Airbnbはいつのまにか既存のRauschカラーは少なくなり、Babuカラーという新しいメインカラーが登場しました。お年寄りのユーザーが携帯のフォントサイズを大きく設定するように、アクセシビリティは障害のあるユーザーだけの特別なことでなく、私たち全員のために必要なことであります。いくらRauschカラーがブランドカラーであっても、目の力が弱いユーザーにはテキスト可読性など、Babuカラーに比べて弱いとのことがわかりました。カラーコントラストレシオが3:1がミニマムで、それ以下は絶対いけないとの世界的に決まってあるルールがあります。それにより、Airbnbは平均数値より明度を濃く設定(4.5:1)して、新しいブランドカラーであるBabuカラーに変更しました。なので、ブランドカラーは特に、アクセシビリティに合うカラーに全て変更すべきだと思います。
- コンポーネントの使い方：各スクリーンで繰り返されている部分をコンポーネントと呼びます。コンポーネントはエンジニアとデザイナーが共有できるように、ネーミングして、一概にできるルールを決めます。またコンポーネントはボックスに構成し、どこにつけても一貫したデザインになり、エンジニアのコードもどのデバイスやプラットフォームに関係なく、統一されていることがわかりました。一番基本となる、ファウンデーション(カラータイポグラフィ、間隔など)を定義して各デザインチームに共有をすると、このデザインシステムのルールに沿ってデザインを簡単に制作することが可能になりました。
- 独自のAirbnbデザインシステム：Airbnbは、どのデバイスでも一貫したデザインなっています。Androidだからマテリアルガイドライン、iOSだからAppleのUIガイドラインに従うのではなく、全てのプラットフォームを同じデザインに適用したため、簡単に他のデバイスに乗り換えることが可能になりました。
- Airbnbデザインシステム構成：デザインシステムチーム自体、デザイナーが少なかったため、他のチームでのコンポーネント制作要求に対応できなくなりました。その結果、アクセシビリティの適用や、テスト済みのグローバルに使用できるCore Componentsと各自必要な個別コンポーネントを作って、全体に共有せず、作ったチームのみ使用できるTeam Componentsに構成されました。どうしてもチームコンポーネントが作られるため、より明確で、客観的なガイドラインを提供して、違うデザインになったとしても、全体的にファミリーのように感じを与えるためでもガイドラインは必要となります。
- フレキシブルな規則とルール：今後のAirbnbのデザインシステムの課題は、ビジネスが大きくなるにあたって、ユーザーニーズも多くなるため、既存ルールを最小化し、自由なレイアウトで制作できるように努力しています。デザインシステム自体の目的はとても重要ですが、もっと重要なのは関係性です。デザインシステムを作るデザイナーと、プロダクトを作るデザイナーとのコミュニケーションはとても重要です。そのため、各チームでデザインシステムをより理解しているデザイナー２名くらい集め、週１ミーティングを行っています。
サービスが成長するにつれて、各機能別でチームを組んで作業を始めるのですが、デザイナーがチームが一つで、デザイナーも一人なら、サービスのデザイン全体が統一性を守ることができますが、デザイナー数が5–10名、もしくはその以上なら、各チームの好み、性向でプロダクトが誕生する場合があります。
デザインシステムと、プロダクトデザイナーとのリレーションシップはとても重要です。このようなルールがあることで、一緒に作っていくという認知になり、みんなでデザインを共有できること、さらに、統一感のあるデザインとなる効果になります。デザインチームのみんなで参加することで、デザインシステムプロセスなど一連のプロダクトを作ることで最も多くの悩みが発生します。これ以上にもっとデザイナー間での連帯感を築くのが大事だからです。
