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

シンプルなRailsアプリケーションに一匙加えるちょい足しアニメーションレシピ

Yu Ishihara
December 09, 2018

 シンプルなRailsアプリケーションに一匙加えるちょい足しアニメーションレシピ

Rails Developers Meetup 2018 Day4 ( https://techplay.jp/event/702297 ) 発表資料

Yu Ishihara

December 09, 2018
Tweet

More Decks by Yu Ishihara

Other Decks in Design

Transcript

  1. ͪΐ͍଍͠ΞχϝʔγϣϯϨγϐ
    Yu Ishihara (@is8r_)
    γϯϓϧͳ3BJMTΞϓϦέʔγϣϯʹҰ࡬Ճ͑Δ
    Rails Developers Meetup 2018 Day 4 Nouvelle Vague - 2018/12/8

    View full-size slide

  2. ࣗݾ঺հ @is8r_
    ͸͡Ί·ͯ͠ɻੴݪ༔ͱݴ͍·͢
    ੴݪ༔
    Yu Ishihara

    View full-size slide

  3. ϑϦʔϥϯεͰ3BJMT΍(PͷΞϓϦέʔγϣϯͷσβΠϯͱϑϩϯτͷ͓࢓ࣄΛ΍͓ͬͯΓ·͢
    ࣗݾ঺հ @is8r_
    ͦͷଞ͍Ζ͍Ζ
    || ||
    %FTJHO'SPOU

    View full-size slide

  4. ࠷ۙ͸Ϥʔάϧτͮ͘ΓʹϋϚͬͯ·͢
    ࣗݾ঺հ
    μώϤʔάϧτ ΧεϐւϤʔάϧτ ϗʔ
    ϜϝΠ
    υέϑ
    Ο
    Ξ 3
    @is8r_

    View full-size slide

  5. 3VCZ,BJHJͷσβΠϯͷ࿩ʜ
    ࠓ೔͓࿩͍ͤͯͨͩ͘͜͠͞ͱ @is8r_

    View full-size slide

  6. Λ͠Α͏͔ͱ΋ࢥͬͨͷͰ͕͢ͷ࿩Λલճͷ3BJMT%.Ͱ͞Μ͕࿩͍ͯͨ͠ͷͰผͷ͓࿩Λʜ
    ࠓ೔͓࿩͍ͤͯͨͩ͘͜͠͞ͱ @is8r_

    View full-size slide

  7. ࠓ೔͓࿩͍ͤͯͨͩ͘͜͠͞ͱ
    $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊
    ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊
    3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44
    @is8r_

    View full-size slide

  8. γϯϓϧͳ3BJMTΞϓϦέʔγϣϯʹҰ࡬Ճ͑Δɺͪΐ͍଍͠ΞχϝʔγϣϯϨγϐ
    $44ΞχϝʔγϣϯɺͳΜͱͳ͘
    ඵ਺ܾΊ͍ͯΔ໰୊

    View full-size slide

  9. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊
    ͪΐͬͱಈ͔ͯ͠Έ·͠ΐ͏
    IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNTQFFE
    4QFFE

    View full-size slide

  10. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊
    ݁࿦͔Βݴ͏ͱTʙT͕ྑ͍ͱ͞Ε͍ͯ·͢
    )PXGBTUTIPVMEZPVS6*BOJNBUJPOTCF "EPCFͷ6*Ξχϝʔγϣϯίϯαϧλϯτͷํͷϒϩάهࣄ
    IUUQTWBMIFBEDPNIPXGBTUTIPVMEZPVSVJBOJNBUJPOTCF
    200ms to
    500ms
    seconds is a good
    range to start with for
    interface animations.

    View full-size slide

  11. 0 200 500 1000ms
    $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊
    ͱ͸͍͑݁ߏ෯͕͋ΔͷͰɺ΍͸Γ໎ͬͯ͠·͍·͢ΑͶ

    View full-size slide

  12. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊
    ϘλϯͳͲ͸ɺૢ࡞΁ͷϑΟʔυόοΫΛײͤ͡͞ΔͨΊͷಈ͖ͳͷͰɺಈ͖͕஗͍ͱअຐʹײ͡Δ͠
    IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNCVUUPO

    View full-size slide

  13. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊
    Ϣʔβʔ΁ͷ஫ҙשى͕໨తͷཁૉʹؔͯ͠͸ɺಈ͖͕ૣ͍ͱͦͷ໾ׂΛՌͨͤͳ͍
    IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNJOQVU

    View full-size slide

  14. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊
    Ϣʔβʔ΁ͷ஫ҙשى͕໨తͷཁૉʹؔͯ͠͸ɺಈ͖͕ૣ͍ͱͦͷ໾ׂΛՌͨͤͳ͍
    IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNOPUJDF

    View full-size slide

  15. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊
    ૢ࡞͕Ͱ͖ΔཁૉͰ͋ΔࣄΛࣔͨ͢Ί͚ͩͳͷ͔
    ໨ΛҾ͖͍ͨཁૉ΁ͷࢹઢͷ༠ಋͳͷ͔ɺ
    ͋ͨΓΛҙࣝ͢ΔͱܾΊ΍͍͢Ͱ͢

    View full-size slide

  16. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊
    զʑ͸GQTͱGQTͷҧ͍͕Θ͔ΔͷͰɺ೴͕৘ใͷؒΛຒΊ͍ͯΔͱ͔͸͋Γͦ͏͚ͩͲ

    ਓ͕ೝࣝ͢Δʮ࿈ଓͨ͠ੈքʯ͸ݬͰ͋Δͱ͍͏ௐࠪ݁Ռ
    IUUQTHJHB[JOFOFUOFXTTQPUMJHIUPGBUUFOUJPO
    ਓؒͷ೴͸ඵؒʹ
    ճͷ஫ҙྗͷഥಈ͕͋Δ
    4
    1

    View full-size slide

  17. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊
    ౓ͷ৘ใߋ৽ʹ͸೴͸͍͍ͩͨNT͘Β͍࣌ؒΛ͔͚ͯͦ͏
    1000/4 = 250ms

    View full-size slide

  18. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊
    ͱ͍͏͜ͱ͸

    View full-size slide

  19. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊
    ૢ࡞ײΛମײͤ͞ΔͨΊ͚ͩͷ΋ͷʹؔͯ͠͸໨োΓʹͳΒͳ͍Α͏ʹɺ
    NTҎԼΛ໨҆ʹ͢Δͷ͕ྑͦ͞͏
    ͜ͷลʁ
    0 250 500 750 1000ms

    View full-size slide

  20. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊
    NTͩͱɺλΠϛϯάʹΑͬͯ͸ճͷ৘ใߋ৽ʹ౰ͨͬͯ͠·͏͔΋͠Εͳ͍ͷͰɺ
    NT͕ྑͦ͞͏
    ms
    0 250 500 750 1000

    View full-size slide

  21. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊
    ʮԿ͔ग़͖ͯͨࣄʯʮԿ͔ಈ͍ͨࣄʯͱ͍͏ࣄΛҙࣝతʹؾ͍ͮͯ΋Β͍͍ͨ΋ͷ͸ɺ
    NTҎ্͕ྑͦ͞͏
    ͜ͷลʁ
    ms
    0 250 500 750 1000

    View full-size slide

  22. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊
    ճͷ৘ใߋ৽Ͱ͸ݟಀ͢ࣄ΋ߟྀͯ͠ɺNT͕ྑͦ͞͏ͳͷͰ͸
    ms
    0 250 500 750 1000

    View full-size slide

  23. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊

    ͜Μͳײ͡Ͱ਺஋΁ͷཪ෇͚Λߟ͑ͯΈΔͱ
    ͢ΜͳΓܾΊΒΕͦ͏

    View full-size slide

  24. $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵ਺ܾΊ͍ͯΔ໰୊

    ͍͑΍ɺͰܾΊͯײ֮తʹͬ͘͠Γ͘Δඵ਺͕͋Ε͹
    ͦΕͰେৎ෉Ͱ͕͢ɺ
    ΋͠໎ͬͨ࣌ʹ͸ͪΐͬͱࢥ͍ग़ͯ͠Έ͍ͯͩ͘͞

    View full-size slide

  25. γϯϓϧͳ3BJMTΞϓϦέʔγϣϯʹҰ࡬Ճ͑Δɺͪΐ͍଍͠ΞχϝʔγϣϯϨγϐ
    ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔
    Θ͔Βͳ͍໰୊

    View full-size slide

  26. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊
    ΠʔδϯάΧʔϒɺͨ͘͞Μͨ͘͞Μ͋Γ·͢ΑͶ
    IUUQTFBTJOHTOFUKB
    &BTJOH'VODUJPOૣݟද

    View full-size slide

  27. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊
    ͪΐͬͱಈ͔ͯ͠Έ·͠ΐ͏
    IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNFBTJOH
    &BTJOH'VODUJPOT

    View full-size slide

  28. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊
    DVCJDCF[JFSΛ׆༻ͨ͠Β௥ՃͰ͖Δ&BTJOHGVODUJPOT΋͋Γ·͢
    IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNFBTJOH
    $VTUPN&BTJOH'VODUJPOT

    View full-size slide

  29. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊
    #PVODF͸DVCJDCFTJFSͰ͸࣮ݱͰ͖ͳ͍Έ͍ͨͰ͢
    // from: https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/library/_timing-functions.scss
    // EASE IN
    $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
    $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
    $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
    $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
    $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
    $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
    // EASE OUT
    $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
    $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
    $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
    $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
    $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
    // EASE IN OUT
    $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
    $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
    $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
    $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
    $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
    $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
    $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    // ͬͪ͜͸ͦΕͬΆ͍ಈ͖ͳ͚ͩ
    // (similar elastic).
    $ease-out-elastic: cubic-bezier(0.370, 1.650, 0.410, 0.780);
    $ease-in-elastic: cubic-bezier(0.370, 0.650, 0.410, -0.780);

    View full-size slide

  30. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊
    Ξχϝʔγϣϯʹ͓͚Δͷ๏ଇɻ4MPXJOBOETMPXPVUɺ5JNJOH͋ͨΓΛݟͯΈΔͱΘ͔Γ΍͍͢
    QSJODJQMFTPGBOJNBUJPO
    IUUQUIFQSJODJQMFTUVNCMSDPN

    View full-size slide

  31. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊
    Կ͔ʹԡ͞Εͯಈ͖࢝ΊΔ΋ͷɺ
    ஍໘ͷ఍߅Λड͚ͯࢭ·Δ΋ͷɺ
    ࣗ෼Ͱಈ͖ग़ͯ͠ɺࢭ·Δ΋ͷɺ
    ͋ͨΓ͕ԡ͓͖͍͑ͯͨ͞ϙΠϯτͰ͢ɻ

    View full-size slide

  32. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊
    ը໘͔Βফ͍͑ͯ͘ཁૉͱ͔
    Կ͔ʹԡ͞Εͯಈ͖࢝ΊΔ΋ͷ
    FBTFJO

    View full-size slide

  33. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊
    ը໘ʹೖͬͯ͘Δཁૉͱ͔ɺϘλϯͱ͔
    ஍໘ͳΜ͔ͷ఍߅Λड͚ͯࢭ·Δ΋ͷ
    FBTFPVU

    View full-size slide

  34. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊
    ৳ͼॖΈ͢ΔݕࡧϑΥʔϜͱ͔
    ࣗ෼Ͱಈ͖ग़ͯ͠ɺࢭ·Δ΋ͷ
    FBTFJOPVU

    View full-size slide

  35. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊
    Tఔ౓ͷಈ͖Ͱ͸ҧ͍΋Θ͔Γʹ͍͘͠ʜ
    ͱ͍͍ͭͭ΋ɺ$44ͷΞχϝʔγϣϯͰ͸
    TJOF΍FYQPͳͲͷΧʔϒͷҧ͍ʹ͍ͭͯ͸
    ͋·Γؾʹ͍͍ͤͣͩͨ͸ϓϦηοτʹ͋Δ΍ͭ࢖͏ͷ͕ྑͦ͞͏

    View full-size slide

  36. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊
    ҰԠͬ͘͟Γͱઆ໌Λ͓ͯ͘͠ͱ
    ೋɺ
    ࡾɺ
    ࢛ɺ
    ޒ࣍ؔ਺ *-quad, *-cubic, *-quart, *-quint
    ࡾ֯ؔ਺ *-sine
    ٸܹͳ *-expo
    ԁ *-circ

    View full-size slide

  37. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊
    FBTFJORVBE͸෺͕མͪΔಈ͖
    2VBE
    མԼͷಈ͖

    View full-size slide

  38. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊
    RVBE͔ΒRVJOU͸ڧ౓͕ͪΐͱUҧ͍·͢
    ؇΍͔ ܹ͍͠
    Quad Cubic Quart Quint

    View full-size slide

  39. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊
    FBTFJOPVUTJOF͸ৼΓࢠͷಈ͖
    4JOF
    ৼΓࢠͷಈ͖

    View full-size slide

  40. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊
    FBTFJOFYQPɺFBTFPVUFYQPɺFBTFJOPVUFYQP͸ٸܹͳಈ͖
    &YQP
    ٸͳಈ͖

    View full-size slide

  41. ΠʔδϯάɺͲΕΛ࢖ͬͨΒΑ͍͔Θ͔Βͳ͍໰୊
    Ҏ্Λ౿·͑ͯߟ͑ΔͱͲΕΛબͿͱྑ͍͔ܾΊ΍͘͢ͳΓ·͢
    IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNFBTJOH
    &BTJOH'VODUJPOT

    View full-size slide

  42. γϯϓϧͳ3BJMTΞϓϦέʔγϣϯʹҰ࡬Ճ͑Δɺͪΐ͍଍͠ΞχϝʔγϣϯϨγϐ
    3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳ
    ͪΐ͍଍͠Ξχϝʔγϣϯ$44

    View full-size slide

  43. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44
    Ϙλϯཁૉ
    IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNCVUUPO

    View full-size slide

  44. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44
    Ξχϝʔγϣϯͷ෦෼ʢݟ΍͍͢Α͏ʹσβΠϯ෦෼͸NJYJOʹ෼͚͓͖ͯ·ͨ͠ʣ
    .button {
    @include button-base;
    @include font;
    transition: all 0.2s ease-out;
    }

    View full-size slide

  45. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44
    σβΠϯଆͷελΠϧ ݟӫ͑Λม͚͑ͨΕ͹ͪ͜ΒΛมߋ

    @mixin button-base {
    $c: #82ccdd;
    $t: .2rem;
    display: inline-block;
    position: relative;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    border: none;
    outline: none;
    margin: 0;
    padding: .5rem 2rem;
    border-radius: 4rem;
    transform: translateY(-$t);
    background-color: $c;
    color: #fff;
    box-shadow: 0 $t 0 darken($c, 5%);
    &:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(0);
    box-shadow: 0 0 0 $c;
    background-color: darken($c, 2%);
    }
    }
    @mixin font($size: 1rem, $line-height:
    normal, $weight: 400) {
    font-family: YuGothic, 'ᕟΰγοΫ',
    sans-serif;
    font-size: $size;
    font-weight: $weight;
    line-height: $line-height;
    }

    View full-size slide

  46. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44
    Πϯϓοτཁૉ
    IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNJOQVU

    View full-size slide

  47. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44
    Ξχϝʔγϣϯ෦෼
    @keyframes anim-shake {
    $m: .3rem;
    0% {
    transform: translate(0, 0) rotate(0deg);
    }
    25% {
    transform: translate(-$m, 0) rotate(0deg);
    }
    50% {
    transform: translate(0, 0) rotate(0deg);
    }
    75% {
    transform: translate($m, 0) rotate(0deg);
    }
    100% {
    transform: translate(0, 0) rotate(0deg);
    }
    }
    .input {
    @include input-base;
    @include font(.9375rem);
    &.is-action {
    $c: $color-red;
    animation: anim-shake .2s linear 4;
    border-color: $c;
    &:focus {
    border-color: $c;
    }
    }
    }

    View full-size slide

  48. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44
    σβΠϯଆͷελΠϧ ݟӫ͑Λม͚͑ͨΕ͹ͪ͜ΒΛมߋ

    @mixin input-base {
    $c: #82ccdd;
    display: inline-block;
    box-sizing: border-box;
    appearance: none;
    border: none;
    outline: none;
    text-decoration: none;
    line-height: 1 !important;
    background-image: none;
    margin: 0;
    padding: .6rem .8rem;
    border: 1px solid #eee;
    border-radius: .2rem;
    width: 100%;
    background-color: #fff;
    &:focus {
    border: 1px solid $c;
    outline: none;
    }
    &::placeholder {
    font-size: inherit;
    color: #ddd;
    }
    }

    View full-size slide

  49. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44
    ༨ஊͰ͕͢ɺEFWJTFͷೝূը໘ͱ͔ɺखൈ͖͠Α͏ͱࢥͬͨΒSBJMTHEFWJTFWJFXT͠ͳͯ͘΋$44͚ͩ
    ͰશવσβΠϯ͕ೖΕΒΕ·͢
    .field {
    input[type=text],
    input[type=email],
    input[type=password] {
    @extend .input;
    }
    }
    .actions {
    input {
    @extend .button;
    width: 100%;
    }
    }

    View full-size slide

  50. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44
    Τϥʔͱ͔Ͱ่ΕͨΓ͢Δͷͱ͔΋ɺ
    ͜ͷลʹεϖʔε͕Ͱ͖ͨΓ
    ͯ͠Δͷ͸ҙਤ͠ͳ͍CS͕ٸʹೖͬͯ͘
    Δͷ͕໰୊

    View full-size slide

  51. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44
    $44͚ͩͰ΋Ҋ֎؆୯ʹௐ੔͢Δࣄ͕ՄೳͰ͢
    .field {
    label {
    + br {
    display: none;
    }
    }
    input[type=checkbox] {
    + label {
    display: inline-block;
    }
    }
    i {
    + br {
    display: none;
    }
    }
    }
    .field_with_errors {
    i {
    display: block;
    }
    + em {
    display: inline-block;
    }
    + br {
    display: none;
    }
    }

    View full-size slide

  52. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44
    ͋ͱ͸ࡉ͔͍ௐ੔ΛೖΕ͓͍ͯͨΒʜʢޙͰHJUIVCʹΞοϓ͓͖ͯ͠·͢ʜʣ
    .field {
    margin-top: 1rem;
    label {
    padding-bottom: .2rem;
    display: block;
    + br {
    display: none;
    }
    }
    input[type=text],
    input[type=email],
    input[type=password] {
    @extend .input;
    }
    input[type=checkbox] {
    margin-right: .2rem;
    cursor: pointer;
    + label {
    display: inline-block;
    cursor: pointer;
    }
    }
    em {
    @include font(.875rem);
    }
    i {
    @include font(.875rem);
    padding-bottom: .4rem;
    display: block;
    + br {
    display: none;
    }
    }
    }
    .field_with_errors {
    $c: $color-red;
    label {
    color: $c;
    margin-bottom: 0;
    }
    i {
    @include font(.875rem);
    font-style: normal;
    color: $color-red;
    padding-bottom: .4rem;
    display: block;
    &::before {
    @include fa('\f071');
    margin-right: .4rem;
    }
    }
    + em {
    display: inline-block;
    margin-bottom: .5rem;
    }
    + br {
    display: none;
    }
    }
    #error_explanation {
    $c: $color-red;
    background-color: lighten($c, 30%);
    border-bottom: 1px solid lighten($c, 28%);
    color: $c;
    margin-top: 1rem;
    padding: .5rem 1rem;
    h2 {
    @include font(.875rem, 1.2rem, bold);
    margin: 0;
    }
    ul {
    margin: .1rem 0 0 1.5rem;
    padding: 0;
    li {
    @include font(.9375rem);
    margin-top: .3rem;
    }
    }
    }
    .actions {
    margin-top: 1rem;
    text-align: center;
    input {
    @extend .button;
    width: 100%;
    }
    }

    View full-size slide

  53. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44
    ͜͏͍ͬͨͷ͕

    View full-size slide

  54. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44
    ͜Μͳ͔Μ͡ʹ
    IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNVTFSTTJHO@VQ

    View full-size slide

  55. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44
    ௨஌ཁૉ
    IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNOPUJDF

    View full-size slide

  56. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44
    Ξχϝʔγϣϯͷ෦෼
    @keyframes anim-notice {
    0% {
    transform: translateY(-100%);
    opacity: 0;
    animation-timing-function: ease-out;
    }
    20% {
    transform: translateY(0%);
    opacity: 1;
    }
    80% {
    transform: translateY(0%);
    opacity: 1;
    animation-timing-function: ease-in;
    }
    100% {
    transform: translateY(-100%);
    opacity: 0;
    }
    }
    .notice {
    @include font;
    @include notice-base;
    animation: anim-notice 3s;
    }

    View full-size slide

  57. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44
    σβΠϯͷ෦෼
    @mixin notice-base($c: #82ccdd) {
    display: block;
    margin: 0;
    padding: 1rem;
    position: fixed;
    width: 300px;
    top: 1rem;
    left: calc(50% - 150px);
    text-align: center;
    background-color: lighten($c, 25%);
    border-bottom: 1px solid lighten($c, 28%);
    color: $c;
    transform: translateY(-100%);
    opacity: 0;
    box-shadow: 0 5px 10px rgba(darken($c, 30%), .1);
    border-radius: .4rem;
    &:empty {
    display: none;
    }
    }

    View full-size slide

  58. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44
    ͱ͍͏Θ͚Ͱ؆୯ʹ࢖͑Δ$44ΞχϝʔγϣϯͷখٕΛ
    ͝঺հ͍͖ͤͯͨͩ͞·ͨ͠

    View full-size slide

  59. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44
    ϦϙδτϦ͸ͪ͜Β

    NJYJO͸͜ͷ͋ͨΓ
    IUUQTHJUIVCDPNJTSSBJMTENTBNQMFQSPKFDUCMPCNBTUFSBQQBTTFUTTUZMFTIFFUTTUZMFTDPOpH
    @NJYJOTTDTT
    IUUQTHJUIVCDPNJTSSBJMTENTBNQMFQSPKFDUCMPCNBTUFSBQQBTTFUTTUZMFTIFFUTBQQMJDBUJPOTDTT
    Ξχϝʔγϣϯؔ࿈͸͜ͷ͋ͨΓ
    IUUQTHJUIVCDPNJTSSBJMTENTBNQMFQSPKFDU

    View full-size slide

  60. 3BJMTͷαΠτͰؾܰʹ࢖͑ͦ͏ͳͪΐ͍଍͠Ξχϝʔγϣϯ$44
    ͓ࢼ͠Ͱ࡞ΔΞϓϦͷϓϩτλΠϐϯά΍ϋοΧιϯ΍ͳΜ͔ͷ
    εϐʔυউෛͷ৔Ͱ׆༂͢Δɺϋζ

    View full-size slide

  61. ͍͞͝ʹ
    ීஈͷҊ݅Ͱ͸ϝϯςφϯεͷࣄΛߟ͑ͯ
    ͦΕͧΕͷαΠτʹ͋ͬͨॻ͖ํΛ͠·͢

    View full-size slide

  62. ͍͞͝ʹ
    ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View full-size slide