Advertisement

 

海外サイト 99designs で公開された 8 innovative web design trends for 2020 より許可をもらい、翻訳転載しています。

 

この記事では、これから2020年に注目したいウェブデザインの最新トレンド8個をピックアップ、予想しています。「アッと驚かすデザインをつくりたい。」そんな思いにさせてくれる、たくさんのデザイン事例と一緒にご紹介です。

 

2020-graphic-design-trend-1
海外サイト 99designs で公開された 10 stunning graphic design trends for 2020 より許可をもらい、翻訳転載しています


コンテンツ目次


 

01. ダークモード Darkmode

webdesign-trend-2020-tip1-1

via DarkDesign Studio

2020年のメインとなるトレンドのひとつが「ダークモード(英: Dark Mode)」です。主にUIデザインに特化しており、ユーザーがダークテーマへの切り替えできるオプションが重要になるでしょう。暗い背景は、デザイン要素を際立たせ、コントラスト比もよりくっきりとなりますが、目の疲れを軽減することで視覚的な人間工学の改善を期待できます。
DarkDesign Studio

ダークモードのウェブデザインはモダンな見た目だけでなく、目にやさしく、配色やデザイン要素をポップに表現できます。

 

ビジュアルに優れたウェブデザインのトレンドには、実用性からはじまったものがある場合があり、実際にダークモードは、OLEDスクリーンに適しています(電力を節約し、スクリーン寿命を延ばす)。また、ウェブサイトで使われている配色の視認性を改善できる点もポイント。

 

偶然にも、ダークモードデザインは、暗闇に輝くネオンや未来都市などを描く「サイバーパンク」や「ディストピア」といった、ダークで雰囲気のある配色を利用する2020年のデザイントレンドにも最適と言えるでしょう。

 

2020-graphic-design-trend-1
海外サイト 99designs で公開された 10 stunning graphic design trends for 2020 より許可をもらい、翻訳転載しています
cyberpunk-effect
この記事では、フォトショップを使って写真をSFスチームパンク風に加工する方法をご紹介します。リドリー・スコット監督が近未来の退廃した世界観を描いた、SF映画の金字塔

 


 

02. 個性を加える不完全さ Imperfections that add personality

 

これまでのウェブデザインは完璧でありながらも、どこか事務的で温かみを感じないグラフィックが主流でした。そのため、感情と人間らしさをウェブサイトに加えることができる、不完全な手書きのデザイン要素をユーザーは求めはじめています。

来年の大きなトレンドとして、手書きのアイコンに注目しています。より感情を表現でき、前向きなデザインと言えます。暗いニュースが多いいまだからこそ、ポジティブなトレンドを必要としているのかもしれません。
Elisabetta Calabritto

 

ユニークでスタイリッシュな手書きのアイコンなどのデザイン要素は、ブランドの個性を際立たせ、ライバルと差をつけることができるでしょう。実際にこのトレンドは、ピクセル単位で設計された完璧なフラットデザインとは真逆をいく、反抗的とも言えるもの。だからこそ、ブランドがいかに人間らしくリアルであるかを示すのには、最適なテクニックと言えます。

 

手書きのアイコンであろうとイラストであろうと、2020年に入ると、意図的にラフで不完全なデザイン要素を採用するウェブデザイナーが増えてくるでしょう。

 

handwritten-natural-font
※ 2019年4月15日更新: 新しいフォント335個を追加した2019年版としてアップデートしています。現在、合計100個となります。 オシャレなカフェの黒

 

 

03. 没入感のある3Dデザイン Immersive 3D elements

webdesign-trend-2020-tip3-1

via GG Marmont | Gucci

webdesign-trend-2020-tip3-4

via A-0 Design

 

グラフィックやインタラクションデザインの分野では、3Dテクノロジーを使用する機会が増えることが期待されています。デザイナーは3D空間をクリエイティブに表現するオプションもたくさん持っており、わたしたちの五感すべて取り入れた体験を提供しはじめるでしょう。
Pinch Studio

立体的な3Dデザインは、いつの時代もひとに喜ばれてきました。このトレンドがくすぶっていた理由は、これまでのテクノロジーの遅れと高額すぎるツールの数々でした。しかし現在では、NASAが使っているような高度な機器なしで、より手軽に3Dデザインを設計できるようになり、ますます多くのデザイナーに門戸を開いています。

 

VRがより主流となり、費用対効果がもう少し良くなるまでは、スクリーン画面全体にフィットした超リアルな3Dデザインによって、没入感のあるウェブサイト体験を提供すると良いでしょう。これは見た目だけでなく、ユーザーエクスペリエンスにっても効果的です。

 

