フラットデザインをより魅力的にする、新スタイルトレンド5個まとめ

newflat_top

 

「フラットデザイン」という言葉をよく耳にするようになり、しばらく経ちますが、大手サイトの多くも、そのトレンドを採用するようになってきています。しかしWebデザインの移り変わりはとても早く、すでに世界中でフラットデザインをベースにした新しいスタイルトレンドがいくつか出てきているようです。

 

 

海外デザインブログNaldz Graphicsで、フラットデザインを進化させた、デザイントレンド5つをまとめたエントリー「Evolution of Flat Design – Creative Emergence for Flat Aesthetics」が公開されていたので、今回はご紹介します。

 

 

 

詳細は以下から。

 

 

 

[dropcap1]1[/dropcap1] ロング・シャドウエフェクト

 

 

トレンドの中でも特によく見かける、斜め45度で影を追加するロング・シャドウエフェクトは、もともと写真を撮影するときに、コントラストを強くすることで、ストーリー性を演出するテクニックから生まれました。ロング・シャドウ無料作成ツールなども公開されており、多くのサイトがこのトレンドを採用しています。

 

2-jamy-icons-dribble

Clock

 

 

3-ipad

iPad Mini

 

 

4-icons-social

40 Social Media Flat Icons

 

 

5-man_of_steel_icon

Theme

 

 

6-bowie-wolf

iOS

 

 

 

[dropcap1]2[/dropcap1] 淡いグラデーションを使ったデザイン

 

 

カラフルで鮮やかな配色のデザインは、単色でペイントした、「フラットな」デザインです。さらに淡いグラデーションを加えることで、繊細な質感を演出することができるようになります。

 

7-camera

Camera

 

23-fr-icons

Calendar Switch Icons

 

 

9-icon_1x

Not The New Clear iOS 7

 

 

10-iOS-conc

iOS 7 Concept

 

 

11-dribbble

Flat Design ICons Set vol3

 

 

 

[dropcap1]3[/dropcap1] ドロップシャドウエフェクト

 

 

淡いグラデーションを追加したのと同時に、ほんのりとした影を表現する、ドロップシャドウエフェクトを利用する、デザイナーさんも増えているようです。これにより、背景からデザインが浮いているような効果を演出します。

 

8-icons-brown

Flat Icons Brownie Theme

 

 

14-squares

Squares

 

 

16-22111

Flat Icon

 

 

12-dribbble_matchbox

Android Icons

 

 

13-shield_icon

Shield Flat iOS App Icon

 

 

15-800x600

Theme

 

 

 

[dropcap1]4[/dropcap1] 3Dフラットデザイン

 

 

フラットデザインという位ですから、平面的に仕上げることがベースとなっていますが、世界にはフラットデザインを3D化してしまったひともいるようです。ドロップシャドウをうまく利用することで、フラットデザインの本質を残したまま、立体的に仕上げています。

 

24-super-simple-icons

Super Simple Icons

 

 

17-full

ICT Mockup

 

 

18-r__hotel

“R” Hotel

 

 

25-square-isometric

Squares Isometric

 

 

 

[dropcap1]5[/dropcap1] ベベル加工エフェクト

 

 

アイコンやロゴを立体的に魅せるベベル加工エフェクトは、デザインの質感を高めるだけでなく、ドロップシャドウやロング・シャドウと一緒に併用しているケースも増えています。

 

20-iosiconaphonep

Icons

 

 

21-blue-identity

Blue Web Identity

 

 

22-g-plus

Long Shadow Flat Icons

 

 

デザイントレンドは、少しずつ着実に変化しています。これらの新しいデザインエフェクトも参考にしながら、今後のデザイン制作に活かしてみてはいかがでしょう。

 

 

参照元リンク : Evolution of Flat Design – Creative Emergence for Flat Aesthetics – NaldzGraphics.net