スキューモーフィズムは、実際にはフラットなデザインとは正反対です。Googleの「マテリアルデザイン」は、フラットなデザインを具体的に解釈したブランド名にすぎません。それでもフラットなデザインです。「フラットデザイン」は、iOS7のリリース時にAppleによって作成されました。それは最初に使われた用語なので、Googleが最初にそれを行ったとしても、「マテリアルデザイン」と簡単に呼ぶことができたはずです。
スキューモモーフィズムの実践は、オブジェクトがスクリーンに投影されるのではなく、物理的にリアルであるかどうかを確認することを期待する視覚要素を追加することです。例として、シャドウとハイライトがあります。それらは現実世界のすべてのものに存在しますが、デジタル世界には存在しません。これらの変形要素を追加することは、人間がデジタル要素に慣れ親しむように設計されています。
フラットデザインはこれとは正反対です。「フラットデザイン」では、「実世界」の物理学と照明は考慮されません。デジタルエレメントは作成されますが、設計者は、オブジェクトが物理的なものである場合に、エレメントに "現実"がどのような影響を与えるかを気にせずに作成したいと考えています。
ブートストラップのホームページは、スキューモーフィズムの例ではありません。一般的なフラットデザインの一例です。インセットの「エンボス」効果を持つ中央のインセット長方形もスキューモーフィックであると主張できますが。したがって、おそらく「ハイブリッド」が最も適切な説明かもしれません。
技術的に長所/短所に関して、どちらか一方を選択する確固たる理由はありません。
多くの場合、高品質で信じられないほどの変形効果画像が必要になります。画像は当然HTTPリクエストとブラウザの読み込みを増やします。変形モーフィングCSSを優先して画像を除外する場合、CSSは非常に複雑で大きくなる可能性があります。HTTPリクエストの画像を減らす必要がありますが、スキューモーフィック要素を含むCSSファイルの追加サイズ(kb)は、HTTPリクエストの削減(ユーザーの観点から)を上回ります。
フラットなデザインは、基本的なCSS3で簡単に引き離すことができます。画像がフラットなデザインで必要な場合、同じ画像がスケオモーフィックなデザインでも必要になる可能性があります。したがって、利点/欠点の点で互いに相殺されます。通常、フラットデザインCSSは複雑さが少なく、編集が簡単ですが、そうである必要はありません。非常に複雑なCSSプロパティを使用してフラットなデザインを作成することは十分に可能です。ほとんどのフラットなデザインにはグラデーションが含まれています。オブジェクトが実在する場合のライトの動作に基づいた「実際の」グラデーションではありません。AppleのiOS7-8またはWindows 8アイコンはすべてグラデーションを使用しています。「これを突出しているように見える」グラデーションとは対照的に、非常に微妙なグラデーション。
結局のところ、フラットなデザインがスキューモーフィズムよりも技術的に優れているか悪いかという明確な理由はありません。それはすべてデザイナーの好みの問題に帰着します。スキューモーフィズムとフラットデザインはどちらも、技術的な根拠のないデザイントレンドにすぎません。
「技術的には赤いWebサイトと青いWebサイトのどちらが優れているのか」と尋ねるのと同じです。-「あなたが好むものは何でも」以外に答えはありません。