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

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

M"e
November 15, 2018

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

M"e

November 15, 2018
Tweet

More Decks by M"e

Other Decks in Technology

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