2021年ウェブデザインのトレンドは？

2021年始まりました。
ウェブトレンドを書いた記事や講演を通し、私がこれはきそうだなと思ったものをあげてみました。

この記事では、2021のウェブデザインのトレンドを7つ紹介します！

サイトリニューアルを検討されている方は、こちらの記事をご覧ください。

【見積付き】Webサイトリニューアルの費用を決めるときに担当者が検討すべき5つのポイント

1. パララックス・アニメーション

ここ数年ずっとトレンドのパララックス・アニメーション。
トレントから定番になりつつありますが、表現の方法はより複雑になってきています。上下のスクロールの動きだけでなく、背景の画像が全面に近づいて来るような、スクリーンの中に空間があるような立体的に動いてくるようなものもあるようです。
大きな動きもつけれることができるが、細かい設定で上品な見せ方もできます。
今後もうまく付き合って行きたい手法です。

画像引用元：Apple

Appleもパララックス・アニメーションを使って効果的に見せています。
緻密に設計されたデザインと動きでとても見やすいサイトになっています。

画像引用元：Utrust

紙芝居のような動きのパララックス・アニメーションもあります。
これまで、左右のスライダーで見せてきた部分を画面全体で紙芝居のように見せるのも効果的かもしれません。

画像引用元：Stelvio Grotesk

テキストとものをうまく重ねてグラフィカルな見せ方もあります。

2. ストーリーテリング

ストーリーテーリングとは、ページの中でそれぞれのセクションで個別のコンテンツを見せるのではなく、ページ全体でストーリーを見せる方法です。
ユーザーがページをスクロールする中で、メッセージを読ませる・何かしらのアクションが起こる などでユーザーがコンテンツに興味をもち、よりそのコンテンツに興味を持たせることができます。

コンテンツにかなり魅力がないと、失敗に終わりそうです。
コンテンツの読み込みに時間がかかったり、アニメーション付きの演出などは、ユーザーにストレスを与えない快適な実装が必要になリます。

画像引用元：RYDEN

スクロールするごとに文章を読ませるストーリーテーリングになっています。

タイポグラフィも細かく、デザインも力強い凝ったデザインです。
文章も人を惹きつける魅力があり、動きもスムーズでユーザーの興味が湧きます。

画像引用元：株式会社アイキューブ（iCubes）

こちらもスクロールするごとに文章を読ませるストーリーテーリングになっています。
アイソメの立体的な形とポップなイラストを利用し、下へ下へとスクロールさせるデザインになっています。

3. モノクロ調のデザイン

色を使ったサイトが大半を占める中、モノクロ調のサイトは、一線を画したデザインに見えます。
インパクトがあり、印象に残るデザインです。
マウスオーバーなどでボタンにカラーがつくととても効果的になりそうです。

画像引用元：みんなの銀行

サービスも日本初のオンラインのみの銀行として話題になっています。
サービスも他とは違う！デザインの手法も他とは違った見せ方でとても効果的です。

画像引用元：VISUALIZE 60 日本デザインセンター

日本デザインセンターが開催する年に4回の展覧会のサイトです。
線で表現されたイラストとそれにあったフォントを使用しシンプルでスタイリッシュな世界観です。
中央に配置された動画もイラストと同化して線画の世界観を壊さす、うまくデザインされています。

4. グリッド

こちらもよく聞くグリッドですが、2021年にくるのはよりグリット感（？）があるデザインになります。
何より、コンテンツエリアがどこなのかわかりやすいですね。

ここまではっきりとグリット出てくるととでも潔いです。
すっきりとして大胆な外観でレイアウトを構築する方法として注目を集めています。

画像引用元：HISISSHIZEN

画像引用元：BALENCIAGA

バレンシアガのサイトはグレーで統一されていて、インパクトは強烈です。
カテゴリを絞っていくと写真だけがカラーになり、ページ遷移するときのワクワク感が募ります。
有名ブランドがなせる技でもあるのかもしれません。

5. 奥行きのあるグラデーション

2020年もよく見たグラデーションです。
「Mac OS Bis Sur」の登場で、より複雑で奥行きのあるグラデーションが増えそうです。

画像引用元：mac OS Big Sur

画像引用元：CRAZY

落ち着いた色味で、光が舞うようなグラデーションはユーザーの目にも優しいデザインになっています。

6. カートゥーン イラスト

サイトの要素として使用するイラスト、2020年ごろからよく見るカートゥーン（漫画イラストと言うと違う気がするのであえてこの呼び方にしました）です。
アメリカ・ヨーロッパなどのカートゥーンイラストがよく見られるようになり、日本でもみる機会が増えてきました。

画像引用元：Re-Frame

画像引用元：Blush Illustrations for everyone

上記のサイトは日本語版もあり、今後日本でも使用する人は増えるのではと思います。
イラストがたくさん並んだのこサイトは見ているだけでも楽しいです。

7. アイソメ

アイソメ図=立体を斜めから見た図を表示する方法のひとつで，等角投影図のこと。X，Y，Z 軸がそれぞれ等しい角度で，つまり120度間隔で見える角度で立体を投影する。アイソメトリック図の略。（参照：https://www.weblio.jp/content/アイソメ図）

この手法の見せ方もまだまだ人気があるようです。
サイトのビジュアルだけでなく、バナーにも使用されてるのをよく見ます。

画像引用元：MIYAKE

まとめ

以上、2021年のwebのトレンド予測でした。

個人的に気になるのはモノクロ調のデザインです。
鮮やかな色がついたサイトが多い中、モノトーンの落ち着いた感じは、なんだかはっとさせられます。

番外編ですが、レトロなフォントが来そうとのこと。
日本ではなく海外の話だが、レトロなフォントが流行しそうだということ。
羨ましいので記事のタイトル画像に使ってみました。

すぐにでもやってみたい手法はありますが、良いタイミングでトレンドが使える案件が来るとこはなかなかないで
自分のスキルに取り込み、いつでも引き出しから出せるようにしておきたいです。

終わり

当サイトではこの他にもWebに関するお役立ち情報を多数ご紹介しています。
Web担当者の方、デジタルマーケティングに興味がある方はぜひご覧ください。

---

広告運用やSEO、解析・Web製作など、当社はWebに関わるベストソリューションをご提供しています。お悩み・ご相談も受け付けておりますので下記のボタンからお気軽にご連絡ください。

自社サイトのウェブアクセシビリティ状況、診断してみませんか？

株式会社デジタルアイデンティティでは、ウェブアクセシビリティ診断サービスを提供しています。

2024年4月、障害者差別解消法の改正施行に伴い、2024年6月から一般企業にも「合理的配慮」が義務化されています。
これに伴い、努力義務である「環境の整備」に含まれるウェブアクセシビリティについても、対応を進める企業が増えています。

こんなお悩みはありませんか？

• どこからウェブアクセシビリティ対応に手をつければ良いかわからない…
• 今のサイトで問題のあるページを一覧化して欲しい…
• ウェブアクセシビリティの具体的な改善方法を知りたい…

WCAG2.2に準拠した診断項目・達成基準で、問題のあるページをリスト化してページ単位で問題点をリストアップ。
課題点が明確になるので、具体的な改善アクションに繋げることができます。

また、診断後の改善作業を弊社にワンストップでご依頼いただくことも可能です！
ぜひお気軽にご相談ください！

ウェブアクセシビリティ診断のお申し込みはこちら