インタラクティブな3Dデザイン設計によって、ユーザーはより長くサイトに滞在できます。2020年にかけて、より没入感のある3Dウェブデザインが注目され、リアルとデジタル空間の境目をなくすことが期待されています。
 

 

04. ソフトシャドウと重なり合うフローティング要素 Soft shadows, layers and floating elements

ソフトシャドウと浮かんでいるようなフローティング(英: Floating)デザイン要素は、3Dエフェクトにも似た雰囲気を作成し、レイヤー状に重なった面白さを演出できます。
Alex Ivanov

このトレンドは、奥行き感を表現するテクニックで、上記の3Dデザインにも似ていますが、もう少し控えめに抑えたいときに効果的です。ソフトシャドウとフローティング要素は、ユニークさと奥行き感を追加し、ウェブデザインをライトな3Dエフェクトな見た目に仕上げます。グラフィックだけでなく、文字テキストや写真にもこのテクニックを使用できます。

 

マテリアルデザインの原則をさらに一歩進めて、デザイナーはソフトなドロップシャドウとレイヤー要素を重ねることで、やや立体的な奥行きを広げることができます。この効果によって、デザイン要素がお互い浮かんでいるような、デザインに軽量感を与えます。のっぺりと平面的なクラシックなフラットデザインとは、まったく対照的なトレンドと言えるでしょう。

 

