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

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

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

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

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

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

よくあるのが「スクロールするたび全部フェードイン」パターンです。一見リッチですが、採用サイトでは次のような問題が起きがちです。

• 読みたいテキストが遅れて出てきて、情報を一気に把握しづらい
• モバイルでスクロール量が多いと、ユーザーが途中で離脱しやすい
• 応募ボタンやエントリー導線が、他の要素に埋もれてしまう

「全部少しずつ動いている」状態は、結果として何も強調できていない状態になりやすいのが課題です。

After：応募導線だけにマイクロアニメーションを集中

そこで、ジェイ・ラインの案件では「応募まわりにだけ動きを集中」させるケースが多くあります。具体的には：

• グローバルナビの「エントリー」ボタンに、軽いホバースケールと色変化
• スクロール時に、応募ボタン付近だけスライドインで視線を誘導
• フォーム入力中のエラーや完了ステートを、ミクロなトランジションで明示

他のコンテンツはあえて静的にし、応募・フォーム周辺だけに「生きた動き」を集約。これだけでCVの押しやすさが大きく変わります。

社員紹介：静的一覧からカード型アニメーションへ

社員紹介ページも、アニメーションの入れどころを絞ると使いやすくなります。Beforeは「写真＋名前＋一言コメント」がタイル状に並ぶだけ。情報量はあっても、職種やスキルがパッと入ってきません。

Afterではカード型UIに切り替え、ホバーやタップで以下を自然に立ち上げます。

• 職種・担当領域のラベルがふわっと表示
• 主要スキルアイコンが下から立ち上がる
• 「もっと見る」クリックで詳細モーダルに遷移

静止画の印象はそのままに、「どんな人が働いているか」が一瞬で伝わる構成に変えています。

ワイヤー段階で決めておくべきこと

動きの良し悪しは、ビジュアル制作より前、ワイヤーの段階でほぼ決まります。ジェイ・ラインでは次のようなメモをワイヤーに必ず乗せています。

• 各セクションの「主役要素」と「脇役要素」を明示
• 主役だけにモーションを許可するルールをコメントで共有
• スクロールトリガーか、ホバー／クリックトリガーかを指定

こうして「ここは静か」「ここだけ動く」を構造レベルで決めておくと、デザインや実装フェーズでの迷いと手戻りがかなり減ります。

Figmaでのプロトタイプ共有とコミュニケーション

アニメーションの意図を伝えるには、Figmaのプロトタイプ機能をシンプルに使い分けるのがポイントです。

• 主要な動きだけ、1〜2画面のミニフローで見せる（全部は作り込みすぎない）
• ノードにコメントで「目的」「タイミング」「イージングのイメージ」を記載
• 開発側にはGIFや動画キャプチャも添えて、再現の余地を残しつつ方向性を共有

「この動きでなければダメ」ではなく、「この意図を満たせばOK」というスタンスで共有すると、エンジニアと噛み合いやすくなります。

ジェイ・ラインでのUI/UX×MARUTTO連携フロー

ジェイ・ラインでは、UI/UXデザイナーとMARUTTOチーム（採用サイト制作チーム）がセットでアニメーションを設計しています。フローはシンプルです。

• 要件定義：採用目標と、動きで支援したいKPIをすり合わせ
• 構成・ワイヤー：動きを許可するエリア／禁止エリアをワイヤー上に定義
• デザイン・プロトタイプ：Figmaで主要モーションを簡易再現
• 実装：フロントエンド側で技術的・パフォーマンス観点から最適化
• 計測・改善：公開後のCVや離脱率を見ながら、動きの量と質を微調整

こうした連携により、「デザインの意図」が実装と効果検証まできちんと届く環境で、UI/UXデザイナーがモーションも含めた体験設計に関われます。