複雑なアニメーションとCMS構築をした事例紹介になります。

 

ご依頼の背景

クライアントは採用強化に向けて採用サイトの制作を計画しており、デザイナーによる本格的なデザインデータはすでに完成していました。しかし、そのデザインにはスクロール連動のテキストフェードイン、パララックス、グリッチアニメーション、無限スライドなど、高度なアニメーション表現が多数含まれていました。

 

さらに、社員インタビューや職種紹介、求人情報をCMSで管理・更新できる仕組みも必要で、アニメーションの複雑さに加えて機能面でもボリュームのある開発が求められていました。「デザインはある。でも実装できる人がいない。」という状況が続いており、せっかく作り込んだデザインをそのまま形にしてくれるエンジニアをお探しでした。

 

制作したもの・取り組んだこと

今回制作したのは、HTML / CSS / JavaScript をベースに、WordPressをCMS（コンテンツ管理システム）として組み合わせた採用サイトです。アニメーションにはGSAP（JavaScript製のアニメーションライブラリ）を使用し、スクロール連動のテキストフェードイン・パララックス・グリッチアニメーション・無限スライドなど、デザインデータで指定された表現をすべて忠実に実装しました。

 

 

社員インタビュー・職種紹介・求人情報はWordPressのカスタム投稿機能で管理できる仕組みを構築。担当者がコードに触れることなく情報を更新・追加できるようにしています。

 

アニメーションの実装では、テキストや説明だけではイメージのズレが生じやすいと判断し、先に動くものを作ってクライアントに確認してもらう進め方を取りました。認識合わせを早い段階で行うことで、手戻りを最小限に抑えています。また、開発中に想定外の仕様変更や追加要件が発生した際も、丁寧に対応しながらプロジェクトを完走しました。

 

制作サイトはこちら https://newgrad-join.sunpro36.co.jp

 

制作後の変化

納品後、「想定通りのアニメーションを実装してもらえた」「運用しやすい構成にしてもらえて助かった」とお言葉をいただきました。

 

また、今回のプロジェクトではWebの知識が少ないデザイナーさんとの協業という場面がありました。アニメーションの技術的な実現可否や実装方法についてこちらから積極的にアドバイスすることで、判断に迷う場面をスムーズに解消し、プロジェクトを前に進めることができました。コーディングの実装力だけでなく、Web全般の知識をもとにした提案・サポートも、今回の納品品質につながったと感じています。

 

お問い合わせ・ご相談

ご質問・ご相談は、以下からお気軽にどうぞ。 メール