マテリアルデザイン・フラットデザインが主流のWebサイトデザイン
一般の方でもWebデザインがこの１~２年で大きく代わったと感じていることでしょう。最近、フラットデザイスマホファースト・モバイルファーストという言葉がネット上でよく見られるようになった。この概念は、スマホを中心に考えたデザイン指向であるが、それに並行してマテリアルデザイン・フラットデザインと言われるデザイン指向もおおく見かけるようになりました。弊社では、錯塩リニューアルしたWebサイトは、このフラットデザインによるスマホファーストで制作されております。
それ以降に弊社で制作される殆どのサイトが、ワードプレスによるスマホファーストでフラットデザイン・マテリアルデザインを採用しています。
上記は、GoogleのWebデザインツールのサイトです。PHOTO SHOPがなくても無料で使えます。
マテリアルデザインとは？
Googleが推奨するマテリアルデザインとは、物質（マテリアル）は比喩（メタファー）という難しい言葉による概念です。フラットデザインとマテリアルデザインは似ているようですが、考え方が全く異なります。スマホでの操作性を重視しているのはどちらも同様で、フラットデザインにモーションを与えるという点では、どちらも似たようなモノになるかも知れません。
マテリアルデザインは「視覚」ではなく「触覚」に語りかけるようなグラフィックデザインで、実際に操作しているかのような効果を演出するデザインです。フラットにデザインされたものに意味のあるモーションを加えることで、ストレスなく操作方法等をガイドすることに長けています。影を利用するなど多少のリアリティがある表現もマテリアルデザインの範囲内で、Google社より制作ガイドラインが設けられているため、迷うことも少なく制作することができるでしょう。
フラットデザイン
フラットデザインとは？
フラットデザインでは、基本的にボタンなども画像を使わず、CSSで記述されます。それによってスマートフォンなどのモバイルの電波状況も考慮されています。また、このデザイン思考ではシンプルで、現代的なイメージが感じられます。ただ、PSDなどでデザインを表現する時にCSSなどを理解していないとなかなか制作が難しくなります。また、フォントなどもWebフォントが活用されます。
フラットデザインとマテリアルデザインは一見似たようなグラフィックデザイン手法に思えますが、実は根本的な考え方、表現の仕方が異なります。それぞれにメリット・デメリットが存在し、シーンに合わせて使用していくことで、効果的に魅せることができます。
上記のように２つのWebデザインの概念を有効に使いこなすことが大切になっている時代だということを一般の方もご理解ください。
