DIST.42 「クリエイティブコーディングはWebサイトのどこに活きるのか」

2024.02.09 DIST.42 「クリエイティブコーディングで生み出すWebデザインの世界観」の登壇資料。

Transcript

1. DIST.42 2024.02.09 クリエイティブコーディングで 生み出す
 Webデザインの世界観
2. u n s h i f t I n c . C r e a t i v e D e v e l o p e r W e b s i t e h t t p s : / / u n s h i f t . c o . j p / X ( T w i t t e r ) @ _ u n s h i f t I n s t a g r a m @ _ u n s h i f t 長 谷 川 巧 1 人 法 人 / W e b フ ロ ン ト エ ン ド / W e b G L 雰 囲 気 で や って る / 2 y 0 m の 娘 ( か わ い い ) / ク リ エ イ ティ ブ コ ー ディ ン グ / バ ス ケ ッ ト ボ ー ル ク リ エ イ ティ ブ コ ー ディ ン グ ギ ャ ラ リ ー は こ ち ら
3. 作品一覧はこちら X (Twitter) @raf___gallery Instagram @raf___gallery raf イラストとCreative Coding (three.js)を組み合わせた作品 を作っています。
4. 本日のテーマ クリエイティブコーディングは Webサイトのどこに活きるのか
5. そもそも、クリエイティブコーディングって何？ Intro
6. クリエイティブコーディングとは プログラミングによって創造的な表現を生み出すこと Intro
7. では、Webサイト制作における
 クリエイティブコーディングとは？ Intro
8. https://activetheory.net/ Intro
9. いやいや、こんなにすごいものじゃなくても
 皆さん日常的にやってますよね Intro
10. つまり、フロントエンドの実装をしている人は 全員クリエイティブコーダー Intro
11. 普段何気なくやっているクリエイティブコーディングが Webサイトのどういうところに活きてきて どういう働きをしているのか見ていきましょう Intro
12. Index クリエイティブ コーディング 活用ポイント１ ？？？ クリエイティブ コーディング 活用ポイント２ ？？？ クリエイティブ コーディング 活用ポイント３ ？？？ おまけ Webサイトにクリエイティブコーディングを 取り入れる際に注意していること
13. Index クリエイティブ コーディング 活用ポイント１ Webサイトの世界観・ブランドを演出する クリエイティブ コーディング 活用ポイント２ ？？？ クリエイティブ コーディング 活用ポイント３ ？？？ おまけ Webサイトにクリエイティブコーディングを 取り入れる際に注意していること
14. クリエイティブコーディング 活用ポイント１ Webサイトの世界観・ブランドを演出する
15. クリエイティブコーディング活用ポイント１ Webサイトの世界観・ブランドを演出する https://lanway.jp/
16. クリエイティブコーディング活用ポイント１ Webサイトの世界観・ブランドを演出する https://saihoji-kokedera.com/
17. クリエイティブコーディング活用ポイント１ Webサイトの世界観・ブランドを演出する https://ofuro-time.noritz.co.jp/wakasuapp/picturebook/mugen-frontier/
18. クリエイティブコーディング活用ポイント１ Webサイトの世界観・ブランドを演出する サイトの内容に連動した表現を取り入れることで サイト全体の統一感が向上 ↓ 発信したい世界観・ブランドそのものを表現できる ゲーム・アニメ・映画 寺社仏閣やレストランや食料品など モチーフやコンセプトがはっきりしているサイトで活きる！
19. Index クリエイティブ コーディング 活用ポイント１ Webサイトの世界観・ブランドを演出する クリエイティブ コーディング 活用ポイント２ Webサイトにインパクトを与える クリエイティブ コーディング 活用ポイント３ ？？？ おまけ Webサイトにクリエイティブコーディングを 取り入れる際に注意していること
20. クリエイティブコーディング 活用ポイント２ Webサイトにインパクトを与える
21. クリエイティブコーディング活用ポイント２ Webサイトにインパクトを与える https://tkmh.me/ https://unshift.jp/
22. クリエイティブコーディング活用ポイント２ Webサイトにインパクトを与える https://buttermax.net/
23. クリエイティブコーディング活用ポイント２ Webサイトにインパクトを与える よくわかんないけどすごい
 ↓
 強烈に印象に残る
 ↓
 それ自体がサイトや発信者の個性・強みにつながる 個人のポートフォリオや、 デザイン会社のコーポレートサイトで活きる！
24. Index クリエイティブ コーディング 活用ポイント１ Webサイトの世界観・ブランドを演出する クリエイティブ コーディング 活用ポイント２ Webサイトにインパクトを与える クリエイティブ コーディング 活用ポイント３ UIに「気持ちよさ」を付与する おまけ Webサイトにクリエイティブコーディングを 取り入れる際に注意していること
25. クリエイティブコーディング 活用ポイント３ UIに「気持ちよさ」を付与する
26. クリエイティブコーディング活用ポイント３ UIに「気持ちよさ」を付与する https://www.kai-group.com/products/special/hocho/yasashii/
27. クリエイティブコーディング活用ポイント３ UIに「気持ちよさ」を付与する https://kazukinoda.com/
28. クリエイティブコーディング活用ポイント３ UIに「気持ちよさ」を付与する https://newfolk.jp/
29. クリエイティブコーディング活用ポイント３ UIに「気持ちよさ」を付与する https://energy-park.co.uk/
30. クリエイティブコーディング活用ポイント３ UIに「気持ちよさ」を付与する 使い心地が気持ちいい = ストレスなく使える
 ↓
 再来訪につながる + いい印象として記憶に残る
 ↓
 サイトやサービスの信頼感にもつながる (気がする！) あらゆるタイプのサイトで活きる！
31. Index クリエイティブ コーディング 活用ポイント１ Webサイトの世界観・ブランドを演出する クリエイティブ コーディング 活用ポイント２ Webサイトにインパクトを与える クリエイティブ コーディング 活用ポイント３ UIに「気持ちよさ」を付与する おまけ Webサイトにクリエイティブコーディングを 取り入れる際に注意していること
32. おまけ Webサイトにクリエイティブコーディングを 取り入れる際に注意していること
33. おまけ Webサイトにクリエイティブコーディングを 取り入れる際に注意していること デザインを殺さない
34. おまけ Webサイトにクリエイティブコーディングを 取り入れる際に注意していること 「デザインを殺さない」とは クリエイティブコーディングを導入することによって サイト閲覧者にストレスを与えない
35. おまけ Webサイトにクリエイティブコーディングを 取り入れる際に注意していること ストレスになる例 など ƒ コンテンツを閲覧するまでの時間が長X ƒ 描画の処理が重く、レスポンスが悪X ƒ 期待していた動きと違う動きをする
36. おまけ Webサイトにクリエイティブコーディングを 取り入れる際に注意していること https://ttglobal.com/
37. おまけ Webサイトにクリエイティブコーディングを 取り入れる際に注意していること https://kumaleon.com/
38. おまけ Webサイトにクリエイティブコーディングを 取り入れる際に注意していること よかれと思ってつけた演出も 閲覧者がストレスに感じるようであればない方がマシ ただし、使いやすさを多少犠牲にしてでも 「この表現は絶対に入れる」という判断もある 制作チーム内でしっかりコミュニケーションをとって 共通認識を持つ必要がある
39. まとめ Webサイトにクリエイティブコーディングを 取り入れる際は、その役割を明確に意識しつつ サイト閲覧者の体験を損なわないようにすると よりよいものが生まれる！