富山デザイン勉強会-2024年デザイントレンド.pdf

Slide 1

Slide 1 text

ϯ σ β Π ษ ڧ ձ ෋ ͱ ࢁ ΍ · Ҋ ਤ EFTJHO スピーカーɿ吉川圭太（DERA-DESIGN）「デザイントレンド 2024」 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 2

Slide 2 text

2024のデザインはこれが流行る D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 3

Slide 3 text

かもしれない… D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 4

Slide 4 text

CAPTER 01 デザイントレンド流行色デザイントレンドの流行しそうかどうかの度合いを星で評価しました D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 5

Slide 5 text

デザイントレンド 2024 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 6

Slide 6 text

カラー CAPTER 01 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 7

Slide 7 text

CAPTER 01 カラー流行色 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 8

Slide 8 text

Peach Fuzz #ﬀbe98 Hello! Blue #4f8bc2 CAPTER 01 カラーパントーン/日本流行色協会 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 9

Slide 9 text

CAPTER 01 カラーパステルカラー D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 10

Slide 10 text

CAPTER 01 カラーパステルカラー IGNIS iO https://www.ignis.jp/io/ ラムネマミレ http://www.ramune-mamire.net/ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 11

Slide 11 text

CAPTER 01 カラーネオンカラー D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 12

Slide 12 text

CAPTER 01 カラーネオンカラー ENDRECHERI https://tsuyoshi.in/ crumbskees https://crumbskees.com/ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 13

Slide 13 text

文字 CAPTER 02 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 14

Slide 14 text

CAPTER 02 文字中抜き文字 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 15

Slide 15 text

中抜き文字 CAPTER 02 文字 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 16

Slide 16 text

角が溶けた文字 ޙ౻Λ଴ͪͳ͕Β 後藤を待ちながら CAPTER 02 文字 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 17

Slide 17 text

角が溶けた文字 CAPTER 02 文字 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 18

Slide 18 text

フォントの混在 ۜՏ鉄ಓͷ໷ のΑ͏な໷ CAPTER 02 文字 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 19

Slide 19 text

フォントの混在 DW https://designedbywomen.org/en/ inter.oﬃce https:/ /www.interoﬃce.co.jp/ CAPTER 02 文字 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 20

Slide 20 text

大きなサイズのタイポグラフィー CAPTER 02 文字 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 21

Slide 21 text

大きなサイズのタイポグラフィー THE NORTH FACE https://www.goldwin.co.jp/tnf/spe cial/conditioning/ ASH&D https://ash-d.info/ CAPTER 02 文字 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 22

Slide 22 text

スタイル CAPTER 03 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 23

Slide 23 text

CAPTER 03 スタイル 90年代レトロ/Y2K D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 24

Slide 24 text

90年代レトロ/Y2K DW https://designedbywomen.org/en/ ニュー北九州シティ https://new-kitakyushu-city.com/ CAPTER 03 スタイル D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 25

Slide 25 text

ブルータリズム CAPTER 03 スタイル D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 26

Slide 26 text

ブルータリズム水曜日のカンパネルラ http://www.wed-camp.com/ 変なWEBメディア https://web-media.blue-puddle.com/ CAPTER 03 スタイル D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 27

Slide 27 text

ヴェイパーウェイヴ CAPTER 03 スタイル D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 28

Slide 28 text

ヴェイパーウェイヴ ARCADE https://www.arcade2earn.io/ PLASTIK https://plastikaproblema.com/ CAPTER 03 スタイル D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 29

Slide 29 text

サイバーパンク CAPTER 03 スタイル D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 30

Slide 30 text

サイバーパンク PROTOTYPING OSAKA PROJECT https://prototyping-osaka-project.jp/ ultra super new https://ultrasupernew.com/ CAPTER 03 スタイル D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 31

Slide 31 text

2Dイラスト / 手描きイラスト CAPTER 03 スタイル D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 32

Slide 32 text

2Dイラスト / 手描きイラストアイオウプラス https://www.i0plus.jp/ CAPTER 03 スタイルオオサカマニア https://osakamania.jp/ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 33

Slide 33 text

アブストラクトアート CAPTER 03 スタイル D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 34

Slide 34 text

