概要
雪国の
※ ポートフォリオ用の
制作意図
- クライアント像
- 雪国の
里山に ある、 客室6室の 小さな 宿。 2代目の 夫婦が 営む家族経営。 - 目的
- 予約サイトに
頼らず、 公式サイトからの 直接予約を 増やす。 - ターゲット
- 子育て
中の 家族、 祖父母を 連れた 三世代旅行。 - 課題
- 公式サイトで
空室も 料金も わからない。 「子ども 連れで 大丈夫？」 「祖父母に 階段は きつくない？」に 答えていない。 冬の 雪道が 不安で 予約を ためらわれている。 - 解決策
-
- 部屋・人数・コース・日付を
選ぶと、 空室と 人数分の 合計料金が その 場で わかり、 そのまま 予約フォームへ 進めるようにしました （予約は デモ）。 - 子ども
料金・ベビー用品・段差の ことを、 先に 書きました。 - 冬の
行き方 （送迎・冬タイヤ・雪の 日の 注意）を 1ページに まとめました。
- 部屋・人数・コース・日付を
デザイン
- キーワード
- 静か
／あたたかい ／やさしい - 配色
- 雪の
白・木の 色・雪の 影の 青を 基本に、 予約の ボタンだけ窓の 灯りの 黄色に しました。 - フォント
- 見出しは
手書き風の Klee One、 本文は Noto Sans JP。 - 演出
- ヒーローで
雪が ゆっくり降る 演出を 入れています （止める ボタン付き。 動きを 減らす設定では 降りません）。
工夫した点
-
1
人ずつ 食事の コースを 選べ、 区分 （大人・学生・幼児）と コースで 合計が その 場で 変わります。 人数と コースが そろうまで、 日付は 選べません。 -
休前日・
特別期間・休館日・贅沢コースの 受付数と 締め切りを、 日本時間で 計算して カレンダーに 反映しています。 -
予約フォームは、
カレンダーの 条件を もう 一度 確かめてから 表示します。 お越しの 方法や 日付に 合わせて、 必要な 欄だけを 出します （冬は 冬タイヤの 確認など）。 -
階段・段差の
ことを、 言い切らずに そのまま 書いています。
品質への配慮
- レスポンシブ対応
（360〜2560px で 確認） - 表示速度：Lighthouse の
スマホ 94〜99・PC 100、 Accessibility 100 - キーボードだけで
予約の 完了まで 操作でき、 読み上げにも 配慮 - 文字の
コントラスト （WCAG AA）、 動きを 減らす設定への 対応 - 料金と
入力チェックの 自動テスト - 架空の
宿の ため、 検索結果には 表示しない 設定