UIデザインでみる「Airbnb」と類似サービス10選

Published:2016.11.24Last updated:2017.09.05

昨今注目を集めている「シェアリング・エコノミー」。
注目されているということは注力されているということで、デザイン的にも秀逸なものが多いような気がします。
そして、シェアリング・エコノミーの火付け役「Airbnb」のような宿泊施設のシェアリング・エコノミーサービスは今までにない「ホテル」と「CtoC(個人間取引)」、さらに「メディア」までもをごちゃ混ぜにしたようなサービスで、UIにも目新しい工夫が随所に見られました。

いくつか似たコンセプトのサービスとあわせてご紹介します。

本家シェアリングエコノミーサービス「Airbnb」

シェアリングエコノミーの火付け役ともいえる宿泊施設をシェアするWebサービス。
完全に余談ですが「bnb」は「Bed aNd Breakfast」の略だそう(Nどちらかというとandの発声ベース)。

https://www.airbnb.jp/

Airbnbのトップページ

Airbnb

トップページは1カラムでフラットよりのシンプルなデザイン。
全体的に白をベースにロゴの赤がアクセントになりつつ、各宿の写真を邪魔しない秀逸なデザインに思えます。

下部に控えた「おすすめの旅行先」は、

Airbnb

このようにひとつひとつが都市を表現した映画のポスターのようになっていてたまりません。
なぜここにこんなにコストを……。

レイアウト アイキャッチ ヘッダー追従 レスポンシブ SSL
1カラム フルワイド(スライダー)

レスポンシブとSSLは特にシェアリング・エコノミーと関係ありませんが「今どきのWebサイトの指標」として念のため。

Airbnbのアーカイブページ

Airbnb

アーカイブ(一覧)ページはリキッドレイアウトで右側がGoogleマップになっていて、コンテンツは枠こそないもののカードっぽいデザイン。
特徴としては、各カードの画像がカルーセルになっていて各宿の画像をすべてこのページで見られるようになっています。

レイアウト 検索オプション マップ
2カラム(カード) 左カラムトップ ○(右)

Airbnbの個別ページ

Airbnb

画面幅をいっぱいまで使ったフルワイドなアイキャッチと追従する「予約リクエストボタン」が印象的。
また、説明が難しいのですが、全体的にサイドバーが追従する前提でデザインされていて、実質2カラムなのに1カラムのように見えます。

レイアウト アイキャッチ メニュー
2カラム フルワイド(モーダル) 追従(右)

以上がAirbnbの特徴で、以下は類似サイト。

海外のAirbnb類似サービス

FlipKey

2008年に大手宿泊施設口コミサイト「TripAdvisor(トリップ・アドバイザー)」に買収されたアメリカのシェアリング・エコノミーサービス。
なお、「TripAdvisor」は「FlipKey」の他にも「Housetrip」や「Holiday Lettings」「Niumba」「VacationHomeRentals」など数々の類似サービスを買収しています。強い。

https://www.flipkey.com/

FlipKeyのトップページ

FlipKey

Airbnbと比べるとやや色が多くゴテゴテした印象。
なお、TripAdvisorに買収された他サイトも比較的似たテイストのデザインでした。

レイアウト アイキャッチ ヘッダー追従 レスポンシブ SSL
1カラム フルワイド ×

FlipKeyのアーカイブページ

FlipKey

Airbnbと同じく各宿の画像がカルーセルになっています。

レイアウト 検索オプション マップ
2カラム(カード) トップ ○(左)

FlipKeyの個別ページ

FlipKey

Airbnbとは違いアイキャッチ画像はメインカラムに収まり、見慣れた2カラムのデザイン。

レイアウト アイキャッチ メニュー追従
2カラム 左カラム 追従(右)

9flats.com

ドイツの宿泊シェアリング・エコノミー。
2012年に大手総合ポータルサイト「Yelp」に買収されたそう。

https://www.9flats.com/

9flats.comのトップページ

9flats.com

シンプルなデザインで、いま流行りのアウトラインのアイコンも採用されています。
そして「おすすめの旅行先」は各都市の画像にテキストを乗せたシンプルなもの。
こっちが一般的でAirbnbが無茶にすごいと思う。

レイアウト アイキャッチ ヘッダー追従 レスポンシブ SSL
1カラム フルワイド × ×

9flats.comのアーカイブページ

9flats.com

左右におよそ半分この2カラムと見慣れないデザインです。

