はじめてのアプリUIトレース：Airbnb編
今回で３回目のアプリUIトレース。そろそろ「はじめて」ではないけど気にしません！
今回は、「Airbnb」をトレースしました！Airbnbいいですよね、旅行に行くときはよく使います。いつか、この家に泊まりたいからこの国に行く！みたいなことをしたいです。
さて、今回トレースした画面がこちら、
・ 探す画面
・ お気に入り画面
・ 旅行画面
・ 受信トレイ画面
・ プロフィール画面タブバーにある5ページを一通りトレースしました。1画面ずつ見ていきます👀（今回はアートボードに気づきを書き込むスタイルで観察しました）
また、airbnbはオリジナルのフォントAirbnb Cereal を使用していていたので、それ以前に使用していてオリジナルに似ているCircular Std というフォントを今回のトレースでは使用しています。
オリジナルフォントのPVかっこいい…
🔍 探す画面（トップ）
この画面はいろんなサジェスションがいろんな形で表示されていますね。トレースした画面にはないですが、サムネの写真がどれも綺麗すぎる…！確かAirbnbはカメラマンを派遣して物件の写真を撮ってくれるんですよね。最高。
👇検索バーとカテゴリー部分
👇Airbnb Plusの部分
👇物件紹介の部分
👇目的別物件紹介の部分
👇体験紹介とタブバー
❤️ お気に入り画面
ここは文字情報がとても少ない！お気に入りのタイトルと物件数だけ！
👇お気に入り
👇空の時
✈️ 旅行画面
タイムリラインみたいな見せ方いい！
こちらもとてもシンプル。
👇上部
👇下部
📬 受信トレイ画面
ここは割とよくあるフォーマット。
👤 プロフィールページ
アイコンがどれも統一感あって可愛い。
👇上部
👇下部
🏠 全体に共通しているところ
色
色についてはざっくりこんな感じ。
意外とトップの物件紹介の部分でいろんな色が使われていました。（茶色や赤など）
全体的に彩度が落ち着いていて、黒なども真っ黒ではなく灰色に近いものを使っていたり、柔らかくもしっかりしている印象があります。
アクセントカラーは緑色ぽい。以前は検索バーの背景が緑色でベタ塗りされていましたね。
ロゴのピンク色はタブバーのアクティブ以外全く使われておらずでした…!
結構目立って印象的な色なので、タブバーだけでも存在感はありますね。またピンクをアクセントにすると女性向け感が結構出てしまうっていうのもあるかもしれませんね💡
文字
文字についてはこんな感じ。
イレギュラーな大きさの文字もいくつかみられましたが、見出しなのか説明なのか、という部分で使い分けられている感じでした。
一番小さいテキストでも全て大文字で表記されていたりと、見やすさは担保されている印象。
８の倍数
が結構使われているな、という印象でした。
例えば、アイコン。受信トレイとプロフィールに使われている丸のアイコンはどちらも64ptと48ptと8の倍数でした。
また、タブバーの高さも56ptと8の倍数（49ptではなかった…!）、
さらに左右のマージンはどのページも綺麗に24ptで統一されています。整っている感じがしてとても美しい…
ナビゲーションバーがない！
というのがびっくりしました。
トップは検索バーが固定されていたり、メッセージ画面はアーカイブと検索が固定されていたりはしますが、共通したナビゲーションバーはありませんね..!
通常は、 Saved や Inbox のようなラージタイトルはスクロールするとナビゲーションバーのタイトルに変わっていくのですが、airbnbの場合はそのまま流れていきます。
シャドウ
シャドウがあるところとないところがありますね。濃さや広がり方はばらつきがありますが。
これは ディフューズシャドウ といって2018年のトレンドらしいです💡apple musicやapp storeにも使われています。
ディフューズシャドウは目立って欲しい重要なボタンや、入力フォームによく使用される傾向にあるようです👀
トップではまさに検索フォームやカテゴリ検索のカードなど、メインの機能となる部分にシャドウが使われていますね。
シャドウが入ると表現的にリッチな感じがしていいですよね。
角丸のカード
そしてシャドウと一緒にこれまたトレンドになっている 角丸のカード もairbnbでは多用されています。
しかし角丸の度合いはこちらもばらつきがありますね👀
カードの見せ方って、情報が整理されている感があって好きです。押したい感じもあるし、シャドウと合わせるとふわふわしている感じも心地よい。良い。
まとめ
airbnbのUIは整理されているし、色の使い方もわかりやすいし、ゆとりがあるマージンなど落ち着く感じがして、トレースしていて楽しかったです！
サービス自体もすごく魅力的で好きなのでとりあえずオフィスにいきたいです。
