ポイント

SKYARCHER（設立準備中）のウェブサイトをAdobeXDでデザインを行い、コーディングまでを行いました。
動的表現としては、Topに戻るボタン、追従ヘッダー、ページ途中からのヘッダー出現、タイピングアニメーション、Swiperを用いた写真高速出現アニメーション、複数のhoverアニメーション、Scrollダウンアニメーションなどを作成しました。また、ふわっと出現するアニメーションやローディングすると画面が遷移するアニメーションなども実装しました。

aboutページでは、複数のイラストにアニメーションを導入し、ハリケーンには波紋アニメーションを作成しました。
projectページでは、一度きりの表示のモーダル、プログレスバーを導入して、サイトの長さを把握できるようにしました。
contactページでは、それぞれのフォームをクリックするとラベルを小さく出現させるfocus-withinを使って、よりモダンなお問い合わせフォームを作成しました。