神奈川美研工業株式会社

制作概要

神奈川美研工業株式会社様のコーポレートサイトリニューアルにあたって構築を担当しました。

※会社概要ページ以外の実装を行いました。
※公開前のため複製したデータになります。

アニメーション

トップページファーストビューのアニメーションはpngアニメーションとCSSを組み合わせて実装しました。
サービスの4つの部門の特徴を織り交ぜて表現しています。

• 産業廃棄物部門
• 一般廃棄物部門
• 土木工事部門
• 解体工事部門

タイミング調整の管理

間隔やタイミングの調整がしやすいようカスタムプロパティを使用し、
フェーズを基準としてcalc()で足し引きすることで管理がしやすいようにしています。
animation: fadeIn 0.6s calc(var(--time_dev_show) + 0.4s) forwards;
検証を繰り返し、ゴールまで10秒以内に収めることができました。

素材の作成

デザイナーにフェーズごとのイラスト、アニメーションの差分を用意していただき、
グループ・レイヤー分けなどは表示順序などを考慮しながら自身で行いました。
pngアニメーションは圧縮した上で生成し、少しでも読み込みに負荷をかけないよう配慮しています。

備考

アニメーションのスキップ機能や、初回訪問時のみアニメーション発火なども提案しましたが、
工数の関係もありロード毎にアニメーションが走る形となりました。