%

Fragola-chanの日記

マーケティング初めて女子の奮闘記

おしゃれなWebデザインを作るためのカラー設計とデザイントレンド!

f:id:Fragola-chan:20190417231418j:plain

 

こんばんは! 

Web業界では、まだまだ未熟ないちご事、Fragola-chanです!

 

今日は、Webサイトのカラー設計についてちょっと触れて見たいと思います。

 

実は、私過去の仕事柄、色に関しては、ちと、うるさくて、

恥ずかしいですが、パーソナルカラー診断とかできます。

資格保持者です!

が、かれこれ、5年くらい実践してないけどね。

 

そんな経験もあってWebサイトのデザインのトレンドってあるのかなぁと、

ふと気になり調べて見ました。

 

すると以下のようなサイトにたどり着きました。

 

とても興味深く、これを知ってネットサーフィンしたら、

きっと、

『このサイトは、フラットデザイン系で作られてるな!』とか、

『このサイトは、今トレンドのマテリアル系で作られているな!』とか、

楽しめると思います。

 

また最後に、Google様のおすすめする、Webのカラー設計をご紹介したいと

思います。

 

1、スキューモーフィズム

スキューモーフィズムは、UI(User Interfaceユーザーインターフェイス)と
ウェブデザイン用語で、

現実世界にあるものに似せてたデザインで、ドロップシャドウ・リアルな質感・反射・

面取りなどのような効果をよく使います。

 

しかし、モバイル技術が進歩するとともに、世の中はユーザービリティに重点を

置くべきという流れになり、これがシンプルさが新しいデザインスタンダードとなった

そうです。

 

そこで、現れたのが、フラットデザインです。

 

ただ、スキューモーフィズムがなくなったわけではなく、キャラクターやユーザーを

没頭させることが重要なゲームでは、スキューモーフィズムは今でも広く使われて

います。

 

 

2、フラットデザイン

2013年くらいから、今までの立体的なスキューモーフィズムなデザインから、

平面的なフラットなデザインへ移行していきました。

フラットデザインは、ドロップシャドウ、テクスチャー、グラデーションといった

スタイル要素を排除し、フォントとアイコンと色の遊びのようになっています。

平面的で装飾的なディテールが排除された画面デザインの中では、

カラーによる視覚的なコンテンツの差別化が効果的でした。そのため、

ビビッドなカラーを使ってコンテンツを認識しやすくするWebサイトが多く

見られました。

 

3、マテリアルデザイン

 

2014年に発表されたGoogleマテリアルデザインは、

近年のWebデザインにおいて大きな影響を与え、ビビッドで大胆な色使いの

サイトが多く見られるようになりました。

ここで定義されたカラーシステムを取り入れることで、ユーザビリティを考慮した

デザインを実現できます。

 

マテリアルデザインは自然に生まれた流行りのデザインスタイルというより、

どちらかと言うとブランド製品です。この点がフラットデザインとの主な違いと

考えられるものです。 

  

こちらが、Google様おすすめのマテリアルデザインのカラー設計の仕方です。

Googleさんは、こんな事も教えてくれるんですね。

すごい!

material.io

 

下記のサイトもとても面白です。

是非参考に見てみてください。

webdesign-trends.net