フラットデザインが登場した頃、 「フラットデザインはマテリアルオネストで、 スキューアモーフィックデザインはマテリアルディスオネストだ」 という議論があったみたいです。 確かに視覚的に見るとそう思える。 擬似的にスイッチみたいな形状を作ったり、 木目のテクスチャを背景に敷いたりするのは、 現実のフェイクにすぎない。
でも、個人的には 「Webデザインにおけるマテリアルオネスティとは？」の問いに対して、 上記とは少し異なった考えを持っています。
CSS3では色やボーダーだけでなく、 画像を使わなくても様々な形やテクスチャを書けるようになりました。 円や平行四辺形、グラデーション、ドロップシャドウ、奥行きなど…
ページロードスピードの観点から考えると、 CSS3で多くのものが書けるのに、 装飾のために、わざわざ画像を使用することが、 ソースコードに対してマテリアルディスオネストではないでしょうか。 なぜなら、「かっこいい」「かわいい」という装飾的な理由以外に わざわざ画像を使用する理由がないわけですから。
そういう視点で考えると、 ソースで書けるSVGもマテリアルオネスティだと考えます。 画像なので少し矛盾があるかもしれませんが、 ソースなので最悪メモ帳でも書けるわけですからマテリアルオネスティだと思います。 CSSやJavascriptでコントロールできますしね。 また、canvasもマテリアルオネスティですね。
要するに、フラットか否かではなく、 「ソースで書ける範囲のものか否か」で マテリアルオネスティを捉えているわけです。 ちなみにこのYOLXのサイトでは、 この「マテリアルオネスティの基準」に則って、 基本的には装飾的なデザイン要素は排除しています。 また、メインビジュアルやアイコンなどの一見装飾的に見えるパーツも CSSかSVGを使用し、マテリアルオネスティを厳格に守っています。
アーカイブ