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

エンジニアと協働するためのデザイン的アプローチ

Yasuhisa Hasegawa
October 06, 2017

 エンジニアと協働するためのデザイン的アプローチ

どんなにデザイン思考を追求して画面設計をしたところで、エンジニアの力がなければ形になることはありません。職種関係なく「良い製品を作る」という目標のなか作っているものの、アプローチが異なるどころか、何気なく使っている言葉の解釈も違うことがあります。

本セッションでは MT7 の開発で起こったコミュニケーションの摩擦や・工夫を見ながら、今後の Web サイト設計・制作に必要になるデザインスキルを紹介します。

Yasuhisa Hasegawa

October 06, 2017
Tweet

More Decks by Yasuhisa Hasegawa

Other Decks in Design

Transcript

  1. .5%%$
    ೥݄೔
    ௕୩઒ګٱ

    View full-size slide

  2. ϋ η Ψ ϫ Ϡ ε ώ α
    σβΠφʔ
    اըɾ੍࡞ɾίϯαϧςΟϯά
    ϥΠλʔɾεϐʔΧʔ
    4JY"QBSUσβΠϯސ໰

    View full-size slide

  3. ϓϩμΫτௐࠪ
    ίϯηϓτ֬ೝɾڞ༗
    σβΠϯͷݴޠԽ
    େ࿮ͷઃܭͱ؂म
    ը໘ઃܭ
    ϏδϡΞϧσβΠϯ
    ˏoguraayumi
    ˏyhassy

    View full-size slide

  4. ˏyuji ˏhirata
    ϓϩμΫτϏδϣϯ ֬ೝɾݕূɾڞ༗

    View full-size slide

  5. ෳ਺ͷίϯςϯπλΠϓ͕
    ू·ͬͨू߹ମ
    ΧελϜϑΟʔϧυͱΤϯ
    ςΟςΟ͕૊Έ߹Θͬͨ͞
    ঢ়ଶ
    ৘ใͷ࠷খ୯ҐͰɺ͢΂ͯ
    ͷίϯςϯπΛߏ੒͢Δ
    ͨΊͷ෦඼
    Entity Content Type Sites
    ΤϯςΟςΟ ίϯςϯπλΠϓ αΠτ

    View full-size slide

  6. ैདྷͷ֓೦Ϟσϧͱ͸ҟͳΔ
    ͦ΋ͦ΋ࢢ৔ʹϑΟοτ͢Δ΋ͷͳͷ͔
    ݱଘϓϩμΫτ͔ΒͲ͏ਐԽͤ͞Δ͔

    View full-size slide

  7. Ϣʔβʔ͕ཧղͰ͖Δ΋ͷ
    ඞཁͩͱࢥ͑Δ΋ͷ
    νʔϜͰཧղͰ͖Δ΋ͷ
    ಈ͖ग़ͤΔؔ܎ੑ
    ಺ͷσβΠϯ
    ֎ͷσβΠϯ

    View full-size slide

  8. ։ൃυϦϒϯ
    εϞʔϧνʔϜ
    ϕςϥϯͷϓϩ͕ଟ͍
    ։ൃͷਐΊํ͸੒ख़͍ͯ͠Δ

    View full-size slide

  9. ࢹ֮Խ͸ᩦཉʹɺ
    σβΠϯࢥߟ͸΄Ͳ΄Ͳʹ
    1
    ࢥߟͷΪϟοϓΛຒΊ͍ͯ͘
    2
    ϓϩηεΛυΩϡϝϯτ͍ͯ͘͠؀ڥ࡞Γ
    3
    ຊ೔ͷςʔϚ

    View full-size slide

  10. Ͱɺ͜Ε͕ҰମԿͳͷʁ

    View full-size slide

  11. ਖ਼߈๏͕࠷దղͰ͸ͳ͍
    ந৅౓ͷߴ͍੒Ռ෺͸৔ॴΛબͿ
    1
    ϞνϕʔγϣϯͷτϦΨʔ͸ਓͦΕͧΕ
    2
    ࢹ֮Խɾઆ໌ΛఘΊΔͱޙͰڹ͘
    3

    View full-size slide

  12. ػೳΛߜͬͯɺ
    ·ͣ࡞Δ
    ݟͯɾ৮ͬͯ֬ೝ͢Δ
    վળ͍ͯ͘͠
    ࢹ֮Խͨ͠৘ใΛجʹઆ໌͢Δ
    ඞཁͰ͋Ε͹৘ใΛิ଍͢Δ

    View full-size slide

  13. Ϣʔβʔࢹ఺ͷσβΠϯͷਅҙ
    Ұॹʹಇ͘஥ؒ΋ʰϢʔβʔʱ
    σβΠϯख๏͸ॊೈ͔ͭ͠ͳ΍͔ʹ
    μϝͳ΋ͷ͸ͬ͞͞ͱอ؅ͯ࣍͠Λ࡞Δ

    View full-size slide

  14. ɹ
    ɹ
    ɹ
    ɹ
    ɹ
    ɹ
    ɹ
    ɹ

    View full-size slide

  15. ɹ
    ɹ
    ɹ
    ɹ ϨΠΞ΢τ
    ෦඼
    ૷০
    ૉࡐ

    View full-size slide

  16. ɹ
    ɹ
    ɹ
    ɹ
    ɹ
    ɹ
    ɹ
    ɹ
    ෦඼͔Β͍͖ͳΓ࡞Εͳ͍
    σβΠφʔ
    Ұ؏ੑ͕ͳ͍ͱೋ౓खؒ
    ΤϯδχΞ

    View full-size slide

  17. … View all
    hayase
    chieko
    Users
    … View all
    My Assets
    Brand
    Folders
    Recent
    Popular
    Favorite
    Add Entity
    Dashboard Sites Members Settings Yuji Takayama
    Search Anything
    brand_new_uploadfile.png
    Something_good.png Yuji Takayama Jan 12, 2015
    CMS8IJUFQBQFS Yuji Takayama Feb 14, 2015
    extremely long file name that cannot fit… Yuji Takayama Apr 21, 2015
    .Z$BU.PWJF Yuji Takayama May 5, 2015
    movabletype_jp.png Yuji Takayama May 18, 2015
    Graph about User Engagement Yuji Takayama Jun 1, 2015
    Official Logo Yuji Takayama Aug 4, 2015
    Company Information Yuji Takayama Jul 21, 2015
    Name Owner Published
    Site A Entity
    Create New Entries
    321
    Pages
    10
    Q&A
    0
    Site A Content Type
    Dashboard Sites People Workflow Settings Yuji Takayama
    Dashboard Sites Members Settings Y. Hasegawa
    Today
    12:42PM Takayama added new content type “Q&A”
    I moved all Q&A content from Blog, so please use “Q&A” if you want to add new
    content.
    Thank you :-)
    Yesterday
    1:21PM Nakata added new assets
    11:09AM Miyake is asking for an approval of “Name of Article”
    Name of Article
    Name of Article
    9:21AM Message from Movable Type
    We have released Patch 7.0.11. New feature includes flexible workflow and 20 bug
    fixes. Please read realease note for more detail.
    Notification Center
    Something_good.png Yuji Takayama Jan 12, 2015
    CMS8IJUFQBQFS Yuji Takayama Feb 14, 2015
    extremely long file name that cannot fit… Yuji Takayama Apr 21, 2015
    .Z$BU.PWJF Yuji Takayama May 5, 2015
    movabletype_jp.png Yuji Takayama May 18, 2015
    Graph about User Engagement Yuji Takayama Jun 1, 2015
    Official Logo Yuji Takayama Aug 4, 2015
    Company Information Yuji Takayama Jul 21, 2015
    Everyone.jpg Yuji Takayama Jun 18, 2015
    cat’s computer.png Yuji Takayama Jun 11, 2015
    Name Owner Published
    Recent Items
    Site A Library
    Recent
    Favorite
    Shared
    Tags
    Server
    Add Entity
    Dashboard Sites Settings Yuji Takayama
    Dashboard Sites People Workflow Settings Yuji Takayama
    Workflow Create New Workflow
    Cancel Save
    Draft
    Review
    Stage Name
    Content is editable by others
    Notify people via email
    Yuji Takayama Editorial Team
    Assigned to
    Cancel Add
    Default Workflow
    Dashboard Sites People Workflow Settings Yuji Takayama
    Site A Content Entry
    MOVABLE TYPE 6.1.2 RELEASED Yuji Takayama Jan 12, 2015
    Movable Type For AWS (Apache) is now ... Yuji Takayama Feb 14, 2015
    Movable Type Pro Technical Support Now ... Yuji Takayama Apr 21, 2015
    .PWBCMF5ZQFSFMFBTFE Yuji Takayama May 5, 2015
    Movable Type 6.0.8 and 5.2.13 released to ... Yuji Takayama May 18, 2015
    Find Plugins and Themes More Easily Than ... Yuji Takayama Jun 1, 2015
    Syntax Highlighting for MTML on GitHub Yuji Takayama Aug 4, 2015
    New Installation Guide for Apple and Windows ... Yuji Takayama Jul 21, 2015
    Name Owner Published
    Entry
    Dashboard Sites People Workflow Settings Yuji Takayama
    Site A Content Type
    Create New Entries
    321
    Edit
    Duplicate
    Delete
    Assign Workflow
    Pages
    10
    Q&A
    0
    Create New Entries
    321
    Edit
    Duplicate
    Delete
    Assign Workflow
    Pages
    10
    Cancel Save
    Default Workflow
    Assign Workflow
    Q&A
    0
    Content Type
    Dashboard Sites People Workflow Settings Yuji Takayama
    Workflow Create New Workflow
    Cancel Save
    Draft
    Review
    Stage Name
    Content is editable by others
    Notify people via email
    Yuji Takayama Editorial Team
    Assigned to
    Cancel Add
    Default Workflow
    Dashboard Sites People Workflow Settings Yuji Takayama
    Workflow Create New Workflow
    Add New Stage Cancel Save
    Draft
    Review
    Default Workflow
    Charlie
    Site A
    $POUFOU5ZQF
    &OUSJFT
    1BHFT
    &WFOUT
    "TTFUT
    .FNCFST
    %FTJHO
    4FUUJOHT
    5PPMT
    .PWBCMF5ZQFΫϥ΢υ൛ϋϯζΦϯηϛφʔʲاۀͷ8୲౰ऀ༷޲͚ʳ
    ʲ.5౦ژʳ࣌୹ͰΒ͘Β͘ʂৗ࣌44-ˍϨεϙϯγϒαΠτ
    ΧελϚʔδϟʔχʔϚοϓ࡞ΓͷલʹɺϖϧιφΛ໌֬ʹ͠Α͏
    Content Type :PVDBOBEENPSF
    Categories
    Excerpt
    Main content
    Title
    /FX1BHF
    File Name
    whatsmyname.html Edit
    Folder
    / Change
    Preview
    4BWFBT%SBGU
    1VCMJTI
    May 20, 2017
    Draft

    View full-size slide

  18. Charlie
    Site A
    $POUFOU5ZQF
    &OUSJFT
    1BHFT
    &WFOUT
    "TTFUT
    .FNCFST
    %FTJHO
    4FUUJOHT
    5PPMT
    .PWBCMF5ZQFΫϥ΢υ൛ϋϯζΦϯηϛφʔʲاۀͷ8୲౰ऀ༷޲͚ʳ
    ʲ.5౦ژʳ࣌୹ͰΒ͘Β͘ʂৗ࣌44-ˍϨεϙϯγϒαΠτ
    ΧελϚʔδϟʔχʔϚοϓ࡞ΓͷલʹɺϖϧιφΛ໌֬ʹ͠Α͏
    Content Type :PVDBOBEENPSF
    Categories
    Excerpt
    Main content
    Title
    /FX1BHF
    File Name
    whatsmyname.html Edit
    Folder
    / Change
    Preview
    4BWFBT%SBGU
    1VCMJTI
    May 20, 2017
    Draft
    Charlie
    Site A
    $POUFOU5ZQF
    &OUSJFT
    1BHFT
    &WFOUT
    "TTFUT
    .FNCFST
    %FTJHO
    4FUUJOHT
    5PPMT
    .PWBCMF5ZQFΫϥ΢υ൛ϋϯζΦϯηϛφʔʲاۀͷ8୲౰ऀ༷޲͚ʳ
    ʲ.5౦ژʳ࣌୹ͰΒ͘Β͘ʂৗ࣌44-ˍϨεϙϯγϒαΠτ
    ΧελϚʔδϟʔχʔϚοϓ࡞ΓͷલʹɺϖϧιφΛ໌֬ʹ͠Α͏
    Content Type :PVDBOBEENPSF
    Categories
    Excerpt
    Main content
    Title
    /FX1BHF
    File Name
    whatsmyname.html Edit
    Folder
    / Change
    Preview
    4BWFBT%SBGU
    1VCMJTI
    May 20, 2017
    Draft
    Charlie
    Site A
    $POUFOU5ZQF
    &OUSJFT
    1BHFT
    &WFOUT
    "TTFUT
    .FNCFST
    %FTJHO
    4FUUJOHT
    5PPMT
    .PWBCMF5ZQFΫϥ΢υ൛ϋϯζΦϯηϛφʔʲاۀͷ8୲౰ऀ༷޲͚ʳ
    ʲ.5౦ژʳ࣌୹ͰΒ͘Β͘ʂৗ࣌44-ˍϨεϙϯγϒαΠτ
    ΧελϚʔδϟʔχʔϚοϓ࡞ΓͷલʹɺϖϧιφΛ໌֬ʹ͠Α͏
    Content Type :PVDBOBEENPSF
    Categories
    Excerpt
    Main content
    Title
    /FX1BHF
    File Name
    whatsmyname.html Edit
    Folder
    / Change
    Preview
    4BWFBT%SBGU
    1VCMJTI
    May 20, 2017
    Draft
    ༷ʑͳը໘ͷঢ়ଶ
    σʔλ͕ͳ͍
    ΢Οϯυ΢αΠζ
    ༷ʑͳछྨͷΤϥʔ
    ίϯςϯπྔͷมԽ

    View full-size slide

  19. … View all
    hayase
    chieko
    Users
    … View all
    My Assets
    Brand
    Folders
    Recent
    Popular
    Favorite
    Add Entity
    Dashboard Sites Members Settings Yuji Takayama
    Search Anything
    brand_new_uploadfile.png
    Something_good.png Yuji Takayama Jan 12, 2015
    CMS8IJUFQBQFS Yuji Takayama Feb 14, 2015
    extremely long file name that cannot fit… Yuji Takayama Apr 21, 2015
    .Z$BU.PWJF Yuji Takayama May 5, 2015
    movabletype_jp.png Yuji Takayama May 18, 2015
    Graph about User Engagement Yuji Takayama Jun 1, 2015
    Official Logo Yuji Takayama Aug 4, 2015
    Company Information Yuji Takayama Jul 21, 2015
    Name Owner Published
    Site A Entity
    Create New Entries
    321
    Pages
    10
    Q&A
    0
    Site A Content Type
    Dashboard Sites People Workflow Settings Yuji Takayama
    Dashboard Sites Members Settings Y. Hasegawa
    Today
    12:42PM Takayama added new content type “Q&A”
    I moved all Q&A content from Blog, so please use “Q&A” if you want to add new
    content.
    Thank you :-)
    Yesterday
    1:21PM Nakata added new assets
    11:09AM Miyake is asking for an approval of “Name of Article”
    Name of Article
    Name of Article
    9:21AM Message from Movable Type
    We have released Patch 7.0.11. New feature includes flexible workflow and 20 bug
    fixes. Please read realease note for more detail.
    Notification Center
    Something_good.png Yuji Takayama Jan 12, 2015
    CMS8IJUFQBQFS Yuji Takayama Feb 14, 2015
    extremely long file name that cannot fit… Yuji Takayama Apr 21, 2015
    .Z$BU.PWJF Yuji Takayama May 5, 2015
    movabletype_jp.png Yuji Takayama May 18, 2015
    Graph about User Engagement Yuji Takayama Jun 1, 2015
    Official Logo Yuji Takayama Aug 4, 2015
    Company Information Yuji Takayama Jul 21, 2015
    Everyone.jpg Yuji Takayama Jun 18, 2015
    cat’s computer.png Yuji Takayama Jun 11, 2015
    Name Owner Published
    Recent Items
    Site A Library
    Recent
    Favorite
    Shared
    Tags
    Server
    Add Entity
    Dashboard Sites Settings Yuji Takayama
    Dashboard Sites People Workflow Settings Yuji Takayama
    Workflow Create New Workflow
    Cancel Save
    Draft
    Review
    Stage Name
    Content is editable by others
    Notify people via email
    Yuji Takayama Editorial Team
    Assigned to
    Cancel Add
    Default Workflow
    Dashboard Sites People Workflow Settings Yuji Takayama
    Site A Content Entry
    MOVABLE TYPE 6.1.2 RELEASED Yuji Takayama Jan 12, 2015
    Movable Type For AWS (Apache) is now ... Yuji Takayama Feb 14, 2015
    Movable Type Pro Technical Support Now ... Yuji Takayama Apr 21, 2015
    .PWBCMF5ZQFSFMFBTFE Yuji Takayama May 5, 2015
    Movable Type 6.0.8 and 5.2.13 released to ... Yuji Takayama May 18, 2015
    Find Plugins and Themes More Easily Than ... Yuji Takayama Jun 1, 2015
    Syntax Highlighting for MTML on GitHub Yuji Takayama Aug 4, 2015
    New Installation Guide for Apple and Windows ... Yuji Takayama Jul 21, 2015
    Name Owner Published
    Entry
    Dashboard Sites People Workflow Settings Yuji Takayama
    Site A Content Type
    Create New Entries
    321
    Edit
    Duplicate
    Delete
    Assign Workflow
    Pages
    10
    Q&A
    0
    Create New Entries
    321
    Edit
    Duplicate
    Delete
    Assign Workflow
    Pages
    10
    Cancel Save
    Default Workflow
    Assign Workflow
    Q&A
    0
    Content Type
    Dashboard Sites People Workflow Settings Yuji Takayama
    Workflow Create New Workflow
    Cancel Save
    Draft
    Review
    Stage Name
    Content is editable by others
    Notify people via email
    Yuji Takayama Editorial Team
    Assigned to
    Cancel Add
    Default Workflow
    Dashboard Sites People Workflow Settings Yuji Takayama
    Workflow Create New Workflow
    Add New Stage Cancel Save
    Draft
    Review
    Default Workflow
    Charlie
    Site A
    $POUFOU5ZQF
    &OUSJFT
    1BHFT
    &WFOUT
    "TTFUT
    .FNCFST
    %FTJHO
    4FUUJOHT
    5PPMT
    .PWBCMF5ZQFΫϥ΢υ൛ϋϯζΦϯηϛφʔʲاۀͷ8୲౰ऀ༷޲͚ʳ
    ʲ.5౦ژʳ࣌୹ͰΒ͘Β͘ʂৗ࣌44-ˍϨεϙϯγϒαΠτ
    ΧελϚʔδϟʔχʔϚοϓ࡞ΓͷલʹɺϖϧιφΛ໌֬ʹ͠Α͏
    Content Type :PVDBOBEENPSF
    Categories
    Excerpt
    Main content
    Title
    /FX1BHF
    File Name
    whatsmyname.html Edit
    Folder
    / Change
    Preview
    4BWFBT%SBGU
    1VCMJTI
    May 20, 2017
    Draft
    ͻͱͭͻͱͭ࡞Δͷ͸ඇޮ཰
    ࠷ॳ͔Β͢΂ͯΛ૝ఆͰ͖ͳ͍
    ࣮૷͠ͳ͍ͱ෼͔Βͳ͍͜ͱ΋ଟ͍

    View full-size slide

  20. 6*ΨΠυϥΠϯ
    ࣮૷͠ͳ͕Βߟ͑ΔͨΊͷΞϓϩʔν
    6*ͷ࣮૷ํ๏΍ɺ࢖͍Ͳ͜ΖΛهࡌ
    Ұ؏ੑͷ͋ΔσβΠϯΛॳظஈ֊͔ΒߟྀͰ͖Δ
    ࡞Γͳ͕Βվળ͢ΔͷͰ׬੒ܗ͕ݟ͑೉͍͜ͱ΋

    View full-size slide

  21. σβΠϯͷϒϥοΫϘοΫεԽΛආ͚Δ

    View full-size slide

  22. ։ൃ
    σβΠϯ
    ్தܦա΋ৗʹڞ༗͞Εͨঢ়ଶ
    ͋Δఔ౓ͷਫ਼౓ʹͳͬͨঢ়ଶͰڞ༗͞ΕΔ

    View full-size slide

  23. 判断基準はデザイナーの頭の中
    品質管理をする手段がない
    エンジニアのスピードについていけない

    View full-size slide

  24. σβΠϯ
    ը໘ભҠ
    ΨΠυϥΠϯ
    ࣮૷
    ձ࿩
    ਐߦ
    ίϛϡχέʔγϣϯ

    View full-size slide

  25. σβΠϯͷΦʔϓϯԽ
    ్தܦաΛݟͤΔश׳Λͭ͘Δ
    ΞΠσΞΛڞ༗Ͱ͖Δ૭ޱΛங͘
    ϓϩηεΛυΩϡϝϯτ͢Δ
    ࡞ΓࠐΈWTૣ͘ݟͤΔͷʹे෼ͳਫ਼౓

    View full-size slide

  26. 1
    2
    3
    ࢹ֮Խ͸ᩦཉʹɺ
    σβΠϯࢥߟ͸΄Ͳ΄Ͳʹ
    ࢥߟͷΪϟοϓΛຒΊ͍ͯ͘
    ϓϩηεΛυΩϡϝϯτ͍ͯ͘͠؀ڥ࡞Γ
    ·ͱΊ
    पΓ͕ཧղ͠΍͍͢ڞ༗ํ๏Λ໛ࡧ͢Δ
    ΤϯδχΞ͚ͩͰ΋ಈ͚ΔϧʔϧΛઃ͚Δ
    σβΠφʔͷ಄ͷத͚ͩʹ͠ͳ͍

    View full-size slide

  27. ࠓޙͷ༧ఆ
    ओཁૢ࡞ͷը໘ભҠͷಥͬࠐΜͩઃܭ
    1
    σβΠϯͷৄࡉΛ٧Ί͍ͯ͘
    ʢϥϕϧ΋ؚʣ
    2
    ελΠϧΨΠυͷॆ࣮
    3

    View full-size slide