Vision Match Osaka
UI/UXデザイナーが教える“動き”の作り方|採用サイトのアニメーション改善ビフォーアフター
トレンドアニメーション

UI/UXデザイナーが教える“動き”の作り方|採用サイトのアニメーション改善ビフォーアフター

2026.07.31
ジェイ・ライン株式会社

効果的な「動き」を決める3つの基準

アニメーションを足す前に、「そもそも何のための動きか?」をはっきりさせます。ジェイ・ラインでは主に次の3つを基準にしています。

  • 目的:理解促進/視線誘導/行動喚起のどれに効かせるのか
  • 頻度:1ページ内で「目立たせたいポイント」は3カ所程度まで
  • 負荷:初回ロードの重さ、モーション酔いリスクを必ずチェック

この3つに照らして「理由が言えない動き」は削るのが前提。そのうえで、採用サイトなら「応募」「エントリー導線」に優先的にアニメーションを割り振る、という考え方です。

Before:フェードインだらけの採用サイト

よくあるのが「スクロールするたび全部フェードイン」パターンです。...

掲載企業

ジェイ・ライン株式会社

ジェイ・ライン株式会社

WEB制作/カンパニーサイト採用サイトECサイトWEBプロモーションWEB運用管理

従業員数

125名 (契約社員含む)名

設立

1993年12月年

【HRソリューション事業】 全国主要求人メディア代理業 採用オウンドメディア作成サービス『Saiyo.crew』 【WEBマーケティング事業】 WEB制作/カンパニーサイト、採用サイト、ECサイト WEBプロモーション WEB運用管理 【WEBコンテンツ事業部】 ネイルWEB SHOP『グルービーネイル』 イスラム市場開拓支援『JAPANeid(ジャパニード)』 【地域プロモーション】 地域密着型ブログネットワーク『Areaers(エリアーズ)』 大阪ブログポータルサイト 『オオサカジン』 京都ブログポータルサイト『京つう』 東京多摩ブログポータルサイト『たまりば』 【海外ビジネス支援】 セミナー アテンド マーケティング・アウトソーシング コンサルティング 【広告】 各種ネット広告運用・SNS運用 各種新聞、雑誌広告