アブストラクトアートジャパンビバレッジ https://www.jbinc.co.jp/recruit/em ployment/ i スタディサプリ https://brand.studysapuri.jp/ CAPTER 03 スタイル D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 35

Slide 35 text

全般ɾその他 CAPTER 04 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 36

Slide 36 text

CAPTER 04 全般・その他 AI D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 37

Slide 37 text

AI PixAI.Art https://pixai.art/ Photo Shop　生成塗り潰し https://www.adobe.com/jp/products/ph otoshop/generative-ﬁll.html CAPTER 04 全般・その他 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 38

Slide 38 text

3Dグラフィック CAPTER 04 全般・その他 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 39

Slide 39 text

3Dグラフィック RedLight https://redlight.dev/ Bruno Simon https://bruno-simon.com/ CAPTER 04 全般・その他 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 40

Slide 40 text

インクルーシブデザイン CAPTER 04 全般・その他 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 41

Slide 41 text

インクルーシブデザイン CAPTER 04 全般・その他 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 42

Slide 42 text

ドットディスプレイグラフィクス CAPTER 04 全般・その他 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 43

Slide 43 text

ドットディスプレイグラフィクス Dot Maps for All 195 Countries https://www.behance.net/gallery/1 78021823/DOTWORLD-Dot-Maps-f or-All-195-Countries Identity and Website for Trading and Finance https://www.behance.net/gallery/1650 62327/Octopi-Identity-for-Trading-Aut omation-Tool CAPTER 04 全般・その他 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 44

Slide 44 text

アイソメトリック CAPTER 04 全般・その他 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 45

Slide 45 text

つながる科学研究所 https://tsunaken.co.jp/ CAPTER 04 全般・その他ぎふの木ネット https://gifunoki.net/ アイソメトリック D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 46

Slide 46 text

グラデーション CAPTER 04 全般・その他 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 47

Slide 47 text

グラデーション monopo https://monopo.london/ FREAK https://www.daytona-park.c om/freakmag/ CAPTER 04 全般・その他 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 48

Slide 48 text

Web CAPTER 05 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 49

Slide 49 text

CAPTER 05 Web PC にもハンバーガメニュー D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 50

Slide 50 text

PC にもハンバーガメニュー泊綜合食品株式会社 https://tomari.co.jp/ Dotcom Mareting https://www.com-m.com/ CAPTER 05 Web D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 51

Slide 51 text

PC でもスマホ風のレイアウト CAPTER 05 Web D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 52

Slide 52 text

PC でもスマホ風のレイアウトサントリーほろよい https://www.suntory.co.jp /rtd/horoyoi/ THE F1RST TAKE https://www.theﬁrsttake.jp/ CAPTER 05 Web D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 53

Slide 53 text

Bento Grid （弁当箱） CAPTER 05 Web D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 54

Slide 54 text

nev https://nevﬂynn.com/ Schoooool https://schoooool.com/work CAPTER 05 Web Bento Grid （弁当箱） D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 55

Slide 55 text

要素を分割する境界線 CAPTER 05 Web D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 56

Slide 56 text

要素を分割する境界線 HARKEN https://harkenic.com/ Tempalay https://tempalay.jp/ CAPTER 05 Web D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 57

Slide 57 text

ニューモーフィズム CAPTER 05 Web D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 58

Slide 58 text

ニューモーフィズム Neumorphism UI https://demo.themesberg.com/neum orphism-ui/html/pages/about.html ARCHETYP https://www.archetyp.jp/ CAPTER 05 Web D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 59

Slide 59 text

ブラー（ガラスのような効果） CAPTER 05 Web D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 60

Slide 60 text

ブラー（ガラスのような効果） T.RICKS https://tricks-glassmorphi sm.webﬂow.io/ PYURU https://www.pyuru.co.jp/ CAPTER 05 Web D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 61

Slide 61 text

マキシマリズム CAPTER 05 Web D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 62

Slide 62 text

マキシマリズム STARFACE https://starface.world/ Junni https://next.junni.co.jp/ CAPTER 05 Web D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 63

Slide 63 text

スクロールテリングデザイン CAPTER 05 Web D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 64

Slide 64 text

スクロールテリングデザイン架空のパティスリーしろいし洋菓子店 https://shiroishi-yougashi ten.com/ IGNIS https://www.ignis.jp/conten ts/about/botanical/ CAPTER 05 Web D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 65

