デザイントレンドをおさえてユーザビリティ・ブランディングを制する!

デザイントレンド

Webデザインを考えるときにブランディング目的なのか、ユーザビリティに配慮したものにするのか等、用途に合った施策を考え、デザインの方向性を決定する必要があります。
方向性を誤るとデザインに投下する予算や時間など、大きな損失を生み出す危険性もあります。
そこでこの記事では、近年のWebデザインの流行を踏まえ、様々なデザインのテイスト/タイプを紹介していきます。
デザイン制作に入る前にテイストや方向性を決める一助になればと思います。

スキューモフィズム

スキューモフィズムデザインはリッチデザインともよばれていますが、「実際にある物質に似せてデザインをする」手法を指します。
代表的な例でいえば、例えばiphoneが発売された当時、スマートフォンのボタンなどのインターフェースにはほとんどの人が慣れていない状況でした。
そこでAppleはボタンにグラデーションをかけ立体的に表現してボタンを強調させる手法をとりました。
これによってボタンという事が直感的に認識することが可能になりました。

スキューモフィズムデザイン
スキューモフィズムデザインは立体的にパーツが構成され、「わかりやすい」UIになる

今ではあまり見られない古めかしいUIのデザインになり、2013年以降、ほとんどが後述するフラットデザインに移行する形になります。
スキューモフィズムデザインのデメリットとしては過度な装飾になるため、情報過多になり情報が見ずらくなる、 洗練性が損なわれる、といった点が挙げられます。
ですが、メリットとしては「わかりやすさ」が挙げられるので銀行のATMの操作画面や役所関係の端末のボタンなど、老若男女、様々な人々が使用するシーンではいまだ現役で採用されるデザインといえるでしょう。

銀行ATM
銀行ATMなどのUIはわかりやすさが重視されるため、スキューモフィズムデザインが採用されることが多い

また、スキューモフィズムデザインは「実際にある物質に似せてデザインをする手法」なので、 近年、紙や鉄の質感を表現する手法として再ブームが起こっています。

スキューモフィズムデザイン
https://www.seaharvest.net.au/
現実世界にある新聞を模したようなデザイン。こちらも現実にあるような質感で作成されているのでスキューモフィズムデザインにあたる。

フラットデザイン

スキューモフィズムデザインに代わり、デザインの主流になったのがこのフラットデザインです。近年でもフラットデザインがベースになりデザインが展開されているWebサイトは多いです。
人々がモバイルのインターフェースに慣れ始めると、過度な装飾が排されたフラットデザインが採用され始めました。
グラデーションや影など無駄な装飾を廃して、情報を整理し、ユーザーに見やすく情報を届けることが出来るデザインです。

フラットデザイン
ボタンなどのパーツも一切立体的に装飾せず、フラットに設計。情報を見やすく伝えている。 https://shiftbrain.com/ https://yapp.li/

Googleのロゴがフラットデザインにリニューアルされたことは象徴的で、Webデザインにも情報整理の波が一気に押し寄せた動きともいえるでしょう。

Googleのロゴは2013年にフラットデザインにリニューアルされた。

また、フラットデザインはWebデザインにおけるレスポンシブデザインにも大きな変革をもたらしたもので、まさにUI革命といっても過言ではないかもしれません。

マテリアルデザイン

マテリアルデザインはスキューモフィズムデザインとフラットデザインを融合させたようなデザイン手法です。
2014年にGoogleが策定したデザインガイドラインで、制作手法も明確に定義づけもされています。フラットデザインでは情報をわかりやすく伝えるためボタンなどもすべてフラットにするデザイン手法ですが、同時にインターフェースとしての「わかりやすさ」も失われる危険性も孕んでいます。
マテリアルデザインではこのような問題を解消すべく、より現実に即した直感的な操作を可能にするデザイン手法でもあります。
フラットデザインをベースに影(ドロップシャドウ)などを足し、より直感的にユーザに対して操作を促します。

マテリアルデザイン
ボタンなどのオブジェクトを「浮かせる」ことによって、ユーザビリティの向上を図る Source:https://material.io/design/environment/light-shadows.html#light
マテリアルデザイン
Source:https://codepen.io/nw/details/rVdPQW/

先述した「現実世界のルールに即したデザイン」でありますので、制作時のルールは厳密です。たとえば各オブジェクトは「紙」と「インク」の要素としてとらえ、シャドウのつけ方も、現実での影の付き方と同じように定義し、設計しなければなりません。
また、タップやスワイプなどといったユーザの操作によるアニメーションに対しても使用されます。ユーザの操作を起点として現実と同じ=自然でなければなりません。
このように現実世界と同じようなユーザエクスペリエンスを提供することによって、ストレスがないインターフェースを実現できるのです。

