WordPress×Lottieで実現！リハビリサービス企業のコーポレート・採用サイト高品質リニューアル
2025.1
WordPress／ACF／カスタム投稿／jQuery／Lottie
【概要】コーポレート ＋ 採用サイト リニューアル
【目的】強みを前面に出したブランディング刷新
【機能】Lottieアニメ・モーダル・パララックス・インタラクティブグラフ
【担当作業】WordPress構築・フロントエンド・スクロールアニメ実装
【制作期間】4ヶ月
成果とクライアントの声
- リリース直後の評価: デザインプロダクションより「細部まで再現度が高い」と好評
- クライアントコメント: 「細やかなご対応とクオリティの高い実装で無事リリースできました」
はじめに
いかにも「企業サイト」だった旧サイトを刷新し、差別化されたブランドイメージを確立することが本案件のミッション。
デザインプロダクションから受け取った“凝ったビジュアル”をピクセル単位で忠実に再現しつつ、動きとインタラクションで魅力を引き出しました。
1. 制作前の課題
- 高いデザイン再現性が必須 — ブランド刷新の鍵は「細部の表現力」
- 採用情報とコーポレート情報を両立し、更新しやすい構造が必要
2. 施策 ― デザイン再現 × インタラクションで魅せる
| 施策 | 具体的な実装 |
|---|---|
| 高いデザイン性を忠実に再現 | XD ファイルをピクセルパーフェクトでコーディング。グリッド・余白・フォントサイズまでデザイン意図を厳密にトレース |
| 繊細なスクロールアニメーション | Lottie アニメとネイティブ JS でロゴ線画アニメを制御し、複数レイヤーのパララックス背景で奥行きを演出 |
| モーダルUIをオリジナル実装 | jQuery で軽量モーダルを実装し、動画やフォームを画面遷移なしで閲覧可能に |
| カスタム投稿 × ACF で運用UXを最適化 | 「お知らせ」「事例紹介」「採用情報」をカスタム投稿に分離。入力欄は ACF で必要最小限にし、迷わず更新できる管理画面を構築 |
3. 成果
- リリース品質: デザインプロダクションから「細部まで期待通りに再現」と高評価
- 更新性: 担当者が初回トレーニング後すぐにニュース投稿を完了
- ブランドイメージ: 社内外から「印象が一新された」とポジティブなフィードバック
※公開直後のためアクセス数などの定量データは計測中
4. 担当範囲 ― ワンストップで品質担保
| 項目 | 担当 |
|---|---|
| WordPress構築・カスタム投稿設計 | 山キノコロリ Web事業部 |
| フロントエンド／スクロールアニメ | 山キノコロリ Web事業部 |
| モーダル・インタラクティブグラフ | 同上 |
まとめ — デザイン再現と操作体験でブランドを強化
凝ったビジュアルをピクセル単位で再現し、Lottie やパララックスで動的なブランド体験を付加。
さらにカスタム投稿 × ACFで運用性を高めたことで、リニューアル後もコンテンツが増え続ける体制を構築できました。
ご相談ください
高いデザイン再現性が求められる案件や、アニメーション実装で差別化したいサイトなど、ぜひお気軽にご相談ください。
▶ お問い合わせフォーム