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

時短&ストレス軽減!サイト制作・発注のコツ

待島 亘
February 17, 2021

 時短&ストレス軽減!サイト制作・発注のコツ

#ギアスタ01
「いつもの社内勉強会を、オープンに」
2021年2月17日(水)
https://www.facebook.com/events/316475569566037/

待島 亘

February 17, 2021
Tweet

More Decks by 待島 亘

Other Decks in Design

Transcript

  1. ࣌୹ˍετϨεܰݮʂ
    αΠτ੍࡞ɾൃ஫ͷίπ
    ଴ౡ࿱גࣜձࣾ(FBS
    ΪΞελ
    ΪΞελ

    View full-size slide

  2. 1SPpMF
    ๺ւಓొผࢢੜ·Εɺࡳຈࡏॅɻגࣜձࣾ9FOFͰ΢ΣϒαΠτͳͲଟݴ
    ޠഔମͷ੍࡞ʹܞΘΓɺͦͷޙ΢Σϒ੍࡞ձࣾ΁ɻ೥ʹגࣜձࣾ
    (FBSʹδϣΠϯɻ
    αΠτϓϥϯχϯάɺσΟϨΫγϣϯɺΞΫηεղੳͷ΄͔ɺΫϥΠΞϯ
    τ޲͚ʗ΢ΣϒΫϦΤΠλʔ޲͚ηϛφʔ΁ͷొஃ΋ߦ͏ɻෆఆظʹࢀ
    Ճͨ͠ηϛφʔͷϨϙʔτ΍ɺσ
    ΟϨΫγϣϯUJQTΛOPUFʹॻ͘ɻ
    Α͘࢖͏πʔϧ͸#BDLMPHͱ5PEPJTUɻ͓ؾʹೖΓͷٳΈͷա͝͠ํ͸
    ##2ͱՈఉࡊԂɻౙ͸ΘΓͱେਓ͍͠ɻ
    IUUQTOPUFDPNXBUUMBB
    IUUQTUXJUUFSDPNXBUUMBB
    IUUQTXXXGBDFCPPLDPNNBDIJTIJNB
    ଴ౡ࿱·ͪ͠·ΘͨΔ
    גࣜձࣾ(FBS
    ΢Σϒσ
    ΟϨΫλʔ

    View full-size slide

  3. σ
    ΟϨΫγϣϯͷ
    ࣌୹͸೔ʹͯ͠ͳΒͣ

    View full-size slide

  4. ʮ࣌୹ʯΛը૾ݕࡧͯ͠ΈΔͱʜ
    Մॲ෼࣌ؒʹ΍Γ͍ͨ͜ͱʹ࢖͑Δ࣌ؒΛ֬อ͍ͨ͠

    View full-size slide

  5. ੍࡞ऀͱͷ΍ΓऔΓฤ
    ΫϥΠΞϯτͱͷ΍ΓऔΓฤ
    ·ͱΊ
    ໨࣍

    View full-size slide

  6. ͜ΜͳྲྀΕͰ͓࿩͠·͢
    ͏͔ͬΓ΍Γ͕ͪͳࣦഊ
    ආ͚͍ͨ͜ͱ
    ϛεʹͭͳ͕Γ΍͍͢΍Γํ
    ΑΓεϜʔζʹ
    ΑΓ৺ཧత҆શੑΛ୲อ
    ΑΓϛεΛݮΒ͍ͯ͘͠
    ʘ͜͏ͩͱྑ͍Ͷʂʗ

    View full-size slide

  7. ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  8. ࡞ۀՕॴ͸εϐʔυॏࢹͰ
    ͬ͘͟Γ఻͑Δ
    ޙͰ௚ͨ͠΍ͭΛνΣοΫ͢Δͷ΋ࣗ෼
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  9. ࡞ۀՕॴ͸໌֬ʹ͢Δ
    ฤू͢Δϖʔδͷ63-Λهࡌ͢ΔɻͰ͖Ε͹εΫγϣ΋షΔ
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  10. w 8JOEPXT.BD͍ͣΕ΋Մ
    w શମදࣔ෦෼ൣғબ୒
    w γϣʔτΧοτࢦఆՄೳ
    (ZB[P
    https://gyazo.com/ja
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  11. w (PPHMF$ISPNFͷ֦ுػೳ
    w 8JOEPXT.BD͍ͣΕ΋Մ
    w શମදࣔ෦෼ൣғબ୒
    'JSF4IPU
    https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  12. ࡉ͔͍ࢦࣔ͸ޱ಄Ͱ
    ͬ͘͡ΓϑΥϩʔ͢Δ
    ݴ͔ͬͨͲ͏͔ˋ͍֮͑ͯΒΕΔͳΒ0,͚ͩͲͦΜͳਓؒ͘͢ͳ͍
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  13. ࡉ͔͍ࢦࣔ͸πʔϧͰ఻͑Δ
    ฤूՕॴ͝ͱʹ੺ࣈΛೖΕΔɻखॻ͖΋ࢦ͕ࣔগͳ͍ͳΒΞϦ
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  14. w 8JOEPXT.BD͍ͣΕ΋Մ
    w υϥοάͯ͠मਖ਼ՕॴΛࢦఆ
    w मਖ਼Օॴ͝ͱʹίϝϯτͰ͖Δ
    %SPQCPY
    https://www.dropbox.com/
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  15. • Windows / Mac ͍ͣΕ΋Մ
    • υϥοάͯ͠मਖ਼ՕॴΛࢦఆ
    • मਖ਼Օॴ͝ͱʹίϝϯτͰ͖Δ
    https://www.dropbox.com/
    %SPQCPY
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  16. w 8JOEPXT.BD͍ͣΕ΋Մ
    w υϥοάͯ͠मਖ਼ՕॴΛࢦఆ
    w मਖ਼Օॴ͝ͱʹίϝϯτͰ͖Δ
    w Α͘࢖͏ߍਖ਼ه߸͕༻ҙ͞Ε͍ͯΔ
    .POKJ
    https://monji.tech/ja/
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  17. https://monji.tech/ja/
    .POKJ
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  18. ૉࡐ͸͋Δ΋ͷΛͱΓ͋͑ͣૹΔ
    ;*1ղౚͨ͠த͔Β;*1ϑΝΠϧग़͖ͯͨΒઈ๬
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  19. ૉࡐ͕଍Γͳ͍΋ͷ͸
    ଍Γͳ͍ՕॴΛ༧Ί఻͑Δ
    ʮ͜Ε͸ޙ͔ΒૹΓ·͢ʯͱ఻͓͑ͯ͘ͱճͷ࣭໰΍ΓऔΓ͕ݮΓ·͢
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  20. ݪߘσʔλ͸
    ͋Δ΋ͷΛͦͷ··ૹΔ
    8PSE΍&YDFM΍UYU΍͹Β͹Βͩͱ֬ೝ͕େม
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  21. ݪߘσʔλ͸૬ख͕
    ϓϨϏϡʔ͠΍͍͢ܗࣜͰૹΔ
    1%'΍ը૾ͳΒɺ֎ग़ઌͰ΋֬ೝͰ͖ΔͷͰ͏Ε͍͠
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  22. SlackͰ΋ϝʔϧͰ΋
    ఻ΘΕ͹͍͍
    ఻ΘΕ͹ɺ͍͍Ͱ͢ΑͶ
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  23. ࿈བྷखஈ͸πʔϧΛ౷Ұ͢Δ
    Ͳ͜Ͱݴ͚ͬͯͨͬʁΛແͯ͘͠ɺ୳࣌ؒ͢Λͳ͘͢
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  24. ࣭໰Λ΋ΒͬͨΒ
    ฦࣄ͸·ͱΊͯ͢Δ
    ࣌୹ͷͨΊͱࢥͬͯ΍ͬͯ͠·͍͕ͪ
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  25. ࣭໰Λ΋ΒͬͨΒ
    Ұ࣌ฦ৴͸ͱʹ͔͘ૣ͘
    खΛಈ͔ͤͳ͍ঢ়ଶΛ࡞Βͳ͍
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  26. ఻͑ΔͨΊͳΒ
    ΨϯΨϯి࿩΋͍ͱΘͳ͍
    Կճ΋ಉ͜͡ͱΛ఻͑Δ͜ͱʹͳͬͨΓɺΉ͠Ζ͕͔͔࣌ؒͬͯ·ͤΜ͔
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  27. ి࿩΍Ի੠௨࿩͸
    ϑΥϩʔͷΈʹ࢖͏
    औΓҾ͖͕ॳΊͯͳͲɺผͷ໨త͕͋Δ৔߹͸0,
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  28. ೲظ·Ͱ͸૬ख͔Βͷ
    ࿈བྷ଴ͪͰOK
    ͩͬͯظݶࢦఆͯ͠ΔΑͶʁతͳ
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  29. ʮฦࣄ͕ͳ͔ͬͨΒϑΥϩʔ͢Δʯ
    ΋λεΫʹ͢Δ
    ஗Ε͕ग़ͳ͍͔ίϯτϩʔϧ͢Δͷ΋σΟϨΫγϣϯ
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  30. ςΩετϝοηʔδ͸
    ཁ݅ͷΈΛՕ৚ॻ͖Ͱॻ͘
    ײ͡ํʹ͸ݸਓ͕ࠩ͋Γ·͢
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  31. ςΩετϝοηʔδ͸
    ૬खʹ࿩͔͚͠ΔΠϝʔδͰॻ͘
    ײ͡ํʹ͸ݸਓ͕ࠩ͋Γ·͢
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  32. ͜ͷ͋ͱΦϯϥΠϯ
    ϛʔςΟϯά͍͍Ͱ͔͢ʁ
    μϝͩΑʁ
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  33. ΦϯϥΠϯϛʔςΟϯά΋
    ༧ఆΛܾΊ࣮ͯࢪ͢Δ
    ෼Ͱ΋෼Ͱ΋ɺ૬खͷ࣌ؒΛ΋Β͍ͬͯΔҙࣝΛ࣋ͱ͏
    ੍࡞ऀͱͷ΍ΓऔΓฤ

    View full-size slide

  34. ΫϥΠΞϯτͱͷ΍ΓऔΓฤ

    View full-size slide

  35. ࢦࣔΛͬ͘͡ΓಡΜͰ
    ͋ͱ͔Βฦࣄ͢Δ
    ࡞ۀΛ·ͱΊͨͯ͘΍ͬͯ͠·͍͕ͪ
    ΫϥΠΞϯτͱͷ΍ΓऔΓฤ

    View full-size slide

  36. ͞Βͬͱݟͯ
    ౴͑ΒΕΔ࣭໰͸͙͢ฉ͘
    ఴ෇ϑΝΠϧؒҧͬͯͳ͍Ͱ͔͢ʁΛ೔ޙʹฉ͔ͳ͍
    ΫϥΠΞϯτͱͷ΍ΓऔΓฤ

    View full-size slide

  37. μ΢ϯϩʔυ͠ͳ͖Ό͍͚ͳ͍
    σʔλΛ์ஔ͢Δ
    ޙͰμ΢ϯϩʔυ͢Ε͹͍͍ͬͯࢥͬͪΌ͍͕ͪ
    ΫϥΠΞϯτͱͷ΍ΓऔΓฤ

    View full-size slide

  38. σʔλΛμ΢ϯϩʔυ
    Ͱ͖ͨΒใࠂ͢Δ
    ଍Γͳ͍σʔλ͕ͳ͍͔ૣΊͷ֬ೝΛ
    ΫϥΠΞϯτͱͷ΍ΓऔΓฤ

    View full-size slide

  39. ࢦࣔॻΛ΋ΒͬͨΒ
    ͦͷ··ରԠ͢Ε͹ྑ͍
    ࢦࣔॻ͕͢΂ͯʜ͡Όͳ͍͜ͱ΋ଟʑ͋Γ·͢
    ΫϥΠΞϯτͱͷ΍ΓऔΓฤ

    View full-size slide

  40. ࡞ۀ಺༰Λ෼ղͯ͠
    ࿙Ε͕ͳ͍͔֬ೝͯ͠΋Β͏
    ࡞ۀϝϯόʔʹґཔ͢Δ಺༰Λɺઌํʹ΋ݟͤͪΌ͑͹ແବͳ͠
    ΫϥΠΞϯτͱͷ΍ΓऔΓฤ

    View full-size slide

  41. શମεέδϡʔϧΛ
    ఻͓͚͑ͯ͹େৎ෉
    εέδϡʔϧͷڞ༗͕ਵ࣌Ͱ͖͍ͯΕ͹໰୊ͳ͍ͷͰ͕͢
    ΫϥΠΞϯτͱͷ΍ΓऔΓฤ

    View full-size slide

  42. ࣍ͷΞΫγϣϯͷ
    ༧ఆ೔Λ఻͑Δ
    ࣍ͷ࿈བྷ͍͔ͭͳʁ࿈བྷ͠͹Β͘ͳ͍͚Ͳಈ͍ͯΔʁͱؾ࣋ͪΛ଴ͨͤͳ͍
    ΫϥΠΞϯτͱͷ΍ΓऔΓฤ

    View full-size slide

  43. ࿈བྷ͕དྷͳ͔ͬͨΒ
    ࠵ଅ͢Δ
    ΋ͪΖΜΦϯεέͷͨΊͷ࿈བྷࣗମ͸ྑ͍͜ͱͰ͢
    ΫϥΠΞϯτͱͷ΍ΓऔΓฤ

    View full-size slide

  44. ࿈བྷ͕དྷͳ͍࣌͸
    ࠔ͍ͬͯΔͱߟ͑Δ
    ͜ΕͰࠔͬͯΔ͔΋ʁͱߟ͑ͯϑΥϩʔ·ͰͰ͖Ε͹ΧϯϖΩ
    ΫϥΠΞϯτͱͷ΍ΓऔΓฤ

    View full-size slide

  45. ཧղͰ͖ͳ͍ςΩετ΋
    ͦͷ··࢖͏
    ઐ໳త͗͢Δ಺༰͸࢓ํ͕ͳ͍ΑͶʜతͳ
    ΫϥΠΞϯτͱͷ΍ΓऔΓฤ

    View full-size slide

  46. ૬खͷ஌ࣝΛϑϧ׆༻ͯ͠
    ཧղʹ౒ΊΔ
    Θ͔Βͳ͍͜ͱࣗମ͸໰୊ͳ͠ɺཧղ͠ͳ͍ͱޙ͔ΒೝࣝͷζϨΛੜΉ͜ͱ΋
    ΫϥΠΞϯτͱͷ΍ΓऔΓฤ

    View full-size slide

  47. ΦϯϥΠϯϛʔςΟϯά͸
    Ի੠͚ͩͰ΍Γ͍ͨ
    ಺༰ʹΑͬͯ͸ΞϦ
    ΫϥΠΞϯτͱͷ΍ΓऔΓฤ

    View full-size slide

  48. ΦϯϥΠϯϛʔςΟϯά͸
    إΛग़ͯ͠ߦ͏
    ؔ܎ੑ࣍ୈ͚ͩͲɺإ͕ݟ͑ͨํ͕҆৺Ͱ͖Δਓ΋͍Δ
    ΫϥΠΞϯτͱͷ΍ΓऔΓฤ

    View full-size slide

  49. ࿈བྷ͠Α͏ͱࢥͬͯͨͷʹ
    ൈ͚ͯ͠·ͬͨ
    ͪΐʔ͏Ͳి࿩͔͚Α͏ͱࢥͬͯ·ͨ͠ʂͰಀ͕͛ͪ
    ΫϥΠΞϯτͱͷ΍ΓऔΓฤ

    View full-size slide

  50. ܁Γฦ͠λεΫͰ
    ϑΥϩʔ࿙ΕΛͳ͘͢
    5PEPJTUͳͲͷλεΫ؅ཧπʔϧ͕͓͢͢Ί
    ΫϥΠΞϯτͱͷ΍ΓऔΓฤ

    View full-size slide

  51. ి࿩ͷ಺༰͸
    ޙͰ߇͑Ε͹͍͍΍
    ΋͏ʂ࡞ۀதͩͬͨͷʹʂͬͯ͋Γ·͢ΑͶ
    ΫϥΠΞϯτͱͷ΍ΓऔΓฤ

    View full-size slide

  52. ߇͑ͨϝϞ͸
    ΦϯϥΠϯʹஔ͍͓ͯ͘
    ૬खʹ΋ݟͯཉ͍͠෦෼͸ڞ༗͢Δ
    ΫϥΠΞϯτͱͷ΍ΓऔΓฤ

    View full-size slide

  53. ੒Ռ෺͑͞
    ͖ͬͪΓग़ͤ͹OK
    Ͳ͏ʁ͏͍ͭ͘͠Ͱ͠ΐʁ
    ΫϥΠΞϯτͱͷ΍ΓऔΓฤ

    View full-size slide

  54. ౎౓Ξ΢τϓοτΛڞ༗͢Δ
    ௐࠪɺ෼ੳͳͲ్தաఔͷ΋ͷ΋ཱ೿ͳ੒Ռ෺ɻ·ͱΊΔͳΒݟͤΑ͏
    ΫϥΠΞϯτͱͷ΍ΓऔΓฤ

    View full-size slide

  55. σ
    ΟϨΫγϣϯͷ
    ࣌୹͸೔ʹͯ͠ͳΒͣ

    View full-size slide

  56. ෼ͷ࣌୹ͷͨΊͷ࡞ۀ͕
    ෼ΛੜΈɺ෼ΛੜΈͩ͢

    View full-size slide

  57. ໌೔ͷࣗ෼ࣗ਎ͷͨΊʹ
    ࡉ͔͍ͱ͜Ζ͔Β࢝Ί͍͖ͯ·͠ΐ͏

    View full-size slide

  58. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    ଴ౡ࿱גࣜձࣾ(FBS !XBUUMBB !NBDIJTIJNB
    ࣌୹ˍετϨεܰݮʂαΠτ੍࡞ɾൃ஫ͷίπ
    ΪΞελ

    View full-size slide

  59. ࣍ճͷΪΞελ͸ʜ

    View full-size slide

  60. XFE
    ΪΞελ༧ࠂ
    ͝ࢹௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
    ײ૝͸ΪΞελͰπΠʔτ͍͚ͨͩͨΒخ͍͠Ͱ͢ʂ

    View full-size slide