Design Talk#1 ノンデザイナーに読んでほしいデザイン話

Design Talk#1 ノンデザイナーに読んでほしいデザイン話

Design Talk#1 @AnyPay, Inc.
"What Designers Think and How to Embody Ideas"

2箇所ほど動画が動きませんがご勘弁を。

Links in Slides:
1. iOS Human Interface Guidelines
https://developer.apple.com/ios/human-interface-guidelines/overview/themes/

2. Material Design Guidelines
https://material.io/guidelines/

Fbaecd1b9921790b9a3ea9f209da4090?s=128

Yutaro Ikutani | MNTSQ, Ltd.

January 17, 2018
Tweet

Transcript

  1. What Designers Think & How to Embody Ideas#1 @ikutani41 2018/1/17

  2. Appendix. Objective ▸ Objective ▸ Non-Designers޲͚ʹσβΠφʔͷ͜ͱΛ஌ͬͯ΋Β͍ͨ ͍ ▸ ࣾ಺ͷίϥϘϨʔγϣϯΛଅਐ͍ͨ͠ ▸

    σβΠϯʹڵຯ͕͋ΔํͷνϟϨϯδαϙʔτ ▸ For me ▸ ࠓ೥͸ൃ৴૿΍ͧ͢
  3. Index ▸ iOS/AndroidσβΠϯͰ࢖͏୯Ґʢpt, dpʣ ▸ ϨΠΞ΢τ௒֓࿦ ▸ OSಛੑ ▸ ΞΠίϯ

    ▸ εϥΠεͱ͸ ▸ Symbolsͱ͸
  4. Index ▸ iOS/AndroidσβΠϯͰ࢖͏୯Ґʢpt, dpʣ ▸ ϨΠΞ΢τ௒֓࿦ ▸ OSಛੑ ▸ ΞΠίϯ

    ▸ εϥΠεͱ͸ ▸ Symbolsͱ͸
  5. ୯Ґʢpt, dpʣ - 1/3 ▸ What For? ▸ Size: (width,

    height) ▸ Position: (x, y, z) ▸ iOS: pt, Android: dp ▸ ϑΥϯταΠζ ▸ iOS: pt, Android: sp ▸ Webͱಉ͡਺஋Λࢦఆ͢Ε͹ݟͨ໨ಉ͡ ͦΕͧΕઐ༻୯Ґ͕͋Γ·͢
  6. ୯Ґʢpt, dpʣ - 2/3 Ͱ͖Δ͚ͩখͯ͘͞ؾͷར͍ͨ਺ࣈΛ࢖͏ ▸ খ͍͞਺ࣈͰ࡞ͬͯɺඞཁʹԠ֦ͯ͡େͯ͠Export͢Δ ▸ ը࣭ྼԽ͠ͳ͍ϕΫλܗࣜ ▸

    ࣗવ਺Ͱࢦఆ͢Δ ▸ جຊతʹ͸ۮ਺ ▸ iOSͷҰ෦ͷϨΠϠʔ͸ح਺ ▸ தԝἧ͑ɾதԝ෼ׂͯ͠΋ࣗવ਺ʹͳΔΑ͏ʹ
  7. ୯Ґʢpt, dpʣ - 3/3 ੍࡞ˠΤΫεϙʔτͷखॱ͸͜ΕͰܾ·Γ 1x 1.5x 2x 3x 4x

    iOS ੍࡞ (375x667) - SE 6ܥ, 7ܥ Plusܥ 8ܥ, X - Android ੍࡞ mdpi (360x640) hdpi xhdpi xxhdpi xxxhdpi * ΞΠίϯ౳ͷΞηοτ͸্هͰOK͕ͩɺσόΠεαΠζ͸༷ʑͳͷͰϨΠΞ΢τ֬ೝ͸ผ్ඞཁ
  8. Index ▸ iOS/AndroidσβΠϯͰ࢖͏୯Ґʢpt, dpʣ ▸ ϨΠΞ΢τ௒֓࿦ ▸ OSಛੑ ▸ ΞΠίϯ

    ▸ εϥΠεͱ͸ ▸ Symbolsͱ͸
  9. ϨΠΞ΢τ௒֓࿦ 1/3 OSΒ͠͞Λେ੾ʹ͢Δ ▸ OSΒ͠͞Λ࢘Δࢥ૝΍࡞๏͸ఆٛ͞Ε͍ͯΔ ▸ iOS: Human Interface Guidelines

    ▸ Android: Material Design Guidelines ▸ ਖ਼͍͠ඪ४UIύʔπΛબͿ ▸ ComponentsͱݺͿ ▸ ໾ׂɾεϖοΫɾޮՌΛཧղ͢Δ
  10. ϨΠΞ΢τ௒֓࿦ 2/3 ίϯϙʔωϯτબఆ͸ΤϯδχΞҙݟ΋େࣄ ▸ ʮͲͷComponents͕ద੾͔ʯ͸ɺ·ͣσβΠφʔ͕ߟ͑Δ ▸ OSඇඪ४ͷ΋ͷΛʮҙਤͤͣʯબ୒ͯ͠͠·͏έʔε ▸ ϛεͳͷͰɺݟ׳Εͳ͍΋ͷ͸ಥͬࠐΜͰ͋͛ͯ΄͍͠ ▸

    ඇඪ४Λԡ͠௨͍ͨ͠σβΠφʔ͸͍ͳ͍ͷͰੵۃతʹ ▸ OSඪ४ͷStandard Design͕࣮͸࣮૷ϋʔυϧߴ͍᠘΋ ▸ ͜ͷέʔε͸ຊ౰ʹ஌Βͤͯ΄͍͠ ▸ σβΠφʔʹ͸ࣄલݕ஌೉͍͠ͷͰɺ͓ॿ͚͓ͳ͠Ό͢
  11. ϨΠΞ΢τ௒֓࿦ 3/3 ʮΨΠυΛҾ͘ʯˠʮἧ͑Δʯ ▸ Guideʹ͸ҙຯͱ໾ׂ͕͋Δ ▸ IAʹैͬͯἧ͑Δ ▸ ἧͬͯͳ͍ ʹ

    ಛผͳҙຯΛ࣋ͭ ▸ VIΛ༏ઌ͢Δέʔε΋ҰԠ͋Δ ▸ σβΠφʔ͸ը໘ΛݟΔͱࣗવʹGuide͕ݟ͑Δ͆ ▸ Android͸։ൃऀ޲͚ΦϓγϣϯͰνΣοΫͰ͖Δ
  12. Appendix. ϨΠΞ΢τ௒֓࿦ ex.1 ҹ৅౷Ұ͸ͱͯ΋େ੾ ▸ ྨࣅੑͷ࣋ͭޮՌ͸େ͖͍ ▸ ϢʔβͷཧղΛଅਐ͢Δ ▸ ౷Ұײ͸҆৺ײΛੜΉ

    ▸ ಉ͡Α͏ͳҙຯΛ࣋ͭComponents͸ಉελΠϧ͕جຊ ▸ ҙຯΛߟ͑ͣʹ౷Ұ͢Δͷ͸όΧܯ࡯ ▸ OSඪ४ͷGuideline͕ͳ͍ͳΒࣗ෼Ͱߟܾ͑ͯΊΔ ▸ OSඪ४ͷGuideline͕͋ͬͯ΋ࣗ෼Ͱߟܾ͑ͯΊΔ
  13. Appendix. ϨΠΞ΢τ௒֓࿦ ex.2 ςΩετͷσβΠϯεϖοΫ͸৴༻͠ͳ͍Ͱ ▸ Sketch͸ςΩετϨΠϠʔΛ͏·͘ѻ͑ͳ͍ ▸ ϨΠΞ΢τʹӨڹ͢Δجຊ֓೦Λ཈͓͑ͯ͘ͱྑ͍ʢ࣍ड़ʣ ▸ ༨ന͸OSಛੑʹ߹Θͤͯௐ੔ʢ8x+4͘Β͍ʣ

    ▸ AndroidͰ Noto Sans CJK ࢖͏ͱ͖͸ݶք͋Γ ▸ ࣮͸ػछʹΠϯετʔϧ͞Εͯͳ͍ʢ௒ॏ͍͠ʣ ▸ ػछ͝ͱʹωΠςΟϒϑΥϯτҟͳΔͷͰ౷੍ෆՄ
  14. Appendix. ϨΠΞ΢τ௒֓࿦ ex.3 ςΩετͷϨΠΞ΢τʹӨڹ͢Δجຊ֓೦ ▸ Baseline ▸ Line height ▸

    Layer.height ▸ Layer.centerY ▸ Line spacing ▸ ࣮ମ
  15. Index ▸ iOS/AndroidσβΠϯͰ࢖͏୯Ґʢpt, dpʣ ▸ ϨΠΞ΢τ௒֓࿦ ▸ OSಛੑ ▸ ΞΠίϯ

    ▸ εϥΠεͱ͸ ▸ Symbolsͱ͸
  16. OSಛੑ ϨΠΞ΢τͷج४ͱͳΔ਺஋Λ஌͓ͬͯ͘ ▸ Android ▸ ༨ന͸8x ▸ Keyline͸16x, 40x͋ͨΓ ▸

    iOS ▸ جຊతʹ͸Androidͱಉ͡ͱߟ͍͍͑ͯ ▸ ྫ֎ɿେ͖ΊΞΠίϯ͸44x ▸ ΞΠίϯ͸boundsΑΓ࣮ମΛج४ʹϨΠΞ΢τ͞ΕΔҹ৅
  17. Index ▸ iOS/AndroidσβΠϯͰ࢖͏୯Ґʢpt, dpʣ ▸ ϨΠΞ΢τ௒֓࿦ ▸ OSಛੑ ▸ ΞΠίϯ

    ▸ Sliceͱ͸ ▸ Symbolsͱ͸
  18. ΞΠίϯʹ͍ͭͯ ▸ Bounds@white ▸ For Easy Layout ▸ αΠζΛنఆ͢Δಁ໌ͳϨΠϠʔ ▸

    Content area@red ▸ For the Sense of Unity ▸ ઐ༗໘ੵͷେ͖͞ʢ༨നͷൺ཰ʣͰҹ৅͕େ͖͘ҧ͏ ▸ ԁܗɺ࢛֯ɺॎ௕ɺԣ௕ͰͦΕͧΕఆٛ͢Δ ▸ Entity@gray ▸ ΞΠίϯͷ࣮ମ
  19. λονλʔήοτ ▸ ৮ΕΔྖҬ ▸ ࣮ࡍͷΞΠίϯαΠζΑΓ΋େ͖͘ ▸ OS͝ͱʹ࠷௿αΠζ͕ܾ·ͬͯΔ ▸ iOS: 44

    x 44 pt ▸ Android: 48 x 48 dp ▸ ঁੑ޲͚αʔϏεͳΒ΋͏গ͠޿ͯ͘΋͍͍ ▸ ޿͛ΔͳΒԼʹ޿͛Δ
  20. Index ▸ iOS/AndroidσβΠϯͰ࢖͏୯Ґʢpt, dpʣ ▸ ϨΠΞ΢τ௒֓࿦ ▸ OSಛੑ ▸ ΞΠίϯ

    ▸ εϥΠεͱ͸ ▸ Symbolsͱ͸
  21. εϥΠεͱ͸ Ξηοτͱͯ͠ॻ͖ग़͢ઃఆ͕͞Εͨ෦඼ ▸ Sketch, Photoshop, Illustrator͔Β… ▸ Layer΍GroupsΛεϥΠεԽ ▸ ಛఆͷΤϦΞΛεϥΠεԽ,

    etc. ▸ ແବͳ΋ͷʢഎܠ৭ͱ͔ʣ͕ೖΒͳ͍Α͏ʹઃఆ ▸ ඞཁͳαΠζόϦΤʔγϣϯΛࢦఆ ▸ ʢZeplinʣεϥΠεઃఆ͞ΕͨΞηοτ͕DownloadՄೳ
  22. ૢ࡞खॱʢ؆୯wʣ εϥΠεઃఆʹ͔͔࣌ؒͬͯͨͷ͸աڈͷ࿩

  23. Index ▸ iOS/AndroidσβΠϯͰ࢖͏୯Ґʢpt, dpʣ ▸ ϨΠΞ΢τ௒֓࿦ ▸ OSಛੑ ▸ ΞΠίϯ

    ▸ εϥΠεͱ͸ ▸ Symbolsͱ͸
  24. Symbolsͷޫͱҋ - 1/2 ʢޫʣເͷΑ͏ͳػೳͰ͋Δ ▸ ܁Γฦ͠࢖͏෦඼ΛSymbolԽ͓͍ͯͯ͠࢖͍ճͤΔ ▸ Ϋϥε࡞ͬͯɺ֤ArtboardsͰΠϯελϯε࡞ΔΠϝʔδ ▸ Symbols͸ɺΠϯελϯεଆͰࡉ͔͍ઃఆΛࢦఆͰ͖ΔʢOverrideػೳʣ

    ▸ ςΩετ౳ͷEditable infoΛࣗ༝ʹࢦఆ ▸ ཁૉ͝ͱʹShow/HideΛࢦఆ ▸ SymbolsΛฤू͢Ε͹ɺطଘͷΠϯελϯεʹ΋ߋ৽͕ద༻͞ΕΔ ▸ Πϯελϯε͸Detach͢Δ͜ͱͰ਌ࢠؔ܎Λ੾ͬͯΧελϚΠζͰ͖Δ
  25. SymbolsΛ࢖͏ͱૣ͍

  26. Symbolsͷޫͱҋ - 2/2 ʢҋʣ࢖͍ํΛޡΔͱటপԽ͠΍͍͢ ▸ ͲΜͳϨϕϧײͰSymbol࢖͏͔͕೉͍͠ ▸ ຖճSymbolԽͱ࢖͍ճ͠Λҙࣝ͠ͳ͕ΒσβΠϯͯ͠Δͱ༨ܭͳ޻ ਺͕͔͔Δ ▸

    ͍ΖΜͳ৔໘Ͱ࢖͑ΔศརSymbol͸มߋʹऑ͘ɺอक͕ͱͯ΋େม ▸ ݁ہɺͦͦ͜͜ࡉཻ͔͍౓ͰSymbolsΛ࡞Δ͜ͱʹͳΔ ▸ ٯʹγϯϓϧ͗͢ΔSymbol͸ɺ৔໘͝ͱʹDetachͯ͠ΧελϚΠζ ͪ͠Ό͏ͷͰҰॠͷ࣌୹͕Ͱ͖ͯ໾໨ऴྃ ▸ σβΠϯΛ࡞ΓࠐΉ࢓ࣄͱྑ͍SymbolΛ࡞Δ࢓ࣄ͕ڝ߹͕ͪ͠
  27. Symbols·ͱΊ ศར͕ͩҋ΋͋Δɻҙࣝͤͣ΍ͬͪΌͬͯ ▸ ্ख͘࢖͑Ε͹εϐʔυ͸ग़Δ ▸ టপʹϋϚͬͯແବʹ޻਺͕๲ΕΔ͜ͱ΋ ▸ ༏ઌॱҐͷҙ͕ࣝେࣄ ▸ εϐʔυʁσβΠϯ࡞ΓࠐΈʁ൚༻ੑͷߴ͍Symbol࡞

    Γʁ ▸ ͬ͘͞ͱऴΘΒ͍ͤͨͱ͖͸ɺؾʹͤͣDetachͯ͠ݸผσ βΠϯͰ΍ͬͪΌ͍ͬͯͩ͘͞
  28. @ikutani41 2018/1/17 Thank you! What Designers Think & How to

    Embody Ideas#1
  29. Twitter & note @ikutani41 ྑ͔ͬͨΒಡΜͰͶ