Airbnb Design System

heru
heru
Nov 27, 2018 · 16 min read

CACON 11/2 14:00–17:30

Airbnbデザインシステムを総括しているデザイナーハン・ユジンさんのコンファレンスに参加しました。 ハンさんは19年目UI・UXデザイナーで、ustwo、Google、Spotifyを経て現状Airbnbでデザインシステムを総括をしています。

コンファレンスは3つのセッションに構成されて行われました。

  1. なぜ、デザインシステムであるべきか。
  2. Airbnbデザインシステムケーススタディー
  3. 海外でデザイナーとして生きること
  4. QnA

1. なぜ、デザインシステムであるべきか。

主に、プロダクトデザインは4つのプロセスで構成されます。

Discover

  • デザインリサーチ
  • インタビュー

Define

  • データ分析
  • カルチャー理解やデザインアイデア
  • コンセプト定義・レビュー

Develop

  • デザインFIX
  • プロトタイピング・開発

Deliver

  • プロダクト共有
  • ユーザー検証
  • テスト・フィードバック
  • 修正・補完

Define

  • Moodboard:コラージュ形式のイメージタイポグラフィ、アイコンUIサンプルをビジュアル的な要素として集めて分析するデザインテクニック。特定の雰囲気をより簡単にグラフィックアイデアを共有することができます。Airbnbの場合、生き生きしてるけど、活動的過ぎない、明確であっても、固過ぎない、柔らかいけど、幼稚ではないカラー・アイコン・雰囲気を集めてムードボードを作ります。
  • UI Style Guide:Airbnbブランドロゴとカラーフォントがどれだけよくマッチングしているか、プロダクトに可読性のいいフォントを探すための簡単なUI要素をサンプルテストを行います。ムードボードとモックアップの間の段階で行います。これらをする目的は、問題を解決する前にディテールな作業を減らすためでもあります。
  • モックアップ:実際イメージを実装するディテールな作業。例えばチームメンバーにデザイナーが1人だったら、ムードボード作業から始めてスタイルガイドまで作業するに難しいことはないはずです。だが、メンバーが10人、100人規模で、各デバイスサイズに沿ってデザインするとしたら、おそらく同じような結果になるかもしれませんが、各チームがそれぞれの方向性で実装するため、統一性が崩れてしまう可能性が高いです。例えば、各チームで決済関連フロー、プロダクトディテールフローをそれぞれ実装すると考えてみましょう。果たして、ボタン・タイポグラフィのようなルールが同一になるのでしょうか。この問題は会社規模が大きくなるほどシンクロされる比率が大きくなるしかないです。それにiOS/Androidなどでより細分化され、よりディテールにユーザーのニーズを解決しないといけなくなったらどうなるのでしょう。メンバーたちは、競馬場の馬のように眼帯をかけて各チームだけのスプリントに向かって走るしかありません。
Moodboard / UI Style Guide / User Flow

Airbnbも例外ではありませんでした。どんな共通のルールもなく、各チームのユーザーの要求に沿って前に進むだけでした。スプリントプロセスを通し、素早くアップデートすることだけに重点を置くようになりました。その結果、

Airbnb:似たように見えるが、バラバラなカラーとデザインになる現象

コーナRadius数値がバラバラになり、いくらブランドカラー(Rausch:Airbnbのブランドカラー)を設定しても、各チームでは適当にこのカラーっぽいのをスポイドで選択して使ってることもありました。

Twitterもですね。今のTwitterになるまでデバイス別にカラーもバラバラ、アイコンすら統一されてないことがわかります。

Twitter:各自別デバイス、そしてバラバラのデザイン

まとめると、デザインプロセスの問題点は下記のように起こります。

  1. プロダクト製作チームが小規模でなく、大規模の場合はプロダクト全面の統一性を持ちにくい。
  2. 各チームがそれぞれ違う機能のリストFlowを作るとき。
  3. 各自別々のデバイスに対応するとき。
  4. 業務の速度が速すぎるため、他のチームとのデザイン統一性を合わせる時間がないとき。

結局、各チームのそれぞれのボタンやカラーパレットになる

なぜ、このような問題が発生するのか?

ますます複雑で多様なスタイルになるプロダクト(左) / 成長するプロダクトとデザインチームの規模(右)
  • ますます複雑で多様なスタイルになるプロダクト:Airbnbの場合、宿泊だけにフォーカスすることでなく、経験もフォーカスしようとのアイデアや、高級マンションなどのプロジェクトでビジネスを広げて、プロジェクトごと別のデザインを当てはめました。ビジネスの拡張によってデザイナー増加、そして協力も難しくなりました。
  • 多様なビジネスに合わせて各自別のデザインをするようになる。
  • 成長するプロダクトとデザインチームの規模
  • ますます増え続けるビジネスによる増加するデザインチーム
スピードアップを求める開発サイクル(左)/ 成熟されるデザインマーケットと、ユーザーの高まる期待値(右)
  • スピードアップを求める開発サイクル
  • デザインQA(れニュー)をする時間の不足:ほとんどのプロダクトが速度の速い開発サイクルを回して、ユーザーに合うサービスを提供するように努力してます。が、その結果、他のチームと共有したり、どうやってデザインを合わせるかのミーティングはすっぽかして前に進めてしまいます。
  • 成熟されるデザインマーケットと、ユーザーの高まる期待値:このような問題を解決するためにシステムを作って共有し、根本的な問題を解決してワークFlowを改善しようと考え、デザインシステムが登場。

デザインシステムの登場

デザインシステムはユニークなことではありません。IKEAのようなものです。

誰が作ろうが、簡単でシンプルなプロセスになっています。統一性があります。綺麗で、速いです。

デザインシステムも同様です。デザインシステムは明瞭な基準に従ってリユースされるコンポーネントです。

