DEMO SITES
制作例
施設のタイプによって、伝えるべき情報と見せ方は変わります。提案用に制作したデモサイトで、完成後のイメージをご確認ください。
掲載例はすべて架空施設の制作デモです。実在施設の制作実績ではなく、写真はフリー素材を使用しています。
架空施設のデモ温泉旅館長野県白馬村という設定
雪見の宿 月白
デザインの狙い：温泉・食事・客室の魅力を見つけやすくまとめています。静けさと上質さを伝えるため、見出しに明朝体を使い、余白を広く取ったエディトリアルな構成にしています。写真の上に重ねる文字は控えめにし、景色を主役にしました。
- 温泉と食事を、それぞれ大きな写真付きの独立したセクションで紹介
- 和室・和洋室の定員、広さ、寝具、食事、料金単位を客室カードで比較
- 各客室から問い合わせフォームへ進むと、希望の客室が自動で選択される
- 角丸を小さく抑え、落ち着いた印象に統一
架空施設のデモゲストハウス京都という設定
京町家ステイ 結
デザインの狙い：初めての方や海外からの旅行者にも親しみやすいよう、丸みのある書体と温かみのある色を使っています。ゲストハウスで特に確認されやすい「寝る場所」と「共用部分」の情報を丁寧に整理しました。
- ドミトリー（男女混合・女性専用）と個室の違いを分けて掲載
- 共用ラウンジ・キッチン・シャワーを写真付きで紹介
- 一人旅や女性の利用者に向けた安心情報のブロックを用意
- 駅からの徒歩経路をアクセスページで案内
架空施設のデモ一棟貸し那覇市内という設定
ちゅらまちステイ 那覇
デザインの狙い：建物全体を貸し切る滞在をイメージしやすいよう、明るい室内写真と爽やかな配色を使っています。客室タイプがない一棟貸しのため、人数別のプランとして料金と設備を整理しました。
- リビング・寝室・キッチン・水回りなど、建物全体の様子を紹介
- 人数別プラン（1〜2名／3〜4名）で料金と設備を比較
- 空港からの所要時間と駐車場の情報を目立つ位置に掲載
- スマートフォンでは画面下部に予約・問い合わせボタンを常に表示
COMMON FEATURES
3つのデモに共通すること
同じ4ページ構成
トップ、客室・プラン、アクセス、問い合わせの4ページ。施設タイプに応じてセクションを出し分けています。
スマートフォン対応
狭い画面では宿名とメニューだけのヘッダーにし、予約・問い合わせボタンを画面下部に固定しています。
読みやすさへの配慮
ボタンの文字色と背景色のコントラストを確保し、キーボード操作時のフォーカス表示も設けています。