【2020年】webデザイン トレンドまとめ 厳選5選 ホームページの見せ方は?

webデザインは、トレンドがあります。流行によって、ホームページがいつくらいに制作されたかも予想がつくほどです。

そこで、今回は、これからトレンドになるかも!と、2020年に注目されているウェブデザインの最新トレンドを厳選して5つピックアップしました。

  • わかりやすいホームページを作りたい
  • 他社、他サービスと差別化をしたい
  • 最新のブランディング展開をしたい
  • 感動や驚きのwebデザインを作りたい

いろいろと考えることもありますが、2020年のwebデザインのトレンドをまとめて解説していきたいと思います。

ダークモード(Darkmode)

2019年に、PCやスマホのOSがアップデートされました。その結果ダークモードが標準機能として提供されるようになりました。

そもそも、ダークモードとは、背景が黒めのデザインのwebモードです。

背景に黒系統のカラーを配置するダーク系配色を採用したものです。

ダークモードの事例

以下のようなホームページ、アプリで活用されていますね。

ネットフリックス
https://www.netflix.com/jp/

Spotify
https://www.spotify.com/jp/

Yahoo!ニュースアプリ
https://techblog.yahoo.co.jp/entry/20191213789026/

ダークモードのメリット

ダークモードには以下のメリットがあるといわれます。

  • 目の疲労軽減
  • バッテリーの節約
  • 就寝への影響を軽減

*あくまで言われているというものですね。

参照 workship magazine
話題のUIデザイン「ダークモード」作成のポイントを徹底解説!カラーパレットは「機能ごと」「最小限」に
https://goworkship.com/magazine/dark_mode/

ダークモードのポイントは、Webサイトでは、ダークモードに対応しているサイトはまだ多くない状況だから、他社サイトとの差別化になるのが、ポイントです。

ダークモードのキーワードとしては、

  • 未来性
  • テクニカル
  • ディストピア
  • 都市

といったところですね。

ダークモードの設定方法~CSS編~

Webサイトのダークモード対応はCSSだけで簡単にできます。

CSSで調整可能なんですが、実装コストが増えたり、メンテナンスコストもあがるので、実装する際には、考えた方がいいかもですね。

CSSでのダークモードの設定方法は、
prefers-color-scheme: darkを指定することで設定ができます。

デバイス側で、ダークモードが設定されている場合のスタイルを以下のように
別でCSSに記述することができます。

@media (prefers-color-scheme: dark) {
body {
background: #333;
color: #fff;
}
}

引用:MOZILA 開発用ドキュメント
https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme

3Dデザイン

3Dデザインが、2020年にトレンドになりそうなのは、スマホにて、画像の配信できる容量が大きく増えそうだからですね。

スマホで、5G通信になることで、立体的な3Dデザインのオブジェクトなども、すらすら読めるようになります。

また、一方で、3Dデザインを作れるツールが、安価になってきたのも大きいですね。

VRなどの映像展開も増えてきています。

初期費用無料!VRコンテンツの作れるブリンキー

3Dデザインは、VRほどではないですが、ホームページで、ユーザー体験をより豊かにしてくれます。見た目より、ユーザーエクスペリエンスの強化にオススメです。

3Dデザインの事例
https://hny2018.pixelfordinner.com/

3Dでフルウィンドウ!目立つ目立つ

フローティング

フローティングは、奥行きを出せます。

ボタンに立体感を出して、より、ユーザーへ注目を誘えます。

3Dデザインまでは、予算が出せない、、、そんなときにも使えます。

基本的には、CSSや画像でできます。

具体的には、ソフトシャドウ、ドロップシャドウですね。

これによって、文字テキストも、くっきり!!みやすくなりますね。

今までは、平面的なフラットデザインが主流でした。

これからは、変ってきます。

立体感のあるデザインを活用していく時代になっていきます。

プロではないと、作りこめない世界になってきますね。

フローティングの事例
https://shopjackie.com/

奥行きがでますね。

枠+余白で画像に余裕を持たせたフレーム

フルスクリーンの背景画像がトレンドだった近年のwebデザイン。

どーん!というのがよかったんでしょうね。

しかし、このデザインの場合、背景と写真がうまく融合できない、という難点があります。結果的に、目立たせたいコンテンツがわからない、なんてことも。

2020年は、スマホデバイスがどんどん大きくなってきていることもあり、余白をうまく表現するホームページのデザインが増えそうです。

具体的には、画像を枠で囲む。その際、余白スペースをしっかり持つ。

スペース、余白を持たせた画像の事例としては、最新のカルビーのホームページもそうなるでしょうね。

9年ぶりにリニューアルしたそうです!

カルビー コーポレートサイト
https://www.calbee.co.jp/

引用:PRTIMES
約9年ぶりにコーポレートサイトを大幅リニューアル!デザインを全面刷新、閲覧機能・操作性を向上
https://prtimes.jp/main/html/rd/p/000000332.000030525.html

ナビゲーションメニューの削減

今まで、グローバルナビゲーションがあることが、わりと当たり前だったwebデザイン。

ただ、スマートウォッチや、小さいスマホも普及されはじめています。

結果的に、コンテンツに押される形で、2020年はナビゲーションメニューが小さくなっていくことでしょう。

だいたい、ナビゲーションメニューが大きすぎるよりも、コンテンツ内で、導線設計をしていけば、それだけでも、うまく誘導できるはずです。

webページの利用者が何も考えずに、コンテンツ移動できるようなUIを設計するようにしていけばいいのです。

テックアカデミーさんの出しているwebマガジンなんかも、グロナビが小さくなってきている事例ですね。

テックアカデミーサイト

https://techacademy.jp/magazine/

まとめ:2020年のwebデザインのトレンド要素は?

webデザインといえど、環境に左右されます。

2020年のwebデザインのトレンドでご紹介した5つの点は、以下のような環境の影響も大きくあります。

  1. ダークモード
  2. 5Gでスマホの大容量表現が可能になる
  3. スマホデバイスの巨大化 or ミニマム化
  4. スマホで閲覧しやすい余白対応

これらの環境の変化にあわせたwebデザインこそ、ホームページをより豊かにしてくれます。

ただし、デザインにばかり、頭を寄せないで、ホームページの利用者にとって、使いやすい設計が重要なのは、言うまでもありません。文字をよむのが苦痛の人もいれば、画像だけのwebサイトでは、理解が出来ない人もいます。

webデザインはバランスも重要です。

せっかくの機会ですので、2020年対応をしたwebデザインへのリニューアルなども検討してみてもいいかもしれませんね。

無料で、商用利用も可能なイラスト素材についてもまとめています!!

UAT(受け入れテスト)の方法3つのまとめと解説