hikingpage

1st課題：　山診断ページ

DEMO

https://guolam.github.io/hikingpage/mountain.html ＊なぜか回るアイコンの画像がバグってます。

紹介と使い方

• 初めて作ったホームページです。

• 山の初心者や、ライトユーザー向けに、普段の趣味嗜好と生活習慣の診断して、おすすめの山を紹介する。

• 紹介ページでは、山の基本情報と日帰りで軽く遊べるハイキングコースを用意します

-1人で行く、初めて自分で行くのが心細い方に、山岳部主催のハイキングコースを申し込める仕組みです。

工夫した点

• 見出しページの背景：グラテーション

• javascript設置：ネット素材でjavascriptのアコーディオン、診断ツール、動きのあるボタンを作ってみました。

• 診断ツールの２つの分岐を３つにしました。

• 全てのボタンを押したくなるように、動きをつけました。

• 山へ行く気持ちが少しでもあれば、ちゃんと申し込んで、コースに申し込める仕組みにしました。

• 山アイコン、faviconなどの細部、可愛くしました ^^

苦戦した点

バグるポイント

• アコーディオンの動きがうまくいかず、javascriptにtoogleを設置した方が動きやすくなるかもです。

• TOP PAGEに戻るボタンが最後まで真ん中揃えにできませんでした。

ページ作成の課題

• 配色が最後まで統一していなく、参照枠を探したところ、意外と山系のサイトにかわいいデザインが少なく、再度研究していく必要がある。

• 山診断の内容が結構適当でしたので、時間ある時に、ちゃんとデータを基づいて書きたいと思います。

-写真の見せ方。観光について、もっと素材を取り出したかった。

参考にした web サイトなど

• スクロールすると出てくる「トップへ戻る」ボタンの作り方 https://cotodama.co/pagetop/

ー 診断ツール https://qiita.com/bstyle6130/items/c3dfebdceaaef8e3860d

• 動くWebデザイン帳 https://coco-factory.jp/ugokuweb/

• flexbox https://b-risk.jp/blog/2021/01/flexbox/# hikingpage