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

Webデザインのトレンド

 Webデザインのトレンド

このドキュメントは、事業主・起業家向けのWebデザイン研究資料です。デザイナー向けではありませんので、詳細な解説はありません。

Designsprint

June 09, 2016
Tweet

More Decks by Designsprint

Other Decks in Design

Transcript

  1. ※هࡌ͍ͯ͠Διϑτ΢ΣΞ΍αʔϏεɺίʔσΟϯάٕज़౳͸2015೥3݄12೔ݱࡏͷ΋ͷͰ͋ΓɺҎ߱ɺ࢓༷มߋʹΑΓ໊শ΍ը໘Ґஔ͕มߋ͞Ε͍ͯΔ৔߹͕͋Γ·͢ɻ
    ࣄۀओɾىۀՈ޲͚WebσβΠϯݚڀࢿྉ
    re-webdesigning.com
    Some rights reserved.
    WebσβΠϯͷ
    τϨϯυ
    Նຊ݈࢘

    View full-size slide

  2. γϯάϧϖʔδͱ͸ʁ

    View full-size slide


  3. ͔͜͜ΒֶͿ͜ͱ
    γϯάϧϖʔδͱ͸ʁ
    γϯάϧϖʔδͷ5ͭͷύλʔϯ
    γϯάϧϖʔδͷಛ௃
    ̍
    ̎
    ̏
    ͦͷଞͷτϨϯυ
    ̐

    View full-size slide


  4. INDEX
    - γϯάϧϖʔδͱ͸ʁ
    ̎ɽγϯάϧϖʔδͷྺ࢙
    ̍ɽγϯάϧϖʔδͷجૅ஌ࣝ
    - γϯάϧϖʔδͷಛ௃
    ̎ɽγϯάϧϖʔδͷ͓ܾ·Γύλʔϯ
    ̍ɽγϯάϧϖʔδͷ໨త
    ̏ɽϥϯσΟϯάϖʔδͱͲ͕͜ҧ͏ʁ
    ̏ɽγϯάϧϖʔδ͕૿͑࢝Ίͨཧ༝

    View full-size slide


  5. γϯάϧϖʔδͷجૅ஌ࣝ
    γϯάϧϖʔδͱ͸̍ϖʔδͰ׬݁ͨ͠“αΠτ”ɻ
    ̍ϖʔδͷதʹॏཁͳίϯςϯπ͕΄ͱΜͲ໢ཏ͞Ε
    ΔΑ͏ʹσβΠϯʢߏ੒ɾઃܭʣ͞Εͨɺಠཱͨ͠α
    ΠτɻάϩʔόϧφϏήʔγϣϯ͔Βϖʔδ಺ϦϯΫ
    Ͱ֤ίϯςϯπʹҠಈ͢Δ͜ͱ͕Ͱ͖Δɻ

    ϫϯϖʔδɺγϯάϧϖʔδWebαΠτɺγϯάϧ
    ϖʔδ׬݁ܕαΠτɺ΃ϥΠνͳͲɺ͍Ζ͍Ζͳ໊শ
    Ͱݺ͹Ε͍ͯͯɺܾ·ͬͨݺͼํ͸ͳ͍ɻ

    ̴̬̱ΞϓϦέʔγϣϯɺήʔϜͳͲʹଟ༻͞ΕΔγϯάϧϖʔδΞϓϦ
    έʔγϣϯʢSPAʣͱ͸ࢦ͍ͯ͠Δ΋ͷ͕શ͘ҧ͏ͷͰ஫ҙ͕ඞཁɻ

    View full-size slide


  6. γϯάϧϖʔδͷྺ࢙
    ൃ঵ɺ͍͔ͭΒɾͲ͕͜࠷ॳ͔Β͸ɺ෼͔Βͳ͍ɻ
    2011೥͝Ζ͔ΒӳޠݍͰࣗવൃੜతʹ૿͑͸͡Ίͨɻ

    ೔ຊͰ͸2013೥͝Ζ͔Β૿͑࢝Ί͕ͨɺ·ͩ·ͩਁಁͨ͠
    ͱ͸ݴ͑ͳ͍ɻ͜Ε͔Βೝ஌౓͕ߴ·ΔͱࢥΘΕΔɻ
    1992೥9݄30೔ʹ೔ຊॳͷ΢Σϒα
    ΠτΛ্ཱͪ͛ͨͷ͸ɺἚ৓ݝͭ
    ͘͹ࢢʹ͋Δʰจ෦লߴΤωϧΪ
    ʔ෺ཧֶݚڀॴʢKEKʣʱʢݱࡏͷ
    ʰେֶڞಉར༻ػؔ๏ਓɾߴΤω
    ϧΪʔՃ଎ثݚڀػߏʱʣ͕ͩɺ
    αΠτͰ͸ͳ͘ɺ࣮͸ϦϯΫͷͳ
    ͍୯Ұϖʔδͩͬͨɻ
    ೔ຊॳͷ΢ΣϒαΠτ΋“γϯάϧϖʔδ”ͩͬͨɻ
    TOPICS

    View full-size slide


  7. γϯάϧϖʔδ͕૿͑࢝Ίͨཧ༝
    ʮࠓ͔ͩΒʯͱ͍͏ཧ༝͕໌֬ʹ͋Δ
    - අ༻ͱ੒Ռ෺ͷόϥϯε͕ஸ౓Α͍
    - JavaScriptʢjQueryʣɺCSSͷٕज़ൃୡɾ੒ख़Խ
    - ϓϩδΣΫτͷ୹ೲظԽ͕૿͍͑ͯΔ
    - ϞόΠϧϑΝʔετʹ͢Δͱɺػೳతʹͦ͏ͳΔ
    - ̪̭ͷৢ੒Խͱ͏·͘Ϛονϯά͍ͯ͠Δ
    - ϚʔέςΟϯάઓུ͕γϯϓϧʹͳ͖ͬͯͨ
    - γϯϓϧͳͷͰޮՌ͕ग़΍͍͢ɾଌΓ΍͍͢

    View full-size slide

  8. γϯάϧϖʔδͷಛ௃

    View full-size slide


  9. ͔͜͜ΒֶͿ͜ͱ
    γϯάϧϖʔδͱ͸ʁ
    γϯάϧϖʔδͷ5ͭͷύλʔϯ
    γϯάϧϖʔδͷಛ௃
    ̍
    ̎
    ̏
    ͦͷଞͷτϨϯυ
    ̐

    View full-size slide


  10. γϯάϧϖʔδσβΠϯͷ໨త
    ࢖͏໨త͕ݶΒΕ͍ͯΔ
    - ϕϯνϟʔɺελʔτΞοϓاۀͷίʔϙϨΠταΠτ
    - ظؒݶఆΠϕϯτɾൢଅαΠτ
    - λϨϯτ΍ΞʔςΟετͷެࣜαΠτ
    - ঎඼΍αʔϏεͷεϖγϟϧαΠτ
    ଟϖʔδΑΓ΋අ༻͕཈͑ΒΕɺظؒमྃޙʹԼ͛Δͷ΋ϥΫ
    ൺֱతΧϯλϯʹ࡞Εͯϝϯς͕ϥΫɻઌਐతͳΠϝʔδ͕͢Δ
    γϯϓϧʹ؍ͤΒΕɺ̍ϖʔδͰ׬͍݁ͯ͠Δͱ࡞ۀ͕ϥΫ
    ϒϩά΍ձһϖʔδͷத৺ͱͯ͠ద੾ɻը໘ભҠͷΪϛοΫ͕Τϯλ
    ϝײΛৢ੒

    View full-size slide


  11. γϯάϧϖʔδͷ͓ܾ·Γύλʔϯ
    ͜Εͧ“γϯάϧϖʔδ”ͱ͍͏ಛ௃͕͋Δ
    എܠ̍ຕը૾·ͨ͸എܠಈըΛϑΝʔ
    ετϏϡʔʹ഑ஔ
    ̍
    άϩφϏ͸ը໘࠷্෦ʹ഑ஔ
    ̎
    େ͖ΊจࣈαΠζ
    ̏
    ΞΠίϯͷϙΠϯτ׆༻
    ̐
    ޿ΊͷϗϫΠτεϖʔε
    ̑
    γϯϓϧͰ΄ͲΑ͍৘ใྔ
    ̒
    جຊ͸ηϯλʔἧ͑Ͱ̍ΧϥϜ
    ̓
    γϯάϧϖʔδσβΠϯ͸

    Ӭٱʹෆ໓Ͱ͢ʂ
    The Best Website Design.
    ̖site.
    ࠷৽ٕज़ʹΑΔ

    εϜʔζͳಈ͖
    ઐଐελοϑʹ

    ΑΔαϙʔτ
    ޮՌΛݕূࡁΈ

    ͷ҆৺Ϛʔέ
    ෯޿͍ۀछɾۀଶʹࢧ࣋͞ΕΔ

    ސ٬ຊҐͷखް͍αϙʔτɻ
    Ϣʔβʔࢥ͍ͷWebσβΠϯͱ͸ɺ
    ͍͍ͬͨԿͰ͠ΐ͏ɻجຊʹཱͪฦ

    View full-size slide


  12. ϥϯσΟϯάϖʔδͱͲ͕͜ҧ͏ʁ
    ࣅ͍ͯΔ͕ɺػೳ໘ɾϚʔέςΟϯά໘Ͱ͸શ͘ผ΋ͷ
    - ϥϯσΟϯάϖʔδ
    ػೳ໘
    جຊతʹ͸άϩʔόϧφϏήʔγϣϯ͕ͳ͘ɺίϯςϯπ͸ϖʔδͷ
    ্͔ΒԼ·Ͱͻͱଓ͖ʹͳ͍ͬͯΔɻ
    ϚʔέςΟϯά໘
    ̪̭(ϢʔβɾΤΫεϖϦΤϯε)͸ߟྀ͠ͳ͍ɻϝʔϧϚΨδϯͷΦ
    ϓτΠϯ΍঎඼ߪೖͳͲΦϑΝʔ͕͋Δ͜ͱ͕େલఏɻ
    -γϯάϧϖʔδ
    ػೳ໘
    άϩʔόϧφϏήʔγϣϯΛத৺ʹͨ͠ը໘ભҠɻσβΠϯ΋τʔϯ
    δϟϯϓͷը໘ߏ੒Ͱɺίϯςϯπ͕̍ͭ̍ͭଳ͕ॎʹ࿈ͳΔΑ͏
    ʹ෼͔Ε͍ͯΔɻ
    ϚʔέςΟϯά໘
    ̪̭(ϢʔβɾΤΫεϖϦΤϯε)ॏࢹͰɺඞͣ͠΋ΦϑΝʔ͕͋Δͱ
    ͸ݶΒͳ͍ɻ

    View full-size slide

  13. γϯάϧϖʔδͷ

    ̑ͭͷύλʔϯ

    View full-size slide


  14. ͔͜͜ΒֶͿ͜ͱ
    γϯάϧϖʔδͱ͸ʁ
    γϯάϧϖʔδͷ5ͭͷύλʔϯ
    γϯάϧϖʔδͷಛ௃
    ̍
    ̎
    ̏
    ͦͷଞͷτϨϯυ
    ̐

    View full-size slide


  15. INDEX
    - γϯάϧϖʔδͷ̑ͭͷύλʔϯ
    ̗ɽγϯάϧϖʔδʴύϥϥοΫε
    ̖ɽγϯϓϧͳγϯάϧϖʔδ
    ̙ɽγϯάϧϖʔδʴύϥϥοΫεʴৄࡉϖʔδ
    ̘ɽγϯάϧϖʔδʴৄࡉϖʔδ
    ̚ɽมΓछ

    View full-size slide


  16. γϯάϧϖʔδͷ̑ͭͷύλʔϯ
    ̗ɽγϯάϧϖʔδʴύϥϥοΫε
    ̖ɽγϯϓϧͳγϯάϧϖʔδ
    ̙ɽγϯάϧϖʔδʴύϥϥοΫεʴৄࡉϖʔδ
    ̘ɽγϯάϧϖʔδʴৄࡉϖʔδ
    ̚ɽมΓछ

    View full-size slide


  17. ̖ɽγϯϓϧͳγϯάϧϖʔδ
    ̥̘޲͚ʹ͚ͩ࡞ΒΕͨΦʔιυοΫεͳ࡞Γ
    ྫʣ
    ࡾҪॅ༑Ϩδσϯγϟϧɹ2020;͏ͭ͏ͷՈల

    View full-size slide


  18. ̖ɽγϯϓϧͳγϯάϧϖʔδ
    ϨεϙϯγϒͷίʔϙϨΠταΠτ
    ྫʣ
    KAIZEN PLATFORM

    View full-size slide


  19. ̗ɽγϯάϧϖʔδʴύϥϥοΫε
    ࢹ֮ԋग़͕ίϯςϯπྗΛҾ͖ग़͍ͯ͠Δ
    ྫʣ
    NTTίϛϡχέʔγϣϯζɹHTML5 Lab

    View full-size slide


  20. ̗ɽγϯάϧϖʔδʴύϥϥοΫε
    ࢹ֮ԋग़͕ίϯςϯπྗΛҾ͖ग़͍ͯ͠Δ
    ྫʣ
    Ben the Bodyguard(ϝϞΞϓϦͷαΠτ)

    View full-size slide


  21. ̗ɽγϯάϧϖʔδʴύϥϥοΫε
    ࢹ֮ԋग़͕ίϯςϯπྗΛҾ͖ग़͍ͯ͠Δ
    ྫʣ
    OK Studios

    View full-size slide


  22. ̗ɽγϯάϧϖʔδʴύϥϥοΫε
    ʮͳΔ΄ͲʂʯΞΠσΟΞউෛ
    ྫʣ
    Netlash bSeen

    View full-size slide


  23. ̘ɽγϯάϧϖʔδʴৄࡉϖʔδ
    ผϖʔδʹͨ͠ํ͕Α͍ભҠ͸͞Γ͛ͳ͘
    ྫʣ
    SAEKO OFFICIAL WEBSITE

    View full-size slide


  24. ̙ɽγϯάϧϖʔδʴύϥϥοΫεʴৄࡉϖʔδ
    ೿ख͞͸ͳ͍͕ඞવతͳΪϛοΫΛແ೉ʹԡ͍͑ͯ͞Δ
    ྫʣ
    SEOKO ASTRON 2014ϦκʔτݶఆϞσϧ

    View full-size slide


  25. ̚ɽมΓछ
    ಈ͖ͷ໘ന͕͞ݸੑΛৢ͠ग़͍ͯ͠Δϖʔδ
    ྫʣ
    Juvelér Langaard

    View full-size slide


  26. ̚ɽมΓछ
    ϑΥϯτͱಈ͖ͷ৽઱͞Ͱҹ৅ΛਂΊΔૂ͍
    ྫʣ
    BeerCamp at SXSW 2011

    View full-size slide

  27. ͦͷଞͷτϨϯυ

    View full-size slide


  28. ͔͜͜ΒֶͿ͜ͱ
    γϯάϧϖʔδͱ͸ʁ
    γϯάϧϖʔδͷ5ͭͷύλʔϯ
    γϯάϧϖʔδͷಛ௃
    ̍
    ̎
    ̏
    ͦͷଞͷτϨϯυ
    ̐

    View full-size slide


  29. INDEX
    - ͦͷଞͷτϨϯυ
    ̗ɽΰʔετϘλϯ
    ̖ɽແݶεΫϩʔϧ
    ̙ɽશը໘ը૾ɾಈը
    ̘ɽυϩΞʔϘλϯ
    ̚ɽRetinaσΟεϓϨΠରԠ

    View full-size slide


  30. A.ແݶεΫϩʔϧ
    ̍ϖʔδ಺Ͱ͢΂ͯͷ৘ใΛදࣔ
    Yahoo! japan

    View full-size slide


  31. B.ΰʔετϘλϯ
    എܠʹ༹͚ࠐΜͩಁ໌ͳϘλϯ
    ίϨʂ
    I AND C-Cruise

    View full-size slide


  32. C.υϩΞʔϘλϯ
    ࡾຊઢ·ͨ͸ೋຊઢͷφϏήʔγϣϯɻ
    ίϨʂ

    View full-size slide

  33. D.શը໘ը૾ɾಈը
    ͲͷσόΠεͰ΋ը໘͍ͬͺ͍ʹ޿͕Δը૾
    Brindisa Tapas Kitchens

    View full-size slide


  34. E.RetinaσΟεϓϨΠରԠ
    ϩΰϚʔΫ͸࣮ੇΑΓେ͖Ίʹ࡞Δɻ
    "QQMFͷ3FUJOBσΟεϓϨΠ ߴղ૾౓εΫϦʔϯ
    ʹରԠ͍ͯ͠ͳ͍ը૾͸ɺ
    J1IPOFͳͲͷߴղ૾౓σΟεϓϨΠͰ͸ɺ΅΍͚ͯදࣔ͞Εͯ͠·͍·͢ɻ࣮
    ੇΑΓഒɾഒͷαΠζͷը૾Ͱ࡞੒͠ɺ$44Ͱ౳ഒࢦఆΛ͠·͢ɻ

    View full-size slide