【翻訳】AirbnbはいかにしてUXデザインのリーダーになったか(Punit Chawla, Prototypr)

blog.prototypr.io

創業者の借家で開業した小さな朝食兼ベッドルームから、10億ドル規模の多国籍ホスピタリティ企業に成長したAirbnbの成功に欠かせないのは、デザインです。

これはすべて、デザイン思考のバックグラウンドを持つ共同創業者の一人、ジョー・ゲッビアによって始まりました。最初のモバイル・アプリが発売されてから3年後だったにもかかわらず、彼らのユーザー中心のアプローチが最初の顧客を獲得するのに役立りました。売上だけに焦点を当てるのではなく、ユーザーの問題やペイン、市場調査、観察に焦点を当てようとしたのです。これはUXデザイナーがキャリアにおいて目指すものですが、同社は初日からこれを理解していました。

ネイサン・ブレチャージック、ブライアン・チェスキー、ジョー・ゲッビアの順に並んだAirbnb創業者たちの初期の画像。

Airbnbがデザイン出身のリーダーによって成功したのは、これが初めてではありません。Airbnbは、人気のデザインスタジオであるLondon DesignStudioをブランドデザインに起用したことで知られています。

Samaraはしばしば元アップルのデザイナーやリーダーを採用し、プロジェクトを率いていました。アップルのDNAはAirbnbのデザインに浸透し始めており、このケースでは素晴らしい動きをしました。

この記事を通して、どのように、そしてなぜこのようなことが起こったのかを見ていきましょう。

ベイビーステップ - 最初のウェブサイト

2008年から2009年にかけてのAirbnbのリデザイン

最初のデザインは、Airbnbがビジネスを開始した当初の方向性の転換をすぐに示すものでしました。最初のウェブサイトは、提供するサービスを自然に伝えることに明らかに苦労していますが、ユニークなグラフィックはウェブサイトに少し個性を加えています。新しいウェブサイトは、より商業的で、ある業界標準のデザインに従っていました。

ロゴの大きな飛躍

初期のロゴは共同設立者の一人、ブライアン・チェスキーがデザインしたもので、正直言って素晴らしい試みでしました!このワードマークは後に簡略化され、私たちがよく知っている名前に短縮されました。これにより、ユーザーはロゴよりも目的地を探すことに集中できます。残念なことに、超明るいピンクとブルーから、私たちが大好きになった微妙なサーモンへと色を改善するのに少し時間がかかりました。

ユーザーを重要なものへ誘導する

Cluifyで生成されたAIベースのビジュアルヒートマップ

デザインパターンを理解することは、特にユーザー中心のデザインに関しては非常に重要です。このビジュアルヒートマップは、タイトルがどれだけ注目され、その後ユーザーが検索バーに移動し、アクションを起こすかを明確に示しています。

もう一つの明らかな違いは、ページ下部のロゴのコレクションです。最初のイテレーションでは存在しなかった、ブランドの信頼性をついに作り出したのです。

また、一貫したグリッド・レイアウトは、ウェブサイトのレスポンシブ化を助けると同時に、より良い階層構造を持っていることに気づくでしょう。また、タイポグラフィも修正され、ウェブサイト全体で1-2種類のサンセリフフォントにこだわっています。大学のプロジェクトのような感じではなく、ようやく本当の会社のウェブサイトのように感じられるようになりました。

世界がモバイルファーストに - モバイルアプリが登場

最初のアンドロイド・アプリは2012年に登場

米国ではスマートフォンが一般的になりつつあり、Andrew Vilcsakが開発チームを率いて、驚くほど機能が豊富なユーザー重視のモバイルアプリを開発しました。ユーザーはAirbnbsを素早く検索し、ホストとつながり、旅程の予約までできるようになりました。このアプリは、モバイルウェブサイトの更新と一緒に提供され、最初はAndroidでのみ利用可能でしました。

実は、最初のAirbnbアプリを披露したアンドリューへのTechCrunchのインタビュービデオを見つけました。

インタビューを読むだけで、会社とデジタル・プラットフォームが目指す方向性について、彼らがいかに明確であったかがわかります。アンドリューは明らかに、実行可能なデザイン、顧客が何を求めているかを知ること、デジタル上でのホストとゲストの関係のバランスをとることに重点を置いています。

その中核にあるスキューモーフィズム

アンドロイドアプリは機能的でしましたが、それ以上に当時としてはよくデザインされていました。私は、当時はごく一般的だった、一貫した3Dとスキューモーフィックなデザインに気づいました。しかし、デザインのトレンドを追うとなると、実装が鍵となります。

AirbnbはUXを正しく理解している

個人的には、リアルなボタンデザインの大ファンです。

私自身もホテル予約会社で働いていた経験がありますが、このアプリは非常によく構成されており、価格は明確で最前面にあり、しっかりとした階層構造、太字のCTA、簡単なナビゲーションがあります。デザインは、私たちが長年学んできたUXデザインの法則や原則のほとんどを満たしています。

このアプリは、関連データやユニークなレイアウトの不足に苦しんでいますが、2012年に作られたアプリとしては素晴らしい試みです。しかし、2012年に作られたアプリとしては素晴らしい試みです。一度にすべてを片付けようとするのではなく、重要なことにもっと時間と労力を割いたのは明らかです。これまで見てきた限り、彼らは常に反復的なデザインを重視してきました。

彼らの最初の大きな飛躍 - "Belo"

デザインを一新した「Bélo」

