【サンプルから学ぶ!】優れたデザインだけをまとめた旅行・ホテルのサイト集

2016年9月27日(火)
TechAcademy

本稿は、Designmodeのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また、本記事はWebデザイナーのNataly Birch氏によって投稿されました。

優れた旅行サイトには、優れたインターフェースがあります。地元のホテルのサイトから、大手の旅行会社の運営する機能が充実したポータルサイトに至るまで、優れたインターフェースにはユーザーを魅了する力があります。

こうしたサイトは、息をのむほど美しい画像や動画だけでなく、ハンバーガーボタン(3本の平行線で作られた「三」のような形をしたGUIのボタン要素)、パノラマビュー、パララックス効果(視差効果)、レスポンシブデザインのレイアウト、シネマグラフなどのテクニックを効果的に使っています。

マルチメディア、テキスト、多様なテクニックをバランス良く組み合わせることで、質の高いユーザーエクスペリエンスを提供できるのです。

さらに、ソーシャルメディアや予約システムなど観光客にとって欠かせないサービスも、サイトに上手く組み込むことを忘れてはなりません。今回は優れたインターフェースの旅行・ホテルのサイトを集めました。

1. Pygmy Elephant

1-pygmy-elephant

旅行代理店のPygmy Elephantのサイトは、視覚的なデザインに優れています。マルチメディアが豊富に使われていて、まさにユーザーが旅行したくなるようなサイトです。

動作性のある背景、動画、美しいグラフィック、細部までインタラクティブに設計されたデザインをすべて備えた旅行サイトは、なかなかありません。

Pygmy Elephant

2. Cruise Me

2-cruise-me

最先端のテクニックがいくつも使われています。トップページは、インタラクティブに設計された地図のデザインです。旅行の目的地のアイコンをクリックすると、予算を示すポップアップウィンドウが現れ、ユーザーは旅行プランを選べるようになっています。

下のセクションに進むと、カード型の要素で作られたツアープランが並んでいます。使いやすく、またフレンドリーな印象のデザインです。

Cruise Me

3. Bird Luxury Travel PR

3-bird-luxury-travel-pr

目を見張るような美しい画像が使われています。画像の多くはページ全体に個々に配置されていますが、一部はフルスクリーンの画像スライダーで見ることができます。

レイアウトそのものは伝統的なスタイルでありながら、コンテンツが良くデザインされています。ユーザーが楽しい余暇を想像できるようなデザインを実現したサイトです。

Bird Luxury Travel PR

4. The Art of Travel

4-the-art-of-travel

近年人気のあるテクニックが使われています。たとえば、ハンバーガーボタン、コンテンツの中央配置(レイアウトのセンタリング)、ゴーストボタン、パララックス効果(視差効果)などです。

特にゴーストボタンとパララックス効果によって、セクションからセクションへの移行が効果的に引き立てられています。コンテンツを鮮やかに引き立て、重要な細部に注目を集めるような工夫が見られます。

The Art of Travel

5. S-Trip

5-s-trip

コンテンツに高い比重を置いたインターフェースで、マルチメディアとテキストがバランス良く配置されています。

大きなドロップダウンメニュー(サイト上の「GRAD TRIPS」というメニュー)には、画像、動画、ウィジェットが数多く配置されていて、ユーザーが情報を得やすい設計といえます。彩度の高いカラースキームによって、企業イメージを上手く伝えています。

S-Trip

6. Henge Travel

6-henge-travel

ボックス要素(四角形の領域から成る要素)の使い方が創造的です!5つの動画が、5つのボックス要素としてページ全体に配置されています。

また動画はナビゲーション要素としても機能しています。ユーザーを温かく歓迎するような雰囲気で、冒険に満ちた旅をイメージさせるデザインです。

Henge Travel

7. Batty Langleys

7-batty-langleys

豪華でクラシカルな雰囲気のサイトです。美しい画像と、動きを持たせたイラストのパーツがいい組み合わせです。

このホテルのヴィクトリア王朝時代から続く洗練された伝統が、よく伝わるような作りです。

Batty Langleys

8. Kivo Hotel

8-kivo-hotel

水平線のレイアウトとグリッドシステムを組み合わせたデザインです。ウォーターカラーエフェクト(水彩画のような色の表現)、アシンメトリーなボックス要素、ピクセルアート、ラインスタイルのアイコン(線で描かれたアイコン)などが使われています。

予約システムはトップページの上中央に配置され、ユーザーが重要な機能にアクセスしやすいよう工夫されたレイアウトです。

Kivo Hotel

9. The Cambrian, Hotel Adelboden

9-hotel-adelboden

