WORKS

和歌山県のダイビングショップ Diversity

和歌山県のダイビングショップ Diversity-ダイバーシティ- by YUKI WORKS
概 要 和歌山県のダイビングショップ Diversity-ダイバーシティ-
URL https://www.yuki-017.com/diversity/index.html
制作の目的 綺麗な海の写真を利用して、爽やかなダイビングショップのサイトを作りたいと考えました。
今回は疑似要素を使っておしゃれな装飾をつけたいと思ったので、画像や見出し部分のデザインを工夫しました。
ターゲット 体験ダイビング、ダイビングのライセンス取得を目標としている若い世代の人がターゲットです。
デザイン 余白を大きくとり、ゆとりのあるデザインにしました。
スクロールすると水滴が上に上がるように動きをつけることで、海らしさを表現しました。
画像の解像度を下げてサイトが重くならないように工夫しました。

写真を目立たせるために、色を多用せず アクセントカラーの#7bcccfを使い、統一感を持たせました。
採用情報部分には#f8ff55を使い、 くっきりとしたコントラストにより爽やかな印象を表現しました。

Javascriptを使って、固定ナビをホバーしたときと、スクロールしたときに背景色が変化するようにしました。
他にもハンバーガーメニューや、画像や要素にもJavascriptを使用し動きのあるサイトを作成しました。
レスポンシブ パソコン、タブレット、スマートフォン
制作期間 合計約7時間半
素材探し:写真加工:約1時間
コーディング・文章作成:6時間半
使用ツール コーディングはVScode
写真の加工はIllustratorを使用しました
使用素材 写真AC,イラストAC,Freepik