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/
Design
- https://blog.btrax.com/jp/webdesign-trend-2018/
- https://uxmilk.jp/73619 (2018年08月15日に更新)
- http://photoshopvip.net/110096 (2018年07月25日に更新)
- https://webdesign-trends.net/entry/6542
- https://goodpatch.com/blog/monthly-topic-201808/ (2018年08月31日に更新)
- https://goodpatch.com/blog/monthly-topic-201806/ (2018年07月02日に更新)
- 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
「実践者から学ぶデザイン組織の作り方」のレポート
「【増枠】実践者から学ぶデザイン組織の作り方 〜 初めの一歩を踏み出すために今日からできること 〜」に参加しました。
Service Design Night とは
このイベントは Service Design Night vol.7 として開催されました。
Service Design Night とは事業成長の術としてデザインを実践的に活用できるデザイン組織、デザイナー育成を目的としたコミュニティです。
デザイナーだけが対象ではなく、PM や PO、ベンチャー経営者の方なども対象になります。
今回のテーマ
実践者から学ぶデザイン組織のつくり方がテーマでした。
「デザイン組織をつくる最初の 1 歩目」にフォーカスして話されました。
登壇者発表
dely 大竹さん
ポイント:
- 継続的なデザイン貢献が必要
- デザイン負債(負債 = 一貫性の欠如)
- デザイナーの役割はリファクタで負債を回収し、トレンドを抑えて設計すること
- 課題発見からユーザーテストまでがデザインの領域
- dely.design ブログで自分たちの仕事をおさらい、外に向けてブランディング
CrowdWorks 上田さん
ポイント:
- リードデザイナーとマネージャーで役割を分けている
- デザインの存在意義を理解してもらうために、
- デザインの価値を数値で示す
- デザイナー以外を巻き込んだプロセスにする
- 社外から評価されるようになる
スタートトゥデイ田口さん
運営者からの質問に答える形で話されていました。
事前に質問があったみたい#sdnight pic.twitter.com/M77SDoCvqb
— みーた (@earlgrayMK) August 30, 2018
ポイント:
- ZOZOTOWN 公式キャラは猫
- 組織は結局、人
- 社内デザイナーの 1 / 3 が社内公募できた人
- 会社やプロダクトを持つ空気感やノリを見極めるために、採用課題を出して社内公募を出している
- 組織全員で同じ方向を向くためには、組織や人を「好き」になってもらうことが大切
OPT 竹田さん
ポイント:
- OPT では BTC モデルの内、これから C を足そうとしていて完成目指している
- 今年「デザイン経営宣言」が経済産業省から発表された
- 役員にデザインを直接理解してもらうために、一緒にデザイン勉強会に連れて行った
- 場 → チーム → プロダクト
- いいプロダクトをつくるために、まずはいい場が必要
- Organization Canvas
- KPI 公開中
- デザイン経営宣言について話し合う場に経営者が 1 人もいなかった
- デザイナーの皆さん、経営者と話していますか?経営者の皆さん、デザイナーと話していますか?
パネルディスカッション
たくさん話がありましたが、覚えてることだけ。
- デザイン組織はトップダウンとボトムアップ両方の視点を持ってつくるものですが、企業によってどちらに重点を置いてつくったかは異なるようでした。OPT ではトップダウンから、CrowdWorks はボトムアップに重点を置いてデザインの組織づくりを進めたようです
- 「まずはやってみましょう!」で経営者やエンジニアをデザイン制作に巻き込む
- いまデザイン組織を会社に根付かせているところはデザインの組織づくりを続けてきた企業。始めたことを途中で止めないことを心がけながら、どうしてもダメになったら目標は変えずに手段を変えましょう
感想
懇親会に最後までいたのは自分的にめずらしい。
あと、登壇者からの発表とパネスディスカッションの話しを聞いて、スタートトゥデイ田口さんの「組織は結局、人」というところに納得しました。相手を見るときは人として合いそうか、どれだけ会社やメンバーのことを好きになってくれているかをより重視したいと思いました。
Sketch でシンボルをつくるときの命名やレイヤーの扱い
Sketch でシンボルつくるときに迷うことが多いので、今のつくり方を少しづつ残していく活動。
シンボルの命名
ライブラリー名/コンポーネント名(ページ名)/コンポーネントの構成要素名
にしてる。
- ライブラリー名はライブラリーが複数ある場合に使う
- 例)mobile/list/item, web/list/item
- Sketch のページ名がコンポーネント名になるようにする
- コンポーネントに構成要素がない場合は、要素名の代わりにコンポーネント名をいれる
- 例)button/button
- hover や active など、状態変化や見た目のバリエーション系のシンボルは、BEM の Modifier のように
--
を使って名前をつける- 例)button/button--hover, button/button--large
- Modifier をつくりすぎない
- コンポーネント名やシンボルのパーツは、そのまま CSS に置き換えられる名前をつける
シンボルのレイヤー
- Override するレイヤー名はカテゴリーに分けて絵文字をつける
- 🖊label, 🎨background, 💈border, 🔶icon
- Override するレイヤー名はコンポーネントを見なくても内容がわかるようにする
- Override するレイヤーは名前がかぶらないようにする
- 例)input コンポーネントであれば、🖊text と 🖊placeholder にするなど
- Override したくないレイヤーはロックする
(余談)シンボル作成に使うプラグイン
普段からよく使うプラグインばかりだけど、以下のプラグインはシンボル作成時にとくによく使う。最近 Paddy を使うようになった。
- Runner ... シンボルの呼び出し
- Smartboards ... アートボードの整列
- Rename It ... アートボードやレイヤー名の一括置換
- Paddy ... シンボルに余白(
padding
)をつける
Semaitic UI でサイトヘッダーをつくる
Semantic UI の Container、Menu 、Image 、Search 、Icon 、Button などを使ってサイトヘッダーをつくった。
本当はフィードみたいなものまでつくり切りたかったけど全然進まなかった。思いの外大変だ。
HTML はつぎのようになっている。Container と Menu でほとんどのレイアウトを決めて、あとはデザインに合わせて Button などのコンポーネントを使った。
<div class="ui fixed secondary menu pointing siteHeader"> <div class="ui container"> <div class="left menu"> <a href="#" class="active item"> <i class="icon home"></i> Home </a> ... </div> <a href="#" class="item"> <img class="ui avatar image centered circular" src="logo.png" alt=""> </a> <div class="right menu"> <div class="item"> <div class="ui search"> <div class="ui icon input"> <input class="prompt" type="text" placeholder="Search"> <i class="search icon"></i> </div> <div class="results"></div> </div> </div> <a href="#" class="item"> <img class="ui avatar image centered circular" src="avatar.png" alt=""><!-- no image --> </a> <a class="ui item"> <button class="ui primary button circular">Follow</button> </a> </div> </div> </div>
サイトヘッダー内の配置を整えるために上書き用のスタイルは少しだけ書いた。
.siteHeader { $itemSize: 54px; .item { height: $itemSize; // ロゴやアバター画像とサイズを合わせる } }
感想。
- Semantic UI のスタイルは継承やセレクタが頻繁に使われていて詳細度が高く、スタイルを上書きするのがつらい
.ui.xxx
という Semantic UI の書式とは別にして、上書き用の命名ルールがあるとスタイルが管理しやすくなりそう(.siteXxxx
みたいな)- Semantic UI のドキュメント見ながらスタイル書くのがしんどいけど、こういうもんか
CSS 関連の記事を眺めて
マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
すべてのコンポーネントの周囲に padding を持たせて設計することを提案している。均等な余白が向いているのはアプリケーションかな。コンポーネントの周囲に padding を持たせることで、コンポーネントの組み合わせごとに余白の設計をしなくて済むようになるというのが利点に思えた。けど、背景画像やボーダーをコンポーネントに持たせたいときに要素がひとつ増えてネストが増えることや、本来 margin の役割となる部分に padding を使ってるのがそもそも気になるので、あんまりこの提案には乗り気になれないな。
信じられませんけど。