Dribbbleで見つけたコンセプトデザインを実装/potatotips-56-concept-design

Transcript

1. Copyright © ZOZO Technologies, Inc. All Right Reserved.
   גࣜձࣾ;0;0ςΫϊϩδʔζ
   ։ൃ෦͑ΜͲ͏
   %SJCCCMFͰݟ͚ͭͨ
   ίϯηϓτσβΠϯΛ࣮૷
   

   View Slide

2. Copyright © ZOZO Technologies, Inc. All Right Reserved.
   ίϯηϓτσβΠϯ
   ‣4NBSUIPNFDPOUSPMBQQDPODFQU
   ‣4BN"UNPSF ,JXJ4BN
   
   ‣IUUQTESJCCCMFDPNTIPUT4NBSU
   IPNFDPOUSPMBQQDPODFQU
   

   View Slide

3. Copyright © ZOZO Technologies, Inc. All Right Reserved.
   Smart home control app concept
   by Sam Atmore (Kiwi Sam)
   https://dribbble.com/shots/5435750-Smart-home-control-app-concept
   ߏ੒
   ‣εΫϩʔϧͱ߹Θͤͯͷ਺஋දࣔ
   ‣എܠ৭ͷάϥσʔγϣϯมԽ
   ‣೾໛༷ͷഎܠ
   

   View Slide

4. Copyright © ZOZO Technologies, Inc. All Right Reserved.
   Smart home control app concept
   by Sam Atmore (Kiwi Sam)
   https://dribbble.com/shots/5435750-Smart-home-control-app-concept
   ߏ੒
   ‣εΫϩʔϧͱ߹Θͤͯͷ਺஋දࣔ
   ‣εΫϩʔϧUPVDIFT.PWFE @XJUI
   
   ‣਺஋6*$PMMFDUJPO7JFX
   ‣എܠ৭ͷάϥσʔγϣϯมԽ
   ‣άϥσʔγϣϯܭࢉ
   ‣೾໛༷ͷഎܠ
   ‣6*#F[JFS1BUI
   

   View Slide

5. Copyright © ZOZO Technologies, Inc. All Right Reserved.
   Smart home control app concept
   by Sam Atmore (Kiwi Sam)
   https://dribbble.com/shots/5435750-Smart-home-control-app-concept
   ߏ੒
   ‣εΫϩʔϧͱ߹Θͤͯͷ਺஋දࣔ
   ‣εΫϩʔϧUPVDIFT.PWFE @XJUI
   
   ‣਺஋6*$PMMFDUJPO7JFX
   ‣എܠ৭ͷάϥσʔγϣϯมԽ
   ‣άϥσʔγϣϯܭࢉ
   ‣೾໛༷ͷഎܠ
   ‣6*#F[JFS1BUI
   

   View Slide

6. Copyright © ZOZO Technologies, Inc. All Right Reserved.
   άϥσʔγϣϯมԽ
   ‣਺஋ʹ߹Θͤͯ੨͔Β੺ʹഎܠ৭Λม͑Δ
   

   View Slide

7. Copyright © ZOZO Technologies, Inc. All Right Reserved.
   Ͳ͏࣮૷͢Δ͔ʁ
   ‣εΫϩʔϧʹԠͯ͡ͷ਺஋ΛٻΊΔ
   ‣਺஋Λ΋ͱʹઃఆ͢Δ৭Λܭࢉ͢Δ
   
   #4f8cf8 #da1428
   ͜ͷ෦෼Λܭࢉ͢Δ
   

   View Slide

8. Copyright © ZOZO Technologies, Inc. All Right Reserved.
   άϥσʔγϣϯͷ৭Λܭࢉ͢Δ
   ‣౳ൺܭࢉ
   ‣ҧ͏৭ʹมԽ͢Δࡍʹ༻͍Δܭࢉํ๏
   ‣౳ࠩܭࢉ
   ‣ಉܥ৭ͰมԽΛग़͢ࡍʹ༻͍Δܭࢉํ๏
   

   View Slide

9. Copyright © ZOZO Technologies, Inc. All Right Reserved.
   άϥσʔγϣϯͷ৭Λܭࢉ͢Δ
   ‣౳ൺܭࢉ
   ‣ҧ͏৭ʹมԽ͢Δࡍʹ༻͍Δܭࢉํ๏
   ‣౳ࠩܭࢉ
   ‣ಉܥ৭ͰมԽΛग़͢ࡍʹ༻͍Δܭࢉํ๏
   

   View Slide