Slide 65 text

3D パララックス CAPTER 05 Web D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 66

Slide 66 text

3D パララックス DeSo https://www.deso.com/ Mac studio https://www.apple.com/jp/mac-studio/ CAPTER 05 Web D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 67

Slide 67 text

NJYCMFOENPEF CSSのmix-blend-mode CAPTER 05 Web D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 68

Slide 68 text

CSSのmix-blend-mode DROP TOKYO https://droptokyo.com/ 日本プロ麻雀協会 https://npm2001.com/player/aiuchi-yos hie/ CAPTER 05 Web D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 69

Slide 69 text

ダークモード %BSLNPEF CAPTER 05 Web D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 70

Slide 70 text

ダークモード SONICJAM.studio https://sonicjam.studio/ adgallery.xyz https://adgallery.xyz/ CAPTER 05 Web D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 71

Slide 71 text

Webアクセシビリティ CAPTER 05 Web D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 72

Slide 72 text

Webアクセシビリティ日本財団 https:/ /www.nippon-foundation.or.jp/ ウェブアクセシビリティ導入ガイドブック https://www.digital.go.jp/assets/contents/node/basic_pag e/ﬁeld_ref_resources/08ed88e1-d622-43cb-900b-84957ab 87826/60b7f8b0/20231110_introduction_to_weba11y.pdf CAPTER 05 Web D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 73

Slide 73 text

参考紹介 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 74

Slide 74 text

● 2024年最新デザイントレンド　　 https://rotusdesign.com/2023/11/20/最新デザイントレンド-2024/ ● 2024年は、きっとこうなる！ウェブデザイントレンド5選　　 https://www.regraphy.com/web-mado/trend/web-trend-2024.html ● 【2024年】Webデザインのトレンド・参考サイトまとめ　　 https://qiita.com/kazuki_tachikawa/items/5a04de1174d30e7b5c0e ● [2024年版] Webデザイン・UIデザインの注目最新トレンド36選！　　 https://brik.co.jp/tips/438 ● 2024年大きく注目予想されている8つのWEBデザイントレンド　　 https://lollypop.design/blog/2024/january/2024年大きく注目予想されている8つのwebデザイントレ/ 参考紹介・出典 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 75

Slide 75 text

● 2023年のWEBデザイントレンド30選｜2024年の流行も先取り　　 https://japan-design.jp/design/0014/ ● 【2024】Webデザイナー厳選！2024年のWebデザイントレンド8選　　 https://www.gohp.jp/blog/design/3952/ ● 【学習におすすめの情報】2024年のWebデザイントレンド予測まとめ　　 https://note.com/dhw_kaihatsu/n/n3b9478b159b9 ● 2024年のweb デザイントレンド10選！　　 https://feelbee.jp/news/news_branding/3664 ● 【2024年版】Webデザイントレンド12選！　　 https://www.bud-international.co.jp/column/webdesign-trend2024/ 参考紹介・出典 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 76

Slide 76 text

● 2024年のWeb・デザイントレンドで気になったもの5選！　　 https://www.frog-pod.com/FrogTechLog/2024/02/2024-web-design-trend.html ● 【2024年版】Webデザイントレンド15選｜デザイナー監修　　 https://ja.wix.com/blog/2021/12/web-design-trends-2022 参考紹介・出典 D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 77

Slide 77 text

まとめ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p

Slide 78

Slide 78 text

流行色・パントーン / 日本流行色協会・パステルカラーネオンカラー・中抜き文字・角が溶けた文字・フォントの混在大きなタイポグラフィー・90 年代レトロ・Y2K・ブルータリズムヴェイパーウェイブ・サイバーパンク・2D イラスト手書きイラスト・アブストラクトアート・AI・3D グラフィックインクルーシブデザイン・ドットディスプレイグラフィックハンバーガーメニュー・スマホ風レイアウト・Bento Grid・境界線ニューモーフィズム・ガラス表現・マキシマリズムスクロールテリングデザイン・3D パララックス・mix-blend-mode ダークモード・Web アクセシビリティ D E R A - D E S I G N T o y a m a D e s i g n S t u d y G r o u p