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

2020年1月22日
2021年12月8日
Web制作, ノウハウ
webマーケティング, yahoo, コンテンツマーケティング, web制作, デザイン

Web制作

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

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

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

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

1 ダークモード(Darkmode)
2 3Dデザイン
3 フローティング
4 枠＋余白で画像に余裕を持たせたフレーム
5 ナビゲーションメニューの削減
6 まとめ：2020年のwebデザインのトレンド要素は？
7 UI デザイン関連記事

ダークモード(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年にトレンドになりそうなのは、スマホにて、画像の配信できる容量が大きく増えそうだからですね。

スマホで、５G通信になることで、立体的な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デザインのトレンドでご紹介した５つの点は、以下のような環境の影響も大きくあります。

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

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

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

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

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

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

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

【EC UI】shopify テーマおすすめ情報事例サンプルまとめてみた。
https://saras-wati.net/web-make/shopify-themes/

【無料】UI デザインツール Figmaとは利用方法ワイヤフレーム制作にも便利！
https://saras-wati.net/knowhow/what-figma/

UI とは ? ユーザーインタフェースデザインの優れた事例紹介
 https://saras-wati.net/marketing/about-ui/

【デザイン】おしゃれなweb アパレルファッションニュースメディア 5選
 https://saras-wati.net/marketing/admake-sp-sales-marketing/

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