フラットデザイン全盛だから想う、脱・スキューモーフィズムへの違和感

Windows8やiOS7のUIにおいて、フラットデザインが採用されたことにより、Webサイトやアプリのデザインにおいて、まさにフラットデザイン全盛期が訪れました。

これと同時にスキューモーフィズムというワードも注目されるようになります。「スキューモーフィズム=他の物質に似せるために行うデザインや装飾のこと」しかし完全な悪役として。

しかし、フラットデザインか?スキューモーフィズムか?というのは、ちょっと強引な論争のような気がしてしまうのです。

Pinterestで「flatdesign」と検索かけると、それはそれはかっこいいデザインがたくさん引っかかります。こんな感じでデザインしたいなーと影響されることも。

一方「フラットデザインって、どこを押したらいいかわからない」という声があるのも事実です。フラットデザインが採用される理由のひとつに「ユーザーがフラットなデザインでもボタンと認識するようになった」が挙げられることがあります。
たしかにユーザーはWebサイトやアプリのUIに慣れました。バリバリにエンボスのかかったボタンでなくても、まわりとの色の違いや矢印アイコンなどで、どこを押すべきか識別できるユーザーは増えたと思います。しかし、直感的にボタンであることを認識させているかと言うと、違う気がしています。

そんななかでも、1から100までフラット・・・というストイックフラットデザインも見直されつつあります。

ロングシャドウエフェクト

いわゆるドロップシャドウではなく、45度方向に均一に影を落とす手法です。フラットデザインの普及とともに注目されはじめた手法で、フラットデザインにアクセントを加えてくれます。

重要な箇所だけスキューモーフィズム

クレジットカード決済サービス・SquareのWebサイトはフラットデザインですが、キービジュアルに載せてある「スタートボタン」にはグラデーションがかけられています。Webサイト上で特に重要である要素のみに、グラデーションやベベルなどを与える手法です。

私が書籍「フラットデザインの基本ルール」を読んでハラオチしたフラットデザインのポイントは「コンテンツを重視するために装飾を軽くする」「スマホのような小さな画面にスキューモーフィズムのボタンが多く並ぶのは暑苦しい」という2点です。すごく納得感がありましたし、この要素はデザインしていく上で大事にしていきたいと想っています。

フラットデザインがブームなのか?と言われれば、私は違うと考えています。いわゆるストイックフラットデザインは見直され、フラットデザインの「重要なのはコンテンツである」「小さな画面では暑苦しい」という思想は残りつつも、要所ではスキューモーフィズムのデザインと共存していくのではないでしょうか。

もし、作成したデザインカンプでフラットデザインを採用し使いにくい部分があったら、少し目先を変えてスキューモーフィズムの要素も取り入れていくといいかもしれませんよ。

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働いています。ごくたまに個人でもWebサイト作ってます。趣味ではジャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー