WordPress（架空サイト）リゾートホテル

Heavenly

– 制作への想い –

リゾート旅行の心地よいをヒントに天国に近いサイトで見ていても楽しいサイトにしたいと思い制作させていただきました

– 制作概要 –

• 制作時間→80Hほど（1日4~5時間目安）
• 制作内容→コーディング・テスト環境へアップ
• ページ数→12ページ トップページ、ABOUT、SERVICE、WORKS、WORKS詳細、NEWS、NEWS詳細、月別ページ、カテゴリーページ、CONTACT、お問い合わせ確認ページ、お問い合わせ完了ページ
• 仕様スキル→HTML・CSS・JanaScript・WordPress
• 仕様ツール→VScode・Figma・VD・Photoshop

– 実装内容 –

Photoshop

• ロゴの作成

HTML実装

• BEMを用いています

CSS実装

• ボタンのアニメーション
• トップページとニュースの画像のアニメーション
• ハンバーガーメニューボタン
• 下層ページのFVの画像切り替えのアニメーション
• Googleマップの埋め込み
• レスポンシブ（375px〜1440px間、どの幅サイズでも見た目の崩れがなく綺麗な表示がされるように作成いたしました）

JavaScript実装

• 縦に動くスライダー実装
• ハンバーガーメニューの開閉
• 各ページへのスムーススクロール
• WordPressでの実装
• クリックすると各ページへ移動するようリンク付け
• パンくずリスト
• 下層ページのFVの画像切り替え
• NEWS一覧と詳細ページ、月別やカテゴリーによる出しわけ
• Worksのカスタム投稿ページでカテゴリーによる出しわけ
• ページネーション
• Aboutのアクセスと会社概要の住所をカスタムフィールド
• Contact Form 7を使ったお問い合わせページ
• スムーススクロール（セクションまで移動します）
• ロゴの色をスクロールで切り替え
• メインビューのフェイドアウトしながらのスライダー（swiper）
• serviceのタブ切り替え
• モーダル
• google map埋め込み
• アニメーション
• コンタクトフォームをPHP工房との紐つけ
• SEO対策
• OGP設定
• レスポンシブ（375px〜1440px間、どの幅サイズでも見た目の崩れがなく
  綺麗な表示がされるように作成いたしました）

– デザイン –

• ロゴ作成
• 画像加工