2018 年のフロントエンド開発とWeb デザイン

2018 年のフロントエンド開発と Web デザインのトレンドについて把握しようとした。自分でもなんでこの時期にやってるか不思議だけど気になったからしょうがない。

トレンドを調べるのに参照した記事のリンクとキーワードを以下にまとめた。わかるものについては記事の更新日やイベントの開催日を載せてる。

Frontend

• https://qiita.com/Apprentice_engineer/items/81ce1e9c3e78555db0f9 （2018年02月28日に更新）
  • React
  • GraphQL
  • ServiceWorker
  • HTML5.3
  • CSS transforms 3D
  • CSS transitions
  • CSS flexbox
  • CSS filters
  • CSS grid
  • WebAssembly
  • Universal JavaScript
  • next.js
  • Web Components
  • PostCSS
  • CSSnext
  • CSS in JS
  • Single Page Application (SPA)
  • Progressive Web Applications (PWA)
  • Vue.js
  • Augmented Reality (AR)
  • Augmented Vituality (AV)
  • Webpack4
  • MobX
• https://html5j.connpass.com/event/96895/presentation/ （2018年09月05日に開催）
  • Nuxt.js
  • Atomic Design
  • Visual Studio Code
  • Storybook
  • Figma
• https://html5j.connpass.com/event/89073/presentation/ （2018年06月19日に開催）
  • Vue CLI v3
  • React Suspense
• https://html5j.connpass.com/event/79784/ （2018年02月26日に更新）
  • Monaca
  • Onsen UI
  • React Native
• http://cssnite.jp/lp/lp58/
  • CSS Grid
  • CSS Animation
  • アクセシビリティ

Design

• https://blog.btrax.com/jp/webdesign-trend-2018/
  • モバイルファースト
  • フラットデザイン2.0
  • 鮮やかな配色
  • アニメーション
  • オリジナルイラスト
• https://uxmilk.jp/73619 （2018年08月15日に更新）
  • コンポーネントベースのデザインシステム
  • 多角形と幾何学的なレイヤー
  • タクタイルデザイン
  • 複雑なデスクトップ、シンプルなモバイル
  • レトロモダンデザイン
  • シンプルなトップページ
• http://photoshopvip.net/110096 （2018年07月25日に更新）
  • フルスクリーン背景イメージ
  • カスタム・デジタルイラスト
  • キャラクターを使ったストーリーテリング
  • 分割スプリットスクリーン
  • 大胆なタイポグラフィー
  • ボタンのないUIデザイン
  • 鮮やかで大胆な配色
  • インターフェース向けアニメーションの採用
  • ランディングページ向けヒーローイメージ
  • ポスタースタイルのウェブページ
  • 実験的なカラーパレットとレイアウト
  • ユーザーエクスペリエンスのパーソナル化
  • 高品質な写真コンテンツ
• https://webdesign-trends.net/entry/6542
  • ミニマリズムからオリジナリティへ
  • ブロークングリッドレイアウト
  • ノングリッドレイアウト
  • 流体シェイプ
  • フラットデザイン2.0
  • Sketch
  • Adobe XD
  • Figma
  • InVision Studio
  • Hadron
  • STUDIO
  • Phase
  • Gallery
  • Overflow
• https://goodpatch.com/blog/monthly-topic-201808/ （2018年08月31日に更新）
  • FOLIO リブランディング
  • Evernote リブランディング
• https://goodpatch.com/blog/monthly-topic-201806/ （2018年07月02日に更新）
  • WWDC2018
  • 動きをうごかす展
  • バウハウスのタイポグラフィー
• https://goodpatch.com/blog/monthly-topic-201805/ （2018年05月31日に更新）
  • Material Design
  • 「デザイン経営」宣言
• https://goodpatch.com/blog/monthly-topic-201803/ （2018年05月11日に更新）
  • Design in Tech Report
  • Prototyping in Sketch
• https://goodpatch.com/blog/monthly-topic-201801/ （2018年02月05日に更新）
  • Laws of UX
  • FLYER ARCHIVE JP
• https://www.uxpin.com/studio/web-design/web-design-trends-2018-the-complete-guide-for-designers/
  • Component-Based Design Systems
  • Polygonal Shapes and Geometric Layers
  • Tactile Design
• https://www.behance.net/gallery/60273889/2018-Design-Trends （2018年01月05日に更新）
  • 3D Still Lifes
  • More design in AR
  • More 3D Typography
  • Digitalized Handmade Art
  • Vivid & bright Colors / Gradients
  • More animated 3D merged with 2D
  • Flexible 3D
  • More Artful Photography
  • Modern (animated) Retro - Illustrations
  • Color - Gel Photography (use of colorful light)
  • Responsive Logos
  • Simpler semi - 3D Logos
  • Custom “Arty” Typefaces
  • More (interactive) 3D in Web Design
  • Interactive mouse pointer
  • Creative Website Loading
  • Instagram Storytelling
  • 3D “Handmade” Art Look
  • Isometric Design & Photography
  • Adding Depth to flat Design
• https://en.99designs.jp/blog/trends/graphic-design-trends-2018/ （ 10 ヶ月前に更新）
  • Responsive logos
  • Gradients
  • More depth (with semi-flat design)
  • Dashing duotones
  • Palettes & patterns inspired by the 80’s & 90’s
  • Movement: animations & GIFs
  • Bold typography
  • Custom graphic art and illustration
  • Authentic photography
  • Highly-detailed vintage