10. Copyright © ZOZO Technologies, Inc. All Right Reserved.
    ౳ൺܭࢉͷࣜ
    ։࢝৭ɿʮ33B ((B ##Bʯ
    ໨త৭ɿʮ33C ((C ##Cʯ
    9ਐ௙཰
    3 9
    3C3B
    93B
    ( 9
    (C(B
    9(B
    # 9
    #C#B
    9#B
    ˞9d ੔਺
    
    

    View Slide

11. Copyright © ZOZO Technologies, Inc. All Right Reserved.
    ࣮૷
    ‣։࢝৭GDG
    ‣໨త৭EB
    ‣࠷େ਺஋
    ‣ݱࡏͷ਺஋εΫϩʔϧʹԠͯ͡มԽ͢Δ
    

    View Slide

12. Copyright © ZOZO Technologies, Inc. All Right Reserved.
    εΫϩʔϧʹԠͯ͡ͷ਺஋
    var currentPointY: CGFloat = 0.0 // Ͳͷ͘Β͍εΫϩʔϧ͍ͯ͠Δ͔ͷҐஔ
    override func touchesMoved(_ touches: Set, with event: UIEvent?) {
    guard let touch = touches.first else { return }
    let diff = touch.previousLocation(in: view).y - touch.location(in: view).y
    currentPointY += diff
    let temperature = Int(currentPointY / (view.frame.height / CGFloat(max)))
    }
    ‣։࢝৭GDG
    ‣໨త৭EB
    ‣࠷େ਺஋
    

    View Slide

13. Copyright © ZOZO Technologies, Inc. All Right Reserved.
    άϥσʔγϣϯܭࢉ
    extension UIColor {
    var red: CGFloat { return cgColor.components?[0] ?? 0.0 }
    var green: CGFloat { return cgColor.components?[1] ?? 0.0 }
    var blue: CGFloat { return cgColor.components?[2] ?? 0.0 }
    }
    ‣։࢝৭GDG
    ‣໨త৭EB
    ‣࠷େ਺஋
    

    View Slide

14. Copyright © ZOZO Technologies, Inc. All Right Reserved.
    άϥσʔγϣϯܭࢉ
    let max = 60
    let ratio = (temperature * 100 / max)
    let startColor = UIColor(red: 79/255, green: 140/255, blue: 248/255, alpha: 1.0)
    let endColor = UIColor(red: 218/255, green: 20/255, blue: 40/255, alpha: 1.0)
    // R(X) = (Rb - Ra) * X/100 + Ra
    let r = (endColor.red - startColor.red) * CGFloat(ratio) / 100 + startColor.red
    let g = (endColor.green - startColor.green) * CGFloat(ratio) / 100 + startColor.green
    let b = (endColor.blue - startColor.blue) * CGFloat(ratio) / 100 + startColor.blue
    view.backgroundColor = UIColor(red: r, green: g, blue: b, alpha: 1.0)
    ‣։࢝৭GDG
    ‣໨త৭EB
    ‣࠷େ਺஋
    

    View Slide

15. Copyright © ZOZO Technologies, Inc. All Right Reserved.
    var currentPointY: CGFloat = 0.0
    override func touchesMoved(_ touches: Set, with event: UIEvent?) {
    guard let touch = touches.first else { return }
    let diff = touch.previousLocation(in: view).y - touch.location(in: view).y
    currentPointY += diff
    let max = 60
    let temperature = Int(currentPointY / (view.frame.height / CGFloat(max)))
    let ratio = (temperature * 100 / max)
    let startColor = UIColor(red: 79/255, green: 140/255, blue: 248/255, alpha: 1.0)
    let endColor = UIColor(red: 218/255, green: 20/255, blue: 40/255, alpha: 1.0)
    // R(X) = (Rb - Ra) * X/100 + Ra
    let r = (endColor.red - startColor.red) * CGFloat(ratio) / 100 + startColor.red
    let g = (endColor.green - startColor.green) * CGFloat(ratio) / 100 + startColor.green
    let b = (endColor.blue - startColor.blue) * CGFloat(ratio) / 100 + startColor.blue
    view.backgroundColor = UIColor(red: r, green: g, blue: b, alpha: 1.0)
    }
    

    View Slide

16. Copyright © ZOZO Technologies, Inc. All Right Reserved.
    IUUQTHJUIVCDPN&OEPV.BSJ
    $PODFQU%FTJHO)PNF$POUSPM"QQ
    

    View Slide

17. Copyright © ZOZO Technologies, Inc. All Right Reserved.
    ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide