UIモーション
図鑑。

教員サーチの3つのデザイン案に実装されたアニメーションを解剖。
名前・動き・使いどころ・元コードを、1つの図鑑に。

動きを見にいく ↘✳ 自動再生・ホバー・クリックで体験

—抽出したモーション項目

03比較したバージョン

04主要カテゴリ

FIG. 001 / OPENING SEQUENCELIVE PREVIEW

KYOIN SEARCH探すことから、
はじまる。01 / SCHOOL INDEX

THE OPEN INDEX教員
サーチOPEN THE NEXT PAGE.

perspective: 1100pxrotateY(-178°)

DESIGN EVOLUTION ↗

01基本画面とブック演出

→

02カード型索引と詳細画面

→

03地域・更新情報の拡張

01 / MOTION LIBRARY

動きの標本室↘

サンプルを触って、実装されている動きを確かめてください。

— / — PATTERNS

02 / THE PROCESS

どうやって
見つけたのか。

3つのZIPを展開し、React/TypeScript と CSS の実装にある動きだけを対象に調査しました。

01Keyframe animation

@keyframes と animation から時間軸のある演出を抽出。

02State transition

:hover・:focus-within・transition で起きる微細な反応を抽出。

03JavaScript control

requestAnimationFrame・スクロール・状態切替と動きの関係を確認。

04Cross-version comparison

同じ仕組みは重複掲載せず、V1/V2/V3での登場箇所を各カードに記録。

「動いて見える」ことと「アニメーションしている」ことは別です。

タブの選択色、候補リストの開閉、固定サイドバー、背景のぼかしなどは、状態変化や配置の仕組みであって、必ずしも時間を伴うアニメーションではありません。この図鑑では、こうした挙動を誤ってパララックスやモーフィングとは呼んでいません。また、デモは元の効果を抽出した再現であり、元画面の録画GIFではありません。

03 / REFERENCES

名称と設計の、
参考文献。

01 / GOOGLE MATERIAL DESIGNThe Motion System画面切替パターンと名称の体系 ↗02 / MDN WEB DOCSUsing CSS transitions状態間の補間・継続時間・イージング ↗03 / MDN WEB DOCSScroll-driven animationsスクロール連動と進行度制御 ↗04 / MDN WEB DOCSprefers-reduced-motion動きを減らす設定への対応 ↗05 / MOTIONAnimation examplesコミュニティで使われる名称と事例 ↗

UIモーション図鑑。

動きの標本室↘

一致するモーションがありません

どうやって見つけたのか。

名称と設計の、参考文献。

UIモーション
図鑑。

どうやって
見つけたのか。

名称と設計の、
参考文献。