SMALLSHIFT
← サイト事例に戻る

WEBSITE STUDY / 国内

シーサイドホテル舞子ビラ神戸

海辺で食事する家族の場面から、宿泊・レストラン・活動へ分岐するホテルサイト。

公式サイトを見る ↗
公式サイト / 掲載確認用
シーサイドホテル舞子ビラ神戸の公式サイト画面

DESIGN NOTES

このサイトの設計を読み解く。

01

建物より家族の時間を先に見せる

PC冒頭では海と橋を背景に食事する家族が大きく写り、海辺での時間を最初に伝える。ホテルの外観を単独で見せるより、誰と何をして過ごす場所かが具体的になる。人物の表情と窓の景観が同じ画面に入る写真選びが、体験を説明する役割を担っている。

02

空室と食事予約を色で分ける

白い上部ナビには多くの項目があるが、右端の空室検索は金系、レストラン予約は青系のボタンになっている。宿泊と食事だけの利用を分け、目的が明確な人を直接案内する作りだ。複数の売上部門を持つ施設では、主な予約経路を視覚的に区別するとよい。

03

写真の次に最新情報を並べる

次の区画ではイベント、レストラン、テイクアウト、宿泊の分類と、新しい案内の画像カードが並ぶ。抽象的なホテル紹介だけでなく、今利用できる内容を早い位置で読める。常設の魅力と期間限定の企画を同じ形式で混在させず、更新情報として分離している。

04

二つの建物を滞在目的で説明する

本文ではSPAタワーと本館を分け、サウナや心身を整える滞在と、歴史や家族の思い出という異なる特徴を説明する。客室の数値比較に入る前に滞在目的の違いを理解できる。建物やプランが複数ある施設では、選ぶ基準を短い言葉で先に与える方法が使える。

05

地域客と宿泊客を同時に案内する

レストラン、宴会、会議、ウェルネス、アクティビティへ続く構成は宿泊しない地域客も想定している。ホテルの全事業を一つの予約に押し込めず、目的別に見せる設計だ。小規模な宿でも日帰り入浴や食事を扱うなら、宿泊とは別の入口を作る価値がある。

APPLY TO YOUR PROJECT

自分の制作に取り入れるなら

宿泊と食事の予約を分け、今の催しを写真のすぐ下へ置く。宿の設備を紹介するときは、どの人がどの時間を過ごす場所なのかを先に示すと比較しやすい。

そのまま真似する前に

上部の項目数が多いため、小画面では目的の入口を探しづらくなる可能性がある。宿泊・食事・アクセスの主要行動を優先し、詳細分類は段階的に見せたい。

次に見ておきたい参考

一覧へ →
シーサイドホテル舞子ビラ神戸の公式サイト画面