![ãã¬ãžã³ã®ã«ããŒç»å](https://assets.st-note.com/production/uploads/images/100277351/f3b68e0c4306b9fb454ed3dfa5c1c3a0.png?width=800)
- éå¶ããŠããã¯ãªãšã€ã¿ãŒ
#ãããã¯ããã¶ã€ã³
![](https://assets.st-note.com/production/uploads/images/95319807/rectangle_large_type_2_57cacc8e84f1e144360284fb571fbb8b.png?width=800)
ðïž Design MaterialsïŒãããã¯ããã¶ã€ããŒãé¢æ¥ã§ããããã質åé(è±èªã¡ã¢ã»æš¡ç¯è§£çä»ã)
ããå€ãã®ååŒãããžã¿ã«ã§è¡ãããããã«ãªã£ãŠããä»æ¥ãå€ãã®ç¥èè±å¯ãªäŒæ¥ã¯ãããåªããããžã¿ã«ã»ãšã¯ã¹ããªãšã³ã¹ã®æ§ç¯ãæ¯æŽããããã«ãããã¯ãã»ãã¶ã€ããŒãæ¡çšããŠããŸãã ããã¯ããããã¯ããã¶ã€ããŒã®éèŠãé«ããå€ãã®éžæè¢ãããããšãæå³ããŸããæ¡çšæ åœè ã«ãšã£ãŠãé·æçãªåŸæ¥å¡ã®æºè¶³åºŠãšå®ççã確ä¿ããããšã¯ããã®ä»äºã«æé©ãªãã¶ã€ããŒãéžã¶ããšããå§ãŸããŸãã ã€ã³ã¿ãã¥ã©ãŒãå°ããå¯èœæ§ã®ããå ·äœçãªè³ªåãç解ããããšã§ãé¢æ¥ã«èšãéã®èªä¿¡ãé«ããããšã
![](https://assets.st-note.com/production/uploads/images/84680865/rectangle_large_type_2_d16dcb4e4f6f1fac5c726f678a54cff5.png?width=800)
ðïž Design MaterialsïŒSplineã䜿çšããŠããã£ãšããéã«3Dã§ãã¶ã€ã³ããæ¹æ³ãåŠã³ãŸããã!
Splineãšã¯ïŒSplineãšã¯ãäž»ã«Webçšã«ç°¡åã«3Dã°ã©ãã£ãã¯ã¹ãäœæããããšãã§ãããœããã§ãã Splineã¯3Dã®çµéšã«é¢ä¿ãªãããããããã¶ã€ããŒã«é©ãã䜿ãããã3Dãã¶ã€ã³ã»ããŒã«ã§ãããã«æ©èœã®3Dã¢ã㪠(Cinema 4DãBlender ãªã©)ãããç°¡åã«ç¿åŸã§ããŸãã Splineã®å©ç¹èšå®ãæ©èœã®è² è·ã«æ©ãŸãããããšããããŸãããäœãããããã©ãŠã¶ããŒã¹ã§ç¡æãªã®ã§ãæåéã誰ã§ããã©ã®ã³ã³ãã¥ãŒã¿ãæã£ãŠããŠã䜿çšã§ããŸãã Spli
![](https://assets.st-note.com/production/uploads/images/78255421/rectangle_large_type_2_5e8369b0ea6260c9b1341778e1aa7a0c.png?width=800)
ïžðïž Design MaterialsïŒ UXãã¶ã€ããŒãªãç¥ã£ãŠãããããã¶ã€ã³ã«é¢ããåºæ¬çãªãã¶ã€ã³ã®åå
ä»åã¯UXãã¶ã€ããŒãªãç¥ã£ãŠãããããã¶ã€ã³ã«é¢ããåºæ¬çãªãã¶ã€ã³ã®ååããŸãšããããšæããŸãã ãããã®ããã€ãã¯UIãã¶ã€ã³ã«ãé¢é£ããŠããŸãããããžã§ã¯ããéå§ããåãŸãã¯åŸã§ãå¿ èŠã«å¿ããŠãããžã§ã¯ããæ¹åã§ããããã«ããã®è³æããã§ãã¯ãªã¹ããšããŠäœ¿çšããŠã¿ãŠãã ããã 1. å®éã®ãŠãŒã¶ãŒã®ããŒãºã«ã€ããŠèãããå®éã®ãŠãŒã¶ãŒã®ããŒãºã¯ãããªããããã«ã€ããŠã©ãæããã§ã¯ãªããéèŠãªåŽé¢ã§ãã äŸãã°ãã¶ã€ã³ãçŽ æŽããããã®ã§ããäž»èŠãªå¯Ÿè±¡è ã«å±ããŠããª
![](https://assets.st-note.com/production/uploads/images/72110774/rectangle_large_type_2_28932518b16a8ad513cbf2177f117265.png?width=800)
ðïž Design MaterialsïŒã¢ã¯ã»ã·ããªãã£ãããã¶ã€ã³ãåŠãŒããã¢ã¯ã»ã·ãã«ãªãã©ãŒã ãäœæããããã®ãã¹ããã©ã¯ãã£ã¹
Webã¢ã¯ã»ã·ããªãã£ãšã¯ãé害è ãªã©å¿èº«ã®æ©èœã«å¶çŽã®ãã人ã§ããããŸããŸãªæ¡ä»¶ã«é¢ãããããŠã§ãã§æäŸãããŠããæ å ±ã«ã¢ã¯ã»ã¹ãå©çšã§ããããšãæå³ããŸãã ããããçŸåšã®ã€ã³ã¿ãŒãããã®å€ãã¯ããŸã é害ãæã€ãŠãŒã¶ãŒã«å¯Ÿå¿ããããã«ãã¶ã€ã³ãããŠããŸããã ããšãã°ãDeque Systemsã®èª¿æ»ã«ãããšãèŠèŠé害ãæã€äººã ã¯Webãµã€ãã®70ïŒ ã«ã¢ã¯ã»ã¹ã§ããŸããã§ããã ã¢ã¯ã»ã¹ã§ããªããã©ãŒã ã¯ãåã«æãããããªãã ãã§ãªããããžãã¹ã®åŠšãã«ãªããŸããéã«ã¢
![](https://assets.st-note.com/production/uploads/images/67021495/rectangle_large_type_2_9276c1bba05057e607c5b80988daafd6.png?width=800)
ðïž Design MaterialsïŒWebã¢ã¯ã»ã·ããªãã£è©äŸ¡ã«é害ã®ãããŠãŒã¶ãŒã察象ãšãããŠãŒã¶ããªãã£ãã¹ããè©äŸ¡ã«é¢ããèæ ®äºé
Webã¢ã¯ã»ã·ããªãã£è©äŸ¡ã¯ãWCAGãªã©ã®ã¢ã¯ã»ã·ããªãã£æšæºãžã®æºæ ã«çŠç¹ãåœãŠãŠããããšããããããŸãã é©åæ§ã¯éèŠã§ãããå®éã®ãŠãŒã¶ãŒãšäžç·ã«è©äŸ¡ããããšã«ã¯å€ãã®å©ç¹ããããŸããããšãã°ããµã€ããŸãã¯ããŒã«ããŠãŒã¶ãŒã«ãšã£ãŠå®éã«ã©ã®ããã«æ©èœããããåŠã³ãã¢ã¯ã»ã·ããªãã£ã®åé¡ãããããç解ããããšãã§ããŸãããŸãé害ã®ãããŠãŒã¶ãŒã幎é ã®ãŠãŒã¶ãŒãšäžç·ã«è©äŸ¡ããããšã§ãé©åæ§è©äŸ¡ã ãã§ã¯çºèŠãããªããŠãŒã¶ããªãã£ã®åé¡ãç¹å®ã§ããŸãã ä»åã¯é害ã®ãããŠ
![](https://assets.st-note.com/production/uploads/images/64755894/rectangle_large_type_2_263d650d7609fe9dea5393210c1eaa93.png?width=800)
ðïž Design MaterialsïŒã¯ãŒã¯ãããŒãã¹ããŒãã¢ãã!䟿å©ãªFigmaã®ãŠãŒãã£ãªãã£ã»ãã©ã°ã€ã³
FigmaãŠãŒãã£ãªãã£ã»ãã©ã°ã€ã³ãšã¯ïŒãã©ã°ã€ã³ïŒPlug inïŒã¯ãæ¬æ¥ã差蟌å£ããšããæå³ã§ãããããã§ã¯Figmaã®æ©èœãæ¡åŒµãããœãããŠã§ã¢ãæå³ããŸãã Figmaã®ã¢ããªã±ãŒã·ã§ã³ã«åå¥ã«è¿œå ããŠããŒãžã§ã³ã¢ãããå¯èœã§ãäžèŠã«ãªãã°ãã¢ããªã±ãŒã·ã§ã³ã«åœ±é¿ãäžããããšãªãåé€ããããšãã§ããŸãã ä»åã¯å埩çãªã¿ã¹ã¯ãå éãããç§ãã¡ã®ã¯ãŒã¯ãããŒã®æ¹åãæå©ãããŠããããŠãŒãã£ãªãã£ã»ãã©ã°ã€ã³ãã玹ä»ãããŠããã ããŸãã Product Plann
![](https://assets.st-note.com/production/uploads/images/64009209/rectangle_large_type_2_44a7b136f3b400aba328e785dccdac7f.png?width=800)
ðïž Design MaterialsïŒãã¶ã€ã³ã·ã¹ãã ã»ãã§ãã¯ãªã¹ãããã¶ã€ã³ã·ã¹ãã ã®èšç»ãæ§ç¯ãããã³æ¡åŒµã«åœ¹ç«ãŠããïŒ
ä»åã¯ãã¶ã€ã³ã·ã¹ãã ã®èšç»ãæ§ç¯ãããã³æ¡åŒµã«åœ¹ç«ã€ãªãŒãã³ãœãŒã¹ã®ãã§ãã¯ãªã¹ããã玹ä»ããŸãã ä»ã®èšèªãšåæ§ã«ããã¶ã€ã³èšèªã¯ããããã¯ããã¶ã€ã³ãžã®ã¢ãããŒããéããŠèŠèŽè ãšã³ãã¥ãã±ãŒã·ã§ã³ããšãããã®ç³»çµ±çãªæ¹æ³ã§ãã ããã¯ãäžè²«ããã«ã¹ã¿ããŒãšã¯ã¹ããªãšã³ã¹ã®åºç€ã§ãã ãã¶ã€ã³èšèª ä»ã®èšèªãšåæ§ã«ããã¶ã€ã³èšèªã¯ããããã¯ããã¶ã€ã³ãžã®ã¢ãããŒããéããŠèŠèŽè ãšã³ãã¥ãã±ãŒã·ã§ã³ããšãããã®ç³»çµ±çãªæ¹æ³ã§ãã ããã¯ãäžè²«ããã«ã¹ã¿ããŒãšã¯ã¹ã
![](https://assets.st-note.com/production/uploads/images/64001480/rectangle_large_type_2_76a4c09ef64b543d9f3fc1a0178a7895.png?width=800)
ðïž Design MaterialsïŒæè¿ããè³ã«ãããCo-Designããšã¯ïŒåµé æ§ãšã³ã©ãã¬ãŒã·ã§ã³ã匷ããåå åãã¶ã€ã³ã«ã€ããŠã
ããªãã¯ãããªçµéšãããããšãããŸãããïŒ ãŠãŒã¶ãŒã®æèŠãåã蟌ãã§ããããã¯ãããµãŒãã¹ããã¶ã€ã³ããã€ãããªã®ã«ãããåžå Žã«å£²ãåºããšãããŸã§å¥œãŸããåå¿ãèŠãããããã§ããªãããã®ãããžã§ã¯ãã倱æã«çµãã£ãŠããŸã£ãããŸãã¯ãŠãŒã¶ãŒã®å£°ãèããŠãã¶ã€ã³ããŠããã€ããã§ããå人çãªäž»èŠ³ãå€ãå ¥ã£ãŠããŸããçµå±ãŠãŒã¶ãŒã«ãšã£ãŠå¥œãŸãããªããããã¯ãããµãŒãã¹ãšãªã£ãŠããŸã£ãã ä»ãŸã§å€ãã®å Žåããããã¯ããããµãŒãã¹ã®é倧ãªæ±ºå®ã«ã¯ãæçµçã«æã圱é¿ãåãããšã³ããŠãŒ
![](https://assets.st-note.com/production/uploads/images/63991397/rectangle_large_type_2_b303dd642819690a12087485f48d35d4.png?width=800)
ðïž Design MaterialsïŒè©±é¡ã®ãŠãŒã¶ãŒèª¿æ»ãã©ãããã©ãŒã ïŒOptimal WorkshopãéèŠãªããšãç解ããæŽå¯ãè¡åã«å€ãããïŒ
ç§ã®äŒç€Ÿã§ã¯ããããã¯ããã¶ã€ããŒãå°çšã«äœ¿çšããŠããslackãã£ã³ãã«ããããæ¥ã æ°ã«ãªã£ãããŒã«ããã¶ã€ã³é¢ä¿ã®ãã¥ãŒã¹ãæ¥åžžçã«å ±æããŠããŸãã ä»åã¯ãUXãã¶ã€ããŒã瀟å ã§è©±é¡ããŠãããŠãŒã¶ãŒèª¿æ»ãã©ãããã©ãŒã ãOptimal Workshopãã玹ä»ããããŸãã Optimal WorkshopOptimal Workshopã¯ã調æ»ç 究ãšåæãè¡ãããã®ãŠãŒã¶ãŒèª¿æ»ããŒã«ãšããŠãç§ãã¡ã®çµç¹ã§äœ¿çšãããŠããŸãã ããã¯ãCXããã³ãããã¯ããã¶ã€ã³ããŒ
![](https://assets.st-note.com/production/uploads/images/61424679/rectangle_large_type_2_93d1c9b2ee32948f2b22d2b564fc2e40.png?width=800)
ðïž Design MaterialsïŒãã®ç¶æ³ã«ã©ã®ããã«å¯Ÿå¿ããã°ããïŒããŸããŸãªç¶æ³ãç解ããŠãé©åãªå¯Ÿå¿ãéžæããããã¯ããã³ã»ãã¬ãŒã ã¯ãŒã¯
ãã¯ããã³ã»ãã¬ãŒã ã¯ãŒã¯ããšã¯ïŒéåžžãç¶æ³ãŸãã¯åé¡é åãç°ãªãã°ãå¿ èŠãªå¯Ÿå¿ãç°ãªããŸãã ã¯ããã³ãã¬ãŒã ã¯ãŒã¯ã¯ãçããå®ãã§ã¯ãªãåé¡ãžã®ã¢ãããŒããåé¡ããããšãã§ãããã¬ãŒã ã¯ãŒã¯ã§ç®ã®åã®ç¶æ³ãç解ãã察åŠããŠããç¶æ³ã®ã¿ã€ãã«é©ãã決å®ãäžãã®ã«åœ¹ç«ã¡ãŸãã ð¡ã¯ããã³ïŒCynefinïŒãã¬ãŒã ã¯ãŒã¯ãšã¯ãIBMã®ãã€ãããã»ã¹ããŒãã³ã1999幎ã«éçºããåé¡è§£æ±ºã®ãã¬ãŒã ã¯ãŒã¯ã§ããã¯ããã³ ã¯ããŠã§ãŒã«ãºèªã§ãçæ¯å°ãšããæå³ã§ãã å æé¢ä¿ãæ確
![](https://assets.st-note.com/production/uploads/images/60737849/rectangle_large_type_2_b3790f72a55c8e24680165ba5443c1e7.png?width=800)
ðïž Design Materials :åé¡ãå¥ã®èŠ³ç¹ããåé¡ã«ã¢ãããŒããããïŒã€ã³ããŒãžã§ã³ãšã¯ïŒ
å¥ã®èŠ³ç¹ããåé¡ã«ã¢ãããŒããããã ã人çãšããžãã¹ã§ã®å€ãã®æåã¯ãäœãé¿ãããããç¥ãããšããçãŸããŸãã ã âãã£ãŒãªãŒã»ãã³ã¬ãŒïŒãŠã©ãŒã¬ã³ã»ããã§ãããäŒé·ãåããæè³ææ ªäŒç€ŸããŒã¯ã·ã£ãŒã»ããµãŠã§ã€ã®å¯äŒé·ïŒ ã€ã³ããŒãžã§ã³ãšã¯ïŒ ã€ã³ããŒãžã§ã³ã¯æ¥æ¬èªã§å転ãæå³ããŸããã€ã³ããŒãžã§ã³ã¯ãåé¡ãå¥ã®è§åºŠããèŠãŠãèµ·ããããééããæªãçµæãåé¿ããããã®ããŒã«ã§ããå¥ã®èŠ³ç¹ããåé¡ã«ã¢ãããŒãããèãæ¹ã§ãããã®ããŒã«ã¯ã·ã³ãã«ã§ãããªãããå©çšå¯èœãªæ
![](https://assets.st-note.com/production/uploads/images/57689374/rectangle_large_type_2_d8021b35c4b59ed3ef4c3b019a11d692.png?width=800)
ðïž Design MaterialsïŒãããã¯ãæåã®éµãæ¡ãã®ã¯ã³ã©ãã¬ãŒã·ã§ã³ãããã«ã¯ããã»ã¹ãæ§é ããã£ãã
ç§ã¯ã¡ã«ãã«ã³ãæ ç¹ã«ãããã¯ããã¶ã€ããŒãšããŠåããŠããŸãã äž»ã«ããžã¿ã«ã»ãããã¯ãã®å¶äœã«æºãã£ãŠããŸããç§ã®åããŠããäŒæ¥ã¯ããžã¿ã«ã»ãããã¯ããã¡ã€ã³ã«å¶äœããŠããŸãã ç§ãã¡ã¯ããæ°å¹Žãã¹ã¿ãŒãã¢ããããã¹ã±ãŒã«ã¢ããäŒæ¥ã«è³ããŸã§ãããŸããŸãªã¯ã©ã€ã¢ã³ããšæ°å€ãã®ãããžã§ã¯ãã«ååããŠããŸãããããããã¹ãŠã®ããŒãããŒã·ããããå°ãåºãã环ç©çãªçµè«ã¯ãã¯ã©ã€ã¢ã³ãã¯åžžã«ãããã¯ãã»ãã¶ã€ããŒãšã³ã©ãã¬ãŒã·ã§ã³ã»ããã»ã¹ã«ãããŠã¯ãªãšã€ãã£ãã»ããŒãããŒãšããŠ
![](https://assets.st-note.com/production/uploads/images/57689421/rectangle_large_type_2_10aabb5483066d106bec7a25d36bd902.png?width=800)
ðïž Design MaterialsïŒåªãããã¶ã€ã³ãçã¿åºããããã©ããã¯æºå段éã§ã»ãŒæ±ºãŸãïŒå¹æçãªãã¶ã€ã³ã»ããªãŒããæžãã«ã¯ïŒ
ããããªããããŒã ãšæ°ãããããžã§ã¯ããéå§ããŠãããªããããã¯ãªãã»ããŒãã£ã³ã°ãéãããããšæããŸããããã¯ãªãã»ããŒãã£ã³ã°ã¯ãããžã§ã¯ããç«ã¡äžããéã«è¡ãããã®åŸã®ãããžã§ã¯ãã®é²è¡ã«åœ±é¿ããéèŠãªããŒãã£ã³ã°ã§ããããã®å Žã§ãã¶ã€ã³ã®æ¹åæ§ãã¹ã±ãžã¥ãŒã«ãçŽ æçã«é¢ããŠè©±ã蟌ãã ã®ã«ããããžã§ã¯ããé²ããŠãããã¡ã«æ¹åæ§ããã¬ãŠäžåºŠæ¿èªãåŸãã¯ãã®ãã¶ã€ã³ãæ ¹æ¬ããã²ã£ããè¿ã£ãŠããŸã£ã⊠ãããªçµéšãäœåºŠããããã¶ã€ããŒãå€ãããããšæããŸãããããªæã®ã¢ãŠã
![](https://assets.st-note.com/production/uploads/images/57689453/rectangle_large_type_2_b0e98b3f4cf6d2afb386b31351d0c98f.png?width=800)
ðïž Design MaterialsïŒ UXãã¶ã€ããŒã«ã·ãããã§ã³ãžããã«ã¯ïŒç¥èãæè¡ã ãã§ã¯ãªããã³ãã¥ãã±ãŒã·ã§ã³åãå¿ èŠïŒãã®åœ¹å²ãšä»äºå 容ãæ±ããããã¹ãã«ã
ä»æ¥ããžãã¹ã«ããããã¶ã€ã³ã®éèŠæ§ãé«ãŸãç¶ããŠããŸãããããŠUXãã¶ã€ããŒããããã¯ããã¶ã€ããŒããµãŒãã¹ã»ãã¶ã€ããŒãªã©ãšãã£ãããŸããŸãªãã¶ã€ããŒã®åœ¹å²ãšè·çš®åãçãŸãç¶ããŠããŸãã Looks goodããWorks great! ãž ç§ããWEBãã¶ã€ããŒãããUIãã¶ã€ããŒãUXUIãã¶ã€ããŒããããã¯ããã¶ã€ããŒãšããæµãã§ãUXã«é¢ãã£ãŠããŸãããDXã®æµããå éããŠããã®ã§ãã®éèŠã®å€§ããããå€ãã®ãã¶ã€ããŒãUXãã¶ã€ããŒã«ãªãã¹ãã¹ãã«ã¢ãããé²ããŠ