ãã³ð€
æè¿ã®èšäº
ãã¶ã€ããŒãFigmaãå§ãããæã«èªãèšäº
ãã®èšäºã¯ãFigma Tips Advent Calendar 2022ãã®22æ¥ç®ã®èšäºã§ãïŒé å»ããŠããŸãïŒ ä»åã¯ãAdobe XDãIllustratorãPhotoshopïŒãã®ä»ããŒã«ïŒã䜿ã£ãŠWebãã¶ã€ã³ãããŠãããã©ãããããFigmaã觊ã£ãŠãããããªïŒã§ããäœããå§ããã°è¯ãã®ãããããªãïŒãšããæ¹ã«åããèšäºã§ã Figmaã®å§ãæ¹ãšãã芳ç¹ã®èšäºã¯ãããããŸãããããä»ã®ããŒã«ãããçšåºŠäœ¿ãããªããŠãã人ã«ãšã£ãŠã¯èª¬æã现ããããŠéã«èªã¿ã«ãã
ãFigmaã䜿ãããªã! ãã¶ã€ããŒå¿ é ã®ãããããã©ã°ã€ã³15éžãã®è£è¶³èšäº
å æ¥ãICS MEDIAã«ãŠãFigmaã䜿ãããªã! ãã¶ã€ããŒå¿ é ã®ãããããã©ã°ã€ã³15éžããšããèšäºãå ¬éããŸããã ãã®èšäºã®äžã§çŽ¹ä»ããããªãã£ããã©ã°ã€ã³ãã溢ããŠããŸã£ãæ å ±ãè£è¶³ããçºã®èšäºã§ããæ¯éãäžèšã®èšäºãèªãã§ããèªã¿é²ããŠã¿ãŠãã ããã Figmaãã©ã°ã€ã³ã®ã€ã³ã¹ããŒã«ã«ã€ã㊠Figmaãã©ã°ã€ã³ã¯ã€ã³ã¹ããŒã«ãäžèŠã§ãããŒã«ã¡ãã¥ãŒå ã®ãªãœãŒã¹ããã«ããæ€çŽ¢ããŠäœ¿ãæ¹åŒã«ãªã£ãŠããŸãã ãã®ãªãœãŒã¹ããã«ã¯2022幎6æã«å®è£ ãããæ¯
æ¬åœã«æ²ããå ±å
æ¬åœã«æ²ããå ±åãããã®ã§ãå¿ã«äœè£ãããæã«èªãã§ãã ãã æè¿ãSNSã§ã®æŽ»åãè¡ããŠããããåã®ååšãå¿ããããŠããé ããšæããŸã ãã®çç±ãå ±åãšãã圢ã§å ±æããŸã èªåã®äžã§å ±åãè¡ããã»ã©æãåããã€ããŠç¡ãã£ãã®ã§ãéããã人ã«ãã話ããŠããªãã£ãå 容ã§ã ãããŸã§èªãã§ãããæ¹ã¯å¿ã«äœè£ãããããšæããŸãã®ã§ãæ¬é¡ã«å ¥ããŸã ååçŽå ¥ã«èšããšãå®å®¶ã®ç«ãšèªå® ã®ç«ãæ¯èŠªã亡ããªããŸãã â»åçãªã©ã¯ç¡ãã®ã§ãèŠæãªæ¹ãå®å¿ããŠèªã¿é²ããŠãã ãã å®å®¶ã®
Adobe XD 2021幎6æã®æ°æ©èœãŸãšã
Adobe XDã®æ°æ©èœã2åã§åããåç»ãäœæããŸããã®ã§ããŸãã¯ãã¡ããã芧ãã ããã æ¬èšäºã¯ããã¡ãã®åç»ã§è§£èª¬ãåããªãã£ãéšåãæ·±æãããå 容ãšãªããŸããæ¯éãåç»ãšåãããŠæåŸãŸã§èªãã§ã¿ãŠãã ããïŒ ãã¹ã®ã¢ãŠãã©ã€ã³ãã¹ã®ã¢ãŠãã©ã€ã³åããä»åã®ã¢ããããŒãã§ã§ããããã«ãªããŸããïŒ ãã³ããŒã«ã§é©åœã«æžããç·ãã¢ãŠãã©ã€ã³åããããšã§ ã°ã©ããŒã·ã§ã³ãçšããå¡ãè¡šçŸãªã©ãå¯èœã«ãªããŸã ãã¡ããããã¹ãç·šéããããšãã§ããŸã ä»ãŸã§ãã¢ãŠãã©ã€ã³
ãã¬ãžã³
èšäº
Adobe XD 2021幎5æã®æ°æ©èœãŸãšã
Adobe XDã®æ°æ©èœã2åã§åããåç»ãäœæããŸããã®ã§ããŸãã¯ãã¡ããã芧ãã ããã æ¬èšäºã¯ããã¡ãã®åç»ã§è§£èª¬ãåããªãã£ãéšåãæ·±æãããå 容ãšãªããŸããæ¯éãåç»ãšåãããŠæåŸãŸã§èªãã§ã¿ãŠãã ããïŒ å ±åç·šéã®ã©ã€ãã«ãŒãœã« ãã¡ãã®æ©èœãä»åã®ç®çæ©èœãšãªãããã§ããïŒå ¬åŒãµã€ãã§ãªã·ã£ã¬ãªæãã®ç»åãä»ããŠããŸãïŒ ä»ãŸã§ã¯ãå ±åç·šéãè¡ãéã«ã©ã®ãŠãŒã¶ãŒãã©ããæäœããŠãããã¯ããªããžã§ã¯ããéžæãããŸã§åãããªããšããä»æ§ã«ãªã£ãŠããŸããã ä»
ã2020幎çãAdobe XDã®ã¢ããããŒããåç»ã§æ¯ãè¿ã
ãã®èšäºã¯Adobe XD ã¢ããã³ãã«ã¬ã³ã㌠2020ã®1æ¥ç®ã®èšäºã§ãã ïŒå€§å¹ ã«æçš¿ãé ããŠããŸãç³ãèš³ãããŸããïŒïŒ 2020幎ã¯äžççã«ã倧ããªå€åããããç¹ã«Adobe XDãæ±ããããªæ¥çš®ã§ã¯ããªã¢ãŒãã¯ãŒã¯ãäžè¬åãããªã©çããã®ç掻ãžã®åœ±é¿ããã£ãã®ã§ã¯ãªãã§ããããïŒ ä»åã®èšäºã§ã¯ãåãïŒã»ãŒïŒæ¯æå¶äœããŠãããAdobe XDææ°æ©èœçŽ¹ä»åç»ãã芳ãªãããä»å¹ŽïŒå¹Žéã®Adobe XDã®å€åãæ¯ãè¿ããŸãã ä»å¹Ž1幎éAdobe XDã䜿ã£ãŠããX
Adobe XDã§äœãç¡éã«ãŒãã¢ãã¡ãŒã·ã§ã³ããã¹ã¿ãŒããã
ããã«ã¡ã¯ïŒãã³ã§ãïŒ Adobe XDã«ã¯èªåã¢ãã¡ãŒã·ã§ã³ãšããããæ軜ã«ã¢ãã¡ãŒã·ã§ã³ãäœããæ©èœããããŸãã ä»åã¯ãèªåã¢ãã¡ãŒã·ã§ã³ã§äœããç¡éã«ãŒãã¢ãã¡ãŒã·ã§ã³ã®äœãæ¹ã解説ããŠãããŸãã ç¡éã«ãŒãã¢ãã¡ãŒã·ã§ã³ãšã¯ å æ¥ã以äžã®ãããªãã€ãŒããããŸããã 波圢ãç¡éã«ãŒãããã¢ãã¡ãŒã·ã§ã³ã®äœãæ¹ã§ãããã ãããªãé§ã足ã§ã©ã®ãããªåçã§ç¡éã«ãŒããå®çŸããŠãããããããã«ããã£ãããšæããŸãã ä»åã¯èªåã¢ãã¡ãŒã·ã§ã³ã®äœ¿ãæ¹ãç¡éã«ãŒãã®åçã®è§£
Â¥200XDUFes2020ãä»æ¥ãã䜿ããAdobe XD Tipséãã®ã¢ãã¿ãŒãã©ããŒ
å æ¥ãç»å£ãããŠé ããXDUFes2020ã®çºè¡šå 容ã®ã¢ãã¿ãŒãã©ããŒèšäºãšãªããŸãïŒ ã©ããªçºè¡šããããã¯ä»¥äžã®èšäºã«çºããŸããã®ã§ããã¡ããå ã«èªãã§ã¿ãŠãã ããïŒ ãŸããç»å£ã¯YouTubeé ä¿¡ãããŠãããã¢ãŒã«ã€ããå ¬éäºå®ã§ãã®ã§ããã£ã³ãã«ç»é²ããŠãåŸ ã¡ãã ããïŒ è³ªåãžã®åçåã®ç»å£äžã«é ãã質åãžåçããŸãïŒ XDãæ¥åã§äœ¿ãã«ãããããããã£ã¡ã䟿å©ãããïŒããšæã£ããã©ã°ã€ã³ãããã°æããŠãããããã§ãïŒ ã¹ã©ã€ãäžã«ãã©ã°ã€ã³ã10å玹ä»ããã®ã§
XDUFes2020ãä»æ¥ãã䜿ããAdobe XD Tipséã
ä»åã®èšäºã¯å æ¥ã®XDUFes2020ã§ç»å£ãããŠé ããå 容ãæåèµ·ãããããã®ã«ãªããŸãã ãªã³ã©ã€ã³ã®å匷äŒã ã£ãã®ã§ãã¢ãŒã«ã€ããå ¬éäºå®ã§ããå ¬éãã次第æŽæ°ããŸãã æ¯éãYouTubeã®ãã£ã³ãã«ãç»é²ããŠãåŸ ã¡ãã ããã æ©éãçºè¡šã®å 容ã«å ¥ããŸãïŒ ãã®1 Webãã¶ã€ã³ã ããããªãã¹ã©ã€ãäœæã«ã䜿ãã! Adobe XDãšããã°ãWebãã¶ã€ã³ãã¢ããªãã¶ã€ã³ãªã©ã®ã€ã¡ãŒãžã匷ãããšæããŸãã ããããå®ã¯ã¹ã©ã€ãäœæã«ãåããŠããŸãïŒä»åãå¶äœã
Adobe XDã®æ å ±ããã£ããã¢ããããURLã®ãŸãšã
åãAdobe XDã®æ å ±ããã£ããã¢ããããæã«èŠãŠããURLããŸãšããŸãïŒ æ°ãå€ãã®ã§ãããã¯ããŒã¯æ¿ãã®noteèšäºã§ãã Twitter æ¥æ¬èªããŒãžææ°æ©èœäžèŠ§ å ¬åŒããã°ïŒé£èŒ Adobe XD ã¢ããããŒãïŒ https://blogs.adobe.com/japan/serialization/adobe-xd-update/ Adobe XD ãŠãŒã¶ãŒã¬ã€ãã®æ°æ©èœã®é Adobe XD TrailïŒåç»ã§åŠã¶ç·ååŠç¿ããã°ã©ã ïŒ è±èªããŒãžn
ç»åããã¬ã€ã«é 眮ã§ããobject-fitãåãïŒ
åãæžããHTML/CSSã®ã³ãŒããçããã«èŠãŠããã£ãŠãæ¹åã§ããç®æãèŠã€ããããã¬ããžã®å ±æãããããã®ãã¶ã€ã³ã©ãããŒã¯ã¢ããããïŒãã·ãªãŒãºã®ç¬¬äºåŒŸã§ãïŒ ãã®ãã¶ã€ã³ã©ãããŒã¯ã¢ããããïŒæ©éã§ããããã®ãã¶ã€ã³ã©ãããŒã¯ã¢ããããŸããïŒ åçã䞊ã¶ã®ã£ã©ãªãŒããŒãžã§ãããç»åã®çžŠæšªæ¯ããã©ãã©ã§ããã ãã©ãã©ã®ç»åããæ£æ¹åœ¢ã®äžã«è¯ãæãã«çŽãŸã£ãŠãããã¶ã€ã³ã§ãã åã®å Žåãã®ããã«ããŒã¯ã¢ããããŸãã object-fitã䜿ã£ãŠç»åã®ãµã€ãºã調æŽ
æç2è¡ïŒCSSã§çžŠæšªäžå€®æããããææ°ã®æ¹æ³
åãæžããHTML/CSSã®ã³ãŒããçããã«èŠãŠããã£ãŠãæ¹åã§ããç®æãèŠã€ããããã¬ããžã®å ±æãããããã®ãã¶ã€ã³ã©ãããŒã¯ã¢ããããïŒãã·ãªãŒãºã®ç¬¬å匟ã§ãïŒ ãã®ãã¶ã€ã³ã©ãããŒã¯ã¢ããããïŒæ©éã§ããããã®ãã¶ã€ã³ã©ãããŒã¯ã¢ããããŸããïŒ ç»é¢ãã£ã±ãã«ç»åãé 眮ãããäžå¿ã«ããã¹ããé 眮ãããŠãããããããããŒããŒããããŒããšåŒã°ãããããªãã¶ã€ã³ã§ããã ããã§ã®ãã€ã³ãã¯ããã¹ãã®çžŠæšªäžå€®æãã®æ¹æ³ã§ãã åã®å Žåãã®ããã«ããŒã¯ã¢ããããŸãã dis
ç«ã®ãªã¹ã¹ã¡ã®ãã€ã¬çšåãŸãšã
ç«é£Œãã®çãããããã«ã¡ã¯ã ç«å¥œãã®ãã³ã§ãã ãã¡ã«ã¯ã«ã€ãšããååã®å¯æãç«ãããŸãã äžçäžå¯æãã§ããã å®å®¶ã«ãããµã¿ããŸããšããååã®å¯æãç«ãããŸãã äžçäžå¯æãã§ããã ãããª3å¹ã®äžçäžå¯æãç«ã®é£Œè²çµéšãããåããªã¹ã¹ã¡ãããç«ã¡ããã®çºã®ãã€ã¬çšåããŸãšããŸãïŒ ãã€ã¬æ¬äœã®ãªã¹ã¹ã¡ãã€ã¬æ¬äœã¯ãã®ååããªã¹ã¹ã¡ããŸãïŒ ãããããã¡ã®åã¯ä»ã®ãã€ã¬ã§ååãªãã§ããã©âŠããšæã£ãŠããæ¹ãããããšæããŸãã ããªãã®å®¶ã®ç«ã¡ããã¯ä»¥äžã®ã
Google ãããªã¢ã«ãã¶ã€ã³ã«åŠã¶ããã¹ããã£ãŒã«ãã®å®è£ æ¹æ³
åãæžããHTML/CSSã®ã³ãŒããçããã«èŠãŠããã£ãŠãæ¹ååºæ¥ãç®æãèŠã€ããããã¬ããžã®å ±æãããããã®ãã¶ã€ã³ã©ãããŒã¯ã¢ããããïŒãã·ãªãŒãºã®ç¬¬äžåŒŸã§ãïŒ ãã®ãã¶ã€ã³ã©ãããŒã¯ã¢ããããïŒ æ©éã§ããããã®ãã¶ã€ã³ã©ããã£ãŠããŒã¯ã¢ããããŸããïŒ ãã®ãã¶ã€ã³ã«èŠèŠãã®ããæ¹ãããããšæããŸãã ããã§ããGoogle ãããªã¢ã«ãã¶ã€ã³ã®ããã¹ããã£ãŒã«ãã§ãã ä»åã¯ç¬¬äžåŒŸã第äºåŒŸãšã¯è¶£åãå€ããŠãæ¢ã«å®è£ ãããŠãããã®ãèªåãªãã®æ¹æ³ã§å®è£ ãçŽããŠã¿ãŸ
æçš¿ã«ãŒãã®UXãè¯ãããããã®å·¥å€«
åãæžããHTML/CSSã®ã³ãŒããçããã«èŠãŠããã£ãŠãæ¹åã§ããç®æãèŠã€ããããã¬ããžã®å ±æãããããã®ãã¶ã€ã³ã©ãããŒã¯ã¢ããããïŒãã·ãªãŒãºã®ç¬¬äºåŒŸã§ãïŒ ãã®ãã¶ã€ã³ã©ãããŒã¯ã¢ããããïŒ æ©éã§ããããã®ãã¶ã€ã³ã©ããã£ãŠããŒã¯ã¢ããããŸããïŒ ä»æ§ãšããŠã¯ãCSSãããHTMLãã©ãã«ãã¯ãªãã¯ãããšã«ããŽãªãŒããŒãžã«é£ã³ãç»åãã¿ã€ãã«ãã¯ãªãã¯ãããšè©³çŽ°ç»é¢ã«é£ã¶ãšããããããæçš¿ã«ãŒãã§ãïŒ åã®å Žåãã®ããã«ããŒã¯ã¢ããããŸãã æ£ããæç« æ§æã
2幎éã»ãŒæ¯æå¶äœãç¶ããåã®è§£èª¬åç»ã®äœãæ¹
ã¯ãããŸããŠãåã¯AdobeXDãšãããã¶ã€ã³ããŒã«ã®æ°æ©èœçŽ¹ä»åç»ãã»ãŒæ¯æäœã£ãŠãããã³ãšããè ã§ãã ã€ã©ã¬ã®è§£èª¬åç»ãå¶äœããŠããã€ã©ã¬è·äºº ã³ããããå§ããæè¿ã§ã¯è²ããªæ¹ãããŒã«ã®äœ¿ãæ¹ãTipsã®è§£èª¬åç»ãTwitterãYouTubeã«ã¢ããããŠããã®ãããèŠãããŸãã åã解説åç»ãäœãã¯ãªãšã€ã¿ãŒã®äžäººãšããŠã解説åç»ãäœãäžã§ã®ãã¬ããžãã·ã§ã¢ããããšæããŸãã ä»åã¯XDãã€ã©ã¬ã®ããã«PCäžã§åãããŒã«ã®è§£èª¬åç»ãæ³å®ããŠã話ããŸãããŸããç¹å®ã®