CSS Nite in Kobe, vol.45ãAdobe XDã®èªåã¢ãã¡ãŒã·ã§ã³ã§äœããããã¿ã€ããš çŸå Žã§æŽ»çšã§ãããã€ã¯ãã€ã³ã¿ã©ã¯ã·ã§ã³ã®äœãæ¹ãã«åå ããŠããŸãã

å æ¥éå¬ãããCSS Nite in Kobe, vol.45ãAdobe XDã®èªåã¢ãã¡ãŒã·ã§ã³ã§äœããããã¿ã€ããš çŸå Žã§æŽ»çšã§ãããã€ã¯ãã€ã³ã¿ã©ã¯ã·ã§ã³ã®äœãæ¹ãã«åå ããŠããŸããã
ä»åã®ç»å£è
ä»åã®ç»å£è ã¯ããã¢ã«ãªã®æŸäžçµµæ¢šãããšãæ ªåŒäŒç€ŸICSã®æ± ç°æ³°å»¶ããã§ãã
æŸäžããã¯æè¿Adobe XDã®ãŠãŒã¶ãŒã°ã«ãŒããäž»å¬ããŠããããCSS Nite in Osakaã®äž»å¬ããããŠããæ¹ã§ãã
æ± ç°ããã¯Webçéã§ã¯ããªãæåãªICS MEDIAãšããã¡ãã£ã¢ãéå¶ããŠãããæ ªåŒäŒç€ŸICSã®ä»£è¡šã§ãã
ä»åã¯æŸäžããã«Adobe XDã®èªåã¢ãã¡ãŒã·ã§ã³æ©èœã䜿ã£ããããã¿ã€ãã®äœææ¹æ³ãæ± ç°ããã«ã¯Adobe XDã§äœæãããããã¿ã€ããã©ã®ããã«ããŠå®è£ ããã®ãããã¢ããŒã¹ã§ã»ãã·ã§ã³ããŠããããŸããã
å šäœã«å¯ŸããŠã®ææ³
Adobe XDã¯æ¯æã©ãã©ãã¢ããããŒãããŠããŠãããŸå¢ããåãã®ã§ãé¢é£ããã»ãããŒãããèŠãããã®ã§ãããæ¯æã¢ããããŒããç¹°ãè¿ãããŠãããæ ã«ã䜿ãæ¹ãšææ°æ©èœã®çŽ¹ä»ã§çµãã£ãŠããŸãããšãã»ãšãã©ã§ãã
ããèãããšãä»åã®ã»ãããŒã§ã¯ããããã¿ã€ãã³ã°ã®äœæããšããããåºã«ããå®è£ ãã®ãã©ã³ã¹ãéåžžã«è¯ãã£ãããã«æããŸãã
ããããããã¿ã€ãã³ã°ãäœæããŠããçŸæç¹ã§ã¯ãã®åŸã«ã¯ãå®è£
ãå·¥çšãããããã§ãã
ãã¡ããæ©ã段éã§ã¯ã©ã€ã¢ã³ããã³ãŒããŒïŒå®è£
åŽïŒãšå
±éèªèãåããã®ããAdobe XDã®é·æãªã®ã§ãæ©ã段éã§å¶äœç©ãå
±æããŠããã°åé¡ã¯ãªãããã§ãã
ãã ããAdobe XDã§äœã£ããããã¿ã€ãããã©ã®ããã«ããŠå®è£ ãããã®ãïŒããšããã®ã¯ãä»®ã«ãã¶ã€ããŒã§å®è£ ãããªãã£ããšããŠããç¥ã£ãŠããŠæã¯ãããŸããã
ããããæå³ã§ãå¥ã ã®èŠç¹ããã®ã話ãèããã®ã¯ãããé¢çœãã£ãã§ãã
æŸäžããã®ã»ãã·ã§ã³
- Adobe XDã®ãããã¿ã€ãã§ã¯ããªã¬ãŒïŒãã£ããïŒãšã¢ã¯ã·ã§ã³ïŒäœãèµ·ãããïŒã®çµã¿åãããéèŠ
- ã€ãŒãžã³ã°ã¯é©åã«äœ¿ãåãã
- ãã¹ãããããšãã¯ã€ã³ãã¢ãããã¯äŒŒããã®ã§å¯Ÿå¿ïŒEasing Functions Cheat SheetïŒ
- ãããŠã³ã¹ãã¯ãå®ç§ã«å®è£ ããããšãããšæéãããã£ãŠããŸã
ãããã¿ã€ãã§äœ¿ããå°æ
ã¹ã¯ããŒã«äœçœ®ã®ä¿æ
ãããã¿ã€ãã¢ãŒãã§ãªããžã§ã¯ããéžæããŠãã¹ã¯ããŒã«æã«äœçœ®ãåºå®ãã«ãã§ãã¯ãå ¥ãããšãã¹ã¯ããŒã«ããŠã远尟ããããããŒããããŒãžäžéšãžæ»ããã¿ã³ãäœããŸãã
ãªãŒããŒã¬ã€æ©èœ
ãããã¿ã€ãã¢ãŒãã§ãªããžã§ã¯ããéžæããŠãã¢ã¯ã·ã§ã³ãããªãŒããŒã¬ã€ãã«èšå®ãããšã移åå ã«èšå®ããã¢ãŒãããŒããçŸåšã®ã¢ãŒãããŒãã®äžã«ä¹ã£ãã圢ã§è¡šç€ºãããããã«ãªããŸãã
ãã³ããŒã¬ãŒã¡ãã¥ãŒãéãããšãã®è¡šç€ºããã¢ãŒãã«ã®è¡šç€ºãªã©ã«äœ¿ããŸããã
ãªããŒãã°ãªããã䜿ã£ããã¹ã¯
Adobe XDã«ã¯2ã€ãã¹ã¯ã®æ¹æ³ãããã®ã§ãããæŽã«ãã1ã€ããªããŒãã°ãªããã䜿ã£ããã¹ã¯ãã§ããŸãã
ãªããŒãã°ãªããã¯æ¬æ¥ãªããžã§ã¯ããè€æ°äžŠã¹ãç®çã§äœ¿ãã®ã§ããããã©ãã°ããæ¹åãéã«ãããšãç»åãé ãããšãã§ããŸãã
ç°¡åã«ç»åãé ããŸãããèªåã¢ãã¡ãŒã·ã§ã³ã§ã¡ãããšåããŠãããã®ã§ããªã䜿ãããã§ãã
æ± ç°ããã®ã»ãã·ã§ã³
- äžç芳ã®æ§ç¯ãããããã®ã¢ãã¡ãŒã·ã§ã³ãšãUIã®ç解ãä¿ãã¢ãã¡ãŒã·ã§ã³ããã
- XDã¯é 延ãèŠæã ã£ããããã®ã§ãããŒã¿ããã®ãŸãŸå®è£ ããã®ã§ã¯ãªããæ¬æ¥ããããã£ãããšããã¶ã€ããŒã«ç¢ºèªïŒãã¢ãªã³ã°ïŒããŠå®è£ ããå¿ èŠããã
- ä»åŸã¯æ¥ç¶åã®ã¢ãã¡ãŒã·ã§ã³ãå¢ããŠãããã
è·æ¥ããšã®ããã¹ãããš
ã¢ãã¡ãŒã·ã§ã³ã»ãã€ã¯ãã€ã³ã¿ã©ã¯ã·ã§ã³ãå®è£ ããŠããã«åœãã£ãŠãè·æ¥ããšã«ãããªããŠã¯ãããªãããšã®çŽ¹ä»ããããŸããã
è·æ¥ | ããã¹ãããš |
---|---|
ãã£ã¬ã¯ã¿ãŒ |
|
ãã¶ã€ã㌠|
|
ãšã³ãžã㢠|
|
ãŸãããã£ã¬ã¯ã¿ãŒã»ãã¶ã€ããŒããã€ã¯ãã€ã³ã¿ã©ã¯ã·ã§ã³ãå®è£ ããããŠãããšã³ãžãã¢ããããããªããšå®è£ ã¯é£ãããšä»°ã£ãŠããŸããã
ãã€ã¯ãã€ã³ã¿ã©ã¯ã·ã§ã³ã®å¿ èŠæ§ãå ±æããŠããäºãã®äœæ¥ãžã®ç解ãå¿ èŠã«ãªã£ãŠããŸãã
Affter Effectsã§ã®å®è£
After Effectsã§ã¢ãã¡ãŒã·ã§ã³ãå®è£ ããŠããããWebãµã€ãã§äœ¿ãããå Žåã¯ãBodymovinãšãããã©ã°ã€ã³ã§æžãåºããŠãLottieãšããåçãšã³ãžã³ã䜿ããšWebãµã€ãäžã§ãã¢ãã¡ãŒã·ã§ã³ãåçã§ããããã§ãã
åãAdobe補åã ãšãAdobe Animateãšãããœãããããããã¡ãã¯ãã¯ã¿ãŒã«åããŠããã®ãšãAnimateã§äœã£ãã¢ãã¡ãŒã·ã§ã³ãPixi.jsã§WebGLã§å®è£ ãããšãããã©ãŒãã³ã¹ãé«ããªãããã§ãã
CSS Animationã§ã®å®è£
- SVGãè€éãªåãã§ãªããã°CSS Animation + Transitionã§å®è£ å¯èœ
- è€æ°ã®èŠçŽ ãéããããã¿ã€ãã³ã°ããºã©ããšããã£ãœããªã
CSS Animationã«é¢ããŠã¯ãICS MEDIAããã®èšäºã§ãã£ã€ãã³ãŒããæžãããŠãããã®ããããŸãã®ã§ããã¡ããåèã«ããŠã¿ãŠäžããã
ãŸãšã
æè¿ã¯ããªããªãããªã¢ãã¡ãŒã·ã§ã³ã®ãµã€ããå¢ããŸããããNuxt.jsãªããã§é·ç§»ã¢ãã¡ãŒã·ã§ã³ãã€ããŠãããµã€ããèŠãããããã«ãªã£ãŠããŸããã
ãã¡ããããã æµè¡ã£ãŠããããå®è£ ããã®ã§ã¯ãªãããªããããå¿ èŠãªã®ãèããå¿ èŠããããŸããããããèžãŸããŠã¯ã©ã€ã¢ã³ãã«ææ¡ã§ããããã«ãªãããã§ããã