「違いを生み出す動きの解像度」池田 亮

2018年6月22日に行われたDIST.21 「クリエイティブコーディングで生み出すWebデザインの世界観」のスライドです。

■概要
近年のWebデザインはマルチデバイス時代を迎え、フラットデザインやマテリアルデザインが台頭しています。あらゆるデバイスに情報や体験を届けられるようになった反面、ふとするとオリジナリティに欠けた均一的なビジュアルになりがちな一面も確かにあります。

一方、openFrameworksやProcessingなどを使ったクリエイティブコーディングの世界では、創造的な表現を目的としたシーンが盛り上がりを見せています。はたしてWebデザインには、クリエイティブコーディングのような考え方は一切不要なのでしょうか？　作りやすさと独自性。使いやすさと創造性。これらは決して対立軸ではないはずです。

DIST.21では、クリエイティビティの最前線で活躍するデザイナー、デベロッパーをお招きし、クリエイティブコーディングで生み出すWebデザインの世界観について語り合います。

■DISTについて
DISTは、職種や技術の垣根を越えてWebに関わるすべての人を結ぶクリエイティブコミュニティです。

Web制作関連をテーマとした勉強会を、2ヶ月に1回程度のペースで開催しています。デザイナー、エンジニア、ディレクターなどあらゆる立場の方に参加していただき、その知の共有、研鑽ならびに参加者同士の交流を目的としています。

■公式サイト
http://dist.tokyo

■GitHubリポジトリ
https://github.com/448jp/dist

Transcript

1. ҧ͍ΛੜΈग़͢ಈ͖ͷղ૾౓ %*45
2. ஑ా
   ྄ w ϑϦʔϥϯεͷϑϩϯτΤϯυΤϯδχΞ
   w ΠϯλϥΫςΟϒͳ8FCαΠτͷ࣮૷͕ಘҙ
   w ෋ࢁࡏॅ !JLFSZPV ࣗݾ঺հ
3. ࣗݾ঺հ σβΠϯ΍ίϯηϓτʹ߹͏ʮಈ͖ʯΛߟ࣮͑ͯ૷͢Δ࢓ࣄͯ͠·͢
4. ࿩͢͜ͱ ಈ͖ͷ࡞Γํ
5. ࿩͢͜ͱ ͜͏͍ͬͨҊ݅ͰΑ͘΍Δಈ͖ͷ࡞Γํ w ཁ๬͕ந৅తͰΰʔϧ͕ݟ͑ͮΒ͍΋ͷ
   w ίʔυͷΈͰಈ͖Λ͚ͭΔඞཁ͕͋Δ΋ͷ
   w എܠͳͲͷେ͖͍ཁૉ
6. ࿩͢͜ͱ w ٿମ͕ͨ͘͞Μදࣔ͞ΕͯΔ
   w σδλϧɺαΠόʔͬΆ͍ײ͡
   w എܠɺ΋͘͠͸501ͷϝΠϯϏδϡΞϧͰ࢖༻ ͜Ε͔Β࡞Δ΋ͷ Ծఆ
7. ಈ͖ͷ࡞Γํ ୯७ղܾύʔτ ࢼߦࡨޡύʔτ ੍࡞ͷྲྀΕ
8. ಈ͖ͷ࡞Γํ ୯७ղܾύʔτ ੍࡞ͷྲྀΕ w ཁ๬ʹରͯ͠ͷࠜװ෦෼Λղܾ͍ͯ͘͠
   w ݟͨ໨͸ؾʹ͠ͳ͍
9. ٿମ͸Ͳ͏΍ͬͯදࣔ͢Δͷ͔ ಈ͖ͷ࡞Γํ wXFCHMΛ࢖͏ͷ͔
   wDTTΛ࢖͏ͷ͔
   wXFCHMͳΒϥΠϒϥϦ͸ԿΛ࢖͏ͷ͔
10. ٿମΛͲͷ͘Β͍දࣔ͢Δͷ͔ ಈ͖ͷ࡞Γํ wͨ͘͞Μදࣔͤ͞Δํ๏
    wͲͷ͘Β͍දࣔͰ͖Δͷ͔
    wݸ਺ͷ࠷େ஋ͷݕূ
11. ಈ͖ͷ࡞Γํ ࢼߦࡨޡύʔτ ੍࡞ͷྲྀΕ w ؊ͱͳΔύʔτ
    w ʮಈ͖ͷখٕʯΛ૊Έ߹Θ͍ͤͯ͘
    w ͍͍ײ͡ʹͳΔ·Ͱࢼߦࡨޡ͢Δ
