架空旅館のランディングページを作成しました。若者に向けた「長期滞在ができ旅館内で非日常を体験できる」宿泊プランのご紹介です。
URL
担当
デザイン・コーディング(レスポンシブ)
サイトの目的
宿泊プランの予約に繋げる。
ターゲット
男女 20代
デザインについて
和風にするため、メインカラーは藍白にし文字は縦書、明朝体を使用。若者向けにするため重苦しくなくシンプルでオシャレな感じのイメージにしました。
写真を多く使い、グリッドから外れたレイアウトや視差効果を使い、非日常をイメージさせ、読み進めたくなるようなストーリー性を出しました。
コーディングについて
SCSS(入れ子構造やmixin)を使用。レスポンシブ対応をしており、スマホ時のナビゲーションは画面下に固定しタップしやすくしています。
メインビジュアルにはカルーセルスライダー、写真や文字にパララックスのjQueryプラグインを使用しました。また、予約フォームにはカレンダーのjQueryプラグインを使用し、日時のフォームを押すと現れるようになっています。