Airbnbのデザインシステム（2）

前回に続いて、今回は記事の後半、実際のデザインプロセスについてです。

To work through these challenges and keep our decision making process fast, we assembled a small group of designers and engineers. We cleared our calendars, reserved an external studio place just outside Airbnb HQ, and dedicated ourselves to designing and building the Design Language System (DLS).

デザイナーとエンジニアの小さなグループを作り、カレンダーの予定をまっさらにして（cleared calendars）、Design Language Systemに集中するため外部のスタジオを借り切りました。最初からエンジニアが入っているのが良いですね。

We started by auditing and printing out many of our designs, both old and new.

新旧たくさんのデザインを査定（audit – 詳しく調べて評価すること）してプリントアウトを張り出したチームは、まずいくつかの原則（principles）を打ち立てます。

Unified: 統一されたーそれぞれの部分が全体に貢献する。孤立した機能や例外（outliers）がない。

outlierは何かある全体を想定した時に、その中で他と異なる特徴を示すもののことを指します。

Universal: 世界に通じる－Airbnbは世界中で使われるのでプロダクトとビジュアル言語は心地良く（welcoming） 分かりやすく（accessible）あるべきである。

welcomingもaccessibleも訳語に迷う単語です。welcomingは心地よく迎え入れてくれる感じ、accessibleは何かに対して（容易に）アクセスできるという意味から、近づきやすい、利用しやすい、理解しやすい、と言った解釈ができます。デザインの現場でよく言われるアクセシビリティとは施設、機能や情報に対するアクセス可能性という意味ですが、"He is very accessible"のように人に対して使うと近づきやすさという意味になります。

Iconic: アイコニックであるーWe’re focused when it comes to both design and functionality. Our work should speak boldly and clearly to this focus.

ここはかなり訳に迷ったので原文も載せておきます。Abnbのデザインと機能はfocusedである、つまり目的に対して焦点を合わせて特化していて、デザイン言語も力強く明快にこの焦点に向けたものであるべき、その結果としてデザイン言語ははっきりと認識される（Iconic）なものになる、といった意味だと思います。boldは大胆で力強いというイメージ、グラフィックデザインの分野ではよく使われます。

Conversational: 対話的であるーモーションがプロダクトに命を吹き込み（breathes life into our product）、分かりやすいコミュニケーションを実現する。

原子、分子、生体

この後には実際のコンポーネントとライブラリの実例が続きます。その中から少し前に話題になった（？）アトミックデザインっぽい話が出てくる箇所を見て終わりにします。

Traditionally, many style guides define components as atomic components, which are then used to build more complex molecules. In theory, this works well to create coherent and flexible systems. In practice, however, what often happens is that these re-usable atoms are used many different ways, allowing all kinds of molecules to be created. Again, this opens the door for all kinds of disjointed experiences and makes the system harder to maintain.

Instead of relying on individual atoms, we started considering our components as elements of a living organism. They have a function and personality, are defined by a set of properties, can co-exists with others and can evolve independently. A unified design language should not just be a set of static rules and individual atoms, but an evolving ecosystem.

伝統的に（traditionallyーUI業界に伝統なんてものはなく、これまでは普通そうだよね、くらいのノリです）多くのスタイルガイドではコンポーネントを原子のような（atomic）ものとして定義して、それをより複雑な分子（molecules）を組み立てるために使います。ですが実際には、原子が色々な方法で使われてあらゆる種類の分子が作られてしまい、バラバラなUXが生まれシステムが維持しにくくなる事態がよく起きます。そこでチームは、コンポーネントを機能（function）と個性（personality）を備え、他の生き物と共生しつつ独自に進化する生き物（living organism）として捉えることを考え始めます。

彼らが実際に行ったことは、コンポーネントをカード（card）や段（row）といった少し大きなまとまりで考え、それぞれを構成する要素（タイトル、アイコン、アイコン、画像、罫線）によって定義するという方法です。それぞれの要素には必須でなかったり（optional）大きさのバリエーションがあったりするので、一種類のコンポーネントにもいくつかの種類が存在することになりますが、細かな部品だけ定義して自由に使って良いというアプローチよりはかなりコントロールされたシステムになっています。元記事で画像を見ながら読んで見ましょう。

余談：Brad Frostの本が有名なせいか教科書的にAtomic Designを理解しようとする議論を見かけますが、Atomやmoleculeといった単語はここではもっと日常会話的に（colloquial）使われているように思います。ただの便利な比喩なので、どこか外部に正解を探すよりは、よく考えて自分たちの役に立つように言葉を使えば良いと思います（個人の意見）。ただし、あるシステムの中で言葉を定義したらその定義はちゃんと守ることも重要です。ある言葉が定義された（defined）専門用語なのかただcolloquialに使われているのかというのは、何かのシステムについて話すときに気をつけるポイントです。"What did you mean by 'style'?" （「スタイル」ってどういう意味で言った？」）みたいな質問は現場でよく使います。