Upgrade to Pro — share decks privately, control downloads, hide ads and more …

プロダクトデザイン事始め - 表現するエンジニアへの道 #TechLunch

プロダクトデザイン事始め - 表現するエンジニアへの道 #TechLunch

プロダクトデザイン事始め - 表現するエンジニアへの道
2014/03/19 (水) 12:00-13:00 @ Livesense TechLunch

■ 発表者
平山 宗介

■ 概要
エンジニアが「表現」を身につけるにはどうすればよいのか。
ノンデザイナーズ・デザインブック - デザイン4原則 でそれっぽいことは書かれたけど次のステップにはなかなかいけない。今回のTechLunchでは表現するエンジニアへの道ということで、エンジニアが表現を身につけていくにはどうすればよいのか、どのように考えていけばよいのかということをみんなと一緒にかんがえていく。

■ 参考URL
http://a2n.sdesign.jp/
http://startupnotes.org/
http://www.awwwards.com/
http://inspired-ui.com/
http://dribbble.com/
https://kuler.adobe.com/
http://kashiwasato.com/
https://typekit.com
http://webfont.fontplus.jp/
http://foundation.zurb.com/
http://codepen.io/

Livesense Inc.

March 19, 2014
Tweet

More Decks by Livesense Inc.

Other Decks in Technology

