Adobe XDクイックオーバービュー 〜10分で把握するXDの全体像

鷹野 雅弘（スイッチ）

CSS Nite in Osaka, vol.45「All About XD」 w/YATのblog
2018年8月11日（土）
UMEDAI 大阪梅田 会議室
http://cssnite.jp/osaka/vol45/

Transcript

7. 邌鎸͢Δ㜥さʹ͸ XD
12. ελʔλʔ ϓϥϯ ୯඼ ϓϥϯ Creative Cloud ίϯϓϦʔτ ϓϥϯ ֹ݄ͷར༻ྉ ʢ੫ผʣ 搀俱 1,180ⰼ 4,980ⰼ Adobe XDҎ֎ͷ੡඼ – ӧ ϓϩτλΠϓ ず儗ʹ1ͭ·Ͱ 搀ⵖꣲ σβΠϯεϖοΫ ず儗ʹ1ͭ·Ͱ 搀ⵖꣲ Ϋϥ΢υετϨʔδ 2GB 100GB Typekit ꣲ㹀 ⰋϑΥϯτϥΠϒϥϦ CCϥΠϒϥϦ ⵃ欽〳腉
13. ελʔλʔ ϓϥϯ ୯඼ ϓϥϯ Creative Cloud ίϯϓϦʔτ ϓϥϯ ֹ݄ͷར༻ྉ ʢ੫ผʣ 搀俱 1,180ⰼ 4,980ⰼ Adobe XDҎ֎ͷ੡඼ – ӧ ϓϩτλΠϓ ず儗ʹ1ͭ·Ͱ 搀ⵖꣲ σβΠϯεϖοΫ ず儗ʹ1ͭ·Ͱ 搀ⵖꣲ Ϋϥ΢υετϨʔδ 2GB 100GB Typekit ꣲ㹀 ⰋϑΥϯτϥΠϒϥϦ CCϥΠϒϥϦ ⵃ欽〳腉
15. Windows晛ΞϦ ͨͩ͠ծ Windows 10⟃♳͕䗳銲
17. 鼅䫛眔㔲 ꞿ倯䕎 嘴ⰼ䕎 简 ϖϯ ςΩετ ΞʔτϘʔυ ζʔϜ
19. Yes.
20. https://www.behance.net/gallery/67284971/Wires-jp
24. ίϐʔ&ϖʔετͰ⢪͑Δ ύʔπ꧊
28. Ξηο τ堣腉 ϦϐʔτάϦο υ
29. Ξηο τ堣腉
33. NG
41. τϥϯδγϣϯ
42. ΦʔόʔϨΠ
44. ϓϨϏϡʔ
45. σεΫτοϓϓϨϏϡʔ
48. σόΠεϓϨϏϡʔ
51. 
52. ⰕꟚ
55. λʔήο τ τϥϯδγϣϯծ Πʔδϯάծ σϡϨʔγϣϯ ελΠϧ Χϥʔծ 俑㶵ελΠϧծ ϥΠϒϥϦ αΠζ Ϗϡʔϙʔτծ ΞʔτϘʔυ ΠϯλϥΫγϣϯ
59. Ξηο τ
72. No. ➙ͷͱ͜Ζ͸
73. ProtoPie Kite Compositor
78. ϚΠΫϩΠϯλϥΫγϣϯ ϚΠΫϩΠϯλϥΫγϣϯ ϓϩτλΠϓ ϓϩτλΠϓ ϫΠϠʔϑϨʔϜ⡲䧭 ϫΠϠʔϑϨʔϜ⡲䧭
80. ϓϩτλΠϓͱ͸ʁ XDͷΦϒδΣΫτ͔Β殯ͳΔΞʔτϘʔυ΁ͷϦϯΫΛ鏣㹀͠ծ歗꬗ 鼂獳Λ㹋鄲͢Δ堣腉կ ʦϓϩτλΠϓʧ ʹⴖΓ䳔͔͑ͯΒ遤͏կ λʔήο τʢ鼂獳⯓ͷΞʔτϘʔυʣ ծτϥϯδγϣϯծΠʔδϯάծ竰 竲儗꟦ծεΫϩʔϧ⡘縧Λ⥂䭯ͳͲΛ鏣㹀͢Δկ τϥϯδγϣϯʢ歗꬗鼂獳ͷΠϯλϥΫγϣϯʣͷ΄͔ծΦʔόʔϨΠ ʢϝχϡʔ΍ϙοϓΞοϓ΢Οϯυ΢ͳͲʣ ͱ͍͏鏣㹀͕͋Δկ τϥϯδγϣϯ ΦʔόʔϨΠ ઃఆͷϙΠϯτ • ʦϏϡʔϙʔτͷ넝͞ʧ ʢΞʔτϘʔυʣ • ʦ㔿㹀⡘縧ʧ ʢ鼅䫛ͨ͠ΦϒδΣΫτʣ ֬ೝํ๏΍ڞ༗ํ๏͸ʁ PC ♳ͷ XD ͷ箟꧊歗꬗͔ΒʮσεΫτοϓϓϨϏϡʔʯ ծiPhone/ AndroidσόΠεΛUSB䱸竲ͯ͠ ʮσόΠεϓϨϏϡʔʯ Λ⢪ͬͯծϓϩ τλΠϓͰ鏣㹀ͨ͠歗꬗鼂獳Λ然钠͢Δկ σβΠϯεϖοΫΛⰕꟚ ⰕꟚ ϓϩτλΠϓΛⰕꟚ σόΠε ϓϨϏϡʔ σεΫτοϓϓϨϏϡʔ ΫϥΠΞϯτ ʢꟼ⤘罏ʣ ͱⰟ剣͢Δʹ͸ծϓϩτλΠϓΛⰕꟚ͠ծίϝϯ τͷϑΟʔυόοΫΛ「͚Δ͜ͱ͕Ͱ͖Δկ ϓϩτλΠϓΛެ։ σβΠϯεϖοΫΛެ։ ίϝϯτΛڐՄ ϑϧεΫϦʔϯͰ։͘ ϗο τεϙο τͷώϯτ ύεϫʔυઃఆ ඇެ։ϦϯΫ ެ։ࡁΈϦϯΫͷ؅ཧ ˟ ϝʔϧͰ暴㹀ͷ湱䩛Λ䬸䖉͢Δ堣腉 Ͳ͏΍ͬͯύʔπΛ੾Γग़͢ͷʁ ରԠϑΥʔϚο τ 㼎䘔ϑΥʔϚο τ ʢϑΝΠϧ䕎䒭ʣ ͸PNGծSVGծPDFծJPG ର৅ • 鼅䫛ͨ͠ΦϒδΣΫτ • όον剅͖⳿͠ϚʔΫΛ➰͚ͨΦϒδΣΫτ • ΞʔτϘʔτ 鼅䫛Ͱ͖Δ ʦ鏣㹀αΠζʧ ͸ծ ʦ剅͖⳿͠⯓ʧ ͝ͱʹ殯ͳΔկ ॻ͖ग़͠ઌ σβΠϯ Web iOS Android 鏣 㹀 α Π ζ 1x 2x 3x 75% - ldp 100% - mdp 150% - hdp 200% - xhdp 300% - xxhdp 400% - xxxhdp खॱ 1. ϨΠϠʔύωϧͰ ʮόον剅͖⳿͠ϚʔΫʯ Λ➰͚Δ 2. ʦϑΝΠϧʧ ϝχϡʔͷ ʦ剅͖⳿͠ʧ ̔ ʦόονʧ ΛΫϦοΫ 3. ʦ剅͖⳿͠⯓ʧ ծ ʦ鏣㹀αΠζʧ ͳͲΛ鏣㹀ͯ͠剅͖⳿͠ ίʔμʔ޲͚ͷ৘ใڞ༗͸ʁ ʮσβΠϯεϖοΫʯ Λⵃ欽͠·͢կΧϥʔծ俑㶵ελΠϧծςΩετծ 剅䒭䞔㜠ͳͲΛ䬄⳿Ͱ͖Δկ 稆勞ͷⴖΓ⳿͠͸ծ➙䖓ծ〳腉ʹͳΔ✮㹀կ XDͷڝ߹͸ʁ SketchΛ͸͡Ίծ͜ͷⴓꅿʹ͸㢳͘ͷ醡ㅷ ٥ αʔϏε͕㶷㖈͍ͯ͠ ΔկXDʹ͸ծ歗꬗鏣鎘͔ΒϓϩλΠϓ·Ͱ遤͑Δ͜ͱծIllustrator΍ PhotoshopͷσʔλΛ《Γ鴥Έ΍͍͢⮚⡘䚍͕͋Δկ ϫΠϠʔ ϑϨʔϜ Χϯϓ ϓϩτλΠϓ ʢը໘ભҠʣ ϑΟʔυ όοΫ ϚΠΫϩ ΠϯλϥΫγϣϯ Sketch InVision Figma Atomic Prott After Effects Cacoo Keynote ProtoPie Kite Adobe XDΫΠοΫΦʔόʔϏϡʔ ʙ10෼Ͱશମ૾Λ೺Ѳ͢Δ 2018䎃7剢17傈植㖈 Xd? XD? ΞΠίϯ͸ ʮXdʯ ͕ͩծ姻䒭せ獥͸ ʮXDʯ կ խխ 2015䎃 Project Comet ύϒϦοΫϓϨϏϡʔ 2016䎃3剢 Adobe Experience Design CC ϓϨϏϡʔ 2017䎃10剢 Adobe XD CCΛܖ໿͠ͳ͍ͱ࢖͑ͳ͍ͷʁ ⽃⡤ϓϥϯ ʢ1,180ⰼ剢ʣ ծελʔλʔϓϥϯ ʢ搀俱ʣ ͕͋Δկ ʮελʔλʔϓϥϯʯʹ͸ծⰟ剣Ͱ͖ΔϓϩτλΠϓծσβΠϯεϖοΫ ͕ず儗ʹ1ͭ·ͰͳͲͷⵖꣲ͕͋Δ͕ծͦͷ➭ͷ堣腉͸͢΂ͯⵃ欽Ͱ ͖Δկ ελʔλʔ ϓϥϯ ୯඼ ϓϥϯ Creative Cloud ίϯϓϦʔτ ϓϥϯ ֹ݄ͷར༻ྉ ʢ੫ผʣ 搀俱 1,180ⰼ 4,980ⰼ Adobe XDҎ֎ͷ੡඼ – ӧ Ⱏ 剣 ϓϩτλΠϓ ず儗ʹ1ͭ·Ͱ 搀ⵖꣲ σβΠϯεϖοΫ ず儗ʹ1ͭ·Ͱ 搀ⵖꣲ ﺪ ﺻ ➭ Ϋϥ΢υετϨʔδ 2GB 100GB Typekit ꣲ㹀 ⰋϑΥϯτϥΠϒϥϦ CCϥΠϒϥϦ ⵃ欽〳腉 WindowsͰ΋࢖͑Δʁ Windows晛͕͋Δկͨͩ͠ծWindows 10⟃♳͕䗳銲կ 䗳銲γεςϜ圓䧭͸如ͷ鸐Γկ macOS 10.11ʢOS X El Capitanʣ ⟃꣬ Windows Windows 10 Creators Update ʢ64 Ϗο τ晛ʣ - όʔδϣϯ 1703ʢϏϧυ 10.0.15063ʣ ⟃꣬ ͲΜͳπʔϧ͕͋Δͷʁ 㛇劤ͱͳΔ ʦ鼅䫛眔㔲ʧ ծ ʦζʔϜʧ ͷ΄͔ծ䲽歗禸ͷπʔϧ͸ծ ʦꞿ倯 䕎ʧ ծ ʦ嘴ⰼ䕎ʧ ծ ʦ简ʧ ծ ʦϖϯʧ ͷΈկ·ͨծ ʦΞʔτϘʔυʧ πʔϧ͕͋Δկ 鼅䫛眔㔲 ꞿ倯䕎 嘴ⰼ䕎 简 ϖϯ ςΩετ ΞʔτϘʔυ ζʔϜ Ξηο τ ϨΠϠʔ πʔϧͷ͙͢〸⩎ͷαΠ υόʔʹ邌爙͞ΕΔ ʦΞηο τʧ ծ ʦϨΠϠʔʧ Λ ⴖΓ䳔͑ΔϘλϯ͕πʔϧͷ♴ʹ͋Δկ ϫΠϠʔϑϨʔϜ੍࡞πʔϧͱͯ͠࢖͑Δʁ ͸͍կ͞ΒʹծϓϩλΠϓ堣腉ʹΑͬͯծ歗꬗鼂獳ͳͲͷΠϯλϥΫ γϣϯΛ鏣㹀Ͱ͖Δկ ʮWires jpʯ ͱ͍͏⮚猕ͳUIΩο τΛ⢪͏ͱծ͞Βʹ͸͔ͲΔկ UIΩο τͱ͸ʁ OSͷσβΠϯγεςϜ΍ϫΠϠʔϑϨʔϜծΧϯϓⵖ⡲ʹͯΑ͘⢪͏ ύʔπͳͲΛXDͷΦϒδΣΫτͱͯͦ͠ͷ··ⵃ欽Ͱ͖ΔʮUIΩο τʯ ͕欽䠐͞Ε͍ͯΔկ • Apple iOS 11 • Google Android • Microsoft Windows • ϫΠϠʔϑϨʔϜ ʢ薉铂晛ծ傈劤铂晛ʣ ⵃ欽͢Δ㜥さʹ͸ծXDͷυΩϡϝϯτ꟦Ͱίϐʔ &ϖʔετ͢Δկ ͜Ε·ͰͷPhotoshopϑΝΠϧΛ࢖͍ճ͠Ͱ͖Δʁ PSDϑΝΠϧΛXDʹ㢌䳔Ͱ͖Δկ • ʦϑΝΠϧʧ ϝχϡʔͷ ʦꟚ͘ʧ • XDͷΞϓϦέʔγϣϯΞΠίϯʹυϥοά&υϩοϓ ͳ͓ծSketchϑΝΠϧͷΠϯϙʔτ΋〳腉կ Illustrator΍Photoshopͷૉࡐ͸Ͳ͏΍ͬͯ࢖͏ʁ • ίϐʔ &ϖʔετ • CCϥΠϒϥϦ穗歋Ͱꂁ縧 • XD Ͱ湫䱸 .psd ϑΝΠϧΛꟚ͘ ˟XD͔Β͸CCϥΠϒϥϦ͔ΒΠϯϙʔτͷΈ ੍࡞Λޮ཰Խͤ͞Δػೳ͸ʁ 如ͷ3ͭͷΞηο τ堣腉Λ⢪ͬͯծⱄⵃ欽΍盖椚͕遤͑Δկ • Χϥʔ • 俑㶵ελΠϧ • γϯϘϧ ʢςΩετͷ箟꧊ծϏο τϚοϓͷⰅΕ剏͕͑〳腉ʣ ·ͨծϢχο τͷ粸Γ鵤͠ꂁ縧ʹʮϦϐʔτάϦο υʯ堣腉Λ⢪͏ͱծά Ϧο υͷ锃侭ծίϯςϯπͷ䯏ⰅͳͲΛ遤͑Δկ ϚΠΫϩΠϯλϥΫγϣϯ͸࣮૷Ͱ͖Δʁ ΫϦοΫʢλοϓʣ΍εΫϩʔϧʢεϫΠϓʣ ծςΩετⰅ⸂ͳͲծϢʔ βʔͷ乼⡲ʹ⿾䘔ͯ͠歗꬗ⰻͰͪ ΐͬͱͨ͠ΞχϝʔγϣϯΛ鏣㹀͢Δ ϚΠΫϩΠϯλϥΫγϣϯ͸ծXDⰻͰ͸鏣㹀Ͱ͖ͳ͍կ ͍·ͷͱ͜ΖծProtoPie΍Kiteͱ鸬䵿͢Δկ ͍ͣΕ΋99υϧͷ剣⮉ ΞϓϦ ʢ姻然ʹ͸XD ͔ΒσʔλΛ鷏ΓծProtoPie/Kite♳Ͱ鏣㹀ʣ կ NG