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

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

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

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

https://www.airbnb.jp/

Airbnbのトップページ

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

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

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

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

Airbnbのアーカイブページ

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

Airbnbの個別ページ

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

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

海外のAirbnb類似サービス

FlipKey

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

https://www.flipkey.com/

FlipKeyのトップページ

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

FlipKeyのアーカイブページ

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

FlipKeyの個別ページ

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

9flats.com

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

https://www.9flats.com/

9flats.comのトップページ

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

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

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

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

9flats.comの個別ページ

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

onefinestay

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

https://www.onefinestay.com/

onefinestayのトップページ

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

onefinestayのアーカイブページ

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

onefinestayの個別ページ

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

自在客

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

http://www.zizaike.com/

自在客のトップページ

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

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

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

自在客の個別ページ

一般的な2カラム。

HomeAway

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

http://www.homeaway.jp/

HomeAwayのトップページ

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

HomeAwayのアーカイブページ

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

HomeAwayの個別ページ

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

Wimdu

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

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

Wimduのトップページ

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

Wimduのアーカイブページ

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

Wimduの個別ページ

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

Roomorama

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

https://www.roomorama.jp/

https://www.youtube.com/watch?v=5Krx1Bk_ZIk

Roomoramaのトップページ

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

Roomoramaのアーカイブページ

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

Roomoramaの個別ページ

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

国内のAirbnb類似サービス

スペースマーケット

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

https://spacemarket.com/

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

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

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

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

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

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

STAY JAPAN

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

https://stayjapan.com/

STAY JAPANのトップページ

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

STAY JAPANのアーカイブページ

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

STAY JAPANの個別ページ

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

まとめ

買収すごすぎ。

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

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

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

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

完全な余談

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

ではでは。