CONCEPT WORK — 旅館・ホテル

旅館・ホテルのホームページ制作

相模湾を望む高台の温泉旅館を想定して作ったデモサイトです。宿泊予約サイトで見つけた方が最後に確かめに来る面として、世界観と、公式予約の入口の両方を持たせています。

最終更新日: 2026/08/15

公開日: 2026/08/15

想定した企業: 海音の宿(架空)

本デモは架空企業のコンセプトワークです。実在する企業・団体とは関係ありません。掲載している社名・所在地・実績の数字はすべて架空のもので、写真は用意したイメージ素材です。

デザインの意図

地の色は白ではなく生成りにしています。写真の外側が少し沈むぶん、料理と湯の写真が前に出ます。文字と濃い面には藍を使い、金は罫線とボタンの縁など細い部分にだけ置きました。金を面で使うと高級というより装飾が勝ってしまうため、面積を最小にしています。

見出しは明朝体で、文字と文字の間を広めに空けています。同じ文言でも、字間が詰まっていると案内板の見え方になり、空いていると読み物の見え方になります。宿の魅力は情報量ではなく余韻なので、1行あたりの文字を減らし、行間も広く取りました。

温泉・客室・料理は、それぞれ1枚を大きく使い、左右交互に配置しています。サムネイルを格子状に並べると比較の画面になり、宿を選ぶ気持ちより機能を確かめる気持ちが先に立ちます。1枚ずつ順に見せて、想像する時間を作っています。

海を望む高台の露天風呂を捉えたモーション映像です。スクロールに合わせて視点が動き、湯船の先に水平線が広がっていきます。

旅館を探している方が最後に決め手にするのは、その場所で過ごす自分を想像できるかどうかです。館内の設備一覧より、湯に浸かって海を見ている一場面のほうが早く働きます。ヒーローに置いたのは、この宿でいちばん強い場面ひとつだけです。

コピーは明朝体で1行だけ重ねています。映像の情報量が多いので、文字を足すほど両方が弱くなります。説明はスクロールした先のコンセプトに送り、最初の画面は場面と1行に絞りました。

旅館の公式サイトは、宿泊予約サイトで見つけた方が「実際どんな宿か」を確かめに来る面になります。そのため前半は写真と短い文だけで世界観を見せ、比較のための情報は後半にまとめました。前半で設備の一覧を出すと、予約サイトの詳細ページと同じものになってしまいます。

予約の入口を中腹と末尾の2箇所に置いているのは、決める速さが人によって違うからです。温泉と客室を見た時点で決まる方もいれば、アクセスと料金まで確かめたい方もいます。どちらの方も、決まった瞬間にその場で予約に入れる状態にしています。

公式予約が最も有利であることを明記しているのは、この業種の収益に直結するためです。予約サイトの手数料を避けるには、同じ部屋を同じ日に取るなら公式が得だと、予約ボタンの手前ではっきり書く必要があります。

実際にご依頼いただいて制作したサイトは制作実績にまとめています。

Web制作・AIO対策のご相談から、Tesiaの法人導入まで

まずはお気軽にご相談ください。2営業日以内にご返信いたします。