12. ಈ͖ͷখٕ ಈ͖ͷ࡞Γํ
13. ͩΜͩΜͱۙͮ͘ಈ͖ ಈ͖ͷ࡞Γํ
14. ্ԼҠಈ ಈ͖ͷ࡞Γํ ԁͷಈ͖
15. ύʔςΟΫϧͷಈ͖ ಈ͖ͷ࡞Γํ
16. ͻͬͺΔಈ͖ ಈ͖ͷ࡞Γํ
17. ಈ͖ͷখٕ ಈ͖ͷ࡞Γํ খن໛͚ͩͲॏཁͳಈ͖ͷςΫχοΫ
18. ಈ͖ͷ࡞Γํ ͍͍ײ͡ͷಈ͖ʁ
19. ༷ʑͳʮಈ͖ͷখٕʯͷෳ߹ମ ಈ͖ͷ࡞Γํ Ͱɺ͋Δ͜ͱ͕ଟ͍
20. ͩΜͩΜͱ໨త஋ʹۙͮ͘ಈ͖ ಈ͖ͷ࡞Γํ
21. ͩΜͩΜͱ্Լӡಈ͠ͳ͕Β໨త஋ʹۙͮ͘ಈ͖ ಈ͖ͷ࡞Γํ
22. ͩΜͩΜͱ্Լӡಈͱ֦େॖখ͠ͳ͕Β໨త஋ʹۙͮ͘ಈ͖ ಈ͖ͷ࡞Γํ
23. ʮಈ͖ͷখٕʯ͕ෳ਺૊Έ߹Θͬͨ͞ಈ͖ͷํ͕͍͍ײ͡ ಈ͖ͷ࡞Γํ Ͱɺ͋Δ͜ͱ͕ଟ͍
24. ಈ͖ͷ࡞Γํ ୯७ղܾύʔτ ࢼߦࡨޡύʔτ ͍͍ײ͡ʹͳΔখٕͷ૊Έ߹ΘͤΛࢼߦࡨޡ͍ͯ͘͠
25. σϞ ಈ͖ͷ࡞Γํ HJUIVCDPNJLFSZPVEJTU
26. ͍͍ײ͡ʹ૊Έ߹ΘͤΒΕΔখٕͷ֮͑ํ ಈ͖ͷ࡞Γํ
27. ݟͨ໨Λҙࣝͨ͠࡞඼Λͨ͘͞Μ࡞Δ ಈ͖ͷ࡞Γํ
28. x += (tgX - x) * 0.2; ಈ͖ͷ࡞Γํ ͩΜͩΜۙͮ͘ಈ͖Λ͢Δίʔυ
29. ࡞඼ྫ ಈ͖ͷ࡞Γํ
30. ಈ͖ͷ࡞Γํ ࡞඼ྫ ഑৭΍ܗͳͲݟͨ໨Λҙࣝͯ͠ࢼߦࡨޡ͢Δ
31. ίʔυͱө૾ ࡞඼ Λඥ͚֮ͮͯ͑Δ͜ͱͰ͖Δ ಈ͖ͷ࡞Γํ ίʔυ ө૾" ө૾# ө૾$
32. ಈ͖ͷ࡞Γํ ͩΜͩΜۙͮ͘
33. খٕΛ࡞඼Խ͓ͯ͘͠ϝϦοτ ಈ͖ͷ࡞Γํ w ө૾͕ඥͮ͘ͷͰ૊Έ߹Θͤͷީิͱͯ͠୳͠΍͘͢ͳΔ
    w ύϥϝʔλௐ੔ޙͷಈ͖͕ײ֮తʹΘ͔ΔͷͰ૊Έ߹Θͤ΍͘͢ͳΔ
34. ͔ͬ͜Α͘͢ΔͨΊͷԠ༻ྗ͕͖ͭɺ
    ΑΓ࣮ઓతͰ࢖͑ΔখٕʹͳΔʂʂ ಈ͖ͷ࡞Γํ ݟͨ໨Λҙࣝͨ͠࡞඼Λͨ͘͞Μ࡞Δ
