サイトについて
旬の食材や最高級A5ランクの米沢牛が楽しめる架空の旅館サイトです。客室には温泉付きや園庭つきなどもあり素敵な思い出が作れそうな旅館です。
制作について
デザインカンプからのコーディングでしたので忠実に再現することを意識してコーディングいたしました。
ファーストビューは3枚の写真がゆっくりとズームしながら切り替わっていくアニメーションを実装しました。予約モーダルにはプラン選択や予約の日付をカレンダーで選べる機能を実装しております。
お知らせの「営業情報」と「その他」はjQueryで表示を切替できるようにし、ヘッダーはスクロールすると変化して下層と同じヘッダーが上部に固定されます。
安心感と高級感の演出にふわっと出現させるようにし、パンくずリストはSEOを意識して構造化マークアップいたしました。
担当範囲
- HTML/CSSコーディング
- JavaScript/jQuery
このサイトはポートフォリオとしての架空サイトの為、ベーシック認証(ID、パスワード)をかけています。
ID:user
PASS:pass1234
※検索結果に配慮してnoindexをかけています。
ID:user
PASS:pass1234
※検索結果に配慮してnoindexをかけています。
![](https://next-gear.jp/wp/wp-content/uploads/2022/05/Simple-Macbook-Pro-15-1-1-1024x683.png)
![](https://next-gear.jp/wp/wp-content/uploads/2022/05/Simple-Macbook-Pro-15-2-1-1024x683.png)
![](https://next-gear.jp/wp/wp-content/uploads/2022/05/Simple-Macbook-Pro-15-3-1-1024x683.png)
![](https://next-gear.jp/wp/wp-content/uploads/2022/05/架空の旅館サイト_スマホ-1024x615.jpg)