Upgrade to PRO for Only $50/YearâLimited-Time Offer! ð¥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
webdesign-workflow.key.pdf
Search
Atsushi Sugiyama
August 01, 2016
0
1.1k
 webdesign-workflow.key.pdf
Atsushi Sugiyama
August 01, 2016
Tweet
Share
Featured
See All Featured
Making Projects Easy
brettharned
116
5.9k
Teambox: Starting and Learning
jrom
133
8.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
150
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
Building an army of robots
kneath
302
43k
Embracing the Ebb and Flow
colly
84
4.5k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Unsuck your backbone
ammeep
669
57k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
4 Signs Your Business is Dying
shpigford
181
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Transcript
WEBã°ã©ãã£ãã¯ããŒã« ïœãã¶ã€ã³ã¯ãŒã¯ãããŒã®è»¢æïœ
ãã¯ããã³ãŠã§ããã©ã³ãã³ã°ãæå±±ãæŠ http://www.pictron.net concrete5 wordpress kintone ã©ã ãŒã€ã»ã«ã€ã¹ ãµãã«ãŒ ã¬ã ã³ãŒã«ããŒã³ ãã©ãã€ã¹ J.A.M
ã¢ãŒã¹ãã€ããŒ æšªå°Ÿå¿ å pictron2009 æå±±ãæŠ
ããããã®ãã¶ã€ã³ã¯ãŒã¯ãããŒã èããäžã§ã®ã¢ããªããµãŒãã¹ã®åŸå ããŒã¿æ§é ã®ãªãŒãã³åãš ã³ãã³ãã©ã€ã³ã€ã³ã¿ãŒãã§ã€ã¹ã®å®è£
ãã¶ã€ã³ã¯ãŒã¯ãããŒã®ããã® ã³ã©ãã¬ãŒã·ã§ã³ãµãŒãã¹ ãããã¿ã€ãã³ã°ãµãŒãã¹ ã§æšæºåããã€ã€ããïŒã€ã®ã¢ã€ã³ã³
ã¢ããªãææããŠããªããŠã cliããããŒã¿ãã¬ã€ã€ãŒã«ã¢ã¯ã»ã¹/ã¢ãŠããããã§ãã PSD-cli PSD.rb npm install -g psd-cli psd path/to/my_psd_ï¬le.psd
-c npm uninstall gulp-sketch --save-dev gulp.task( 'sketch:slices', function(){ ïŒïŒïŒ sketchtool -v sketchtool export pages ï¬le.sketch ïŒïŒïŒ
ã§ã¯ããããããã¶ã€ããŒã ruby,gulpãcliã䜿ãããªã㊠èªååãè¡ãã¹ããªã®ãïŒ
cliãAPIã䜿ã£ãŠæ§ç¯ãããå€ãã® ã¡ãœããïŒã¢ããªã»ãµãŒãã¹ïŒãæäŸããã æ°ãã«ããŒã¿ãã©ãŒãããã«å¯Ÿå¿ãã ã³ã©ãã¬ãŒã·ã§ã³ ãããã¿ã€ãã³ã° ã¢ããªããµãŒãã¹ãæ°å€ããªãªãŒã¹
PDCAãµã€ã¯ã«ãåæ»ã«é²ããããã® ãªãŒãã³APIã«ããé£æº ã³ã©ãã¬ãŒã·ã§ã³ ãããã¿ã€ãã³ã° ããŒãžã§ãã³ã°
PhotoshopCC2015
ã¢ã»ããã¯âæžãåºãæ©èœâã§ã¯ãªã Generatorãã¯ãããžãŒãšããæŠå¿µ PSD-cli PSD.rb Extract Dreamweaver Brackets Adobe cloud
PSD-cli PSD.rb Extract Dreamweaver Brackets Adobe cloud ã¢ããã§ã¯ã4 æ 14
æ¥ã«ãCC Assets Web ãµãŒãã¹ã®ãExtractã ã¿ãããã³ Brackets ã®æ¡åŒµæ©èœã 2016幎6æã«çµäº
Extract Illsutarotor2015.3ããã¢ã»ããæžãåºãã«å¯Ÿå¿ ãã¯ã»ã«ã°ãªããã®åé¡ã¯çžå€ããã ãã¹ã¯ãã©ã€ãå€è§åœ¢ãªã©ã§ãæç»ããªãé åãæžãåºã
Adobe Cloudã䜿ããš ããŒãžã§ãã³ã°ãã«ã³ãã»ãŒã·ã§ã³ãå¯èœ ããŒãžã§ãã³ã° ã«ã³ãã»ãŒã·ã§ã³ Slackã§å ±æ
Sketch
ããžãã£ã ã»ãã€ãã£ãã§æ°èŠéçºãããããåäœãéã ã»ã°ã©ãã£ãã¯ããŒã¿ã軜ã ã»æçšãªãã©ã°ã€ã³ãéçºããã ã»ããŒã¿ãAPIããªãŒãã³ã§é£æºãµãŒãã¹ãå€ã ã»æžãåºãã®éå±€åã¯ã¹ããŒã ãã¬ãã£ã ã»ããããããç·šéã¯ãŸã éäž ã»ãã¹ããŒã«ã«æ £ããå¿ èŠ ã»windowsçããªã
ã»ä»äºã®éœåäžAdobeã¯çµå±å¿ èŠ
ãã©ã°ã€ã³ CRAFT https://www.invisionapp.com/craft Photoshopãšäž¡æ¹ã®ãã©ã°ã€ã³ãåæã«äœ¿ããŸãã åçãããã¹ãããããŒã§é©åœã«å ¥ããŠãããŸãã åçã¯unsplashãããžã£ã³ã«æå®ã§é©åœã«æ¢ããŠãããŸãã
ãã©ã°ã€ã³ git-sketch-plugin https://github.com/mathieudutour/git-sketch-plugin sketchã®ã¡ãã¥ãŒããgitã䜿ããŸãã sketchã®ãã¡ã€ã«åœ¢åŒã¯ããããªããã ãã¬ãã¥ãŒã®PNGãèªåçæããŠã³ãããããŸãã
ãã©ã°ã€ã³ Sketch Gitãã£ãŠã¿ã
ãã©ã°ã€ã³ Sketch Gitãã£ãŠã¿ã ã³ãããããéã«ããã¬ãã¥ãŒPNGãçæããŠã¢ããããŠããã 䜿ããªã å§åçã«é ãããµã¯ãµã¯æããªã å·®åã¯ç®èŠãééãæ¢ãã®ã¯ã€ãºã¿ãã ããŒãžã§ããªãGitã®ããããæå³ãïŒïŒïŒ
New in Sketch 39 ã¬ã¹ãã³ã·ããã¶ã€ã³ã®ã¯ãŒã¯ãããŒã®ããã®æ°æ©èœ Smart Resizing ã³ãŒãã£ã³ã°ãã€ã¡ãŒãžããŠäœ¿ããæ°æ©èœ
New in Sketch 39 Smart Resizing Shops Shops Pin to
Cornor Pin to Cornor Float in Place åã°ã«ãŒãã®ãªãµã€ãºã®å±æ§ã§ ã³ãŒãã£ã³ã°ãã€ã¡ãŒãžãããªãµã€ãºã«
New in Sketch 39 Smart Resizing stretch Float in Place
ã°ã«ãŒãæ¯æ¡å€§ã»çž®å°ããããšã§ ï¬oatãabsoluteãã€ã¡ãŒãžããç·šé
New in CRAFT ãã©ã°ã€ã³CRAFTã§ã®ãããŒããŒã¿ãèªèŸŒæ©èœã«JSON察å¿ãè¿œå JSONãªã©ããããã³ããšã³ãã§UIãå®è£ ãããã¶ã€ã³ããã»ã¹ã®ããã®ããŒã« URLãããŠã³ããŒããã JSONãèªèŸŒ é åã§è¡šç€º
New in CRAFT ãã©ã°ã€ã³CRAFTã§ã®ãããŒããŒã¿ãèªèŸŒæ©èœã«JSON察å¿ãè¿œå JSONãªã©ããããã³ããšã³ãã§UIãå®è£ ãããã¶ã€ã³ããã»ã¹ã®ããã®ããŒã« èªã¿èŸŒãã ããŒã¿ããã¶ã€ã³äžã®ãªããžã§ã¯ãã«å²ãåœãŠ ãªããŒããã ããšèªåçã« é åã®ããŒã¿ ãå²ãåœãŠ
New in Sketch 39 Smart Resizing ä»ãŸã§ã®ã°ã©ãã£ãã¯ãœããïŒ ã°ã©ãã£ãã¯ãã©ãäœããïŒâãŠã§ãã«ã©ãæžãåºããïŒ SketchïŒ UIãã¶ã€ã³ã«å¿ èŠãªã°ã©ãã£ãã¯ãç·šéæ©èœã¯äœãïŒ
New in Sketch 39 ã³ã©ãã¬ãŒã·ã§ã³ããŒã«ïŒéçºäžïŒ Sketch Cloud (Beta)
Sketchã®ãããªæç»æ©èœãšinVisionã®ãããªãããã¿ã€ãã³ã°ãã§ããã¢ããªã ã©ã¡ãã®æ©èœãä»ã¯åºé ããŠããå°è±¡ãåŸã ã«æ©èœè¿œå Adobe Experience Design Sketchã®ãããªæç»æ©èœ ãããã¿ã€ã
2016幎7æPreview5ããªãªãŒã¹ã§åŸã ã«æ©èœè¿œå ïŒãããŸã§BetaïŒ Adobe Experience Design ãºãŒã ããŒã« ãºãŒã ããŒã«ãªãã£ããããïŒ åã®ã¢ãŒãããŒã history.back()ç㪠SketchãPowerPointãExcelãInDesign ãªã©ã®ä»ã®ããŒã«ããã³ããŒïŒCmd+CïŒ
ããŠAdobe XDã«ããŒã¹ãïŒCmd+VïŒã§ ããŸãã
Adobe Cloudã§ã®ãããã¿ã€ãå ±æ Adobe Experience Design ãã©ãŠã¶ã§ç¢ºèªãã«ã³ãã»ãŒã·ã§ã³ãã㌠ãžã§ãã³ã°ãªã©ã¯ãŸã æªå®è£
ãŸããªãè¿œå äºå®ã®æ©èœ Adobe Experience Design ã°ã©ããŒã·ã§ã³ ãŸã ãªããããïŒ éåœèªUI é¢ä¿ãªããã¡ãããïŒ XDã«é¢ããã¢ã³ã±ãŒãã§ãããCloud㫠蟌ã¿ã«ãªãã®ãã¯ããŸã äžéæã
ã«ã³ãã»ãŒã·ã§ã³ããŒã«ãšåãããŠå¥æé ã«ããã®ãç»çäžïŒ
ã³ã©ãã¬ãŒã·ã§ã³ãµãŒãã¹ ããŒãžã§ãã³ã°
zeppelin.io Sketchã®ããŒã¿ããã©ãŠã¶ããçŽæ¥ã¬ã€ã€ãŒãéžæããŠæžãåºããã¹ã¿ã€ã«ãåãåºããã ãã©ã°ã€ã³ã§ä»»æã®ã¿ã€ãã³ã°ã§åæ Sketchã®Exportèšå®ã ãã®ãŸãŸåæ ã³ã©ãã¬ãŒã·ã§ã³ 奜ããªäœçœ®ã«ã³ã¡ã³ã æžãåºã圢åŒãéžã¹ã ããåãã Slackã«æµãã
zeppelin.io Sketchã®ããŒã¿ããã©ãŠã¶ããçŽæ¥ã¬ã€ã€ãŒãéžæããŠæžãåºããã¹ã¿ã€ã«ãåãåºããã ãã©ã°ã€ã³ã§ä»»æã®ã¿ã€ãã³ã°ã§åæ ããã¹ãããã¬ãŒã³ã§ åãåºãã ããŒãžã³ãå¹ ãé«ããªã©ãç®åºãæžãåºãã®CSSã«ãåæ ã«ã©ãŒãã¬ãããäœæ å ±éã®å€æ°ãless,Sassãªã©ã§æžãåºãã«åæ Beta察å¿
avocode.com Sketch,PSDã®ããŒã¿ãé£æºããã¢ããªããçŽæ¥ã¬ã€ã€ãŒãéžæããŠæžãåºããã¹ã¿ã€ã«ãåãåºããã ããŒãžã§ãã³ã° ã³ã©ãã¬ãŒã·ã§ã³ 奜ããªäœçœ®ã«ã³ã¡ã³ã ããåãã Slackã«æµãã
avocode.com Sketch,PSDã®ããŒã¿ãé£æºããã¢ããªããçŽæ¥ã¬ã€ã€ãŒãéžæããŠæžãåºããã¹ã¿ã€ã«ãåãåºããã æžãåºã圢åŒãéžã¹ã ããã¹ãããã¬ãŒã³ã§åãåºãã ããŒãžã³ãå¹ ãé«ããªã©ãç®åºãæžãåºãã®CSSã«ãåæ ã¢ããªããªããŠãã¬ã€ã€ãŒããæœåºã§ãã ã¹ã¿ã€ã«ãæœåº
ãããã¿ã€ãã³ã°ããŒã« ã³ã©ãã¬ãŒã·ã§ã³
invisionapp.com Sketch,PSDã®ããŒã¿ã®ã¢ãŒãããŒããããŒãžãšããŠèªèãã¯ãªãã«ãã«ãããã®å®¹éã§ãããã¿ã€ããäœãã ã³ã©ãã¬ãŒã·ã§ã³æ©èœãããã ç»é¢ã®ä»»æã®äœçœ®ã§ã³ã¡ã³ã ãããã¿ã€ãã§ç»é¢é·ç§»ãäœæ ããåãã Slackãªã©ã«æµãã ããŒãžã§ãã³ã°
ããããã®ãã¶ã€ã³å¶äœç°å¢ã¯ ãªãŒãã³ã»ã«ã³ãã»ãŒã·ã§ã³ãåæã« å ±æããã©ã€ïŒãšã©ãŒã®å·¥æ°ãæžãã èªåã«ãšã£ãŠã®å¶äœå¹çãããã ã¯ãŒã¯ãããŒã®çµã¿åãããéžæ ãŸãšã