【サンプルから学ぶ！】優れたデザインだけをまとめた旅行・ホテルのサイト集
本稿は、Designmodeのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また、本記事はWebデザイナーのNataly Birch氏によって投稿されました。
優れた旅行サイトには、優れたインターフェースがあります。地元のホテルのサイトから、大手の旅行会社の運営する機能が充実したポータルサイトに至るまで、優れたインターフェースにはユーザーを魅了する力があります。
こうしたサイトは、息をのむほど美しい画像や動画だけでなく、ハンバーガーボタン（3本の平行線で作られた「三」のような形をしたGUIのボタン要素）、パノラマビュー、パララックス効果（視差効果）、レスポンシブデザインのレイアウト、シネマグラフなどのテクニックを効果的に使っています。
マルチメディア、テキスト、多様なテクニックをバランス良く組み合わせることで、質の高いユーザーエクスペリエンスを提供できるのです。
さらに、ソーシャルメディアや予約システムなど観光客にとって欠かせないサービスも、サイトに上手く組み込むことを忘れてはなりません。今回は優れたインターフェースの旅行・ホテルのサイトを集めました。
1. Pygmy Elephant
旅行代理店のPygmy Elephantのサイトは、視覚的なデザインに優れています。マルチメディアが豊富に使われていて、まさにユーザーが旅行したくなるようなサイトです。
動作性のある背景、動画、美しいグラフィック、細部までインタラクティブに設計されたデザインをすべて備えた旅行サイトは、なかなかありません。
2. Cruise Me
最先端のテクニックがいくつも使われています。トップページは、インタラクティブに設計された地図のデザインです。旅行の目的地のアイコンをクリックすると、予算を示すポップアップウィンドウが現れ、ユーザーは旅行プランを選べるようになっています。
下のセクションに進むと、カード型の要素で作られたツアープランが並んでいます。使いやすく、またフレンドリーな印象のデザインです。
3. Bird Luxury Travel PR
目を見張るような美しい画像が使われています。画像の多くはページ全体に個々に配置されていますが、一部はフルスクリーンの画像スライダーで見ることができます。
レイアウトそのものは伝統的なスタイルでありながら、コンテンツが良くデザインされています。ユーザーが楽しい余暇を想像できるようなデザインを実現したサイトです。
4. The Art of Travel
近年人気のあるテクニックが使われています。たとえば、ハンバーガーボタン、コンテンツの中央配置（レイアウトのセンタリング）、ゴーストボタン、パララックス効果（視差効果）などです。
特にゴーストボタンとパララックス効果によって、セクションからセクションへの移行が効果的に引き立てられています。コンテンツを鮮やかに引き立て、重要な細部に注目を集めるような工夫が見られます。
5. S-Trip
コンテンツに高い比重を置いたインターフェースで、マルチメディアとテキストがバランス良く配置されています。
大きなドロップダウンメニュー（サイト上の「GRAD TRIPS」というメニュー）には、画像、動画、ウィジェットが数多く配置されていて、ユーザーが情報を得やすい設計といえます。彩度の高いカラースキームによって、企業イメージを上手く伝えています。
6. Henge Travel
ボックス要素（四角形の領域から成る要素）の使い方が創造的です！5つの動画が、5つのボックス要素としてページ全体に配置されています。
また動画はナビゲーション要素としても機能しています。ユーザーを温かく歓迎するような雰囲気で、冒険に満ちた旅をイメージさせるデザインです。
7. Batty Langleys
豪華でクラシカルな雰囲気のサイトです。美しい画像と、動きを持たせたイラストのパーツがいい組み合わせです。
このホテルのヴィクトリア王朝時代から続く洗練された伝統が、よく伝わるような作りです。
8. Kivo Hotel
水平線のレイアウトとグリッドシステムを組み合わせたデザインです。ウォーターカラーエフェクト（水彩画のような色の表現）、アシンメトリーなボックス要素、ピクセルアート、ラインスタイルのアイコン（線で描かれたアイコン）などが使われています。
予約システムはトップページの上中央に配置され、ユーザーが重要な機能にアクセスしやすいよう工夫されたレイアウトです。
9. The Cambrian, Hotel Adelboden
人目を引く効果の高い画像が使われています。各セクションには、リアルで質の高い画像が配置されていて、人々の好奇心を刺激するようなデザインです。2カラムのレイアウトにまとめることで、モダンな印象になっています。
10. Villa Honegg
このポータルサイトには、パノラマビューの動画が使われていて、ホテル全体を周回して見渡せます。
トップページには、縦方向にスクロールできるスライダーがあり、ユーザーの注目を集めやすいといえます。
11. Matterhorn Focus
洗練されたイメージが伝わってくるサイトです。背景に使われているシックな画像は、ユーザーに旅行したいと思わせる効果がありそうです。
ユーザーにとって重要な機能はサイトの右側にあるナビゲーションバーにすべてまとめられています。
12. Lloyds Baia Hotel
必要な情報がすべてサイト上に上手く収まっていて、なおかつトップページは整理されています。
2カラムのアシンメトリーなレイアウトで、画像を引き立ててコンテンツを読みやすく配置しています。
13. Le Germain Hotels
このサイトは、四角形を強調した力強いフラットデザインで、他サイトのデザインとは一線を画しています。コンテンツもよく整理されています。
「ホテルの所在地」を示すコンテンツのみ、わかりやすく緑のカラーで表示されています。
14. Alex Perry Hotel and Apartments
ミニマリズムデザインが活かされています。余白を十分に取ることで、コンテンツに注目を集める効果があります。洗練されていて、なおかつ親しみの持てるデザインです。
紹介しているホテルやアパートの魅力を十分に伝えています。
Alex Perry Hotel and Apartments
15. TZVG
動作性があることで、パララックス効果が生み出され、活気のある印象になっています。縦方向に配置された幾何学図形のデザインや、セクション間のスムーズな移行が、ユーザーを惹きつけることでしょう。
一部のセクションにはスライダーも使われていて、関連するコンテンツをさらに示しています。
16. Giannoulis Hotels and Resorts
トップページは大きくは2つのカラムに分けられています。左側に予約フォームやナビゲーション要素などを配置し、右側に美しい画像を配置しています。
また2つのカラムの間に、「地図」、「電話番号」、「言語の選択」のアイコンから成る、細長い第3のカラムがあります。
17. Isabela Galapagos Cruise
ランディングページは、旅行ツアーを案内する複数のセクションから構成されています。
各セクションは美しい画像で代表されていて、わかりやすいデザインです。細いラインのグラフィックが加わることで、洗練された美しいサイトになっています。
18. St. Moritz
インターフェースは、テキストや画像の詰め込みがなく、重要なコンテンツだけを並べたすっきりしたデザインです。各コンテンツは、外枠となるボックス要素の中に上手く配置され、コンテンツの自然な流れが作られています。
ユーザーがコンテンツやサイトの構造をつかみやすい、すっきりしたデザインです。
19. THB Hotels
彩度の高いカラースキームと美しい画像を合わせることで、活気のある夏の雰囲気を良く伝えています。旅行プランと目的地やホテルの案内には、スライダー、カード型の要素、ウィジェットなどを使っています。
20. Travelscope
Travelscopeは小さいながら、Chrome Experimentsでも紹介されているインタラクティブデザインのサイトで、旅行先として選べる国を示してくれます。
各国をクリックすると、その国のパスポートによって旅行できる範囲（パスポートの効力）が、地図上に示されます。唯一の欠点は、タブレット端末からアクセスしたときに多少問題があることです。
結論
今回ご紹介したのはどれも、デザインのトレンドを踏まえているだけでなく、スタイリッシュで美しい外観のサイトでした。これらのサイトでは、デザインの美しさと機能性を上手く調和しています。
さまざまなデザイン要素に気を配りながら、ユーザーが旅行ツアーやホテルの予約をスムーズにできるように機能性を考えて設計されているのです。
[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。自分の思い通りのデザインを作れるようになりましょう！
連載バックナンバー
Think ITメルマガ会員登録受付中
他にもこの記事が読まれています
全文検索エンジンによるおすすめ記事
- Airbnbを事例に学ぶ！失敗しないWebサイトの作り方
- 無限スクロールの課題とは！スクロールが長いサイトのデザイン手法
- 初心者におすすめ！無料・有料で使えるWordPressのテーマ30選【日本語対応のみ】
- 【Drupal 8入門】Viewsによるコンテンツ一覧ページの作成（後編）―AJAXページャーや検索機能の実装
- コンセプトに基づいたフレームワークの設計（前編）
- レイアウトを美しく魅せる“均等なスペーシング”
- 【Drupal 8入門】Viewsによるコンテンツ一覧ページの作成（前編）―Viewsの概念と基本的な使い方
- マイクロインタラクションで気をつけたい5つのポイント
- 見た目はどうする？どうできる？
- 1900年代のデザインの歴史から学ぶ！デザインの基本とは