Airbnbにとって、それはまさにドミノ効果をもたらした大きなリデザインでしました。

「Bélo」のシンボルは、Airbnbがそのセグメントでリーダー的存在になって以来、ポップカルチャーのアイコンとなりました。2014年にデザインされたこの新しいロゴは、単なる旅行から他の観光分野への移行を支援するものでしました。人々はこのロゴを公然と解釈することができる(上の画像のように)。このロゴは、元のワードマークに完全に取って代わることになります。

私たちは、「企業のリブランド」の後に、デジタル・プレゼンス全体のデザイン変更が続くのをよく目にします。彼らのアプリとウェブサイトは、スクリーン上の膨大な情報に対応するため、よりミニマルですっきりとしたデザインになり、大きな飛躍を遂げた。

2014年のAirbnbウェブサイト

大幅なデザイン変更で何が変わったか?

  • テキストやグリッドも含め、中央揃えのレイアウト。
  • すべての要素の周囲にゆとりのある空白があり、すべてがより広々としています。
  • サーモンカラーが主要なボタンに使われています。
  • さまざまな商品をプッシュし、人々をホストに誘います。
  • ランディングページにコンテンツがないのはやや残念です。画面上のスペースで多くのことができたはずです。
  • 新しいロゴはいたるところで使われており、より印象的なものになっているのは間違いません。

プロジェクト・サマラの紹介

「Bélo」のロゴをベースにしたプロジェクト・サマラのロゴ

デザインに焦点を当てた未来に向けて企業ができる最も大きな動きのひとつは、独自のデザインスタジオ「サマラ」を開設することです。Samaraは、ユーザー重視のプロダクトを作るために有名なデザイナーを雇う、会社の革新の1つのポイントになるでしょう。

デザイン思考を取締役会に持ち込んだ共同設立者の一人、ジョー・ゲッビアについて書いたのを覚えているでしょうか?サマラを率いたのは彼です。

彼らは非常に "研究室 "的なアプローチで、たとえ実験が世に出ることがなかったとしても、絶えず実験を行っていました。その見事な例が、彼らの最初の実験である「吉奈杉の家」です。これは展示されましたが、発売されることはありませんでした。

実際に展示された吉名杉の家

Airbnb史上最大のデザインニュース

ジョニー・アイブと故スティーブ・ジョブズ

Airbnbがこれ以上デザインに投資できないと思っていたら、2020年に伝説的なアップルのデザイナー、ジョニー・アイブが設立したデザインスタジオ、Lovefromを雇りました。(lovefrom by Jony Ive)

ジョニー・アイブは、スティーブ・ジョブズと密接に協力してiPhoneiPodiPadiMacなどをデザインした人物です。

ジョニーは、Airbnbのデザインチームを成長させる責任を負い、長年にわたって彼らのチームとも深い関係を築いてきました。だから、ここから生まれる大きなデザイン変更は、当然ジョニー・アイブと彼のチームの貢献となります。アップルの次はAirbnbです!

3Dを採用するAirbnb

img
Airbnbの3Dへの最新の飛び込み

同社の共同設立者であるブライアン・チェスキーは、同社のアプリに搭載されるいくつかの新機能を紹介する短いビデオをツイッター(X)で公開しました。しかし、デザイナーが注目したのは、3Dイラストとモーションへの新しいアプローチでしました。

新しい3Dスタイルを予告するだけでなく、以下のスクリーンショットのように、実際にライブアプリに取り入れています。

Airbnbウィンターリリース2023

AirbnbA.I.を使っているのか?

簡単な答えは「イエス」です。

img
AirbnbのAIリスティング機能

AIを搭載した最初の一般向け機能の1つが、最近ホスト向けにアップデートされました。ホストは写真を撮ることができるようになり、AIがリスティング用の写真を整理して自動ラベル付けしてくれる。正直なところ、これはそれほど大きな問題ではありませんが、AIへの第一歩であることは間違いありません。

上のアニメーションは、彼らが3Dデザインに飛び込んだことを強調しています。お祝いのアニメーションは、3Dの 「ボール」と紙吹雪が流れまくる。

創造性を自由にする

私がデザインの旅で学んだ重要な教訓のひとつは、デザイナーとして創造力を解放する必要があるということです。仕事の役割や決められたタスクに縛られると、クリエイティブな仕事が退屈になってしまいます。これを避けるために、Airbnbは実際にデザイナーに、期待される仕事の役割を超えた、クールでクリエイティブなプロジェクトに参加するよう促しています。

そのような取り組みの一つがAirbnb.designであり、舞台裏のスタイルブログとともに、これらのクリエイティブなプロジェクトのいくつかを紹介しています。また、UXリサーチやインクルーシブデザインなど、いくつかのケーススタディをライブで公開しています。

img
Airbnb.デザインのウェブサイト

記事やケーススタディに加え、ビデオ、特別プロジェクト、そしてAirbnbの次を発表するイベントまです。ニュースレターもあります!

一言で言えば、Airbnbから何を学べるか?

  1. デザインのバックグラウンドを持つ会社のリーダーは、真に違いを生み出すことができます。
  2. プロジェクトの方向性が明確であれば、数百万ドルを費やしても数十億ドルになります。
  3. デザイナーに実験と創造的な表現をさせることは、会社に報酬をもたらします。
  4. 人前でプロダクトを作り、反復することで、成長しながら学ぶことができます。
  5. イノベーションにはさまざまな形がありますが、デザインもそのひとつです。