35. ૊Έ߹Θͤͨখٕʹ͸ͲͷΑ͏ͳө૾͕ඥ͍͍͔ͮͯͨ ಈ͖ͷ࡞Γํ
36. ಈ͖ͷ࡞Γํ ٿମʹಈ͖͚͍ͭͨʂ
37. ಈ͖ͷ࡞Γํ ্Լӡಈ ީิ ީิ
38. ಈ͖ͷ࡞Γํ ্Լӡಈ  ٿମʹಈ͖͚͍ͭͨʂ ͍͍ײ͡ʹௐ੔
39. ಈ͖ͷ࡞Γํ ٿମαΠζʹϝϦϋϦΛʂ
40. ಈ͖ͷ࡞Γํ ͨ·ʹΊͬͪΌখ͘͢͞Δ ީิ ީิ
41. ಈ͖ͷ࡞Γํ ͨ·ʹখ͍͞  ٿମαΠζʹϝϦϋϦΛʂ ͍͍ײ͡ʹௐ੔
42. ಈ͖ͷ࡞Γํ ΋ͬͱμΠφϛοΫʹʂ
43. ಈ͖ͷ࡞Γํ ީิ ީิ ࠲ඪճస
44. ಈ͖ͷ࡞Γํ ࠲ඪճస  ΋ͬͱμΠφϛοΫʹʂ ͍͍ײ͡ʹௐ੔
45. ಈ͖ͷ࡞Γํ ϊΠζΛՃ͍͑ͨʂ
46. ಈ͖ͷ࡞Γํ ީิ ީิ ͨ·ʹεέʔϧΊͬͪΌม͑Δ
47. ಈ͖ͷ࡞Γํ ͨ·ʹεέʔϧม͑Δ  ϊΠζΛՃ͍͑ͨʂ ͍͍ײ͡ʹௐ੔
48. ಈ͖ͷ࡞Γํ ৭ΛΧϥϑϧʹ͍ͨ͠
49. ಈ͖ͷ࡞Γํ ީิ ީิ )47͍͡Δ
50. ಈ͖ͷ࡞Γํ )47͍͡Δ  Χϥϑϧʹʂ ͍͍ײ͡ʹௐ੔
51. ಈ͖ͷ࡞Γํ ΋ͬͱ৭ʹมԽΛʂ
52. ಈ͖ͷ࡞Γํ ީิ ީิ ϥΠτಈ͔͢
53. ಈ͖ͷ࡞Γํ ϥΠτಈ͔͢  ΋ͬͱ৭ʹมԽΛʂ ͍͍ײ͡ʹௐ੔
54. ಈ͖ͷ࡞Γํ ׬੒
55. ಈ͖ͷ࡞Γํ ࡞඼Λ࡞Δ͜ͱͰ਎ʹ͍ͭͨখٕ͸ɺͱͯ΋࢖͍উख͕͍͍ʂʂ
56. ಈ͖ͷ࡞Γํ ࡞඼࡞Γͷश׳Խ
57. ಈ͖ͷ࡞Γํ Πϯλϥձ
58. ಈ͖ͷ࡞Γํ Πϯλϥձ w ΠϯλϥΫςΟϒίϯςϯπ࡞Δͱ͖ʹຊ౰ʹ࢖͑ΔখٕΛ૿΍͢
    w Կ͔খٕΛఏڙ
    w ͦͷখٕΛ࢖ͬͨ࡞඼Λ࡞ͬͯൃද
    w TPOJDKBNͷϝϯόʔͱෆఆظͰ։࠵
    w ϝΠϯλʔήοτ͸ීஈίʔυͰಈ͖࡞Βͳ͍ਓ
59. ಈ͖ͷ࡞Γํ ୈ̎ճΠϯλϥձ ςʔϚʮ൓ෳʯ
60. খٕͷఏڙ ಈ͖ͷ࡞Γํ
61. ࡞඼ྫͷఏڙ ಈ͖ͷ࡞Γํ
62. ࡞඼Λൃද ಈ͖ͷ࡞Γํ
63. ϒϩάʹൃද࣌ͷࢿྉ·ͱΊͯ͋Γ·͢ʂ ಈ͖ͷ࡞Γํ IUUQJLFSZPVIBUFOBCMPHDPN
64. ·ͱΊ
65. ୯७ղܾύʔτ ·ͱΊ ཁ๬ʹର͢Δࠜװ෦෼Λղܾ͢ΔͨΊͷύʔτ
66. ࢼߦࡨޡύʔτ ·ͱΊ ಈ͖ͷখٕΛ෇͚଍ͯ͠ɺ
    ͍͍ײ͡ʹͳΔ·Ͱ෇͚଍͍ͯ͘͠
    
67. ಈ͖ͷখٕ ·ͱΊ ݟͨ໨Λҙࣝͨ͠࡞඼Λͨ͘͞Μ࡞Δ
    ࡞඼Λ࡞Δ͜ͱͰ֮͑ͨখٕ͸࢖͍উख͕Α͍
    
68. ίʔυͰಈ͖࡞Δͷָ͍͠Ͱ͢ʂͥͻʂ ·ͱΊ
69. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