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年にトレンドになりそうなのは、スマホにて、画像の配信できる容量が大きく増えそうだからですね。
スマホで、５G通信になることで、立体的な3Dデザインのオブジェクトなども、すらすら読めるようになります。
また、一方で、3Dデザインを作れるツールが、安価になってきたのも大きいですね。
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デザインへのリニューアルなども検討してみてもいいかもしれませんね。
無料で、商用利用も可能なイラスト素材についてもまとめています！！
UI デザイン 関連記事
UI デザイン トレンド 参考にすべき webデザイン 設計 コツ などを まとめてみた！
https://saras-wati.net/web-make/ui-design-knowhow/
【人気】Sketch 海外 メジャー webデザイン UI 制作ツール クチコミ などの ご紹介
https://saras-wati.net/web-make/about-sketch/
【EC UI】shopify テーマ おすすめ 情報 事例 サンプル まとめてみた。
https://saras-wati.net/web-make/shopify-themes/
【おすすめ UI】nivel ニベル ホームページ制作 依頼内容 まとめ 無料 サービス！
https://saras-wati.net/news/about-nivel-web/
【必見】デジタル マーケティングブログ 人気 メディア 25選まとめ 知識 UI サンプル 豊富！
https://saras-wati.net/news/digital-marketing-blog-media-link/
【無料】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/