Gutenberg、だいぶ使いやすくなったので移行中です

2021年のWEBトレンドざっくり予想

WEB

もう2021年ですってよ。
今更ですけど2021年に来そうなWEBデザインについて自分のためにまとめておきます。

WEBデザインのトレンドは前年11月くらいから情報を集めるようにしてて(遅い)、だいたいは海外のサイトを必死に翻訳して見ています。
そこで目についたものをちょっとメモ。

  1. ダークモード
  2. 3Dグラフィック
  3. レトロデザイン
  4. ニューモーフィズム

「よく目にしたなーー」って思ったものを挙げてみました。

 

2021年のWEBトレンド予想

ダークモード

黒っぽい背景に明るめのフォントで表示させるもの。「ナイトモード」とも言われますね。
一昨年くらいからダークモードの切り替えを実装しているサイトが増えたような印象があります。

例えばこれはChromeのテーマ「Just Black」を利用してダークな表示にしたchrome。

ダークモード

ダークモードとは何か?

さて、「ダークモード」の定義って何よ、となると思うのでちょっくらwikipediaから引用。(もとは英語)

ライトオンダーク配色は、ブラックモード、ダークモード、ダークテーマまたはナイトモードとも呼ばれ、暗い背景に淡い色のテキスト、アイコン、グラフィカルユーザーインターフェース要素を使用する配色であり、コンピュータユーザーインターフェースデザインやウェブデザインの観点からしばしば議論されます。多くの最新のウェブサイトやオペレーティングシステムでは、オプションでライトオンダーク表示モードを提供しています。

フルブライトネスで白を表示すると、有機ELディスプレイを搭載したGoogle Pixelの純黒の約6倍の電力を消費します。さらに、スクリーンの表面の汚れが目立ちにくくなります。

ほとんどの最新のオペレーティングシステムは、オプションでライトオンダークのカラースキームをサポートしています。ナイトモードは、AppleデバイスのナイトシフトやAndroidのナイトモードなど、(ライトオンダークであるかどうかにかかわらず)より少ないブルーライトを使用したディスプレイスキームである場合もあります。ブルーライトを減らしたディスプレイは、睡眠の質を向上させる可能性があります。

Light-on-dark color scheme

目が疲れにくくて睡眠の邪魔をしないし消費電力も抑えるよ!という感じですね。

ちなみにダークモード、iOSもAndroidもガイドラインを出しています。
主にシステムのUIに関する内容なんですけれど、WEBサイトでも気を付けるべきポイントは同じですよね。

 

ダークモード iOSガイドライン

Dark Mode | Apple Developer Documentation
Dark Mode is a systemwide appearance setting that uses a dark color palette to provide a comfortable viewing experience tailored for low-light environments.

コントラストに関してはこちら
使用する色に関してはこちら

ダークテーマ Androidガイドライン

ダークテーマ  |  Android デベロッパー  |  Android Developers

 

3Dグラフィック

WebGLという3Dアニメーションの技術を使用したものや、メイングラフィックに3Dを取り入れたものなど、去年あたりからものすごーーーく増えましたよね。
3Dグラフィックを描画するソフトも使いやすいものが次々出ているようなので使ってみたい…みたいけど…ハードル高い…

 

超有名、RIMOWAの商品サイト。
ぐりぐり動いて触れます。

RIMOWA

 

ニューヨークのデジタルスタジオ、Planetaryのサイト。

Planetary

 

早く行きたい、SUPER NINTENDO WORLDのサイト。

USJ

 

レトロデザイン

これも数年に渡ってじわじわ流行ってる気がします。
配色だったりイラストのテイストだったりタイポグラフィーだったり、どこか懐かしくていい意味でチープなデザイン。

 

超かっこよい。株式会社LAMMのサイト。
メインビジュアルが80年代90年代っぽくて懐かしいし派手派手な配色もレトロフューチャーっぽくてよいです。

LAMM

 

ボランティア活動支援のキャンペーンサイト。
グリッドで仕切ったデザインも古めかしい雰囲気出してますし、イラストもオレンジ×ベージュでどことなくレトロ~。

overcovid

 

ニューモーフィズム

スキューモーフィズムの進化系と言われているニューモーフィズム。
スキューモーフィズムは「現実世界の質感や特徴、モチーフを模倣したデザイン」…、Appleが取り入れたことで有名ですね。

ニューモーフィズムはフラットデザインやマテリアルデザイン+スキューモーフィズム、だそうです。
ゴムのようなシリコンのような質感。

WEBデザインでも広まりそう…とずっと言われていますが数はそんなに多くないような印象。

 

仙台のIT企業、株式会社SRA東北さんのサイトはフロントページがニューモーフィズム。

SRA東北

 

ニューモーフィズムのCSSを生成してくれるジェネレータがありました。
ぬるっとふわっとしてて何とも不思議な感じですね。

 

2021年のWEBトレンド予想 まとめ

本当はあと3つくらい書きたかったんですけど(ざらざらした質感を加えるもの、コミックやアニメに近いグラフィック、画面遷移の時のノイズエフェクトなど)、この辺で…!

コメント

タイトルとURLをコピーしました