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

Webデザインのトレンド

 Webデザインのトレンド

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

F1e359b5fb3358d9051bcfaf43a4e3af?s=128

Designsprint

June 09, 2016
Tweet

Transcript

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

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

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

  4.  INDEX - γϯάϧϖʔδͱ͸ʁ ̎ɽγϯάϧϖʔδͷྺ࢙ ̍ɽγϯάϧϖʔδͷجૅ஌ࣝ - γϯάϧϖʔδͷಛ௃ ̎ɽγϯάϧϖʔδͷ͓ܾ·Γύλʔϯ ̍ɽγϯάϧϖʔδͷ໨త

    ̏ɽϥϯσΟϯάϖʔδͱͲ͕͜ҧ͏ʁ ̏ɽγϯάϧϖʔδ͕૿͑࢝Ίͨཧ༝
  5.  γϯάϧϖʔδͷجૅ஌ࣝ γϯάϧϖʔδͱ͸̍ϖʔδͰ׬݁ͨ͠“αΠτ”ɻ ̍ϖʔδͷதʹॏཁͳίϯςϯπ͕΄ͱΜͲ໢ཏ͞Ε ΔΑ͏ʹσβΠϯʢߏ੒ɾઃܭʣ͞Εͨɺಠཱͨ͠α ΠτɻάϩʔόϧφϏήʔγϣϯ͔Βϖʔδ಺ϦϯΫ Ͱ֤ίϯςϯπʹҠಈ͢Δ͜ͱ͕Ͱ͖Δɻ
 ϫϯϖʔδɺγϯάϧϖʔδWebαΠτɺγϯάϧ ϖʔδ׬݁ܕαΠτɺ΃ϥΠνͳͲɺ͍Ζ͍Ζͳ໊শ Ͱݺ͹Ε͍ͯͯɺܾ·ͬͨݺͼํ͸ͳ͍ɻ


    ̴̬̱ΞϓϦέʔγϣϯɺήʔϜͳͲʹଟ༻͞ΕΔγϯάϧϖʔδΞϓϦ έʔγϣϯʢSPAʣͱ͸ࢦ͍ͯ͠Δ΋ͷ͕શ͘ҧ͏ͷͰ஫ҙ͕ඞཁɻ
  6.  γϯάϧϖʔδͷྺ࢙ ൃ঵ɺ͍͔ͭΒɾͲ͕͜࠷ॳ͔Β͸ɺ෼͔Βͳ͍ɻ 2011೥͝Ζ͔ΒӳޠݍͰࣗવൃੜతʹ૿͑͸͡Ίͨɻ
 ೔ຊͰ͸2013೥͝Ζ͔Β૿͑࢝Ί͕ͨɺ·ͩ·ͩਁಁͨ͠ ͱ͸ݴ͑ͳ͍ɻ͜Ε͔Βೝ஌౓͕ߴ·ΔͱࢥΘΕΔɻ 1992೥9݄30೔ʹ೔ຊॳͷ΢Σϒα ΠτΛ্ཱͪ͛ͨͷ͸ɺἚ৓ݝͭ ͘͹ࢢʹ͋Δʰจ෦লߴΤωϧΪ ʔ෺ཧֶݚڀॴʢKEKʣʱʢݱࡏͷ

    ʰେֶڞಉར༻ػؔ๏ਓɾߴΤω ϧΪʔՃ଎ثݚڀػߏʱʣ͕ͩɺ αΠτͰ͸ͳ͘ɺ࣮͸ϦϯΫͷͳ ͍୯Ұϖʔδͩͬͨɻ ೔ຊॳͷ΢ΣϒαΠτ΋“γϯάϧϖʔδ”ͩͬͨɻ TOPICS
  7.  γϯάϧϖʔδ͕૿͑࢝Ίͨཧ༝ ʮࠓ͔ͩΒʯͱ͍͏ཧ༝͕໌֬ʹ͋Δ - අ༻ͱ੒Ռ෺ͷόϥϯε͕ஸ౓Α͍ - JavaScriptʢjQueryʣɺCSSͷٕज़ൃୡɾ੒ख़Խ - ϓϩδΣΫτͷ୹ೲظԽ͕૿͍͑ͯΔ -

    ϞόΠϧϑΝʔετʹ͢Δͱɺػೳతʹͦ͏ͳΔ - ̪̭ͷৢ੒Խͱ͏·͘Ϛονϯά͍ͯ͠Δ - ϚʔέςΟϯάઓུ͕γϯϓϧʹͳ͖ͬͯͨ - γϯϓϧͳͷͰޮՌ͕ग़΍͍͢ɾଌΓ΍͍͢
  8. γϯάϧϖʔδͷಛ௃

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

  10.  γϯάϧϖʔδσβΠϯͷ໨త ࢖͏໨త͕ݶΒΕ͍ͯΔ - ϕϯνϟʔɺελʔτΞοϓاۀͷίʔϙϨΠταΠτ - ظؒݶఆΠϕϯτɾൢଅαΠτ - λϨϯτ΍ΞʔςΟετͷެࣜαΠτ -

    ঎඼΍αʔϏεͷεϖγϟϧαΠτ ଟϖʔδΑΓ΋අ༻͕཈͑ΒΕɺظؒमྃޙʹԼ͛Δͷ΋ϥΫ ൺֱతΧϯλϯʹ࡞Εͯϝϯς͕ϥΫɻઌਐతͳΠϝʔδ͕͢Δ γϯϓϧʹ؍ͤΒΕɺ̍ϖʔδͰ׬͍݁ͯ͠Δͱ࡞ۀ͕ϥΫ ϒϩά΍ձһϖʔδͷத৺ͱͯ͠ద੾ɻը໘ભҠͷΪϛοΫ͕Τϯλ ϝײΛৢ੒
  11.  γϯάϧϖʔδͷ͓ܾ·Γύλʔϯ ͜Εͧ“γϯάϧϖʔδ”ͱ͍͏ಛ௃͕͋Δ എܠ̍ຕը૾·ͨ͸എܠಈըΛϑΝʔ ετϏϡʔʹ഑ஔ ̍ άϩφϏ͸ը໘࠷্෦ʹ഑ஔ ̎ େ͖ΊจࣈαΠζ ̏

    ΞΠίϯͷϙΠϯτ׆༻ ̐ ޿ΊͷϗϫΠτεϖʔε ̑ γϯϓϧͰ΄ͲΑ͍৘ใྔ ̒ جຊ͸ηϯλʔἧ͑Ͱ̍ΧϥϜ ̓ γϯάϧϖʔδσβΠϯ͸
 Ӭٱʹෆ໓Ͱ͢ʂ The Best Website Design. ̖site. ࠷৽ٕज़ʹΑΔ
 εϜʔζͳಈ͖ ઐଐελοϑʹ
 ΑΔαϙʔτ ޮՌΛݕূࡁΈ
 ͷ҆৺Ϛʔέ ෯޿͍ۀछɾۀଶʹࢧ࣋͞ΕΔ
 ސ٬ຊҐͷखް͍αϙʔτɻ Ϣʔβʔࢥ͍ͷWebσβΠϯͱ͸ɺ ͍͍ͬͨԿͰ͠ΐ͏ɻجຊʹཱͪฦ
  12.  ϥϯσΟϯάϖʔδͱͲ͕͜ҧ͏ʁ ࣅ͍ͯΔ͕ɺػೳ໘ɾϚʔέςΟϯά໘Ͱ͸શ͘ผ΋ͷ - ϥϯσΟϯάϖʔδ ػೳ໘ جຊతʹ͸άϩʔόϧφϏήʔγϣϯ͕ͳ͘ɺίϯςϯπ͸ϖʔδͷ ্͔ΒԼ·Ͱͻͱଓ͖ʹͳ͍ͬͯΔɻ ϚʔέςΟϯά໘ ̪̭(ϢʔβɾΤΫεϖϦΤϯε)͸ߟྀ͠ͳ͍ɻϝʔϧϚΨδϯͷΦ

    ϓτΠϯ΍঎඼ߪೖͳͲΦϑΝʔ͕͋Δ͜ͱ͕େલఏɻ -γϯάϧϖʔδ ػೳ໘ άϩʔόϧφϏήʔγϣϯΛத৺ʹͨ͠ը໘ભҠɻσβΠϯ΋τʔϯ δϟϯϓͷը໘ߏ੒Ͱɺίϯςϯπ͕̍ͭ̍ͭଳ͕ॎʹ࿈ͳΔΑ͏ ʹ෼͔Ε͍ͯΔɻ ϚʔέςΟϯά໘ ̪̭(ϢʔβɾΤΫεϖϦΤϯε)ॏࢹͰɺඞͣ͠΋ΦϑΝʔ͕͋Δͱ ͸ݶΒͳ͍ɻ
  13. γϯάϧϖʔδͷ
 ̑ͭͷύλʔϯ

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

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

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

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

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

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

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

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

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

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

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

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

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

  27. ͦͷଞͷτϨϯυ

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

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

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

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

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

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

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