Imami's Portfolio

作品詳細ページです

どんぐり村(非公式)

どんぐり村トップ画像

このサイトについて

  • 職業訓練校での自主制作です。牧場系のサイトを制作したかったので、佐賀県のどんぐり村のサイトを自分なりに制作してみました。
  • コンセプト:広大な自然と可愛い動物が待ってるよ
  • 目的:写真を大きく使い、広々とした施設をアピール。コロナ禍でも密にならない施設・感染防止策をPRし集客アップを目指す。
  • 制作期間:約3週間+卒業後に修正3日
  • ターゲット:ファミリー、子どもから大人まで
  • 配色:牧場の緑、どんぐりの茶色、アクセントにオレンジ色を使用


工夫した点

どんぐり村ポイント01画像

PC画面(左)とスマホ画面(右)

1レスポンシブデザイン対応で「スライドショー」も掲載

フェードイン・フェードアウトの効果をつけたスライドショーで、のんびりとした雰囲気を出し、広々とした自然風景をPRしました。

写真)佐賀県観光連盟、写真AC、どんぐり村公式サイトの写真を利用


このサイトもレスポンシブデザイン対応です。

例)スマホの時:ナビメニューを縦に並べ、下部にサイドバーの内容を配置しました。



どんぐり村ポイント02画像

2スクロールするとサイドバーの内容が追従する仕組み [PCのみ]

「あそぶ」「食べる」のページは内容が多いため、左側のメインコンテンツに追従して右側サイドの内容が下まで降りて来るように設定しました。バナーの情報をユーザーの視界に入りやすくする仕組みです。



どんぐり村ポイント03画像

3お問い合わせフォームの入力確認機能(JavaScript・jQuery)

「お問い合わせ」のページでは「validationEngine」というjQueryを使い、リアルタイムで入力チェックを行えるようにしました。さらに「この内容で送信しますか?」というJavaScriptを使ったウインドウで、簡単にですがユーザーに再確認を促す仕組みにしました。


このサイトは非公開にしています。


サイトを見る(パスワード入力)

TOP▲