UIデザインでみる「Airbnb」と類似サービス10選
昨今注目を集めている「シェアリング・エコノミー」。
注目されているということは注力されているということで、デザイン的にも秀逸なものが多いような気がします。
そして、シェアリング・エコノミーの火付け役「Airbnb」のような宿泊施設のシェアリング・エコノミーサービスは今までにない「ホテル」と「CtoC（個人間取引）」、さらに「メディア」までもをごちゃ混ぜにしたようなサービスで、UIにも目新しい工夫が随所に見られました。
いくつか似たコンセプトのサービスとあわせてご紹介します。
本家シェアリングエコノミーサービス「Airbnb」
シェアリングエコノミーの火付け役ともいえる宿泊施設をシェアするWebサービス。
完全に余談ですが「bnb」は「Bed aNd Breakfast」の略だそう（Nどちらかというとandの発声ベース）。
Airbnbのトップページ
{% image "/assets/img/blog/2016/11/24/d0860e32578a66bf5c6f542b6b0c887b1.png", "Airbnb" %}
トップページは1カラムでフラットよりのシンプルなデザイン。
全体的に白をベースにロゴの赤がアクセントになりつつ、各宿の写真を邪魔しない秀逸なデザインに思えます。
下部に控えた「おすすめの旅行先」は、
{% image "/assets/img/blog/2016/11/24/f488fa1a9abade8ba3d6bbc025ad3dc21.png", "Airbnb" %}
このようにひとつひとつが都市を表現した映画のポスターのようになっていてたまりません。
なぜここにこんなにコストを……。
| レイアウト | アイキャッチ | ヘッダー追従 | レスポンシブ | SSL |
|---|---|---|---|---|
| 1カラム | フルワイド（スライダー） | ○ | ○ | ○ |
レスポンシブとSSLは特にシェアリング・エコノミーと関係ありませんが「今どきのWebサイトの指標」として念のため。
Airbnbのアーカイブページ
{% image "/assets/img/blog/2016/11/24/a7e9b39d4148647f3c3be52554e1d6fa1.png", "Airbnb" %}
アーカイブ（一覧）ページはリキッドレイアウトで右側がGoogleマップになっていて、コンテンツは枠こそないもののカードっぽいデザイン。
特徴としては、各カードの画像がカルーセルになっていて各宿の画像をすべてこのページで見られるようになっています。
| レイアウト | 検索オプション | マップ |
|---|---|---|
| 2カラム（カード） | 左カラムトップ | ○（右） |
Airbnbの個別ページ
{% image "/assets/img/blog/2016/11/24/4ec97e0648e6238611650e2906a378b01.png", "Airbnb" %}
画面幅をいっぱいまで使ったフルワイドなアイキャッチと追従する「予約リクエストボタン」が印象的。
また、説明が難しいのですが、全体的にサイドバーが追従する前提でデザインされていて、実質2カラムなのに1カラムのように見えます。
| レイアウト | アイキャッチ | メニュー |
|---|---|---|
| 2カラム | フルワイド（モーダル） | 追従（右） |
以上がAirbnbの特徴で、以下は類似サイト。
海外のAirbnb類似サービス
FlipKey
2008年に大手宿泊施設口コミサイト「TripAdvisor（トリップ・アドバイザー）」に買収されたアメリカのシェアリング・エコノミーサービス。
なお、「TripAdvisor」は「FlipKey」の他にも「Housetrip」や「Holiday Lettings」「Niumba」「VacationHomeRentals」など数々の類似サービスを買収しています。強い。
FlipKeyのトップページ
{% image "/assets/img/blog/2016/11/24/d9a0f2ed81d3570e79befa082a4d31951.png", "FlipKey" %}
Airbnbと比べるとやや色が多くゴテゴテした印象。
なお、TripAdvisorに買収された他サイトも比較的似たテイストのデザインでした。
| レイアウト | アイキャッチ | ヘッダー追従 | レスポンシブ | SSL |
|---|---|---|---|---|
| 1カラム | フルワイド | × | ○ | ○ |
FlipKeyのアーカイブページ
{% image "/assets/img/blog/2016/11/24/90dd9ee43ed45aeddaa9774f9a02cf011.png", "FlipKey" %}
Airbnbと同じく各宿の画像がカルーセルになっています。
| レイアウト | 検索オプション | マップ |
|---|---|---|
| 2カラム（カード） | トップ | ○（左） |
FlipKeyの個別ページ
{% image "/assets/img/blog/2016/11/24/9234d24d157cd47fda827252ad3af2e31.png", "FlipKey" %}
Airbnbとは違いアイキャッチ画像はメインカラムに収まり、見慣れた2カラムのデザイン。
| レイアウト | アイキャッチ | メニュー追従 |
|---|---|---|
| 2カラム | 左カラム | 追従（右） |
9flats.com
ドイツの宿泊シェアリング・エコノミー。
2012年に大手総合ポータルサイト「Yelp」に買収されたそう。
9flats.comのトップページ
{% image "/assets/img/blog/2016/11/24/3a371c3b8e89ff0e080c31b9791950d91.png", "9flats.com" %}
シンプルなデザインで、いま流行りのアウトラインのアイコンも採用されています。
そして「おすすめの旅行先」は各都市の画像にテキストを乗せたシンプルなもの。
こっちが一般的でAirbnbが無茶にすごいと思う。
| レイアウト | アイキャッチ | ヘッダー追従 | レスポンシブ | SSL | | :--------: | :----------: | :----------: | :----------: | | 1カラム | フルワイド | × | × | ○ |
9flats.comのアーカイブページ
{% image "/assets/img/blog/2016/11/24/5e99c3631fdbf797687b824b1b588b3b1.png", "9flats.com" %}
左右におよそ半分この2カラムと見慣れないデザインです。
| レイアウト | 検索オプション | マップ |
|---|---|---|
| 2カラム | 左カラム | ○（左） |
9flats.comの個別ページ
{% image "/assets/img/blog/2016/11/24/b25659ec79046c5f6012b9cc4f4dc6671.png", "9flats.com" %}
見慣れた2カラムのデザインで、予約のボックスも特に追従しません。
| レイアウト | アイキャッチ | メニュー追従 |
|---|---|---|
| 2カラム | 左カラム | ×（右） |
onefinestay
2016年4月にフランスの大手ホテルチェーン「アコーホテルズ」が買収。
onefinestayのトップページ
{% image "/assets/img/blog/2016/11/24/c0713774c470a0307ca58045ca8c0cf11.png", "onefinestay" %}
他の宿泊シェアリング・エコノミーサービスとは違い「高級志向」だそうで、デザインもモノトーンとセリフなフォントを活かしたラグジュアリーな雰囲気が漂っています。
| レイアウト | アイキャッチ | ヘッダー追従 | レスポンシブ | SSL |
|---|---|---|---|---|
| 1カラム | フルワイド（スライダー） | ○ | × | ○ |
onefinestayのアーカイブページ
{% image "/assets/img/blog/2016/11/24/d9ff55bcffbafa2eaa42959d3cf900221.png", "onefinestay" %}
全体的にミニマル寄りで、各宿の情報もカードではなくメインカラムを幅いっぱいまで使ったアーカイブ。
デザイン的にごちゃごちゃするのを避けたのか他サイトのようなマップはありません。
| レイアウト | 検索オプション | マップ |
|---|---|---|
| 2カラム | 左カラム | × |
onefinestayの個別ページ
{% image "/assets/img/blog/2016/11/24/cb9c0f0aaa14ebccf2964d13bcdec1911.png", "onefinestay" %}
アイキャッチがこれでもかと幅全体を使ったカルーセルになっています。
そして、Airbnbと同じく1カラムのような2カラム。
Airbnbと違い、各セクションごとに帯のように背景色を変えているためより1カラムのように見えます。
| レイアウト | アイキャッチ | メニュー追従 |
|---|---|---|
| 2カラム | フルワイド（スライダー） | ○（右） |
自在客
中国上海の宿泊シェアリング・エコノミー。
すごい不遜な名前だと思ったら「自由自在な旅行」のような意味なのだとか。
自在客のトップページ
{% image "/assets/img/blog/2016/11/24/820598bd0af8edd84ae7febf53f8204a1.png", "自在客" %}
異国情緒漂う写真を幅いっぱいに使ったトップページ。
アウトラインアイコンもあります。
| レイアウト | アイキャッチ | ヘッダー追従 | レスポンシブ | SSL |
|---|---|---|---|---|
| 1カラム | フルワイド（スライダー） | × | × | × |
自在客のアーカイブページ
{% image "/assets/img/blog/2016/11/24/da8136ba6e35ac72123cfaa438f089b51.png", "自在客" %}
ヘッダーに検索フォームが幅いっぱいに置かれているのは割とありましたが、ファーストビューを脅かす価格やタイプのオプションも全開で配置した珍しいパターンです。
| レイアウト | 検索オプション | マップ |
|---|---|---|
| 2カラム | トップ | ○（右カラム追従） |
自在客の個別ページ
{% image "/assets/img/blog/2016/11/24/9de5e0d8db3f80d8790bc4e8a2cd7ea81.png", "自在客" %}
一般的な2カラム。
| レイアウト | アイキャッチ | メニュー追従 |
|---|---|---|
| 2カラム | 左カラム | ×（右） |
HomeAway
シンガポールの宿泊シェアリング・エコノミー。
2015年に大手旅行ポータルサイト「Expedia」が39億ドルで買収。すごい。
HomeAwayのトップページ
{% image "/assets/img/blog/2016/11/24/81ea16124f29d60102f7d294b6aeaf6f1.png", "HomeAway" %}
アウトラインデザイン（？）がアニメーションしています。
スクロールしていくとwow.jsのような「表示と同時にアニメーション」する要素もあり今どきな感じ。
| レイアウト | アイキャッチ | ヘッダー追従 | レスポンシブ | SSL |
|---|---|---|---|---|
| 1カラム | フルワイド | × | ○ | × |
HomeAwayのアーカイブページ
{% image "/assets/img/blog/2016/11/24/0e7d57bd659e5b96530b3c65a1c66c3f1.png", "HomeAway" %}
ヘッダーに検索フォーム、サイドバーにマップと標準的なデザイン。
| レイアウト | 検索オプション | マップ |
|---|---|---|
| 2カラム | 左カラム | ○（左） |
HomeAwayの個別ページ
{% image "/assets/img/blog/2016/11/24/99b4d9e6c8cb5c6866cd36d85ebf729f1.png", "HomeAway" %}
2カラムでサイドバーの予約フォームが追従するデザイン。
この辺りがスタンダードな感じがします。
| レイアウト | アイキャッチ | メニュー追従 |
|---|---|---|
| 2カラム | 左カラム | ○（右） |
Wimdu
ドイツの宿泊シェアリング・エコノミー。
Wimduのトップページ
{% image "/assets/img/blog/2016/11/24/d7ba21baf93e44b7aa22407812d931af1.png", "Wimdu" %}
シンプルなシングルページっぽいデザインかと思いきやファーストビューを過ぎたあたりから2カラムに。
人気の旅行地を押し出した他サービスと違い、宿そのものにフォーカスを当てた感じでしょうか。
| レイアウト | アイキャッチ | ヘッダー追従 | レスポンシブ | SSL |
|---|---|---|---|---|
| 1カラム | フルワイド | × | ○ | × |
Wimduのアーカイブページ
{% image "/assets/img/blog/2016/11/24/004965f8aa820e30db1e2c7eeb326d0d1.png", "Wimdu" %}
レイアウトとしては他サイトと大きな違いはないのですが、検索フォームの背景をアイキャッチのように広く使っています。
| レイアウト | 検索オプション | マップ |
|---|---|---|
| 2カラム | トップ | ○（右） |
Wimduの個別ページ
{% image "/assets/img/blog/2016/11/24/81cb29c4ecbc528b8457f77ceacf00311.png", "Wimdu" %}
スタンダードっぽいデザイン。
| レイアウト | アイキャッチ | メニュー追従 |
|---|---|---|
| 2カラム | 左カラム | ○（右） |
Roomorama
シンガポールの宿泊シェアリング・エコノミー。
YouTubeで公開されてるプロモーション動画が微妙にホラー。
https://www.youtube.com/watch?v=5Krx1Bk_ZIk
Roomoramaのトップページ
{% image "/assets/img/blog/2016/11/24/47498c92a73004e9cf323809589f3b7f1.png", "Roomorama" %}
他サイトよりややミニマル色の強いデザイン。
白基調でキーカラーが赤、次点で緑。攻める。
| レイアウト | アイキャッチ | ヘッダー追従 | レスポンシブ | SSL |
|---|---|---|---|---|
| 1カラム | フルワイド | × | ○ | ○ |
Roomoramaのアーカイブページ
{% image "/assets/img/blog/2016/11/24/d6cc118f62b293f8e28311e5b1ec734b1.png", "Roomorama" %}
ヘッダーの検索フォームの背景がアイキャッチっぽくなっているようで、狭すぎてなっていない。
その控えめな感じがいっそアクセントになっていておしゃれです。
| レイアウト | 検索オプション | マップ |
|---|---|---|
| 2カラム | トップ（と左カラム） | × |
Roomoramaの個別ページ
{% image "/assets/img/blog/2016/11/24/c5630a4034bd4f42d5d4710235f81ba21.png", "Roomorama" %}
レイアウトに大きな違いはないものの、各項目がアウトラインアイコンで表現されていて、やはり他サイトよりもミニマルな印象です。
| レイアウト | アイキャッチ | メニュー追従 |
|---|---|---|
| 1カラム | 左カラム | ○（右） |
国内のAirbnb類似サービス
スペースマーケット
「結婚式場からお化け屋敷まで」を謳う我らが渋谷発の宿泊（貸しスペース？）シェアリング・エコノミー。
スペースマーケットのトップページ
{% image "/assets/img/blog/2016/11/24/90c036d2d08bdabec7bc0b0b9a27064b1.png", "スペースマーケット" %}
一般的なシングルページデザイン。
| レイアウト | アイキャッチ | ヘッダー追従 | レスポンシブ | SSL |
|---|---|---|---|---|
| 1カラム | フルワイド | × | ○ | ○ |
スペースマーケットのアーカイブページ
{% image "/assets/img/blog/2016/11/24/8e66c6f1246dbc5b826bd1169bd3024f1.png", "スペースマーケット" %}
一般的な2カラムで、Airbnbと同じく各スペースの画像がカルーセルになっています。
マップはないようです。
| レイアウト | 検索オプション | マップ |
|---|---|---|
| 2カラム | 右カラム | × |
スペースマーケットの個別ページ
{% image "/assets/img/blog/2016/11/24/cc327f3576b498ff1d4afb33ea884ac81.png", "スペースマーケット" %}
やはりAirbnbと同じく、1カラムのような2カラムのデザイン。
予約フォームは追従します。
| レイアウト | アイキャッチ | メニュー追従 |
|---|---|---|
| 2カラム | フルワイドスライダー | ○（右） |
STAY JAPAN
日本への旅行者に向けた宿泊シェアリング・エコノミー。
STAY JAPANのトップページ
{% image "/assets/img/blog/2016/11/24/d07d324c8780af3271b4c801743741d91.png", "STAY JAPAN" %}
カードの多段レイアウト！
宿泊のシェアリング・エコノミーサービスとしては異端かも知れません。
このままの路線で行って欲しいですね。
| レイアウト | アイキャッチ | ヘッダー追従 | レスポンシブ | SSL |
|---|---|---|---|---|
| カード | 一つだけ大きなカード | ○ | ○ | ○ |
STAY JAPANのアーカイブページ
やはり異色の画面幅をいっぱいに使った多段レイアウト。
{% image "/assets/img/blog/2016/11/24/6baa1100e2886957f28902a537c2001e1.png", "STAY JAPAN" %}
| レイアウト | 検索オプション | マップ |
|---|---|---|
| カード | トップ | × |
STAY JAPANの個別ページ
{% image "/assets/img/blog/2016/11/24/a325222c7639b77b4b2eb2d17b8d63ba1.png", "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等で実現する「シングルページアプリケーション」の台頭ですっかり名前がかぶってしまっている気がします。
新たな言葉が生まれていたりしたら教えてください。
ではでは。