Transcript

  1. Sosuke Hirayama / Livesense Inc.
    2014/03/19 @ LIVESENSE TechLunch
    ϓϩμΫτσβΠϯࣄ࢝Ί
    දݱ͢ΔΤϯδχΞ΁ͷಓ✈

    View full-size slide

  2. ʮϓϩμΫτσβΠϯʯ
    ϓϩμΫτɾαʔϏεΛࢥ૝Ϩϕϧ͔Βઃܭ͢Δ
    ʺ޻ۀσβΠϯ

    View full-size slide

  3. LIVESENSE made*
    Technology
    Design
    Marketing
    ࣍ੈ୅ϕϯνϟʔͷϞϊ࡞ΓνʔϜ

    View full-size slide

  4. എܠ
    B a ckground

    View full-size slide

  5. σβΠφ͕ΤϯδχΞϦϯάʢϓϩάϥϜʣΛֶͿίπΑΓ
    ͳͥදݱऀ͸ςΫϊϩδʔΛֶश͢Δͷ͕ۤख͔

    දݱͱΤϯδχΞϦϯά͕Ͱ͖ΔϋΠϒϦουͳ੡࡞ऀ͸ɺཧܥ͋Δ͍͸Τϯδ
    χΞग़਎ͷਓ͕ؒଟ͍ɻٯʹΞʔςΟετ΍ʢάϥϑΟοΫʣσβΠφʔͷόο
    Ϋάϥ΢ϯυ͔ΒɺϋΠϒϦουܕ΁ͱҠߦ͢Δਓ͸૬ରతʹগͳ͍ɻ

    جຊతʹ͸ɺΤϯδχΞͷ΄͏͕ʮܥ౷ֶཱͯͯश͢Δʯͱ͍͏఺Ͱɺϊ΢ϋ΢
    ͱڭҭ͕͋Δɻ͍ΘΏΔʮඒతηϯεʯͱ͍ΘΕΔΑ͏ͳϞϊͰ͋ͬͯ΋ɺ͍ͪ
    ͲϩδοΫԽͯࣗ͠෼ͳΓʹফԽ͑͞Ͱ͖ͯ͠·͑͹ɺΤϯδχΞ͸දݱ΍σβ
    Πϯ΋ΤϯδχΞϦϯάͷҰ؏ͱֶͯ͠श͢Δ͜ͱ͕Ͱ͖ΔɻʢٯʹɺεΩϧΛ
    ϒϨΠΫμ΢ϯֶͯ͠श͢ΔͿΜɺʮ࡞ΕΔ͚Ͳ࡞Γ͍ͨ΋ͷ͕ͳ͍ʯʹͳΓ͕
    ͪͰ͸͋Δɻʣ

    View full-size slide

  6. ઓུίϯαϧςΟϯάͷ࣍ʹ΍ͬͯ͘Δʮ಄೴ʯ͸ʁΑΓ
    ୈʹɺ෺ࣄΛ૑଄͢Δϓϩηεʹ͍ͭͯͷܦݧͷ๛෋ͩ͞ɻΠϊϕʔγϣϯ
    ͱ͍͏ͷ͸਎ମ஌Ͱ͋ͬͯɺ࢓૊ΈΛຊͰಡΜ͔ͩΒͱ͍ͬͯͰ͖Δ΋ͷͰ͸
    ͳ͍ɻࣗసंͷ৐ΓํͷΑ͏ʹɺԿ౓΋సͿ͏ͪʹ਎ମͰ֮͑Δ΋ͷͩɻGSPH
    ͷਓͼͱ͸ɺ૑଄ੑʹಛԽ͖ͯͨ͠ͷͰɺ৽͍͠΋ͷΛ࡞Γग़͢ͱ͖ʹඞཁͳ
    ϓϩηεͷઃܭ͕ײ֮ͱͯࠜ͠෇͍͍ͯΔɻ

    View full-size slide

  7. ΤϯδχΞ͕
    දݱΛ਎ʹ͚ͭΔʹ͸
    Ͳ͏͢Ε͹Α͍͔ɻ

    View full-size slide

  8. ϙʔτϑΥϦΦ
    Pri vate Por tfol i o

    View full-size slide

  9. 344$PMMBCPSBUPS7JSBM'FFE
    ü  ۙྡϢʔβͱͷ৘ใڞ༗ج൫
    ü  344ϑΟʔυʢ01.-ʣͷڞ༗
    ü  ಛఆ෺ཧҐஔʹର͢Δ޿ࠂ഑৴
    ü  1FPQMF/FBS.FGPS8.

    View full-size slide

  10. ü  :BNNFSͷ/&5ΫϥΠΞϯτ
    ü  ϓϩΩγΛ௨ͯ͠࢖͍͔ͨͬͨ
    ü  0"VUIࢼͯ͠Έ͔ͨͬͨ
    :BNNFS$MJFOUGPS/&5

    View full-size slide

  11. MPJUFS
    ü  'PVSTRVBSFϦετʢ(PXBMMBʣ
    ü  ཱྀߦࡶࢽͷஔ͖׵͑Λ໨ࢦ͢

    View full-size slide

  12. 0UIFST
    ü  TEFTJHOKQ
    ü  WPMBUJMFUJNFTDP
    ü  FUDʜ

    View full-size slide

  13. σβΠϯࢥߟ
    D esign Thinking

    View full-size slide

  14. ײ৘ඇݴޠ
    ϋοɺυΩυΩɺϞϠϞϠFUD
    ײ৘ݴޠ
    ָ͍͠ɺ͏Ε͍͠ɺ൵͍͠FUD
    ࿦ཧ
    ઓུɺ਺ࣈFUD

    View full-size slide

  15. ü  ෳࡶͳੈքΛపఈతʹ؍࡯ˍ࠶ߏங͢Δɺ
    ͦΕʹओுͳ͍͠දݱΛՃ͑ະདྷͷํ޲΁ͱ༠ಋ͢Δɻ
    ü  ࿦ཧͷੈքͱײ৘ͷੈքΛ͍ͬͨΓ͖ͨΓɻ
    ü  ౎ࢢσβΠϯͱ͔૊৫σβΠϯͱ͔΋͜Εͱಉ͔͡΋ɻ
    Ձ஋ͷ͋Δ࢓૊ΈͳΓ
    ࢧ࣋͞ΕΔϞϊΛ૑Γग़࣌͢ͷࢥߟͱ͸ʁ
    ʮؔ౦ʹॅΜͰ͍Δ୅ͰॴಘສԁҎ্ສԁະຬͷঁੑʯͱ͍͏ηάϝϯτΛλʔήοτ
    ͱͯ͠ܦӦࢿݯΛूத౤Լͯ͠੡඼ల։Λಥ͖ਐΊ͍ͯ͘Μͩɺͱ͍͏ͷͱ͸ͪΐͬͱҧ͏ɻ
    ͓લ͕ԿΛ࢈Έग़ͯ͠Μͷ͔Αɺͱ͍͏ಥͬࠐΈ͸ॏʑঝ஌ͭͭ͠

    View full-size slide

  16. /:$#FBDPOcGSPH
    IUUQXXXGSPHEFTJHODPNXPSLSFJOWFOUJOHUIFQBZQIPOFIUNM

    View full-size slide

  17. දݱͷͨΊͷπʔϧ
    E xp ressi o n To o l s

    View full-size slide

  18. "  ϖʔύʔϓϩτλΠϓ
    #  σβΠϯαϯϓϧ
    $  ഑৭
    %  λΠϙάϥϑΟ
    &  $44ϑϨʔϜϫʔΫ
    '  ίʔυςϯϓϨʔτ
    (  ඪ४πʔϧԠ༻
    )  ϓϩϑΣογϣφϧπʔϧ

    View full-size slide

  19. ϖʔύʔϓϩτλΠϓ

    View full-size slide

  20. σβΠϯαϯϓϧ

    View full-size slide

  21. λΠϙάϥϑΟ

    View full-size slide

  22. "EPCF5ZQFLJU

    View full-size slide

  23. $44ϑϨʔϜϫʔΫ

    View full-size slide

  24. #PPUTUSBQGPVOEBUJPO,VCF

    View full-size slide

  25. ίʔυςϯϓϨʔτ

    View full-size slide

  26. $0%&1&/KTEPJU

    View full-size slide

  27. ඪ४πʔϧԠ༻

    View full-size slide

  28. %FGBVMU5PPMT

    View full-size slide

  29. ϓϩϑΣογϣφϧπʔϧ

    View full-size slide

  30. දݱΛ࣮ફ͢Δ
    Practi ce Product D esi gn

    View full-size slide

  31. ςʔϚ
    ʮ͍͋͏͓͑ʯΛද͍ࣔͯͩ͘͠͞ɻ

    View full-size slide

  32. ͍͋͏͓͑
    Ϋʔϧ
    ͔ΘΏ͢
    ߹ίϯ
    ੺ͪΌΜ
    ڣͼ

    γϯϓϧ
    ͍͋͏͓͑
    ͍͋͏͓͑

    View full-size slide

  33. ͍͋͏͑ΛΛදݱͯ͠ΈΔαΠτɻ
    BOTEFTJHOKQ

    View full-size slide

  34. ·ͱΊ
    Conclusion

    View full-size slide

  35. ࣮ݱ͍ͨ͠ࣄۀ͕͋Δɺઓུɾཁ͕݅͋ΔɻͦΕΒͷ࿦ཧ
    Λཧղߏங্ͨ͠Ͱɺͦͷ࿦ཧΛՃ଎ͤ͞ΔදݱΛ͍Ε
    ΔɻͦΕ͕ྲྀߦͱ͔ϒʔϜΛੜΈग़͢ؾ͕͢Δɻ

    ͦͷͨΊʹ΋ɺදݱͷ෢ثΛखʹೖΕɺָ͍͠ͱ͔৺஍Α
    ͍ͱ͔ɺ༷ʑͳײ৘ͷಈ͖ΛσβΠϯ͢ΔɻͦΕ͸ద੾ͳ
    πʔϧͷར༻ςΫχοΫͱɺͪΐͬͱͨ͠ϓϩμΫτվળ
    ΁ͷҙࣝΛ͚࣋ͭͩͰՄೳͳؾ͕͢Δɻ

    View full-size slide

  36. ͋ͨΓ·͑Λɺൃ໌͠Α͏ɻ

    View full-size slide