20周年特設サイトに込められた表現を、技術で支える

トリニティ株式会社様の創立20周年を記念した特設ページにおいて、インタラクションやアニメーションのフロントエンド実装を担当しました。

デザインはデザイアドライン株式会社が手がけており、オートプロジェクトでは、そのビジュアルや世界観を忠実に再現することを軸に、動作の最適化・レスポンシブ対応・パフォーマンス管理など、技術面からの支援を行いました。

Desired Line Studio

トリニティ株式会社 20周年特設サイト

主な実装要素と工夫

パララックス構造の再現

スクロールに応じて背景と前景が異なるスピードで動く「パララックス」効果は、要素ごとの速度制御と構造整理によりスムーズな動きを実現。スマホケースが重なって動く構成では、要素のZ軸制御と出現順の調整を細かく設計しました。

縦→横スクロールの連動と固定要素

「20年の歴史」セクションでは、縦スクロールで横方向の年表を動かす構造をJavaScriptで制御。また、見出しと説明文はスクロールに影響されないよう固定しつつ、右側の年表だけが横に流れる設計で、タイミングやレイアウト調整に注力しました。

Lottieアニメーションのカスタム再生

ロゴアニメーションでは、通常のLottie再生方式（即時またはループ）をカスタマイズし、「該当エリアに入ったときに1度だけ再生する」仕様を独自実装。ユーザー体験に配慮した制御を施しています。

CSS優先の実装で軽量化を実現

多くの演出がある中でもCSSアニメーションの活用を優先し、JavaScriptは必要最低限に抑えました。これにより、読み込み速度や描画パフォーマンスを維持。また、PCとスマートフォンの両方でバランスよく表示されるよう、レスポンシブなスタイル設計も工夫しています。

カスタムスクロールとナビゲーション制御

右側ナビゲーション「History」では、クリック時に年表エリアへ自然にスクロールするよう、スクロール位置の補正とジャンプ挙動の最適化を実装しました。

全体を通じて、視覚的な魅力とユーザビリティを両立させるために、多くのアニメーションや動きに工夫を施しました。静的なコンテンツでは伝えきれないブランドの歩みや世界観を、より深く印象づけられるページに仕上がっています。