AirbnbのUIトレース

前回のSpotifyに引き続き、2回目のUIトレースとなります。

今回選んだアプリは、Airbnbです。世界最大級の宿泊施設予約サイトで、施設を借りたいユーザー(ゲスト)と施設を貸し出したいオーナー(ホスト)を結びつけるマーケットの役割を果たしています。

宿泊予約プラットフォームとしては、Booking.comに次いで世界第2位です(2020年2月現時点)。共同創業者のうち、2人がデザイナーということもあって、プロダクトデザインに定評がある企業です。では、早速内容に入ります。

UIトレースの画面紹介

使用ツールはSketchで、サイズはiPhone8の750px × 1334px(Retinaの解像度を考慮して375px × 667pxのスクショでトレース)です。左から順に、スクショ→トレース→マージンなどの数値を足したものです。

トレースしてわかったこと

余白

どの画面にも、左右にマージンが24px設定されていました。

また、検索画面のカテゴリー間には12pxのマージンが設定されており、非常に整然とした印象に。

カラー

背景色は白(#fff)を基調とし、コーポレートカラーの#FF5A5Fや#008489は一部のボタンやタブバーにのみに限定して使用されていました。

また、テキストは主に黒寄りのグレー(#484848)で統一。

一部の暖色とモノトーンで統一された画面は、柔らかい印象があるものの、どこかきっちりとした雰囲気も生んでいます。

全体的に、白を基調とした画面に鮮やかな写真が映え、視認性の高い画面構成となっています。

フォントとテキスト

テキストの大きさとしては、全体的に24ptと16ptの使用頻度が非常に高かったです。また、見出しと本文では大きさとウェイトを変えて対比させることでユーザーが迷わないように工夫されていました。

余談ですが、ガイドライン上、iOSのアプリでは11pt以上の文字の使用が推奨されているので、一番小さい10ptの文字はTab Bar上での使用とはいえ、個人的にも認識しづらい印象でした。

また、トレースでは、システムフォントのSF Proを使用したものの、欧文にAirbnb Cerealというカスタムフォントが使用されていることがわかりました。

シンプルですが親しみがあり、小さいフォントでも文字が潰れにくく、読みやすいように設計されています。ブランドコンセプトを反映しつつ、UIにおけるlegibility(読みやすさ)の問題を解決している点はすばらしいですね。インターフェイスの中でも、テキストとタイポグラフィを重視するAirbnbのブランディングの姿勢がよく表れています。

Airbnbの以下の公式サイトが非常に良く作られており、フォントの誕生背景なども解説されているのでお薦めです。

Say Hello to Airbnb Cereal

その他

角丸(2pt~8pt)も頻繁に使用されているのですが、pt字体が大きくないので、カジュアルすぎない印象でした。その他、シャドウも効果的に使われていました。

トレースしてみて

8の倍数がよく使われていることや左右の24pxのマージンも含めて一貫性のあるレイアウトが特徴的なアプリでした。

情報のグループ化と余白の配置のお手本のような画面という印象でした。

デザインの基本4原則である、近接・整列・反復・対比のそれぞれの観点に着目しつつトレースを行いましたが、これらのルールが非常に上手く適用されていました。「使いやすい」と感じた理由が今回のトレースによって腹落ちできたので、取り組んでよかったです。

最後に

「ノンデザイナーズ・デザインブック」とHuman Interface Guideliensによるインプットのお陰で、どの点に着目してトレースしたら良いのか、以前に比べてより明確になった気がします。

フォントや色など、ビジュアルデザインの基本をもう少し理解する必要があるため、書籍によるインプットを強化したいと思います。

最後まで読んで頂き、ありがとうございました。