2021年に注目したいWebデザイントレンド 【2021】Webデザイナーが選ぶ！2021年のWebデザイントレンド6選
- 公開日
この記事は10分ほどで読めます
本記事では、シスコムのWebデザイナーが厳選した2021年に注目したいWebデザイントレンドを紹介します。
2020年の傾向を見るに、技術的でファンタジー感のあるデザインよりも、ユーザーにリアルな体験をさせるような方向性が見て取れました。コンテンツの内容や構成はもちろん、デザイン面でもこうした傾向があったことが伺えます。2021年のデザインは、これまでに増してデジタルと日常を融合させたものが求められています。これは日常にWebサイトが不可欠になっているともいえるでしょう。
ユーザーにリアルを与えるテクニックを、デザイン事例とともに解説します。
2022年のデザイントレンドの記事はこちら
目次
ニューモーフィズム
最初に紹介するのは、ニューモーフィズム（Neumorphism）です。ニューモーフィズム（Neumorphism）とは、立体的で質感がありリアルなことが特徴の「スキューモーフィズム」と、シンプルでミニマムな特徴を持つ「フラットデザイン」や「マテリアルデザイン」の2つを組み合わせた新しいデザイン手法です。
語源は、New（新しい）＋Skeumorphism（スキューモーフィズム）で、「Neumorphism（ニューモーフィズム）」となります。
ニューモーフィズムは、オブジェクトの影に明暗それぞれのドロップシャドウを用い、浮き上がらせたり、くぼんでみせたりすることで特徴を出します。オブジェクトは丸みを持たせることで滑らかな質感を与えます。
似たようなデザインにマテリアルデザインがあります。マテリアルデザインは構成する要素を重ねることで奥行きを出しますが、ニューモーフィズムは凹凸を作ることで奥行きを表現します。ニューモーフィズムのほうがより現実的な表現といえるでしょう。
なおニューモーフィズムのメリットは、ベースが一色で構成されているため、ダークモードへの切り替えが易しい点が挙げられます。
同色を背景にして陰影をデザインとするニューモフィズムはそのデザインから最先端を想像させます。どちらかというと情報商材など、形のないもののページに向いているかもしれませんね。
https://neumorphism.io/#ffffff
ここでニューモフィズムのイメージが確認できます。ニューモフィズムを使用したデザインをお考えの方は一度こちらで試してみてはいかがでしょうか？
ダークモード
ダークモードとは、従来の白背景に黒文字といった配色とは反対に、背景を黒などのダークカラーにし、文字やアイコンを明るい色にするデザインのことを指します。近年ではInstagramやYouTube、Twitterなどの各種SNSにも採用されており、注目されています。
ダークモードが一般的になったきっかけは、2019年9月にリリースされたAppleのOS「iOS13」によるものといわれています。背景色をダークカラーに切り替える典型的なダークモードで、これを機に多くのスマートフォンで採用されるようになりました。上記で挙げたSNS以外にも、Google Chrome等のブラウザ、LINEなどのコミュニケーションアプリなど、多種多様な場面でダークモードが導入されています。
ダークモードの最大のメリットは、目が疲れにくい点にあります。白背景の画面を長時間見ていると目が疲れる、といった経験は多くの方があるのではないでしょうか。その面ダークモードは、画面と周囲の明るさにギャップがないため、疲れにくいといわれています。
その他にも、省電力化に寄与したり、トレンド感があったり、高級感やシックなイメージが表現できたりと、さまざまなメリットがあります。
https://www.audit-innovation.jp/
ダークモードとアニメーション、パララックスなどを組み合わせて、時代を先取りしている印象を与えるデザインです。先端的技術の研究・開発という事業内容にもあったWebサイトを印象付けています。
右側に「LIGHT/DARK」の切り替えボタンがついている海外のWebサイトです。モードが変わるとだいぶ印象が変わることがわかります。
パララックス・アニメーション
パララックスとは視差効果のこと。近くにあるものが遠くにあるものより速く動いて見えるような表現のことを指します。
Webデザインにおけるパララックスは、スクロールなどの動きに対して、さまざまな構成要素を異なるスピードで動かすことで、立体感や奥行き、フェード・拡大縮小・回転などの視覚的エフェクトを演出することができます。
Webサイトの各所に散りばめられたマイクロインタラクションや、動きのある背景デザイン（パララックス・アニメーションなど）など、アニメーションの需要・人気は年々高まっています。
2021年を考えると、パララックス・アニメーションがさらに複雑化し、高度なデザインが主流になっていくと考えられています。
パララックス や動画、さまざまな動きを組み合わせることによりおやつの時間を楽しんだりワクワクする様子が伝わってくるデザインです。レイアウトやいろんな方向への動きがあることで単調にならない工夫がされています。
フラットなデザインですが、動きのスピードの変化や文字を斜体にすることにより加速する様子を表現しているサイトです。アニメーションなども多く、見ていてワクワクするデザインです。
動画コンテンツ＆音声コンテンツ
Webサイトに動画コンテンツや音声コンテンツが導入されることは珍しくなくなりました。特にYouTubeなどの動画共有サービスの拡大などにより、レシピ動画などを中心に動画コンテンツの人気は急上昇中です。Webサイトに製品紹介動画やインタビュー動画が埋め込まれることも多く目にするようになりました。
動画コンテンツや音声コンテンツをWebサイトに埋め込むことにより、文字や画像だけでは難しい内容も理解しやすくなります。前述のレシピ動画や商品紹介動画は特にその傾向があります。
文字や画像をもとにイメージしながら実行する必要があったことが、動画によって視覚的に理解できます。こうした背景もあり、2021年以降も注目を集めていくことが予想されます。
https://www.suntory.co.jp/eco/circle/
アニメーションや動画などを組み合わせた、まるでゲームの世界のようなWebサイトです。統一された世界観で、考え方や取り組みが自然な形で紹介されています。
ファーストビューで動画が再生されることで、ブランドのイメージやコンテンツの世界観を伝えることができます。店舗やスタッフの雰囲気や空気を伝えることができる動画はファンを増やすためにも有効な手段といえるでしょう。
1分ほどの料理動画を活用したレシピサイトです。スマートフォンやタブレットなどの普及により、写真と文字だけより直感的にわかりやすく、見ていて楽しいエンターテインメント性もあるため、こういった「HowTo（ハウツー）動画」や「マニュアル動画」は今後ますますニーズが高まっていくでしょう。
3D
3Dとは、3次元のことで立体的なデザインを指します。2020年以前から注目されている3Dですが、技術の進化に伴って精度の高い写真や、2Dオブジェクトと組み合わせた3Dグラフィックにより、これまでにはない3Dを活用したクリエイティブなWebサイトが登場することが予想されています。
Webサイト以外にも、任天堂のゲームやアニメのキャラクターなど、活躍のシーンは年々増え続けています。ARやVRの登場も、3Dが注目される一因となっているでしょう。
なお3Dデザインは、Webサイトに奥行きと現実感を与え、独特な表現でユーザーの心を奪います。サイトに没入できる体験により、動画コンテンツや音声コンテンツとは違った”現実感”を与えれるでしょう。
まるで絵画のミュージアムのように、見ているだけでワクワクするようなリアルな世界を表現したWebサイトです。商品をクリックするとECサイトにも連動しているので、購買意欲そのままにクロージングができることも魅力です。
https://www.nks.co.jp/recruitsite/index.html
とある街の建物を探索するような気持ちでページを閲覧できる、遊び心のある採用サイトです。自社により興味を持ってもらえるような工夫がふんだんに盛り込まれたコンテンツにより、どんな会社かへの理解も深まるWebサイトになっています。
非対称レイアウト（ブロークングリッドレイアウト）
ブロークングリットレイアウトとは、これまでの直線や四角形を規則的に並べたレイアウトとは異なり、あえて要素をグリッドから外したり、要素同士を重ねたりずらしたりするレイアウトのことをいいます。雑誌などの一部の場面では一般的なレイアウトでしたが、2017年頃からWebサイトのデザインにも流行し始めています。
ブロークングリットレイアウトを使うことで、ほかのWebサイトとの差別化が図れます。不規則なレイアウトをあえて取り入れることで、ユーザーの視線をひきつけ、興味を持ってもらいやすくなります。
ブロークングリットレイアウトの最大のメリットは、前述の通りオリジナリティを出しやすい点です。グリッドの枠組みから外すことで、自由度が高まり、他社との差別化に寄与します。
またトレンド感があることもメリット。真面目な硬派なグリッドデザインに対し、ブロークングリットレイアウトは革新的で少しやんちゃな印象があります。これにより新鮮でトレンド感のあるデザインが可能となるのです。
その他にも新しいユーザー体験を演出できる点も挙げられます。要素をずらしたり、重ねたりできるため、ユーザーに楽しさを与えることができます。
一方でデメリットは無秩序になりやすい点です。自由で革新的である一方で、規則性もなく要素を配置すると、ただ散らかった印象を与えることも。一定の秩序を与えた上で、全体としての統一感を意識することが重要です。
青系をキーカラーとして、淡い水色などを配置しやさしい印象のサイトになっています。アシンメトリーでありながら一定のバランスが保たれることで読解しやすいサイトとなることがわかります。
スクロールしていくと縦や横に画像が動く工夫がみて取れます。配色も白を背景色というよりひとつの色として使用しているようなイメージです。ブロークングリッドレイアウトは無秩序に配置すると視線の動きが複雑になってしまうため、秩序を守ったデザインが必要です。
まとめ
2021年はファンタジー感のあるデザインよりも、日常を豊かにする「リアルさ」を重視したデザインが多いことが分かります。
こうした背景から、私達の生活にWebサイトはなくてはならない存在になっており、2021年以降もその流れが加速することが予想されます。具体的なデザインやスタイルは定かではないものの、リアルを求める傾向がある点は認識しておいてはいかがしょうか。
