Creating a UI Design culture

3b9c88bfeadc208be2c74356ad0a8f04?s=47 Satoru Kawahara
September 05, 2014

Creating a UI Design culture

インフラ企業で働くフロントエンドエンジニアの挑戦(編集版)
デブサミ関西 2014 B4セッション発表資料 #kansumiB4

3b9c88bfeadc208be2c74356ad0a8f04?s=128

Satoru Kawahara

September 05, 2014
Tweet

Transcript

  1. #kansumiB4 !%FWFMPQFST4VNNJU,BOTBJ 屎⾱鋙 ؎ٝؿٓ⟰噟ד⫴ֻ
 ؿٗٝزؒٝسؒٝآص،ך 䮋䨌 箟꧊晛

  2. #kansumiB4 כׄ׭ח ֿךأٓ؎سך鋅倯

  3. #kansumiB4 ֿ׸ַ׵֮׵׋׭ג6*رؠ؎ٝח《 ׶穈׬הծְֲֲֿֿהָ֮׷ַ׮ ׃׸זְծהְֲ⿫罋ח ؿٗٝزؒٝسؒٝآص،6*رؠ؎ش٦ך倯פ

  4. #kansumiB4 ؿٗٝزؒٝسؒٝآص،6*رؠ ؎ش٦כְֲֲֿֿה׾䙼׏גְ׷ ַ׮׃׸זְծהְֲ⿫罋ח ׉ך➭ךؒٝآص،ך倯פ

  5. #kansumiB4 荈䊹稱➜

  6. #kansumiB4 屎⾱鋙 !FTVLFJ ַ׻כ׵ ׁה׷ 荈䊹稱➜

  7. #kansumiB4 ؿٗٝزؒٝسؒٝآص،
 6*رؠ؎ش٦ 荈䊹稱➜

  8. #kansumiB4 ֻׁ׵ך714؝ٝزٗ٦ٕػطٕך 6*رؠ؎ٝؿٗٝزؒٝسꟚ涪׾ ⚺ח䬐䔲 荈䊹稱➜

  9. #kansumiB4 ˖ ؿٗٝزؒٝسꟚ涪橆㞮ך何㊣ ˖ 6*رؠ؎ٝ䩛岀ך何㊣ 荈䊹稱➜

  10. #kansumiB4 穗娖 荈䊹稱➜

  11. #kansumiB4 㢳䷐繟遭㣐㷕 䞔㜠رؠ؎ٝ㷕猰 䞔㜠رؠ؎ٝ؝٦أ 荈䊹稱➜

  12. #kansumiB4 ؐؑـⵖ⡲⠓爡 荈䊹稱➜ ؐؑـ؟؎زⵖ⡲
 8FC؟٦ؽأךꟚ涪٥麊㌀

  13. #kansumiB4  8FCرؠ؎ش٦ה׃גⰅ爡  "DUJPO4DSJQU׮⳿勻׷رؠ؎ش٦  ؟٦غ؟؎س׮鍗׸׷رؠ؎ش٦  ر٦ةإٝة٦חⰅ׏׋ֿה׮֮׷رؠ؎ش٦ 

    ׋תחرؠ؎ٝ׮ׅ׷ֽוקרؒٝآص، 荈䊹稱➜ 肔剅ֹך㢌⻉
  14. #kansumiB4 ! ! ! Ꟛ涪鿇؎ٝة٦ؿؑ؎أ鏣鎘䬐䔲 荈䊹稱➜

  15. #kansumiB4 ֻׁ׵ךٖٝةٕ؟٦غ 㹑⠗

  16. #kansumiB4 ֻׁ׵ך㼔欽؟٦غ 㹑⠗

  17. #kansumiB4 ֻׁ׵ך714 㹑⠗

  18. #kansumiB4 ֻׁ׵ךؙٓؐس 㹑⠗

  19. #kansumiB4 ر٦ةإٝة٦ 㹑⠗

  20. #kansumiB4 暟椚ַ׵ؙٓؐسתד 䌴䎢ֻ䪔ֲ*5؎ٝؿٓ⠓爡 㹑⠗

  21. #kansumiB4 䮋䨌׉ך

  22. #kansumiB4 Ⰵ爡䖓٠剢ֻ׵ְד714؝ٝزٗ٦ٕػطٕ ךٔصُ٦،ٕ周⟝ח⿫⸇ 䮋䨌׉ך714؝ٝزٗ٦ٕػطٕךٔصُ٦،ٕ

  23. #kansumiB4 714ず㡦׾䱸竲ׅ׷ٗ٦ٕؕطحز ٙ٦ؙ䱸竲堣腉׾䲿⣘ 堣腉鷄⸇ 䮋䨌׉ך714؝ٝزٗ٦ٕػطٕךٔصُ٦،ٕ

  24. #kansumiB4 ˖ ؟٦غ׾♧鋮ׅ׷ ˖ أ؎حثך鷄⸇⵴ꤐ♧鋮 ˖ ؟٦غהأ؎حثך䱸竲 ؝ٝزٗ٦ٕػطٕח鷄⸇

  25. #kansumiB4 䮋䨌׉ך714؝ٝزٗ٦ٕػطٕךٔصُ٦،ٕ ˖ ׮ה׮ה؟٦غ〴ך邌爙٥乼⡲׾䟝㹀ׁ׸גְ׋׮ך ˖ ֿך歗꬗ך䒀ꞿ简♳דך⥜姻כꨇ׃ְ

  26. #kansumiB4 䮋䨌׃׋ֿה 䮋䨌׉ך714؝ٝزٗ٦ٕػطٕךٔصُ٦،ٕ

  27. #kansumiB4 ˖ ה׶ִ֮׆׉׸תדך荈ⴓך䠬鋙ד 6*رؠ؎ٝꟚ涪׾װ׏ג׫׷ 䮋䨌׉ךה׶ִ֮׆עאַ׏ג׫׷

  28. #kansumiB4 עאַ׏׋㠖׉ך 䮋䨌׉ךה׶ִ֮׆עאַ׏ג׫׷

  29. #kansumiB4 6*׾رؠ؎ׅٝ׷ 俑⻉ָזְ 䮋䨌׉ך6*׾رؠ؎ׅٝ׷俑⻉ָזְ

  30. #kansumiB4 ׉׸תדך
 714؝ٝزٗ٦ٕػطٕ
 6*رؠ؎ٝ 䮋䨌׉ך6*׾رؠ؎ׅٝ׷俑⻉ָזְ

  31. #kansumiB4  㹋鄲ׅ׷堣腉ָ⳿䲧ֲ  䎢㜠㹑⠗ך鿇縭ךرؠ؎ش٦ח涪岣  㸣䧭׃׋)5.-$44׾ذٝفٖ٦ز⻉  ⟃꣬כؒٝآص،ָ䗳銲ח䘔ׄג⡲䧭 䮋䨌׉ך6*׾رؠ؎ׅٝ׷俑⻉ָזְ

  32. #kansumiB4 ˖ رؠ؎شָ؝٦ت٦חז׶ָ׍ ˖ ر؟؎ٝך׋׭ך䊨侧ָ⼧ⴓ《׵׸ גְזְ ˖ ⢪ְװְׅ׮ך׾⡲׷הְֲ鋔挿ד ך6*رؠ؎ָٝ遤׻׸גֹגְזְ ♶⼧ⴓזرؠ؎ٝ

    䮋䨌׉ך6*׾رؠ؎ׅٝ׷俑⻉ָזְ
  33. #kansumiB4 ˖ ٔٔ٦أ䖓ך⥜姻כקה׿וזְ ˖ ♶Ⱗさֶ㉏ְさ׻ׇזוָ֮׷ה չ㼎Ⳣպׁ׸׷ ˖ 6*رؠ؎ٝך⥜姻ָ〳腉זךכ
 倜堣腉ٔٔ٦أךة؎ىؚٝך׫ 䮋䨌׉ך6*׾رؠ؎ׅٝ׷俑⻉ָזְ

    ♶⼧ⴓז何㊣
  34. #kansumiB4 فٗآؙؑز׾鸐׃ג 䮋䨌׉ך6*׾رؠ؎ׅٝ׷俑⻉ָזְ

  35. #kansumiB4 ˖ 劤颵涸דזְ䭷䶯ָ㢳ְ ˖ ⠓陽⚥ח⥜姻ⰻ㺁ָ寸㹀ׁ׸׷ ˖ 6*رؠ؎ٝךㅷ颵顑⟣罏ך♶㖈 䮋䨌׉ך6*׾رؠ؎ׅٝ׷俑⻉ָזְ ♶⼧ⴓז鐰⣣

  36. #kansumiB4 㠖׉ך 䮋䨌׉ךה׶ִ֮׆עאַ׏ג׫׷

  37. #kansumiB4 ؿٗٝزؒٝسꟚ涪
 ً؎ٝך➂ְָזְ 䮋䨌׉ךؿٗٝزؒٝسꟚ涪ً؎ٝך➂ְָזְ

  38. #kansumiB4 ׉׸תדך
 714؝ٝزٗ٦ٕػطٕ
 ؿٗٝزؒٝسꟚ涪 䮋䨌׉ךؿٗٝزؒٝسꟚ涪ً؎ٝך➂ְָזְ

  39. #kansumiB4 ˖ ׉ך儗ղדؒٝآص،ָָ׿ל׏ג⡲׷ ˖ 㸣䧭䖓כקרًٝذشٝأך׫ 䮋䨌׉ךؿٗٝزؒٝسꟚ涪ً؎ٝך➂ְָזְ

  40. #kansumiB4 ˖ 濼鋅ָ襳琎ׁ׸חְֻ ˖ 䪮遭ָ刿倜ׁ׸גזְ ˖ ؿٗٝزؒٝسؒٝآص،鋔挿ד أزٖأך֮׷Ꟛ涪橆㞮 ♶⼧ⴓזظؐعؐ 䮋䨌׉ךؿٗٝزؒٝسꟚ涪ً؎ٝך➂ְָזְ

  41. #kansumiB4 穠卓 䮋䨌׉ךה׶ִ֮׆עאַ׏ג׫׷ 㠖חעאַ׶זָ׵ծװ׷׌ֽװ׏ג׫׋

  42. #kansumiB4 ˖ ⢪ְװׁׅծהְֲ鋔挿ך㼪Ⰵ ˖ ׮׏ה״ֻ⳿勻׷כ׆ 䮋䨌׉ךה׶ִ֮׆עאַ׏ג׫׷

  43. #kansumiB4 䮋䨌׉ך 6*رؠ؎ٝؿٗٝزؒٝسꟚ涪׾何㊣ׅ׷

  44. #kansumiB4 䮋䨌׃׋ֿה 䮋䨌׉ך

  45. #kansumiB4 ˖ ٌتٝז6*رؠ؎ٝ䩛岀ך㼪Ⰵ ˖ ٌتٝזؿٗٝزؒٝسꟚ涪橆㞮ך⡲䧭 䮋䨌׉ך

  46. #kansumiB4 ˖ 6*׾رؠ؎ׅٝ׷俑⻉ ׾אֻ׷ 䮋䨌׉ך6*׾رؠ؎ׅٝ׷俑⻉׾אֻ׷

  47. #kansumiB4 ˖ ⽃秪ח䩛岀׾ٌتٝחׅ׷׌ֽדכ 劤颵涸ז何㊣ָ遤ִזְ ˖ 䩛岀ך何㊣׾遤ֲח׮ծז׈׉ך何 ㊣ָ䗳銲זךַծהְֲ椚鍑׾׃ג ׮׵ֲ䗳銲ָ֮׷ 俑⻉ך䗳銲䚍 䮋䨌׉ך6*׾رؠ؎ׅٝ׷俑⻉׾אֻ׷

  48. #kansumiB4 倯ꆙ׾㔿׭׷ 䮋䨌׉ך6*׾رؠ؎ׅٝ׷俑⻉׾אֻ׷

  49. #kansumiB4  ⢪ְװְׅ؝ٝزٗ٦ٕػطٕ׾ 䲿⣘ׅ׷׋׭ך6*رؠ؎ٝ  ״׶״ְ6*رؠ؎ٝך׋׭ךؿٗ ٝزؒٝسꟚ涪 䮋䨌׉ך6*׾رؠ؎ׅٝ׷俑⻉׾אֻ׷ رؠ؎ٝהꟚ涪ךꟼ⤘䚍

  50. #kansumiB4 6*رؠ؎ٝך䕵ⶴה䗳銲䚍׾ 鏮ִ׷ 䮋䨌׉ך6*׾رؠ؎ׅٝ׷俑⻉׾אֻ׷

  51. #kansumiB4 ˖ ِ٦ؠָ؟٦ؽأ׾ⵃ欽ׅ׷ꥷח鍗 ׷׮ך ˖ ؟٦ؽأך⢪ְ⹧䩛ծ⢪ְ䗰㖑 ⡦׾رؠ؎ٝ׃גְ׷ךַ 䮋䨌׉ך6*׾رؠ؎ׅٝ׷俑⻉׾אֻ׷

  52. #kansumiB4 ˖ 6*رؠ؎ٝ׾׃׏ַ׶ה遤ֲֿהח ״׷ًٔحز ˖ ➙䖓ךؙٓ؎،ٝز橆㞮ך㢌⻉׾鋅 䰘ִ׋6*رؠ؎ٝך䗳銲䚍 וֲ׃ג䗳銲זךַ 䮋䨌׉ך6*׾رؠ؎ׅٝ׷俑⻉׾אֻ׷

  53. #kansumiB4 ˖ Ꟛ涪ؿٗ٦ך♧橆ה׃ג6*رؠ؎ٝ ׾穈׫Ⰵ׸׷ ˖ 堣腉הずׄ״ֲח⥜姻何㊣׾遤ֲ וך״ֲחرؠ؎ׁٝ׸׷ץַֹ 䮋䨌׉ך6*׾رؠ؎ׅٝ׷俑⻉׾אֻ׷

  54. #kansumiB4 6*رؠ؎ٝ♳ך椚歋 ד䠐鋅׾ְֲ 䮋䨌׉ך6*׾رؠ؎ׅٝ׷俑⻉׾אֻ׷

  55. #kansumiB4 ˖ 6*رؠ؎ٝך錁挿ַ׵䠐鋅׾ׅ׷ֿה ָ֮׷ծהְֲ钠陎׾䭯׏ג׮׵ֲ ˖ 6*رؠ؎ٝ♳ך隁׸זְه؎ٝزָ֮ ׷ծהְֲ钠陎׾䭯׏ג׮׵ֲ 6*رؠ؎ٝך钠濼 䮋䨌׉ך6*׾رؠ؎ׅٝ׷俑⻉׾אֻ׷

  56. #kansumiB4 椚鍑ׁ׸׷鐰⣣䭷垥ד 爙ׅ 䮋䨌׉ך6*׾رؠ؎ׅٝ׷俑⻉׾אֻ׷

  57. #kansumiB4 ˖ չرؠ؎ٝ♳ך椚歋պ׾呎䬿׾䭯׏ג 铡僇ׅ׷ ˖ 〳腉זꣲ׶㹏錁涸זر٦ة׾欽䠐ׅ׷ 6*رؠ؎ٝך鋔挿ךⰟ剣 䮋䨌׉ך6*׾رؠ؎ׅٝ׷俑⻉׾אֻ׷

  58. #kansumiB4 6*رؠ؎ٝ䩛岀ך㼪Ⰵ 䮋䨌׉ך

  59. #kansumiB4 ˖ ل٦ػ٦فٗزة؎ؾؚٝ ˖ ⹛⡲ׅ׷ٌحؙ ˖ ِ٦ؠذأز 䮋䨌׉ך6*رؠ؎ٝ䩛岀ך㼪Ⰵ

  60. #kansumiB4 ˖ ״׶傍ְ媮ꥡַ׵㸣䧭䕎׾䟝㹀׃׋ رؠ؎ָٝ⳿勻׷ ˖ 㹋ꥷךꟚ涪ָ㨣ת׷⵸ח6*رؠ؎ٝ ♳ך㉏겗ָ涪鋅דֹ׷ ل٦ػ٦فٗزة؎ؾؚٝךⵃ挿 䮋䨌׉ך6*رؠ؎ٝ䩛岀ך㼪Ⰵ

  61. #kansumiB4 ˖ 㹋鄲⵸ח״׶㹋騧涸זِ٦ؠذأز ׾遤ִ׷ ˖ 䟝⫷⸂ח걾׵זְⰟ剣 ˖ 鐰⣣嗚鎢ָ䗳銲ז皘䨽ך搊挿׾ כ׏ֹ׶ׇׁ׷ 䮋䨌׉ך6*رؠ؎ٝ䩛岀ך㼪Ⰵ

    ⹛⡲ׅ׷ٌحؙך䗳銲䚍
  62. #kansumiB4 ˖ ⢪ְװׁׅ׾㹏錁涸ח庠׷ ِ٦ؠذأزך⸬卓 䮋䨌׉ך6*رؠ؎ٝ䩛岀ך㼪Ⰵ

  63. #kansumiB4 ؿٗٝزؒٝسꟚ涪橆㞮ך 剑黝⻉ 䮋䨌׉ך

  64. #kansumiB4 ˖ 3&45GVMז"1*׾⚥䗰חծؿٗٝز ؒٝسהغحؙؒٝس׾毙זꟼ⤘ח ׅ׷ 䮋䨌׉ךؿٗٝزؒٝسꟚ涪橆㞮ך剑黝⻉ 圓䧭ךⴓꨄ

  65. #kansumiB4 ˖ ٗ٦ٕؕךؿٗٝزؒٝسꟚ涪橆㞮 ♳ד؟٦غ׾⹛ַׇ׷״ֲחׅ׷ ˖ ٗ٦ٕؕ؟٦غ♳ח"1*ٌحؙ׾⡲׷ ˖ ְ׻ײ׷ذأز橆㞮ח籬ָזְד׮ Ꟛ涪ָדֹ׷״ֲחׅ׷ "1*ٌحؙ؟٦غ

    䮋䨌׉ךؿٗٝزؒٝسꟚ涪橆㞮ך剑黝⻉
  66. #kansumiB4 ˖ غحؙؒٝسךꟚ涪罏כ"1*ח꧊⚥ דֹ׷ ˖ "1*ךꟚ涪㸣✪׾䖉׋׆חؿٗٝز ؒٝسꟚ涪׾鹌׭׵׸׷ ˖ 6*رؠ؎ٝך何㊣׾遤ְװְׅ 顑⟣ךⴓ鍑

    䮋䨌׉ךؿٗٝزؒٝسꟚ涪橆㞮ך剑黝⻉
  67. #kansumiB4 穠卓 䮋䨌׉ךؿٗٝزؒٝسꟚ涪橆㞮ך剑黝⻉ 俑⻉ךꅕ䧭ծ䩛岀ך何㊣׾׃׋

  68. #kansumiB4 ˖ 6*׾رؠ؎ׅٝ׷䗳銲䚍ך钠濼 ˖ Ꟛ涪ؿٗ٦ך♧橆ה׃גך6*رؠ؎ٝ ˖ 6*رؠ؎ٝ䩛岀ך⸬桦⻉ ˖ ؿٗٝزؒٝسغحؙؒٝس⿽倯ך Ꟛ涪橆㞮ך剑黝⻉

    ˖ 俑⻉٥䩛岀㼪Ⰵך湱⛦⸬卓 䮋䨌׉ךؿٗٝزؒٝسꟚ涪橆㞮ך何㊣
  69. #kansumiB4 ˖ ״׶⢪ְװְׅ
 ؝ٝزٗ٦ٕػطٕך䲿⣘פ ٔٔ٦أתד׮ֲ׃ל׵ֶֻ䖉׍ֻ׌ְׁ

  70. #kansumiB4 ֿ׸ַ׵ך䮋䨌

  71. #kansumiB4 ˖ 䚍腉ך葺ְ؟٦غ׾䲿⣘ׅ׷ ˖ 䗳銲ז堣腉׾䲿⣘ׅ׷ ˖ 㸜㹀涸ח麊欽ׅ׷ 傀㶷ך⣣⦼ ֿ׸ַ׵ך䮋䨌

  72. #kansumiB4 ˖ Ⰻ⡤錁׾䭯׏׋؟٦ؽأرؠ؎ٝ ˖ ״׶㹋ꥷךِ٦ؠח娄׫״׏׋
 6*رؠ؎ٝ ˖ 竰竲涸ז何㊣ ؿٗٝزַ׵ㅷ颵׾崞ַׅ䮋䨌 ֿ׸ַ׵ך䮋䨌

  73. #kansumiB4 ِ٦ؠ׾⚥䗰ח罋ִ׋ ؟٦ؽأך䲿⣘ 湡垥כ ֿ׸ַ׵ך䮋䨌

  74. #kansumiB4 ׀劍䖉ֻ׌ְׁ