福岡のホームページ制作・SEO対策のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

ホテルや旅館、宿泊施設のホームページ制作でデザインを参考にしたいWebサイト9選

| カテゴリー : Webデザイン

こんにちは!福岡のホームページ制作会社アイドットデザインの芦刈です。

今回はホテルや旅館、宿泊施設のサイトをまとめてみました。
これからホームページ制作をお考えの方、もしくはどこか旅行をお考えの方は参考にしてみてください。

全部で9サイトになります。それではどうぞ!

浅の川

http://asanogawa.jp/

石川県金沢にある「町家一棟貸し」をしている宿です。
明朝体と余白のとれた文章は読み手にとって見やすい文章となっています。コンテンツがふわっと出現するアニメーションを入れることでやさしい印象を受けます。

TRUNK(トランク)

https://trunk-hotel.com/

渋谷にあるホテルのウェブサイト。
白黒を基調としておりカラーバランスは統一感があります。
またシンメトリーを用いることで規則性が生まれ、バランスのよい安定したレイアウトとなっています。

おびむらさき

https://obimurasaki.jp/

九州の小京都、飫肥。お城のふもとで武士の生活を体験するように泊まる宿です。
歴史から周辺情報まで、旅行がより楽しくなるコンテンツが充実しています。
また縱橫形の違う写真を上手くレイアウトされています。

リゾートインヤマイチ

http://resort-inn-yamaichi.com/

長野県にある栂池高原のホテルです。
イラストやポップなフォントを使用しており、賑やかで楽しい印象を受けます。
また家族で経営されているようなアットホームな雰囲気も伝わってきます。

星のや

https://hoshinoya.com/

日本国内に留まらず海外にもホテル事業を展開している企業。
ローディング中のアニメーションやスクロール時の挙動など、細かい所に気を配った作りとなっています。
また写真のクオリティも高く、人生に一度は宿泊してみたいと思わせる内容です。

紺碧ザ・ヴィラオールスイート

https://www.konpeki.okinawa/

沖縄にあるリゾートホテル、紺碧ザ・ヴィラオールスイート。
写真やテキストの余白に余裕がありとても見やすいサイトになっています。
スクロール時のアニメーションも、スッと内容が入ってくるタイミングが心地良いです。

アマンホテル

https://luxury-collection.jp/

世界各地にホテルを展開しているアマンホテル。
トピックスで最新情報を配信していたりモデルプランの展開まで、サイト内で旅の予定が立てられるコンテンツが充実しています。

黒川温泉 旅館 山河

http://www.sanga-ryokan.com/

熊本にある旅館 山河のホームページ。
たっぷりの余白と慣性の効いたスクロールに、ゆったりと上質な時間が流れる旅館の雰囲気が感じられます。
スプリットスクリーンレイアウトにより、左右のコンテンツが分かれているので文字情報もしっかりとユーザーに届けることができています。

料理宿やまざき

http://yamazaki-r.co.jp/

福井県にある、築140年の古民家を再生したヴィンテージ感溢れる宿。
大きく大胆な写真と、繊細な明朝体のテキストは力強さもありキリっとした鋭さがあります。

まとめ

ホテルや旅館、宿泊施設のWebサイト9選はいかがだったでしょうか?
魅力的な宿がたくさんあり、ついつい行きたくなってしまったのではないでしょうか。
最後にホームページ全体を見て感じたことまとめたいと思います。

スクロールにあわせてふわっとコンテンツが出現

多くのサイトがこの「ふわっと出現」を使用していました。
これはユーザーの興味を引きつける効果があり、コンテンツを見てもらうことが期待できそうです。
また同じセクション内でもアニメーションのタイミングをずらし、一枚ずつ出現させることでストーリー性を持たせることも出来そうです。

写真のクオリティ

1ページ内の「文章」と「写真」の使用領域で比べると、半分以上が写真で占領されていたと思います。これだけ多くの領域で使用していますので、写真がもたらすイメージ訴求の効果は大きいと言えるでしょう。
写真のクオリティが低いとサイトの印象もガラッと変わってしまいますので、品質の良い写真を使用しましょう。

余白を充分にとる

余白を充分にとることで、上品で洗練されたイメージを与えることが期待できますし、読みやすい文章となり可読性も上がります。
逆に余白を詰めると力強さと主張性が出てきますので、そのサイトにあった余白を使い分けましょう。

以上まとめてみました。ホテルや旅館、宿泊施設のサイト制作をお考えの方は参考にしていただければと思います。それではまた!

求人の応募が集まる採用サイト、採用コストを下げる広告運用のご相談も承っています。

follow us in feedly

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。