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

by Takumi Hasegawa (unshift)

Slide 1

Slide 1 text

DIST.42 2024.02.09 クリエイティブコーディングで生み出す  Webデザインの世界観

Slide 2

Slide 2 text

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 の娘 ( かわいい ) / クリエイティブコーディング / バスケットボールクリエイティブコーディングギャラリーはこちら

Slide 3

Slide 3 text

作品一覧はこちら X (Twitter) @raf___gallery Instagram @raf___gallery raf イラストとCreative Coding (three.js)を組み合わせた作品を作っています。

Slide 4

Slide 4 text

本日のテーマクリエイティブコーディングは Webサイトのどこに活きるのか

Slide 5

Slide 5 text

そもそも、クリエイティブコーディングって何？ Intro

Slide 6

Slide 6 text

クリエイティブコーディングとはプログラミングによって創造的な表現を生み出すこと Intro

Slide 7

Slide 7 text

では、Webサイト制作における  クリエイティブコーディングとは？ Intro

Slide 8

Slide 8 text

https://activetheory.net/ Intro

Slide 9

Slide 9 text

いやいや、こんなにすごいものじゃなくても  皆さん日常的にやってますよね Intro

Slide 10

Slide 10 text

つまり、フロントエンドの実装をしている人は全員クリエイティブコーダー Intro

Slide 11

Slide 11 text

普段何気なくやっているクリエイティブコーディングが Webサイトのどういうところに活きてきてどういう働きをしているのか見ていきましょう Intro

Slide 12

Slide 12 text

Index クリエイティブコーディング活用ポイント１？？？クリエイティブコーディング活用ポイント２？？？クリエイティブコーディング活用ポイント３？？？おまけ Webサイトにクリエイティブコーディングを取り入れる際に注意していること

Slide 13

Slide 13 text

Index クリエイティブコーディング活用ポイント１ Webサイトの世界観・ブランドを演出するクリエイティブコーディング活用ポイント２？？？クリエイティブコーディング活用ポイント３？？？おまけ Webサイトにクリエイティブコーディングを取り入れる際に注意していること

Slide 14

Slide 14 text

クリエイティブコーディング活用ポイント１ Webサイトの世界観・ブランドを演出する

Slide 15

Slide 15 text

クリエイティブコーディング活用ポイント１ Webサイトの世界観・ブランドを演出する https://lanway.jp/

Slide 16

Slide 16 text

クリエイティブコーディング活用ポイント１ Webサイトの世界観・ブランドを演出する https://saihoji-kokedera.com/

Slide 17

Slide 17 text

クリエイティブコーディング活用ポイント１ Webサイトの世界観・ブランドを演出する https://ofuro-time.noritz.co.jp/wakasuapp/picturebook/mugen-frontier/

Slide 18

Slide 18 text

クリエイティブコーディング活用ポイント１ Webサイトの世界観・ブランドを演出するサイトの内容に連動した表現を取り入れることでサイト全体の統一感が向上 ↓ 発信したい世界観・ブランドそのものを表現できるゲーム・アニメ・映画寺社仏閣やレストランや食料品などモチーフやコンセプトがはっきりしているサイトで活きる！

Slide 19

Slide 19 text

Index クリエイティブコーディング活用ポイント１ Webサイトの世界観・ブランドを演出するクリエイティブコーディング活用ポイント２ Webサイトにインパクトを与えるクリエイティブコーディング活用ポイント３？？？おまけ Webサイトにクリエイティブコーディングを取り入れる際に注意していること

Slide 20

Slide 20 text

クリエイティブコーディング活用ポイント２ Webサイトにインパクトを与える

Slide 21

Slide 21 text

クリエイティブコーディング活用ポイント２ Webサイトにインパクトを与える https://tkmh.me/ https://unshift.jp/

Slide 22

Slide 22 text

クリエイティブコーディング活用ポイント２ Webサイトにインパクトを与える https://buttermax.net/

Slide 23

Slide 23 text

クリエイティブコーディング活用ポイント２ Webサイトにインパクトを与えるよくわかんないけどすごい  ↓  強烈に印象に残る  ↓  それ自体がサイトや発信者の個性・強みにつながる個人のポートフォリオや、デザイン会社のコーポレートサイトで活きる！

Slide 24

Slide 24 text

Index クリエイティブコーディング活用ポイント１ Webサイトの世界観・ブランドを演出するクリエイティブコーディング活用ポイント２ Webサイトにインパクトを与えるクリエイティブコーディング活用ポイント３ UIに「気持ちよさ」を付与するおまけ Webサイトにクリエイティブコーディングを取り入れる際に注意していること

Slide 25

Slide 25 text

クリエイティブコーディング活用ポイント３ UIに「気持ちよさ」を付与する

Slide 26

Slide 26 text

クリエイティブコーディング活用ポイント３ UIに「気持ちよさ」を付与する https://www.kai-group.com/products/special/hocho/yasashii/

Slide 27

Slide 27 text

クリエイティブコーディング活用ポイント３ UIに「気持ちよさ」を付与する https://kazukinoda.com/

Slide 28

Slide 28 text

クリエイティブコーディング活用ポイント３ UIに「気持ちよさ」を付与する https://newfolk.jp/

Slide 29

Slide 29 text

クリエイティブコーディング活用ポイント３ UIに「気持ちよさ」を付与する https://energy-park.co.uk/

Slide 30

Slide 30 text

クリエイティブコーディング活用ポイント３ UIに「気持ちよさ」を付与する使い心地が気持ちいい = ストレスなく使える  ↓  再来訪につながる + いい印象として記憶に残る  ↓  サイトやサービスの信頼感にもつながる (気がする！) あらゆるタイプのサイトで活きる！

Slide 31

Slide 31 text

Slide 32

Slide 32 text

おまけ Webサイトにクリエイティブコーディングを取り入れる際に注意していること

Slide 33

Slide 33 text

おまけ Webサイトにクリエイティブコーディングを取り入れる際に注意していることデザインを殺さない

Slide 34

Slide 34 text

おまけ Webサイトにクリエイティブコーディングを取り入れる際に注意していること「デザインを殺さない」とはクリエイティブコーディングを導入することによってサイト閲覧者にストレスを与えない

Slide 35

Slide 35 text

おまけ Webサイトにクリエイティブコーディングを取り入れる際に注意していることストレスになる例などコンテンツを閲覧するまでの時間が長X 描画の処理が重く、レスポンスが悪X 期待していた動きと違う動きをする

Slide 36

Slide 36 text

おまけ Webサイトにクリエイティブコーディングを取り入れる際に注意していること https://ttglobal.com/

Slide 37

Slide 37 text

おまけ Webサイトにクリエイティブコーディングを取り入れる際に注意していること https://kumaleon.com/

Slide 38

Slide 38 text

おまけ Webサイトにクリエイティブコーディングを取り入れる際に注意していることよかれと思ってつけた演出も閲覧者がストレスに感じるようであればない方がマシただし、使いやすさを多少犠牲にしてでも「この表現は絶対に入れる」という判断もある制作チーム内でしっかりコミュニケーションをとって共通認識を持つ必要がある

Slide 39

Slide 39 text

まとめ Webサイトにクリエイティブコーディングを取り入れる際は、その役割を明確に意識しつつサイト閲覧者の体験を損なわないようにするとよりよいものが生まれる！