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

UIコンポーネント指向と「協働」

Kohei Asai
September 07, 2016

 UIコンポーネント指向と「協働」

2016-09-07に行われた「Design For User #2 - コンポーネント指向から考えるUIと設計」でお話しました。
Mediumに記事としても上げています。そちらもあわせてどうぞ。
https://medium.com/@axross/2c3dbca01ab9

Kohei Asai

September 07, 2016
Tweet

More Decks by Kohei Asai

Other Decks in Design

Transcript

  1. 6*؝ٝه٦طٝز䭷ぢה
    չ⼿⫴պ
    !BYSPTT
    %FTJHO'PS6TFSPO

    View Slide

  2. רֻ
    ˖ !BYSPTT
    ˖ "QQMJDBUJPO%FWFMPQFS
    ˖ ؿٔ٦ٓٝأ
    ˖ (SBQI2-דך؟٦غ٦Ꟛ涪
    ˖ 3FBDUדך8FCؙٓ؎،ٝزꟚ涪ծ鏣鎘؟ه٦زזו

    View Slide

  3. 8FCؿٗٝزؒٝسך㢌⻉
    ˖ չK2VFSZכ׮ֲ〢ְպז׿ג鎉׻׸׷
    ˖ 3FBDUծ"OHVMBS
    ˖ 6*׾ػ٦خ׀הח⡲׏גְֻ
    ˖ 剑穄涸ח׉׸׵׾穈׫さ׻ׇג歗꬗׾圓䧭ׅ׷

    View Slide

  4. 8FC⟃㢩ח׮˘
    ˖ 3FBDU/BUJWF
    ˖ 3FBDUך؝٦سك٦أ׾欽ְגJ04ծ"OESPJE،فٔ׾Ꟛ涪
    ˖ 'MVUUFS
    ˖ (PPHMFָꟚ涪ծ剑鵚'VDITJBח״׏ג鑧겗ח
    ˖ %BSU鎉铂׾欽ְגJ04ծ"OESPJE،فٔ׾Ꟛ涪
    ˖ ؽُ٦ך罋ִ倯כ3FBDUח؎ٝأػ؎،ׁ׸גְ׷

    View Slide

  5. ➙װ葿׿ז׮ךָ
    չ6*؝ٝه٦طٝز䭷ぢպ

    View Slide

  6. 6*؝ٝه٦طٝز䭷ぢד
    ֲתֻ⼿⫴דֹג׷׌׹ֲַ

    View Slide

  7. ז׿ֲַתֻ
    דֹגְזְ孡ָׅ׷

    View Slide

  8. رؠ؎ش٦הؒٝآص،כ罋ִ倯ָ麩ֲ
    w σβΠφʔ͸ͲͪΒ͔ͱݴ͏ͱશମ͔Βߟ͑Δ܏޲ʹ͋Γ·͢ɻେ·͔ͳ
    ߏ੒ɺͭ·ΓϨΠΞ΢τΛߟ͔͑ͯΒগͣͭ͠தʹ͋ΔύʔπΛ࡞ΓࠐΜ
    Ͱ͍͖·͢ɻ
    w ʮ෦඼Λ࡞Γ·͠ΐ͏ʯͱࢦࣔͯ͠΋खΛಈ͔ͤͳ͍σβΠφʔ͕͍ͨͱ
    ͯ͠΋ɺͦΕ͸࠽ೳ͕ͳ͍͔ΒͰ͸ͳ͘ɺٯཱͪͯ͠࡞ΕͱݴΘΕ͍ͯΔ
    Α͏ʹฉ͑͜Δ͔Βͩͱࢥ͍·͢ɻ
    via: http://www.yasuhisa.com/could/article/ddd-ooux-job/

    View Slide

  9. ➙傈⠗ִ׋ְֿה
    ˖ ؒٝآص،ؚٔٝ涸ז錁挿׾濼׏ג׮׵ִ׸ל
    ˖ رؠ؎ش٦ך䩛꟦ָ幾׵זְ׌׹ֲַ
    ˖ ؝ىُص؛٦ءّٝ♳ך㉏겗׾䱖ꤐדֹזְ׌׹ֲַ
    ˖ ؒٝآص،ַؚٔٝ׵鋅׋չ6*؝ٝه٦طٝز䭷ぢպ
    ˖ ׅ׀ְꨇ׃ְֽוծ嚊䙀涸ח铡僇׃גְֽ׸ל˘

    View Slide

  10. ؒٝآص،ַؚٔٝ׵鋅׋
    չ6*؝ٝه٦طٝز䭷ぢպ

    View Slide

  11. 6*؝ٝه٦طٝزչ䭷ぢպ
    ˖ չ6*؝ٝه٦طٝزպ׾穈׫さ׻ׇג歗꬗׾圓䧭ׅ׷

    View Slide

  12. 6*؝ٝه٦طٝز
    ˖ 歗꬗׾圓䧭ׅ׷6*ך鿇ㅷ
    ˖ չنةٝպչؿؓ٦يպչشؽ؜٦ءّٝպ

    View Slide

  13. 6*؝ٝه٦طٝز
    ˖ 醱侧ך6*؝ٝه٦طٝزך穈׫さ׻ׇד䧭׶甧א׮ך׮

    View Slide

  14. ػ٦خַ׵Ⰻ⡤׾罋ִגְֻ
    ˖ ׉׮׉׮➙דכչ歗꬗պהְֲ嚊䙀כ㹋ח切僳
    ˖ ٌ٦تٖأז׮ך׾Ⰻג歗꬗ה䪔׏גְ׷䠬ָׅׄ׷
    ˖ 歗꬗׀הرؠ؎ׅٝ׷ךדכזְծػ٦خ嫣חرؠ؎ׅٝ׷
    ˖ ػ٦خ׾穈׫さ׻ׇג歗꬗׾⡲׏גְֻ
    ˖ ػ٦خ6*؝ٝه٦طٝز

    View Slide

  15. ػ٦خה׃גך䕵ⶴ
    ˖ 6*؝ٝه٦طٝزד歗꬗׾圓䧭ׅ׷׋׭חכծ
    ˖ أة؎ٕ׾䭯׋ׇ׷
    ˖ ِ٦ؠ٦Ⰵ⸂ָ֮׷ֿה׾濼׏גְ׷
    ˖ 圫ղז⢪׻׸倯ח㼎䘔ׅ׷
    ˖ הְֲ괏חז׏גזֽ׸לז׵זְ

    View Slide

  16. أة؎ٕ׾䭯׋ׇ׷
    ˖ 歗꬗♳ך6*ךקה׿וכծ植㹋⚅歲ך׮ך׾⢽ִ׷䕎ָ㢳ְ
    ˖ أُؗ،ٌ٦ؿ؍حؙד׮ؿٓحزד׮呎劤כずׄ

    ˖ 葿ծ؟؎ؤծ⡭涯ծن٦ت٦ծ䕦
    ˖ 歗꬗׾圓䧭ׅ׷銲稆ה׃גכծ׉ך䕵ⶴ׾卓׋ׇ׷鋅׋湡׾
    䭯׏גְזֽ׸לז׵זְ

    View Slide

  17. أة؎ٕ׾䭯׋ׇ׷
    ˖ չنةٝպהְֲ6*؝ٝه٦طٝزז׵ծنةٝה׃גך䕵
    ⶴ׾卓׋ׇ׷鋅׋湡׾⪒ִגְ׷ץֹ

    View Slide

  18. ِ٦ؠ٦Ⰵ⸂ָ֮׷ֿה׾濼׏גְ׷
    ˖ ؙٔحؙծأٙ؎فծمغ٦ծؗ٦ن٦سⰅ⸂
    ˖ ،فٔ؛٦ءّٝךקה׿וװ8FC؟؎زכծչِ٦ؠ٦ח
    ⡦ַ׾׃ג׮׵ֲպ׋׭ח֮׷
    ˖ չ⡦ַպِ٦ؠ٦Ⰵ⸂

    View Slide

  19. ِ٦ؠ٦Ⰵ⸂ָ֮׷ֿה׾濼׏גְ׷
    ˖ չنةٝպכؙٔحׁؙ׸ֲ׷׃ծمغ٦ׁ׸ֲ׷
    ˖ չׁ׸ֲ׷պֿה׾6*؝ٝه٦طٝزכ濼׏גְ׷
    ˖ չ׉ך儗⡦׾ׅ׷ַպכ濼׵זֻגְְ
    ˖ ⱄⵃ欽䚍ך錁挿ַ׵׉ך倯ָ⸬卓涸

    View Slide

  20. 圫ղז⢪׻׸倯ח㼎䘔ׅ׷
    ˖ 堣腉װ俑腞ח䘔ׄגְֻא׮6*؝ٝه٦طٝز׾⡲׷״׶
    ׮ծאך6*؝ٝه٦طٝز׾ְ׹׿ז皘䨽ד⢪ְת׻ׇ׷״
    ֲח׃׋倯ְְָ
    ˖ את׶稢ְַ锃侭ָדֹ׷״ֲחז׏גְזְהז׵זְ

    View Slide

  21. 圫ղז⢪׻׸倯ח㼎䘔ׅ׷
    ˖ نةٝךչ葿饔պז׵չ饔ְنةٝպ
    ˖ نةٝךչ،؎؝ٝلٝպז׵لٝך،؎؝ָٝאֻ

    View Slide

  22. فٗتؙزך⚥ח㶷㖈ׅ׷չٌظպ
    ˖ 傀㶷ך6*׾秡鍑ְגְֻהծ圫ղזٌظָ֮׷ֿהָ׻ַ׷
    ˖ 5XJUUFS
    ˖ ِ٦ؠ٦
    ˖ خ؎٦زծة؎يٓ؎ٝ
    ˖ عحءُةؚծٔأز
    ˖ 鸐濼ծت؎ؙٖزًحإ٦آծFUD

    View Slide

  23. 6*؝ٝه٦طٝزח׮ٌظכ秡בֻ
    ˖ 6*؝ٝه٦طٝز׀החו׿זٌظח秡בַֻ׮罋ִגֶֻ
    ˖ ؒٝآص،ؚٔٝחכׅ׀ֻ㣐ⴖזֿה
    ˖ 嚊䙀הꟼ⤘䚍׮侭椚ׁ׸׷

    View Slide

  24. ⼿⫴חֶֽ׷
    6*؝ٝه٦طٝز䭷ぢ

    View Slide

  25. 歗꬗׀הךرؠ؎ٝ项俱כ知僒⻉דֹ׷
    ˖ ؒٝآص،חכծ䗳銲ז䞔㜠כֿ׸ד׮⠗׻׷

    View Slide

  26. 项俱׮չ6*؝ٝه٦طٝز׀הպח
    ˖ ➿׻׶חծ6*؝ٝه٦طٝز׀החرؠ؎ٝؖ؎سٓ؎ٝ׾
    剅ְ׋׵ְְ
    ˖ ؝ىُص؛٦ءّٝך麣Ⱗָ稢ⴓ⻉ׁ׸׷
    ˖ 醱꧟䚍׮稢ⴓ⻉ׁ׸׷

    View Slide

  27. 歗꬗׀הךرؠ؎ٝכ醱꧟חז׶װְׅ
    ˖ ⬁׵ָ⡲׷فٗتؙزכ䎃ղ醱꧟חז׏גְ׷
    ˖ 歗꬗׀החծ歗꬗朐䡾׀החرؠ؎ٝ项俱׾⡲׷ה˘
    ˖ 罋䣁怩׸כ涪欰׃זְ׌׹ֲַ
    ˖ ⠗麦笨繎䚍׾䬐⥂דֹ׷׌׹ֲַ
    ˖ 钠陎ךؤٖכ䬸ַזְ׌׹ֲַ
    ˖ 鏣鎘♳ך濨湼כ涪欰׃זְ׌׹ֲַ

    View Slide

  28. 鳞ְ

    View Slide

  29. ؝ىُص؛٦ءّٝך麣Ⱗ׾稢ⴓ⻉ׅ׷
    ˖ رؠ؎ٝؖ؎سٓ؎ٝכ؝ىُص؛٦ءّٝך׋׭ך项俱
    ˖ ؝ىُص؛٦ءّٝך麣Ⱗ׾稢ⴓ⻉ׅ׷䠐㄂ד׮ծ6*؝ٝ
    ه٦طٝز䭷ぢכ⸬卓涸
    ˖ ؝ىُص؛٦ءّٝח㉏겗ָ֮׷הծㅷ颵כ♴ָ׷
    ˖ 鏣鎘ַ׵稢ַֻׅ׸לծ㉏겗כ稢ַֻז׶װְׅ

    View Slide

  30. 稢ַֻז׏׋㉏겗כ鍑寸׃װְׅ
    ˖ אאך鍑寸荈⡤ָ傍ְ
    ˖ 筨ꆀך钠陎ָ㺁僒
    ˖ ⴓ䬐ָ〳腉
    ˖ ׉׮׉׮ծ涪欰⵸ח㉏겗ח孡➰ֹװְׅ

    View Slide

  31. תה׭
    ˖ 6*؝ٝه٦طٝز䭷ぢכչ稢ⴓ⻉պהְֲ،فٗ٦ث
    ˖ ⡲׶倯׾稢ַֻ
    ˖ 葿׿ז㉏겗׮稢ַֻ
    ˖ ؒٝآص،ؚٔٝ׾㼰׃׻ַ׷הծ
    ˖ װ׵זְהְֽזְֿהָ幾׷ַ׮׃׸זְ
    ˖ ؝ىُص؛٦ءّٝח״׷㉏겗ָ幾׷ַ׮׃׸זְ

    View Slide

  32. 葺ְفٗتؙز׾
    ⡲׸׷ث٦يח׃״ֲ

    View Slide

  33. ➙傈ך鑧כ俑畍ד׮铣׭תׅ
    

    View Slide

  34. 5IBOLZPV
    GPSZPVSBUUFOUJPO

    View Slide