もう2021年ですってよ。
今更ですけど2021年に来そうなWEBデザインについて自分のためにまとめておきます。
WEBデザインのトレンドは前年11月くらいから情報を集めるようにしてて（遅い）、だいたいは海外のサイトを必死に翻訳して見ています。
そこで目についたものをちょっとメモ。
- ダークモード
- 3Dグラフィック
- レトロデザイン
- ニューモーフィズム
「よく目にしたなーー」って思ったものを挙げてみました。
2021年のWEBトレンド予想
ダークモード
黒っぽい背景に明るめのフォントで表示させるもの。「ナイトモード」とも言われますね。
一昨年くらいからダークモードの切り替えを実装しているサイトが増えたような印象があります。
例えばこれはChromeのテーマ「Just Black」を利用してダークな表示にしたchrome。
ダークモードとは何か？
さて、「ダークモード」の定義って何よ、となると思うのでちょっくらwikipediaから引用。（もとは英語）
ライトオンダーク配色は、ブラックモード、ダークモード、ダークテーマまたはナイトモードとも呼ばれ、暗い背景に淡い色のテキスト、アイコン、グラフィカルユーザーインターフェース要素を使用する配色であり、コンピュータユーザーインターフェースデザインやウェブデザインの観点からしばしば議論されます。多くの最新のウェブサイトやオペレーティングシステムでは、オプションでライトオンダーク表示モードを提供しています。
フルブライトネスで白を表示すると、有機ELディスプレイを搭載したGoogle Pixelの純黒の約6倍の電力を消費します。さらに、スクリーンの表面の汚れが目立ちにくくなります。
ほとんどの最新のオペレーティングシステムは、オプションでライトオンダークのカラースキームをサポートしています。ナイトモードは、AppleデバイスのナイトシフトやAndroidのナイトモードなど、（ライトオンダークであるかどうかにかかわらず）より少ないブルーライトを使用したディスプレイスキームである場合もあります。ブルーライトを減らしたディスプレイは、睡眠の質を向上させる可能性があります。
目が疲れにくくて睡眠の邪魔をしないし消費電力も抑えるよ！という感じですね。
ちなみにダークモード、iOSもAndroidもガイドラインを出しています。
主にシステムのUIに関する内容なんですけれど、WEBサイトでも気を付けるべきポイントは同じですよね。
ダークモード iOSガイドライン
ダークテーマ Androidガイドライン
3Dグラフィック
WebGLという3Dアニメーションの技術を使用したものや、メイングラフィックに3Dを取り入れたものなど、去年あたりからものすごーーーく増えましたよね。
3Dグラフィックを描画するソフトも使いやすいものが次々出ているようなので使ってみたい…みたいけど…ハードル高い…
超有名、RIMOWAの商品サイト。
ぐりぐり動いて触れます。
ニューヨークのデジタルスタジオ、Planetaryのサイト。
早く行きたい、SUPER NINTENDO WORLDのサイト。
レトロデザイン
これも数年に渡ってじわじわ流行ってる気がします。
配色だったりイラストのテイストだったりタイポグラフィーだったり、どこか懐かしくていい意味でチープなデザイン。
超かっこよい。株式会社LAMMのサイト。
メインビジュアルが80年代90年代っぽくて懐かしいし派手派手な配色もレトロフューチャーっぽくてよいです。
ボランティア活動支援のキャンペーンサイト。
グリッドで仕切ったデザインも古めかしい雰囲気出してますし、イラストもオレンジ×ベージュでどことなくレトロ～。
ニューモーフィズム
スキューモーフィズムの進化系と言われているニューモーフィズム。
スキューモーフィズムは「現実世界の質感や特徴、モチーフを模倣したデザイン」…、Appleが取り入れたことで有名ですね。
ニューモーフィズムはフラットデザインやマテリアルデザイン+スキューモーフィズム、だそうです。
ゴムのようなシリコンのような質感。
WEBデザインでも広まりそう…とずっと言われていますが数はそんなに多くないような印象。
仙台のIT企業、株式会社SRA東北さんのサイトはフロントページがニューモーフィズム。
ニューモーフィズムのCSSを生成してくれるジェネレータがありました。
ぬるっとふわっとしてて何とも不思議な感じですね。
2021年のWEBトレンド予想 まとめ
本当はあと3つくらい書きたかったんですけど（ざらざらした質感を加えるもの、コミックやアニメに近いグラフィック、画面遷移の時のノイズエフェクトなど）、この辺で…！
コメント