デザインシステムの目的

デザインシステムは効率的、審美的で一貫したデザインプロダクトを速くてシンプルに作らせます。プロダクトの全体的なデザインを構成する共有された統合パターン・原則の集まりです。
例) Atomic design
  • ファウンデーション(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デザインシステム

他社のデザインシステム

Airbnbデザインシステム

iOS/Android/Web/Tabletでの初期のAirbnb

以前のAirbnbは60名の超えるデザイナーが作業したため、一貫性もなくなり、Featuredやプラットフォームごとバラバラなデザインになりました。デザイナーだけではなく、エンジニアも各自方式のコードで作業をしました。その結果、プロダクトは複雑になり、多様なデバイスと規模が拡張することにより、デザインディレクションをするに難しくなりました。

2016年、モバイルデザイン優先でデザインシステムを始めました。 / 当時のAppの全ての画面を並べ、分析から始めました。その後、新しいビジュアルスタイルを当てはめて、既存のデザインを変更しました。
ウェブの力はその広範囲にあります。障害に関係なく、全ての人が近づけることが絶対的なメリットです。 — ワールド・ワイド・ウェブ創始者、ティム・バーナーズ -
  • アクセシビリティに対する悩み:もし、アクセシビリティを考える会社であれば、その会社はデザインに対して深刻に悩み、グローバルユーザーたちを尊重しているに間違い無いと思います。Airbnbにはアクセシビリティチームがあるくらい、ユーザーのアクセシビリティを慎重に考えています。
  • アクセシビリティとは:ユーザーの身体的特性、地役、性別、歳、知識レベル、技術体験などの制限事項を考え、可能であれば、多くのユーザーが楽に利用できるよう、プロダクトを作って提供する。それを評価する時使う言葉であります。視覚、聴覚、嗅覚、知覚を考えて、他の人と同等にウェブの探索や、パソコン、モバイルを使って恵沢をうけるようすることがアクセシビリティの目的です。

それらの理由で、Airbnbはいつのまにか既存のRauschカラーは少なくなり、Babuカラーという新しいメインカラーが登場しました。お年寄りのユーザーが携帯のフォントサイズを大きく設定するように、アクセシビリティは障害のあるユーザーだけの特別なことでなく、私たち全員のために必要なことであります。いくらRauschカラーがブランドカラーであっても、目の力が弱いユーザーにはテキスト可読性など、Babuカラーに比べて弱いとのことがわかりました。カラーコントラストレシオが3:1がミニマムで、それ以下は絶対いけないとの世界的に決まってあるルールがあります。それにより、Airbnbは平均数値より明度を濃く設定(4.5:1)して、新しいブランドカラーであるBabuカラーに変更しました。なので、ブランドカラーは特に、アクセシビリティに合うカラーに全て変更すべきだと思います。

  • コンポーネントの使い方:各スクリーンで繰り返されている部分をコンポーネントと呼びます。コンポーネントはエンジニアとデザイナーが共有できるように、ネーミングして、一概にできるルールを決めます。またコンポーネントはボックスに構成し、どこにつけても一貫したデザインになり、エンジニアのコードもどのデバイスやプラットフォームに関係なく、統一されていることがわかりました。一番基本となる、ファウンデーション(カラータイポグラフィ、間隔など)を定義して各デザインチームに共有をすると、このデザインシステムのルールに沿ってデザインを簡単に制作することが可能になりました。
  • 独自のAirbnbデザインシステム:Airbnbは、どのデバイスでも一貫したデザインなっています。Androidだからマテリアルガイドライン、iOSだからAppleのUIガイドラインに従うのではなく、全てのプラットフォームを同じデザインに適用したため、簡単に他のデバイスに乗り換えることが可能になりました。
チームコンポーネント(右)
  • Airbnbデザインシステム構成:デザインシステムチーム自体、デザイナーが少なかったため、他のチームでのコンポーネント制作要求に対応できなくなりました。その結果、アクセシビリティの適用や、テスト済みのグローバルに使用できるCore Componentsと各自必要な個別コンポーネントを作って、全体に共有せず、作ったチームのみ使用できるTeam Componentsに構成されました。どうしてもチームコンポーネントが作られるため、より明確で、客観的なガイドラインを提供して、違うデザインになったとしても、全体的にファミリーのように感じを与えるためでもガイドラインは必要となります。
フレキシブルな規則とルール(左) / UXP Partners(右)
  • フレキシブルな規則とルール:今後のAirbnbのデザインシステムの課題は、ビジネスが大きくなるにあたって、ユーザーニーズも多くなるため、既存ルールを最小化し、自由なレイアウトで制作できるように努力しています。デザインシステム自体の目的はとても重要ですが、もっと重要なのは関係性です。デザインシステムを作るデザイナーと、プロダクトを作るデザイナーとのコミュニケーションはとても重要です。そのため、各チームでデザインシステムをより理解しているデザイナー2名くらい集め、週1ミーティングを行っています。

サービスが成長するにつれて、各機能別でチームを組んで作業を始めるのですが、デザイナーがチームが一つで、デザイナーも一人なら、サービスのデザイン全体が統一性を守ることができますが、デザイナー数が5–10名、もしくはその以上なら、各チームの好み、性向でプロダクトが誕生する場合があります。

デザインシステムと、プロダクトデザイナーとのリレーションシップはとても重要です。このようなルールがあることで、一緒に作っていくという認知になり、みんなでデザインを共有できること、さらに、統一感のあるデザインとなる効果になります。デザインチームのみんなで参加することで、デザインシステムプロセスなど一連のプロダクトを作ることで最も多くの悩みが発生します。これ以上にもっとデザイナー間での連帯感を築くのが大事だからです。

heru

Written by

heru

Product Designer, KR-JP Translator