WEBサイトトレース #02

第二回目のサイトは"アビルキャンプリゾート"さん（https://habilecamp.com/）のサイトトレースに挑戦

アビルキャンプリゾート

■なんのサイト?
→大自然の中で夜空の空間を体験しながら楽しめるキャンプ場サイト
■ターゲット層
→20~30代子持ちの旅行好き家族層
■配色
メインカラー　##000000
ベースカラー　#F4F4F4
アクセントカラー　#B39A3A
■書体
Sawarabi Gothic
■レイアウト
１カラムレイアウト

気付いた事
長い文章
size 11px
letter-spacingはその時その時でバラバラ
line-height 18~33px
最大フォントsize
30px

・ファーストビュー では縦長の画像が一枚一枚切り替わるようになっている（この動きを何というのか知りたい・・・）
・ファーストビュー とフッターの部分の背景ではイラストと文字が合わさったアニメーションが実装されており、左に向かって進む文字と反転した右に進む文章と分かれている。
・句点の部分が星になっていたり、画像の切り抜きが星形になっていたりそのサイトの"夜空"をイメージした工夫がされている。
・お問い合わせコンテンツは上に一つと最後に一つ同じデザインのものが配置されている。
・ボタンの右に通常配置されている矢印のマークが星になっており、カーソルを合わせた時には流れ星のように星が降ってくるアニメーションになっている。