あのデザイン手法に再び注目が！スキューモーフィックデザイン再入門

更新日: 2018年01月11日

デザイン

iPhoneにおけるアーリーアダプター層の方は、iPhone 3GやiPhone 3GSの頃の "iPhoneの画面デザイン" を思い出すことができるでしょうか。スワイプで開くのがデフォルトで、ボタンのデザインに光沢が施されていたころの時代の画面です。

ただ、そうした物質的なデザインである**「スキューモーフィックデザイン」**と呼ばれるデザイン手法は、次第にフラットデザインに取って代わられるようになりました。しかし、今再び「スキューモーフィック」が注目されています。

今回は、"スキューモーフィックデザイン再入門" と題して、スキューモーフィックデザインの考え方や基礎知識、なぜ再び注目されているのかを考察していきます。

ちなみに、スキューモーフィックデザインという言葉自体を初めて聞いたという方も、ノンデザイナーでデザインとかかわりが薄い方も、ぜひ本記事を読み進めてみてください。
　　

「スキューモーフィックデザイン」とは

スキューモーフィックデザインは、AppleがiOSの最初の頃に提唱していた「質感や特徴など現実世界のモチーフを模倣したデザイン」のことです。

例えば、以前のiPhoneで採用されていた電卓アプリのデザインは、リアルな生活の中にあるような立体感やツヤのあるデザインを採用していました。スキューモーフィックデザインを採用することで、人々はアプリを "現実にあるもの" と同様に認識することができます。

スキューモーフィックデザインは、見た目にかかわるデザインだけではありません。その一例として、カメラのシャッター音が挙げられます。人は経験的にカメラのシャッター音が聞こえると、そこで撮影がなされたことを知ることができます。そのため、多くのカメラアプリでは実際にカメラのシャッターが切られた時と同じような「カシャ」という音を採用しています。

スキューモーフィックデザインは、言い換えれば機能的に必要であるかないかに関係なく、現実世界にある人工物や造形物などからコピーして物質的に存在するように見せるデザインのことです。

しかしながら、新しいOSが採用され、タッチスクリーンの特徴を活かし、ミニマリズムやフラットデザインが流行したことで、次第にスキューモーフィックデザインが見られることは少なくなりました。
　　

スキューモーフィックへの批判の論点

フラットデザインやミニマリズムの賛美は、一方でスキューモーフィックデザインへの批判につながりました。

シンプルで洗練されたデザインを好むデザイナーの目には、スキューモーフィックデザインはどのように映ったのでしょうか。ここでは、その批判に対する論点を振り返ってみましょう。
　　

1. ユーザビリティの低下

全てがそうだというわけではありませんが、現実に近付けようとするがゆえに、本来ならシングルタップで実現できるような挙動をマルチタップにしたり、もっと簡単にできる動作をあえて難しくしてしまうことがあるといいます。
　　

2. 現実のものと操作性が異なる場合のストレス

スキューモーフィックデザインの良いところは、誰でも容易に使い方をイメージできるところです。しかし、逆にそのイメージどおりにいかない場合は、ユーザーがストレスを感じてしまうことがあります。
　　

3. 複雑になる

スキューモーフィックデザインは、できるだけ現実に存在するものに似せることで操作性を改善させようとします。ただ、機能的に必要でないものもリアルなテクスチャで表現しようとしてしまうと、かえって複雑になることがあります。

余計な要素を入れてしまうとメインとなるコンテンツ部分も幅が狭まってしまいます。特に、画面領域が少ないモバイル端末では、できるだけシンプルなデザインのほうがいいと考える方もいます。
　　

ミニマリズムやフラットデザインへの批判の論点

近年、フラットデザインやミニマリズムは盛り上がりを見せていますが、それらのデザインに対する「違和感」を感じているデザイナーもいます。

確かに、余分な要素を削ってわかりやすくするのは大切なことですが、フラットデザインやミニマリズムがデザイン工学的なアプローチに対する最終解ではないのを、多くのデザイナーが次第に認識するようになってきました。

以下が、ミニマリズムやフラットデザインに対する「違和感」をまとめたポイントです。
　　

1. ユーザビリティへの妥協

フラットデザインやミニマリズムは、すっきりとした合理的なデザインを強調することができますが、そうした特徴に固執し過ぎて、かえってユーザビリティ低下に対して見て見ぬふりをしてしまうことがあります。特に、画面領域が狭いモバイルサイトの場合には、こうしたリスクはさらに高まります。

影が一切ないフラットデザインは、全ての要素が同一平面上にあるように見えるので、どの要素がクリック可能なのかがわかりにくいという点も挙げられます。

デザインをシンプルにした反面、視界の奥行きを奪ってしまい、ユーザーが慣れているパースペクティブ（立体感）が失われてしまうのです。
　　

2. 識別しづらい

フラットデザインを懐疑的に感じているデザイナーの中でも最も不思議に思っているのは、Microsoftがかつて採用したMetro UIです。

当初、このデザインは常にコンテンツがメインとなり、余計なグラフィックや効果がないのでかえって使いやすいのではないかと思われていました。しかし、結果的にはすぐに下火になってしまいました。ユーザビリティの低下にもつながりますが、アフォーダンスがない（どれをクリックすれば良いのかがわからない）ので、そのデザインに慣れていない方にとっては困惑してしまうものになります。

参考：
ノンデザイナーこそ知っておきたい「アフォーダンス」入門｜ferret
　　

3. 演出力に欠ける

フラットデザインは概してシンプルで洗練されたものですが、言い換えればどれも同じようなデザインになりがちで、インパクトに欠けてしまうことがあります。

一方、スキューモーフィックデザインは、結果的に細部まで作り込まれたデザインになることが多いので、視覚的にリッチであることに加えて「触ってみたい」「使ってみたい」といった演出感を出すことができます。
　　

「スキューモーフィック」復活の兆し

こうしたデザイン嗜好の変遷を経て、スキューモーフィックデザイン復活の兆しが見えています。皮肉なことに、こうした復活はWebではないところから見られるようになりました。

ここでは、現在のスキューモーフィックデザイン復活に見られるポイントをまとめましたのでご覧ください。
　　

1. 経験的に存在感を伝えられる

単にスクリーンを見るだけではなく、日常生活自体に溶け込んでいるようなIoT製品は、よりリアルなオブジェクトとして日常生活に溶け込もうとしています。

Apple Watchの文字盤のデザインの中にはデジタルで独特ものもありますが、一方で文字盤の多くが本物の「腕時計」の様相に近いデザインが施されています。Apple Watchを身に着けているユーザーは、Apple Watchを上にあげた瞬間に時間を確認することができます。これは、私たちが短針と長針によって時間を確認することを経験的に知っているからです。
　　

2. どこを押せばいいのかが明確

iOSのデザイン変更でボタンに若干の影が認められるようになった

かつてはフラットデザインに挑戦したデザインも、今ではフラットなデザインのいいところを採用しながら、スキューモーフィックデザインの長所も取り入れているという方も少なくありません。つまりは、各々のメリットを採用することで、より良いデザインにしようと試みています。

その先陣を切っているのがAppleのiOSです。iOS 7以降、ミニマルでフラットなキーボードになりましたが、どこがボタンなのかがわかりにくいといった声も少なくありませんでした。ただ今では、それぞれのボタンに影をつけることでわかりやすくデザインしており、どこを押せばいいのかが明確になっています。
　　