Webデザインのトレンド

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

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Ͱ౳ഒࢦఆΛ͠·͢ɻ