【UIトレース】Airbnb編

UIトレース第7弾。
民泊予約サービスAibnbをトレース。

UIトレース

宿の詳細ページと宿泊予約ページをトレース。

宿詳細ページ

詳細画面全体図（スクショ）

宿の写真、宿の特徴、ホスト情報、アニメティ詳細、カレンダー、レビュー、マップという構成。

予約画面

予約画面全体図（スクショ）

予約の際は、宿泊者の写真や滞在目的を伝えなくてはならないようだ。民泊は利用経験がないので、Airbnb限定なのかは不明。

以下、クリックして出てくるものをいくつか。

料金の説明ポップアップ

レビューモーダル（宿名のレビュー数クリック）

ハウスルールモーダル

また、トレース対象ではないが他の画面。

トップ画面

Pinterestのように画像がずらりと並んでいる。ホスト側からすると写真の第一印象が重要そうになってくるUI。

フォントサイズ・カラー・余白など

本文は１桁というかなりの小ささ、でも見づらいということはない。

例の如く、余白も正確な数値ではないので実際は4または8の倍数と思われる。

振り返り

クリックできるところはリンク色（青など）に変えず、アンダーラインで強調されているのが特徴的だった。

海外の宿でも自動的に翻訳が適用されており、ハードルの高さを下げてくれている。さすがグローバルなサービスである。

こういったサイトの利用経験がなく怪しいものと偏見を持っていたが、宿のアニメティがしっかりと記載があったり、ホストの顔が確認できたりと滞在者が事前にチェックできる項目が多くあった。
これならトラブルを限りなく減らせるだろう。