スキュアモーフィズムとフラットデザインの違いについて解説

フラットデザインはすごく聞き覚えのある言葉だと思います。今どきはフラットデザインだーという文言はよく聞きますね。でもちょっとまってください。フラットデザインの前は何だったのでしょうか？

それが今回のタイトルのスキュアモーフィズムです。

そもそもデザインはなんのためにあるのか？

スキュアモーフィズムについて解説する前に、そもそもデザインとは何なのかについて考えましょう。そのほうが近道です。

そもそもデザインとは、人間が使いやすいようにすることを目的として、姿かたちを整えることです。なので、デザイン＝アートではないのです。デザイナーというと、すごくクリエイティブな仕事のように感じられますが、ファッションデザイナー以外はさほど突飛なデザインを出したりはしません。車のデザイナーを考えるとわかりやすいですが、現実的な機能を損ねない程度に遊び心を入れるのが一般的です。

では、優れたデザインは人間が使いやすいことだと言いましたが、使いやすいというは少し複雑です。手に取りやすい・人間の体の構造に合っている・認識しやすい等が含まれます。今回のスキュアモーフィズムは認識しやすいに関する内容です。

スキュアモーフィズム：似せることで使いやすくなる

初めて使って使いやすいものは「わかりやすいこと」が大事です。例えば、スピーカーの音量や扇風機の風量、水道の水の出る量などの量を調節するスイッチは大体ねじるように出来ています。これは過去の経験からそう学んでいるのです。新しい製品を作るときにも、このように「ひねればひねるほど量がでる」ということを利用すれば、迷わず操作できる製品ができるわけです。

それでは、PCやスマホではどうでしょうか？初めてPCを触った時、どこに何があるかわかりませんでしたよね？そんなときにスキュアモーフィズムが活躍してくれます。

立体になっているとボタンと感じるので、長らくスマホにはホームボタンが付いていました。ホームボタンのないスマホを嫌がる人も多かったです。PC操作で保存したい時は、フロッピーディスクのマークを探します。他にも、電子書籍は一昔前はページを移動するときに、めくるアニメーションが付いていました。こういった現実を模擬したデザインのことを「スキュアモーフィズム」といいます。でも今は少しずつこれが変わってきています。

現実の模擬からフラットデザインへ

Appleをはじめとして、多くの電子機器のUIに「フラットデザイン」というものが取り入れられ始めました。フラットデザインとは、立体的な描写が少なく、シンプルで情報量の少ないようなデザインのことを言います。

もちろん情報量が少ないので、わかりやすいデザインができるわけです。ただ、このフラットデザインがはじめから支持されるわけではなく、「スキュアモーフィズム」で操作に慣れたからこそ操作方法がわかるわけです。みんなにとって当たり前ができたからこそ初めてフラットデザインが採用されるのです。

デザインの時代の流れをとらえる

つまり、「わかりやすいデザイン」→「シンプルなデザイン」という時代の流れがあるのです。操作方法がわかってしまえば、使う人は詳細な説明のことを無駄な情報と感じてしまうので、徐々にフラットデザインを好むようになります。

流行だからといって、フラットデザイン化をむやみに進めてしまうと、ユーザーにとっては非常にわかりにくい製品になります。世の中に浸透しきっていない製品を広めたい場合は、まずはスキュアモーフィズム意識することで、ユーザーが迷いのないUIを作ることができるでしょう。また、他の人気製品のUIをマネすることで、スキュアモーフィズムの段階をすっ飛ばしてしまうのもありかもしれません。

現段階ではその流れの中でどちらに位置しているのかについて考えることで、多くの人から好かれるデザインがどちらかわかります。モノづくりやWebデザインなどに携わるかたはこういったことについてぜひ考えてみてください。

参考：融けるデザイン　渡邊恵太