富山デザイン勉強会-2024年デザイントレンド.pdf

Transcript

1. ϯ σ β Π ษ ڧ ձ ෋ ͱ ࢁ ΍ · Ҋ ਤ 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
2. 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
3. かもしれない… 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
4. 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
5. デザイントレンド 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
6. カラー 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
7. 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
8. Peach Fuzz #ffbe98 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
9. 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
10. 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
11. 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
12. 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
13. 文字 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
14. 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
15. 中抜き文字 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
16. 角が溶けた文字 ޙ౻Λ଴ͪͳ͕Β 後藤を待ちながら 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
17. 角が溶けた文字 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
18. フォントの混在 ۜՏ鉄ಓͷ໷
    
    
    
    
    
    のΑ͏な໷ 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
19. フォントの混在 DW https://designedbywomen.org/en/ inter.office https:/ /www.interoffice.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
20. 大きなサイズのタイポグラフィー 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
21. 大きなサイズのタイポグラフィー 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
22. スタイル 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
23. 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
24. 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
25. ブルータリズム 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
26. ブルータリズム 水曜日のカンパネルラ 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
27. ヴェイパーウェイヴ 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
28. ヴェイパーウェイヴ 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
29. サイバーパンク 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
30. サイバーパンク 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
31. 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
32. 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
33. アブストラクトアート 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
34. アブストラクトアート ジャパンビバレッジ 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
35. 全般ɾその他 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
36. 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
37. AI PixAI.Art https://pixai.art/ Photo Shop　生成塗り潰し https://www.adobe.com/jp/products/ph otoshop/generative-fill.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
38. 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
39. 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
40. インクルーシブデザイン 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
41. インクルーシブデザイン 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
42. ドットディスプレイグラフィクス 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
43. ドットディスプレイグラフィクス 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
44. アイソメトリック 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
45. つながる科学研究所 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
46. グラデーション 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
47. グラデーション 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
48. 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
49. 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
50. 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
51. 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
52. PC でもスマホ風のレイアウト サントリー ほろよい https://www.suntory.co.jp /rtd/horoyoi/ THE F1RST TAKE https://www.thefirsttake.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
53. 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
54. nev https://nevflynn.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
55. 要素を分割する境界線 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
56. 要素を分割する境界線 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
57. ニューモーフィズム 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
58. ニューモーフィズム 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
59. ブラー （ガラスのような効果） 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
60. ブラー （ガラスのような効果） T.RICKS https://tricks-glassmorphi sm.webflow.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
61. マキシマリズム 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
62. マキシマリズム 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
63. スクロールテリングデザイン 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
64. スクロールテリングデザイン 架空のパティスリー しろいし洋菓子店 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
65. 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
66. 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
67. 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
68. 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
69. ダークモード %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
70. ダークモード 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
71. 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
72. Webアクセシビリティ 日本財団 https:/ /www.nippon-foundation.or.jp/ ウェブアクセシビリティ導入ガイドブック https://www.digital.go.jp/assets/contents/node/basic_pag e/field_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
73. 参考紹介 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
74. • 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
75. • 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
76. • 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
77. まとめ 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
78. 流行色・パントーン / 日本流行色協会・パステルカラー ネオンカラー・中抜き文字・角が溶けた文字・フォントの混在 大きなタイポグラフィー・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