2021年に注目したいWebデザイントレンド【2021】Webデザイナーが選ぶ!2021年のWebデザイントレンド6選
目次
本記事では、シスコムの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/
右側に「LIGHT/DARK」の切り替えボタンがついている海外のWebサイトです。モードが変わるとだいぶ印象が変わることがわかります。
パララックス・アニメーション
パララックスとは視差効果のこと。近くにあるものが遠くにあるものより速く動いて見えるような表現のことを指します。
Webデザインにおけるパララックスは、スクロールなどの動きに対して、さまざまな構成要素を異なるスピードで動かすことで、立体感や奥行き、フェード・拡大縮小・回転などの視覚的エフェクトを演出することができます。
Webサイトの各所に散りばめられたマイクロインタラクションや、動きのある背景デザイン(パララックス・アニメーションなど)など、アニメーションの需要・人気は年々高まっています。
2021年を考えると、パララックス・アニメーションがさらに複雑化し、高度なデザインが主流になっていくと考えられています。
https://snaq.me/
動画コンテンツ&音声コンテンツ
Webサイトに動画コンテンツや音声コンテンツが導入されることは珍しくなくなりました。特にYouTubeなどの動画共有サービスの拡大などにより、レシピ動画などを中心に動画コンテンツの人気は急上昇中です。Webサイトに製品紹介動画やインタビュー動画が埋め込まれることも多く目にするようになりました。
動画コンテンツや音声コンテンツをWebサイトに埋め込むことにより、文字や画像だけでは難しい内容も理解しやすくなります。前述のレシピ動画や商品紹介動画は特にその傾向があります。
文字や画像をもとにイメージしながら実行する必要があったことが、動画によって視覚的に理解できます。こうした背景もあり、2021年以降も注目を集めていくことが予想されます。
https://www.suntory.co.jp/eco/circle/
3D
3Dとは、3次元のことで立体的なデザインを指します。2020年以前から注目されている3Dですが、技術の進化に伴って精度の高い写真や、2Dオブジェクトと組み合わせた3Dグラフィックにより、これまでにはない3Dを活用したクリエイティブなWebサイトが登場することが予想されています。
Webサイト以外にも、任天堂のゲームやアニメのキャラクターなど、活躍のシーンは年々増え続けています。ARやVRの登場も、3Dが注目される一因となっているでしょう。
なお3Dデザインは、Webサイトに奥行きと現実感を与え、独特な表現でユーザーの心を奪います。サイトに没入できる体験により、動画コンテンツや音声コンテンツとは違った”現実感”を与えれるでしょう。
https://marmont.gucci.com/
https://www.nks.co.jp/recruitsite/index.html
非対称レイアウト(ブロークングリッドレイアウト)
ブロークングリットレイアウトとは、これまでの直線や四角形を規則的に並べたレイアウトとは異なり、あえて要素をグリッドから外したり、要素同士を重ねたりずらしたりするレイアウトのことをいいます。雑誌などの一部の場面では一般的なレイアウトでしたが、2017年頃からWebサイトのデザインにも流行し始めています。
ブロークングリットレイアウトを使うことで、ほかのWebサイトとの差別化が図れます。不規則なレイアウトをあえて取り入れることで、ユーザーの視線をひきつけ、興味を持ってもらいやすくなります。
ブロークングリットレイアウトの最大のメリットは、前述の通りオリジナリティを出しやすい点です。グリッドの枠組みから外すことで、自由度が高まり、他社との差別化に寄与します。
またトレンド感があることもメリット。真面目な硬派なグリッドデザインに対し、ブロークングリットレイアウトは革新的で少しやんちゃな印象があります。これにより新鮮でトレンド感のあるデザインが可能となるのです。
その他にも新しいユーザー体験を演出できる点も挙げられます。要素をずらしたり、重ねたりできるため、ユーザーに楽しさを与えることができます。
一方でデメリットは無秩序になりやすい点です。自由で革新的である一方で、規則性もなく要素を配置すると、ただ散らかった印象を与えることも。一定の秩序を与えた上で、全体としての統一感を意識することが重要です。
https://np-kakebarai.com/
まとめ
2021年はファンタジー感のあるデザインよりも、日常を豊かにする「リアルさ」を重視したデザインが多いことが分かります。
こうした背景から、私達の生活にWebサイトはなくてはならない存在になっており、2021年以降もその流れが加速することが予想されます。具体的なデザインやスタイルは定かではないものの、リアルを求める傾向がある点は認識しておいてはいかがしょうか。
シスコムではWeb制作、Web運用の無料相談を行っています。無料相談ではお客様の課題やお悩みをヒアリングし、最適な改善案をご提案いたします。お気軽にご相談ください。
2022年のデザイントレンドの記事はこちら
ご相談・お問い合わせはこちらから
TEL 03-6278-7703