レイアウト 検索オプション マップ
2カラム 左カラム ○(左)

9flats.comの個別ページ

9flats.com

見慣れた2カラムのデザインで、予約のボックスも特に追従しません。

レイアウト アイキャッチ メニュー追従
2カラム 左カラム ×(右)

onefinestay

2016年4月にフランスの大手ホテルチェーン「アコーホテルズ」が買収。

https://www.onefinestay.com/

onefinestayのトップページ

onefinestay

他の宿泊シェアリング・エコノミーサービスとは違い「高級志向」だそうで、デザインもモノトーンとセリフなフォントを活かしたラグジュアリーな雰囲気が漂っています。

レイアウト アイキャッチ ヘッダー追従 レスポンシブ SSL
1カラム フルワイド(スライダー) ×

onefinestayのアーカイブページ

onefinestay

全体的にミニマル寄りで、各宿の情報もカードではなくメインカラムを幅いっぱいまで使ったアーカイブ。
デザイン的にごちゃごちゃするのを避けたのか他サイトのようなマップはありません。

レイアウト 検索オプション マップ
2カラム 左カラム ×

onefinestayの個別ページ

onefinestay

アイキャッチがこれでもかと幅全体を使ったカルーセルになっています。
そして、Airbnbと同じく1カラムのような2カラム。
Airbnbと違い、各セクションごとに帯のように背景色を変えているためより1カラムのように見えます。

レイアウト アイキャッチ メニュー追従
2カラム フルワイド(スライダー) ○(右)

自在客

中国上海の宿泊シェアリング・エコノミー。
すごい不遜な名前だと思ったら「自由自在な旅行」のような意味なのだとか。

http://www.zizaike.com/

自在客のトップページ

自在客

異国情緒漂う写真を幅いっぱいに使ったトップページ。
アウトラインアイコンもあります。

レイアウト アイキャッチ ヘッダー追従 レスポンシブ SSL
1カラム フルワイド(スライダー) × × ×

自在客のアーカイブページ

自在客

ヘッダーに検索フォームが幅いっぱいに置かれているのは割とありましたが、ファーストビューを脅かす価格やタイプのオプションも全開で配置した珍しいパターンです。

レイアウト 検索オプション マップ
2カラム トップ ○(右カラム追従)

自在客の個別ページ

自在客

一般的な2カラム。

レイアウト アイキャッチ メニュー追従
2カラム 左カラム ×(右)

HomeAway

シンガポールの宿泊シェアリング・エコノミー。
2015年に大手旅行ポータルサイト「Expedia」が39億ドルで買収。すごい。

http://www.homeaway.jp/

HomeAwayのトップページ

HomeAway

アウトラインデザイン(?)がアニメーションしています。
スクロールしていくとwow.jsのような「表示と同時にアニメーション」する要素もあり今どきな感じ。

レイアウト アイキャッチ ヘッダー追従 レスポンシブ SSL
1カラム フルワイド × ×

HomeAwayのアーカイブページ

HomeAway

ヘッダーに検索フォーム、サイドバーにマップと標準的なデザイン。

レイアウト 検索オプション マップ
2カラム 左カラム ○(左)

HomeAwayの個別ページ

HomeAway

2カラムでサイドバーの予約フォームが追従するデザイン。
この辺りがスタンダードな感じがします。

レイアウト アイキャッチ メニュー追従
2カラム 左カラム ○(右)

Wimdu

ドイツの宿泊シェアリング・エコノミー。

http://www.wimdu.co.uk/

Wimduのトップページ

Wimdu

シンプルなシングルページっぽいデザインかと思いきやファーストビューを過ぎたあたりから2カラムに。
人気の旅行地を押し出した他サービスと違い、宿そのものにフォーカスを当てた感じでしょうか。

レイアウト アイキャッチ ヘッダー追従 レスポンシブ SSL
1カラム フルワイド × ×

Wimduのアーカイブページ

Wimdu

レイアウトとしては他サイトと大きな違いはないのですが、検索フォームの背景をアイキャッチのように広く使っています。

レイアウト 検索オプション マップ
2カラム トップ ○(右)

Wimduの個別ページ

Wimdu

スタンダードっぽいデザイン。

レイアウト アイキャッチ メニュー追従
2カラム 左カラム ○(右)

Roomorama

シンガポールの宿泊シェアリング・エコノミー。
YouTubeで公開されてるプロモーション動画が微妙にホラー。

