WordPress（架空サイト）動物園WEBサイト制作　

zootopia

★制作への想い

とても可愛らしくて親しみやすいデザイン！
動物園のサイトとして、家族連れや子どもにも親しみやすい雰囲気がしっかり出しています。

★制作概要

• 制作時間→90Hほど（1日4~5時間目安）
• 制作内容→コーディング・テスト環境へアップ
• ページ数→12ページ トップページ、ご案内、動物たち、園について、詳細ページ、月別ページ、カテゴリーページ、検索ページ、CONTACT、お問い合わせ確認ページ、お問い合わせ完了ページ
• 仕様スキル→HTML・CSS・JanaScript・WordPress
• 仕様ツール→VScode・Figma・Photoshop・Illustrator

★実装内容

Photoshop

• ロゴの作成

HTML実装

• BEMを用いています

CSS実装

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

JavaScript実装

• メインビューのスライダー実装
• ハンバーガーメニューの開閉
• 各ページへのスムーススクロール
• WordPressでの実装
• クリックすると各ページへ移動するようリンク付け
• パンくずリスト
• 検索機能
• 下層ページのFVの画像切り替え
• 動物たち一覧と詳細ページ、カテゴリーによる出しわけ
• ページネーション
• Contact Form 7を使ったお問い合わせページ
• スムーススクロール（セクションまで移動します）
• google map埋め込み
• アニメーション
• コンタクトフォーム7のお問い合わせ
• SEO対策
• OGP設定
• レスポンシブ（375px〜1440px間、どの幅サイズでも見た目の崩れがなく
  綺麗な表示がされるように作成いたしました）

★デザイン

• ロゴ作成
• 画像加工