UIデザイン会社 | YOLXトップへ

Webデザインにおけるマテリアルオネスティとは？

フラットデザインが登場した頃、 「フラットデザインはマテリアルオネストで、 スキューアモーフィックデザインはマテリアルディスオネストだ」 という議論があったみたいです。 確かに視覚的に見るとそう思える。 擬似的にスイッチみたいな形状を作ったり、 木目のテクスチャを背景に敷いたりするのは、 現実のフェイクにすぎない。

でも、個人的には 「Webデザインにおけるマテリアルオネスティとは？」の問いに対して、 上記とは少し異なった考えを持っています。

ソースで書ける範囲のものがマテリアルオネスティ

CSS3では色やボーダーだけでなく、 画像を使わなくても様々な形やテクスチャを書けるようになりました。 円や平行四辺形、グラデーション、ドロップシャドウ、奥行きなど…

ページロードスピードの観点から考えると、 CSS3で多くのものが書けるのに、 装飾のために、わざわざ画像を使用することが、 ソースコードに対してマテリアルディスオネストではないでしょうか。 なぜなら、「かっこいい」「かわいい」という装飾的な理由以外に わざわざ画像を使用する理由がないわけですから。

ソースコードで書けるSVGもマテリアルオネスティ？

そういう視点で考えると、 ソースで書けるSVGもマテリアルオネスティだと考えます。 画像なので少し矛盾があるかもしれませんが、 ソースなので最悪メモ帳でも書けるわけですからマテリアルオネスティだと思います。 CSSやJavascriptでコントロールできますしね。 また、canvasもマテリアルオネスティですね。

マテリアルオネスティを守る

要するに、フラットか否かではなく、 「ソースで書ける範囲のものか否か」で マテリアルオネスティを捉えているわけです。 ちなみにこのYOLXのサイトでは、 この「マテリアルオネスティの基準」に則って、 基本的には装飾的なデザイン要素は排除しています。 また、メインビジュアルやアイコンなどの一見装飾的に見えるパーツも CSSかSVGを使用し、マテリアルオネスティを厳格に守っています。

最新記事

YOLXは
心地よい、快適な操作感を目指す
UIデザイン会社です。

サービスのサマリーを読む
更新履歴
インターネット未接続
お問合せありがとうございました。