道の駅 ほしみのパーク

道の駅ホームページ | シングルページ

自主制作

架空

PC対応

スマホ対応

pc画像
sp画像

目的

道の駅の魅力や情報をわかりやすく伝え、サイトをきっかけに実際に訪れてもらうことを目指す。休憩などで立ち寄った人でも、思わず興味を持ってもらえるような構成にする。

ターゲット

小さな子どもからお年寄りまで、家族連れやツーリング、ドライブで訪れる人など、道の駅に立ち寄るすべての年代の方。

技術の導入

お知らせ一覧やフッターに自作のバナーを配置し、サイト全体の再現性を高めました。JavaScriptでカレンダーを実装し、ネット上のサンプルコードを参考にしながらデザインに合わせて改良を加えています。親しみやすいデザインにすることで、どの年代の方から見ても見やすい構成を意識しました。

アニメーション

メインビジュアルには画像がふわっと現れるフェードインアニメーションを取り入れました。各セクションにも同様の動きを加え、全体に統一感を持たせています。大きな動きをあえて控えることで、見やすさと操作性の良さを意識しました。

使用言語 / ツール

HTML / CSS / JavaScript / Git.Github

制作時期

2025年8月20日~9月14日(入校4ヶ月目)

制作期間

デザイン/

約34時間

コーディング/

約56時間

pcサイズ作品画像
spサイズ作品画像
矢印 矢印