町家ホテル&グランピングサイト(デモサイト)

星泊

町家に泊まり、焚き火や星空を楽しめる宿泊施設のデモサイトを制作しました。コンセプト・滞在の魅力・宿泊プラン・ギャラリー・アクセス・FAQまでを1ページに整理し、非日常感と予約までの導線が伝わる構成にしています。

デモサイトを見る

別のタブで開きます

業種
宿泊施設・グランピング
担当範囲
構成・デザイン・HTML/CSS実装
使用技術
HTML / CSS
ページ構成
シングルページ
タグ
HTML / CSS / 町家ホテル / グランピング / Demo / レスポンシブ対応
星泊のPC・スマートフォン表示のモックアップ

このサイトについて

町家の静けさと、焚き火や星空を楽しむ体験を組み合わせた宿泊施設サイトを制作しました。

深いネイビーやチャコールを基調に、夜の空気感や落ち着いた非日常感が伝わるデザインにしています。ファーストビューでは「町家に泊まり、星と眠る。」というコピーで施設の世界観を印象づけ、滞在の魅力、宿泊プラン、ギャラリー、アクセス、FAQへ自然につながる流れを意識しました。

デザインのポイント

  1. 夜の余韻が伝わる世界観

    暗めの背景色とあたたかい光の写真を組み合わせ、町家の静けさや焚き火のぬくもりが伝わるデザインにしました。

  2. 宿泊体験をイメージしやすい構成

    町家で過ごす時間、星空、焚き火、庭などの魅力を段階的に見せることで、滞在中の過ごし方を想像しやすくしました。

  3. 予約につながる情報整理

    宿泊プラン、ギャラリー、アクセス、FAQを1ページ内に整理し、興味を持った方が迷わず予約を検討できる導線にしました。

ページの流れ

トップから順に、どんな順番で情報を見せているかをまとめました。画像を押すと、セクション全体を拡大して見られます。

  1. 01 / 05

    TOP

    メインビジュアルとキャッチコピーで、町家に泊まる特別感と夜の静かな世界観を印象づけました。

  2. 02 / 05

    Concept

    町家の静けさ、焚き火、星空を楽しむ滞在体験を伝え、施設の魅力が伝わるようにしました。

  3. 03 / 05

    Stay・Fire

    客室や庭、焚き火体験などを紹介し、宿泊中の過ごし方を具体的にイメージできる構成にしました。

  4. 04 / 05

    Plan・Gallery

    宿泊プランと写真ギャラリーを掲載し、料金や施設の雰囲気を確認しやすくしました。

  5. 05 / 05

    Access・FAQ・Reservation

    アクセス情報とよくある質問をまとめ、最後に予約導線へつなげました。

こんなサイトを作りたい、
というご相談も。

新しくホームページを作りたい。今のサイトを見直したい。まだ内容が固まっていなくても大丈夫です。お話を伺ったうえで、いま必要なものだけをご提案します。

ご相談・お見積もりは無料です。