マテリアルデザイン
https://www.uplabs.com/posts/news-app-ui-41e1eacd-aad4-4c6d-8e83-f5197e2c14b0

マテリアルデザインはルールが定義づけられているため、慣れないうちは制作時にはやや複雑に感じるかもしれません。
googleの公式動画にも解説がありますので参考にしてみてください。

また、「MaterialUP」ではマテリアルデザインの参考サイトが大量に掲載されているので参考になりますので覗いてみてはいかがでしょうか。

ニューモーフィズム

ニューモーフィズムは2020年頃から注目されているデザイン手法で、「ボタンやオブジェクトを背景から隆起させる」手法です。より洗練されたデザインを実現することが可能です。
マテリアルデザインとの違いは、マテリアルデザインはボタンなどのオブジェクトに影をつけ、浮かせる(float)手法に対し、ニューモーフィズムは隆起(Uplift)させる手法になります。

ニューモーフィズム
ニューモーフィズムのパーツは隆起する

洗練されたデザインを実現できるのですが、ユーザビリティ(ボタンなどのわかりやすさ)の観点からみると マテリアルデザインを採用することも多く、現状ではまだ世界的に流行しているわけではありません。

ここまでは主にインターフェースデザインに応用できるデザインの手法をご紹介してきましたが、ブランディングなどにも応用できるテイスト面でのデザイン手法をご紹介します。

デュオトーン

デュオトーンはコントラストが強い2つの色の組み合わせで表現されたデザインです。「Spotfy」のデザインが採用し、広めたとされています。
非常にインパクトが強いビジュアルで訴求ができ、なおかつ制作時間に対するコストが低く便利な手法です。

デュオトーン
デュオトーンは「Spotify」が広めたとされています。
デュオトーン
https://sportsmanship-heros.jp/

グラフィックデザイン、Webデザインなど平面系のデザインに多用されています。 デュオトーンにグラデーションをうまく取り入れると、より効果的に引き立たせることが出来るでしょう。

アイソメトリックイラスト

アイソメトリックは「等角投影法」の事で、斜め俯瞰から見下ろすようなデザインです。 近年、主にイラストで使用されることが多くWebデザインのトレンドになっています。

アイソメトリックイラスト
https://agriculture.kubota.co.jp/virtual-exhibition-2021/
アイソメトリックイラスト
https://corp.glad-cube.com/
アイソメトリックイラスト
https://jp.merpay.com/

街やオフィスなどを俯瞰したものが多く、例えばソーシャルサービスやインフラ事業など 社会的なつながりを意識したイメージを作り出したいときに使用されることが多いです。
イラストで表現することでグッとユーザに対して身近になります。

幾何学図形/模様

幾何学模様は80年代にメンフィスグループらによって、一世を風靡したデザインでしたが、近年でもデザイントレンドとして人気が高まってきており、人気の手法となっています。
一見シンプルな幾何学図形ですが、うまく使いこなせばアーティスティックでモダンな印象を作り出すことが出来ます。

幾何学図形/模様
https://multiple.work/
幾何学図形/模様
https://www.andywarholkyoto.jp/
幾何学模様
https://3s.group/en/

タイポグラフィなどと合わせると幾何学模様がより効果的に表現されるので試してみてはいかがでしょうか。

3Dグラフィック

近年3Dグラフィックを使用したWebデザインも増えてきました。
「WebGL」や「three.js」などのWeb上で3Dグラフィックを実現する技術が広まり、3DデザイナーもWebの現場で活躍しています。
今までは2Dのみのデザインがほとんどでしたが3Dにより立体的なプロダクト商品や、建造物などを様々な角度からユーザに見せることが可能となり、ブランディングや商品PRなどにおいても 大きな力を発揮することが可能になります。

3Dグラフィック
https://ringo-applepie.com/lp/icebar/
3Dグラフィック
https://www.31ventures.jp/
3Dグラフィック
https://bruno-simon.com/

デザインには常に流行があり、うまく使うことによりユーザーにアピールすることやユーザビリティを高めることが可能です。
デザインの流行は音楽やソーシャルサービスなどと同様に、主にアメリカから発信され、それがトレンドとなることが多いです。最新のWebデザインを評価しているサイト「awwwards.」や、日本ですと「muuuuu.org」などが参考になります。制作時に一度覗いてみてはいかがでしょうか。