diffuse-shadow
最近ウェブサイトやUIデザインなどを見ていると、ふわりと浮いているような奥行き感を表現しているものがあります。これは拡散型シャドウ(英: Diffuse Shado

 

 

05. グラフィックと写真の組み合わせ Mixing photography with graphics

webdesign-trend-2020-tip5-1

via Zhenya Rynzhuk

イラストやグラフィックを写真に組み合わせることで、カスタマイズされた本当のメッセージを伝えます。プロダクト製品の写真や人物モデルの写真でも、ブランディングをよりうまくサポートでき、他にはない魅力を表現するのに役立ちます。
HIroshy

写真の上にオリジナルのグラフィックを重ねることで、記憶に残りやすいデザインに仕上げ、よりクリエイティブな表現が可能となります。

 

このコラージュのようなトレンドは幅広いデザインに利用でき、多目的です。上記サンプル例のように、何気ない製品写真に特別なかわいさや魅力を追加したり、より真面目なイラスト要素などを用いることで、テック系や金融など複雑なコンセプトをよりうまく伝えることもできます。画像をカスタマイズし、ウェブデザインに個性をうまく追加できるテクニックと言えるでしょう。

 

このトレンドの柔軟性を最大限に活用するには、イラストやグラフィックスタイルをブランドの個性に合わせるようにすることがポイントです。採用するスタイルによって、写真を見たひとがどのように感じるかが決まり、漫画のようなイラストはより遊びココロのあるものとなり、より幾何学的な細かいイラストは、洗練されたイメージとなります。

 

free-illustration-collection
この記事は、2019年4月23日に公開してから再編集、アップデートを随時行っています。新しい無料イラストを加え、合計36個のフリー素材サイトを紹介しています。
best-of-free-photo-site-top5
この記事は、2016年12月7日に公開された記事を再編集しています。新しいサービスを16個を追加し、サービスが終了しているものは削除し、合計58個のフリー写
screencapture-mazwai-2019-09-10-17_48_24-2
この記事は、2016年12月16日に公開してから再編集、アップデートを随時行っています。新しいツールを加え、サービスが終了しているツールは削除し、合計16個のフリー

 

 

06. 余白スペースを使った枠フレーム Solid frames of white space

webdesign-trend-2020-tip6-1

via akorn.creative

webdesign-trend-2020-tip6-6

via Daan Spits via QVT

 

ウェブサイトの余白スペースを有効活用し、フルスクリーン画像やパララックスエフェクトをできるだけ避けるようにしています。デザイン要素を「フレーム化」することで、画像が存在感を増し、ポップに目立たせることができます。
Daan Spits

ウェブデザインではかなり長い間、フルスクリーン画像が流行しています。デザイナーはより多くの余白および任意のスペースを利用することで、レイアウトを構造化し、また枠フレームで画像を囲むことで、デザインの安定性をうまく表現するようになっています。

 

2020年には、ウェブページ上の各デザイン要素に十分な余白スペースを持たせ、枠で囲むことで魅力的なデザインの基盤を作成します。ウェブサイトの周りのフレームは、優先順位や階層をうまく作り出し、コンテンツに応じて分別するのにも役立つでしょう。

 

visual-hierarchy-technique
視覚的な階層(英: Visual Hierarchy)は、優れたウェブデザインにとって不可欠です。ウェブサイトの目標を効果的に達成できる主要ルールの一つと言えるでし

 

 

07. 輝く明るい配色カラー Glowing, luminous color schemes

未来的な配色とデザインは2020年のトレンドとなり、遠近感を利用したアイソメトリック・デザインや青やむらさき、ホットピンクなどの色を取り入れることで、未来的な輝きのあるデザインを提供します。
99designsアートディレクター Adrianne Mesnard

2020年に向けて、ウェブデザインをより魅力的にする、戦略的で大胆な色の組み合わせが登場するでしょう。暗闇で光るネオンと彩度の高い色を、暗く落ち着いた色合いと組み合わせることで、輝きのある雰囲気を演出できます。

 

特にデュオトーンを使ったウェブデザインは、この新トレンドの相性も良く、新しいスタイルをつくりだし続けています。これまでにない大胆で未来的なネオン色のポップさが、控えめな色合いとうまくマッチし、生命力にあふれるフレッシュなビジュアルを作り出します。

ユニークなデュオトーンのウェブデザインは視覚的にもユニークで、魅力的です。このスタイルを利用すれば、ほとんどすべての画像をブランドイメージで統一することもできます。
Deandesign

2020年も、魅力的な配色がウェブデザインにおいて重要な役割を果たすでしょう。超ミニマルスタイルやダークモードなど、他のウェブデザイントレンドと一緒に活用することで、明るく輝く色をより輝かせることができるでしょう。

 

duotone-effect-2-top
ウェブサイトやグラフィックデザイン、音楽サービス Spotify などで見かけるようになったデザインのひとつが、鮮やかでシンプルな配色の組み合わせが特長のデュオトー

 

 

08. 超ミニマル・ナビゲーションメニュー Ultra minimalist navigation

webdesign-trend-2020-tip8-1

via Alt*CEVA

webdesign-trend-2020-tip8-6

via https://dribbble.com/sathish-erra

2020年には、ウェブサイトのコンテンツは音声スクリプトを使用した動画になり、文字テキストはより少なくなり、説明もより的確になるでしょう。ウェブデザインが全体的により簡単になり、ナビゲーションが容易になります。
Ananya Roy

スマートウォッチのようなウェアラブルデバイスの登場に伴い、ウェブデザインは一般的により小さく考えられています。この影響をもっとも受けるのがナビゲーションメニューで、ウェブサイトのコンテンツを結びつける接着剤のようなもの。過去数年で、ナビゲーションメニューはますますシンプルになり、これからは極小デバイスにも対応できるようになるでしょう。

 

100css-menu
ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイル
mobile-alternative-menu-1
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているの

 

超ミニマル・ナビゲーションメニュー(英: Extremely Minimalist Navigation)は、使いやすさに関する多くの問題を取り除きます。ユーザーがコンテンツ移動について考える時間が短くなればなるほど、ウェブサイトに没頭する時間が長くなり、実際に何も考えずに、コンテンツ移動するようになるでしょう。

 

それと同時に、画像の重要性がより増してくるでしょう。高解像度の写真や動画は、最小限の文字テキストを使用し、ユーザーを感動させるチャンスです。

 

巨大な写真やビデオ動画には明らかなメリットがあり、注目してほしい要素に注意を引きつけることこそが、より多くのウェブサイトが美しいビジュアルの大きな画像を利用し始めている理由だと思います。
Coincept

ウェブページ上の文字テキストが少なくなると、大きな画像に注目が集まり、レイアウトの焦点、フォーカル・ポイントとなります。画像にもっとも注目が集まるので、言葉がなくても伝わるパワフルで、アートなビジュアルを利用するよう心がけましょう。

 

 

 

2020年の準備はできていますか。 Are You Ready for 2020?

 

2020年のWebデザインのトレンドは、注目を集めるビジュアルや配色、3D効果、そして再定義された古いトレンドなど、どれも新しいスタイルをよく表しています。この動きは画面を越えて広がり、超ミニマルなナビメニューや目の負担の少ないダークモードのように、よりユーザーフレンドリーなUX体験を重視しているのがよく分かります。

 

2020年という新しい時代を迎えるにあたり、ウェブデザイナーは未来と過去から同時にインスピレーションを得るよう目を向けています。この相反するデザインスタイルやトレンドの組み合わせによって、2020年のウェブデザインは驚きに満ちていると言っても過言ではありません。

 

go
海外サイト 99designs で公開された 10 cutting-edge web design trends for 2019 より許可をもらい、翻訳転載してい

 

参照元リンク : 8 innovative web design trends for 2020 – 99designs