人目を引く効果の高い画像が使われています。各セクションには、リアルで質の高い画像が配置されていて、人々の好奇心を刺激するようなデザインです。2カラムのレイアウトにまとめることで、モダンな印象になっています。

The Cambrian, Hotel Adelboden

10. Villa Honegg

10-villa-honegg

このポータルサイトには、パノラマビューの動画が使われていて、ホテル全体を周回して見渡せます。

トップページには、縦方向にスクロールできるスライダーがあり、ユーザーの注目を集めやすいといえます。

Villa Honegg

11. Matterhorn Focus

11-matterhorn-focus

洗練されたイメージが伝わってくるサイトです。背景に使われているシックな画像は、ユーザーに旅行したいと思わせる効果がありそうです。

ユーザーにとって重要な機能はサイトの右側にあるナビゲーションバーにすべてまとめられています。

Matterhorn Focus

12. Lloyds Baia Hotel

12-lloyds-baia-hotel

必要な情報がすべてサイト上に上手く収まっていて、なおかつトップページは整理されています。

2カラムのアシンメトリーなレイアウトで、画像を引き立ててコンテンツを読みやすく配置しています。

Lloyds Baia Hotel

13. Le Germain Hotels

13-le-germain-hotels

このサイトは、四角形を強調した力強いフラットデザインで、他サイトのデザインとは一線を画しています。コンテンツもよく整理されています。

「ホテルの所在地」を示すコンテンツのみ、わかりやすく緑のカラーで表示されています。

Le Germain Hotels

14. Alex Perry Hotel and Apartments

14-alex-perry-hotel-and-apartments

ミニマリズムデザインが活かされています。余白を十分に取ることで、コンテンツに注目を集める効果があります。洗練されていて、なおかつ親しみの持てるデザインです。

紹介しているホテルやアパートの魅力を十分に伝えています。

Alex Perry Hotel and Apartments

15. TZVG

15-tzvg

動作性があることで、パララックス効果が生み出され、活気のある印象になっています。縦方向に配置された幾何学図形のデザインや、セクション間のスムーズな移行が、ユーザーを惹きつけることでしょう。

一部のセクションにはスライダーも使われていて、関連するコンテンツをさらに示しています。

TZVG

16. Giannoulis Hotels and Resorts

16-giannoulis-hotels-and-resorts

トップページは大きくは2つのカラムに分けられています。左側に予約フォームやナビゲーション要素などを配置し、右側に美しい画像を配置しています。

また2つのカラムの間に、「地図」、「電話番号」、「言語の選択」のアイコンから成る、細長い第3のカラムがあります。

Giannoulis Hotels and Resorts

17. Isabela Galapagos Cruise

17-isabella-galapagos-cruise

ランディングページは、旅行ツアーを案内する複数のセクションから構成されています。

各セクションは美しい画像で代表されていて、わかりやすいデザインです。細いラインのグラフィックが加わることで、洗練された美しいサイトになっています。

Isabela Galapagos Cruise

18. St. Moritz

18-st-moritz

インターフェースは、テキストや画像の詰め込みがなく、重要なコンテンツだけを並べたすっきりしたデザインです。各コンテンツは、外枠となるボックス要素の中に上手く配置され、コンテンツの自然な流れが作られています。

ユーザーがコンテンツやサイトの構造をつかみやすい、すっきりしたデザインです。

St. Moritz

19. THB Hotels

19-thb-hotels

彩度の高いカラースキームと美しい画像を合わせることで、活気のある夏の雰囲気を良く伝えています。旅行プランと目的地やホテルの案内には、スライダー、カード型の要素、ウィジェットなどを使っています。

THB Hotels

20. Travelscope

20-travelscope

Travelscopeは小さいながら、Chrome Experimentsでも紹介されているインタラクティブデザインのサイトで、旅行先として選べる国を示してくれます。

各国をクリックすると、その国のパスポートによって旅行できる範囲(パスポートの効力)が、地図上に示されます。唯一の欠点は、タブレット端末からアクセスしたときに多少問題があることです。

Travelscope

結論

今回ご紹介したのはどれも、デザインのトレンドを踏まえているだけでなく、スタイリッシュで美しい外観のサイトでした。これらのサイトでは、デザインの美しさと機能性を上手く調和しています。

さまざまなデザイン要素に気を配りながら、ユーザーが旅行ツアーやホテルの予約をスムーズにできるように機能性を考えて設計されているのです。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。自分の思い通りのデザインを作れるようになりましょう!


TechAcademyマガジンは、オンラインのプログラミングスクールTechAcademyが運営する教育×ITに関するWebメディアです。トレンドや最新情報など役に立つ記事を発信しています。
https://techacademy.jp/magazine/

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています