架空の旅館サイト

Miho Yamamoto
Webサイト制作／コーディング

サイト情報

※basic認証をかけているためお手数ですが、URL検索後ユーザー名とパスワードのご入力をお願いいたします。

サイトURL：　https://mihohohoy.conohawing.com/ishii-kadan/index.html

ユーザー名：　mihohohoy

パスワード：　mihohohoy-389

制作概要

制作時期：2023年5月〜6月

制作時間：総計約90時間

制作内容：デザインカンプからコーディング

ページ数：4ページ

サイト構成：トップ、下層（お部屋 / お料理 / 温泉）

使用ツール：VScode、AdobeXD

使用スキル：HTML、CSS、jQuery、JavaScript

実装した機能・工夫した点

  • ファーストビュー画像3枚をズームをかけつつアニメーションで切り替わるように実装
  • 予約を宿泊予約モダール出現で実装
  • 日付選択をflatpickrで実装
  • 予約フォームのバリデーション
  • スクロールで追従型ヘッダーにし、デザイン変更
  • タブ切り替え機能を実装
  • ドロワーメニューを実装
  • SEO設定（＊OGPを設定しているが、noindexを付与しているためogp画像非表示）
  • PC、SPだけでなく、タブレットなど多様なデバイスのサイズにレスポンシブ対応
  • 図形など極力CSSで実装
  • スマホ時のナビゲーションリンク押下時に、自動でナビゲーションを閉じさせてスムーススクロールを実装
  • Aos.jsで要素をふわっと表示
  • 下層ページのSEO対策　パンくずを構造化マークアップ


トップ画面


下層ページ（他２ページ）


スマートフォン画面



WEBSITE