デザイン

【2021年】最新のデザイントレンド3つ

design-trend-eyecatch

時間が立つのも早いもので、もう2020年も終わりです。

デザインの勉強をし始めてから約1年経ち、少しずつですがUIのデザインやウェブのデザインもそれなりのものを作成することが出来るようになってきました。

最近はYouTubeでデザイン系の動画を見ることも多いのですが、日本語ではあまりデザイン関係の動画はまだまだ少ないように感じます。なので、もっぱら英語で海外の最新事例を見ることが趣味になってきています。

そんな中で、気になったトレンド(これから取り入れてみたいトレンド)を3つ紹介します。

3Dイラストレーション

これまでのイラストレーションに加えて、さらに立体感がプラスされたデザインが2021年のトレンドになると言われています。

サンプルを見てみると確かにいい感じ。流行るかもしれない。少しずつdribbbleなどへの投稿も増えているみたいです。

3Dイラストレーションを学べる・サンプルをダウンロード出来る・有料で購入出来るサイトのいくつか紹介します。

Figma 3D shapes

design-trend-2021

Figma 3D shapes

Figma 3D shapesは、Figmaのコミュニティで公開されているひとつのサンプルファイルです。

シンプルですが、いろいろな図形のパターンがあるので、とっかかりにはちょうど良い感じがします。

さくっとSketchに変換出来ると楽なのですが。。

UI8

design-trend-2021

3d Assets — UI8

UI8は、UIパーツ等を売買出来るプラットフォームです。色々眺めているだけでも楽しいです。

画面上部のメニューに「3D Assets」が新たに追加されているので、そこをクリックすると、3Dのマテリアルのみに絞り込むことが出来ます。数百円から数千円レベルで大体販売されているようです。

対応しているデザインツールでも絞り込むことが出来るので、本格的に3Dデザインを取り入れていく際には、是非とも参考にさせてもらいたいサイトです。

Shapefest

design-trend-2021

Shapefest™ – A massive library of free 3D shapes

割と新しめのサイトのようですが、かなりの量の3Dマテリアルが無料で利用出来ます。

形状はシンプルなものが多いですが、なんと言っても、プラスチックやガラス、金属など、様々な質感を試してみることが出来ます。

そしてそれらの全てが無料なので、入門にはうってつけではないでしょうか。

AbstracPack

design-trend-2021

abstracpack

AbstracPackは、5ドルで数多くの3Dモデルを購入することが出来ます。こちらもサイト自体は割と新し目で、faviconもwordpressのデフォルトのアイコンになっている。。。

無料でフリーサンプルも試すことができるようなので、コチラも是非見てみてください。

spline

design-trend-2021

Spline – Design tool for 3D web experiences

splineは、3Dに特化したデザインツールで、mac、windows, linuxに対応しています。

ダウンロードは無料、そして、サンプルファイルが入っているのでサクッと試してみることが出来るようです。

まだ触っていませんが、これから新しく始めるのであれば、splineという選択肢もアリかもしれません。

個人的には、Blenderを2021年に使ってみたいなと思っているところです。

Glass Morphism

design-trend-2021

読み方は、グラスモーフィズムです。

2020年には、Neo Morphism(ネオモーフィズム)というものがありましたが、あまり大躍進という感じではなかったですね。確かにボタンのぷにぷに感とか、かなりいい感じなのですが、デザイントレンドを圧倒する感じではなかった、というのが個人的な感想。

そのレベルアップ版?として、背景が見えるガラスのプレートのようなデザインなのが、このGlass Morphismです。

Neo Morphismよりも流行りそうな予感がするのですが、その根拠として、例えば、Mac OS Big Surでは、Finderのメニュー部分などが透過していたり、iOSでも純正アプリなどではNavigation部分が透過していたりと、結構目にする時が多くなってきている気がします。

透過させることがより各オブジェクトの奥行き感というか立体感を出すことが出来ており、よりリッチなデザイン表現になっているな、というところ。

そのGlass MorphismもdribbbleやBehenceなどいろいろなプラットフォームで少しずつ公開され始めているので、サンプルでいくつか紹介します。

MacOS Big Sur UI Kit

design-trend-2021

Free MacOS 11 Big Sur UI Kit

こちらは、MacOS Big Sur の UIKitを無料でダウンロードすることが出来ます。ファイルは、SketchとFigmaの2種類あります。

ダウンロードして、Glass Morphismのコンポネントの作り方等を学ぶことが出来ます。ファイルがまあまあ大きいので、少し時間がかかるかもしれません。

Glassmorphism CSS Generator

design-trend-2021

Glassmorphism CSS Generator

はやいですよね、もうCSS Generatorが出来ている。

BlurとTransparencyの数値を調整して、CSSをコピーすることが出来るサイトです。デフォルトのままでも十分ですが、少しこだわりたい場合は、調整してCSSをコピーするとよさげ。

その他、Behencedribbbleなどで、glassmorphismと検索するといろいろ出てくるので参考になります。

次のプロジェクトで使いたくなりますね。

design-trend-2021
Behence
design-trend-2021
dribbble

Large Typography

ウェブサイトのトップページ(ヒーローセクション)などででっかく表示される文字のやつですね。

font space

design-trend-2021

Free Fonts | 73,000+ Font Downloads | FontSpace

かなり凝った大きなサイズのフォントを色々見ることが出来ます。

handwritingやcute、Fancyなど、いろいろなタグ付けがされているので、検索がしやすいです。

無料で取得出来ます。

検索窓に「japanese」と入力して検索すると、300件ほどの日本語フォントも出てきます。フォントに困った時は参照してみるといいかもしれません。

awwwards

design-trend-2021

Best Examples of Typography in Web Design | Inspiration

Large Typographyをどのようにウェブサイトで使用するのか、このサンプルをたくさん見ることが出来ます。

デザインに迷ったらまずここ、というぐらい便利なサイトです。Typrography専用のセクションもあります。

Typeverything

design-trend-2021

Typeverything

かなりシンプルなサイトで、Typographyに特化しています。Typograpyに絡めたデザインのアーカイブなども見ることが出来ます。

フォント自体は、みたところ無料のものはなく、購入する必要がありますが、各フォントの詳細ページで、文章を変更してフォントを確認することが出来るので、インスピレーションを得るのにはちょうどいいなと思います。

2021年のデザイントレンドのまとめ

ざーっと3つのトレンドを紹介しました。

執筆しているのは、2020年末ですが、これからの2021年、デザインを検討するときには、このトレンドを自分でも振り返るつもりで記事にしておきました。

なにかクリエイトしたくなってきますね。

以上です。