https://www.roomorama.jp/

Roomoramaのトップページ

Roomorama

他サイトよりややミニマル色の強いデザイン。
白基調でキーカラーが赤、次点で緑。攻める。

レイアウト アイキャッチ ヘッダー追従 レスポンシブ SSL
1カラム フルワイド ×

Roomoramaのアーカイブページ

Roomorama

ヘッダーの検索フォームの背景がアイキャッチっぽくなっているようで、狭すぎてなっていない。
その控えめな感じがいっそアクセントになっていておしゃれです。

レイアウト 検索オプション マップ
2カラム トップ(と左カラム) ×

Roomoramaの個別ページ

Roomorama

レイアウトに大きな違いはないものの、各項目がアウトラインアイコンで表現されていて、やはり他サイトよりもミニマルな印象です。

レイアウト アイキャッチ メニュー追従
1カラム 左カラム ○(右)

国内のAirbnb類似サービス

スペースマーケット

「結婚式場からお化け屋敷まで」を謳う我らが渋谷発の宿泊(貸しスペース?)シェアリング・エコノミー。

https://spacemarket.com/

スペースマーケットのトップページ

スペースマーケット

一般的なシングルページデザイン。

レイアウト アイキャッチ ヘッダー追従 レスポンシブ SSL
1カラム フルワイド ×

スペースマーケットのアーカイブページ

スペースマーケット

一般的な2カラムで、Airbnbと同じく各スペースの画像がカルーセルになっています。
マップはないようです。

レイアウト 検索オプション マップ
2カラム 右カラム ×

スペースマーケットの個別ページ

スペースマーケット

やはりAirbnbと同じく、1カラムのような2カラムのデザイン。
予約フォームは追従します。

レイアウト アイキャッチ メニュー追従
2カラム フルワイドスライダー ○(右)

STAY JAPAN

日本への旅行者に向けた宿泊シェアリング・エコノミー。

https://stayjapan.com/

STAY JAPANのトップページ

STAY JAPAN

カードの多段レイアウト!
宿泊のシェアリング・エコノミーサービスとしては異端かも知れません。
このままの路線で行って欲しいですね。

レイアウト アイキャッチ ヘッダー追従 レスポンシブ SSL
カード 一つだけ大きなカード

STAY JAPANのアーカイブページ

やはり異色の画面幅をいっぱいに使った多段レイアウト。

STAY JAPAN

レイアウト 検索オプション マップ
カード トップ ×

STAY JAPANの個別ページ

STAY JAPAN

個別ページはAirbnbと似た2カラムで予約フォームが追従するレイアウト。

レイアウト アイキャッチ メニュー追従
2カラム フルワイド ○(右)

まとめ

買収すごすぎ。

デザイン的な共通点としては、

  • トップページはシンプルなシングルページデザイン
  • アーカイブはヘッダー、もしくはサイドバーに検索フォーム
  • 1カラムっぽく見せるデザインでサイドバーの予約フォームは追従する

でしょうか。
シンプルなトップページや画面幅をいっぱいに使ったアイキャッチ画像はシェアリング・エコノミーサービスに限らずWeb全体でのトレンドだと思います(当サイトも)。

サービス名 レイアウト アイキャッチ ヘッダー追従 レスポンシブ SSL
Airbnb 1カラム フルワイド(スライダー)
FlipKey 1カラム フルワイド ×
9flats.com 1カラム フルワイド × ×
onefinestay 1カラム フルワイド(スライダー) ×
自在客 1カラム フルワイド(スライダー) × × ×
HomeAway 1カラム フルワイド × ×
Wimdu 1カラム フルワイド × ×
Roomorama 1カラム フルワイド ×
スペースマーケット 1カラム フルワイド ×
STAY JAPAN カード 一つだけ大きなカード

なお、レスポンシブとSSLは全体の7割(スマホ対応自体は10割)。
SSLは個人的にもう少し高い割合かと思っていたので意外でした。

完全な余談

ご紹介したすべてのサイトのトップページは「シングルページデザイン」と呼ばれる、トップページ固有のある意味独立したLPっぽいデザインになっているのですがこの「シングルページデザイン」、Angular等で実現する「シングルページアプリケーション」の台頭ですっかり名前がかぶってしまっている気がします。
新たな言葉が生まれていたりしたら教えてください。

ではでは。

最新の記事

お知らせ