仲良くして頂いているブログ maka-veli.comで書かれていた「そろそろグラフィックリッチなメタファ、スキュアモーフィックとか楽しいコラージュも欲しくなってきた
」を読んでいて、スキュアモーフィックについてもうちょっと見たくなったので僕も記事にしてみます。
- 1.スキュアモーフィックデザインとは？
- 2.スキュアモーフィックデザインとフラットデザインの違い
- 3.スキュアモーフィックデザインのメリットとデメリット
- 4.様々なスキュアモーフィックデザイン
- 5.最後に
1.スキュアモーフィックデザインとは？
まず、スキュアモーフィックデザインっていう言葉をご存知でしょうか？
スキュアモーフィック、スキュアモーフィズムといった言い方がされますが、デザイナーさんなら馴染みのある言葉かもしれません。簡単に説明するとユーザーインターフェース（UI）において、リアルに存在する物質、質感に近づけたデザインのことです。近年話題のフラットデザインとは相反する印象を受けますね。
具体的にはグラフィックを見るのが一目瞭然だと思います。
どちらもカメラアプリですが、レンズの部分がリアルに再現されていて、ひと目でカメラアプリだと認識できるのではないでしょうか？
上記はiconDropというiconからiPhoneのアプリを探すことができるサイトのスクリーンショットです。
たくさんのアイコンが並んでいても、カメラのレンズが認識できるので、カメラアプリが探しやすいですよね
。
リアルに存在するものを再現するということは、＝馴染みあるものがそこにあるので、視覚的に捉えやすく、わかりやすいのが特徴です。
例えば、Webサイトで非常によく出てくるボタンですが、どちらがボタンとしてわかりやすいでしょうか？
左側はスキュアモーフィックデザイン。一方右側はフラットデザインです。
一般的にボタンとして認識しやすいのは左側だと思いますが、右側のフラットデザインの方がボタンとして認識するというの方もいるはずです。
では、それはなぜでしょう？
2.スキュアモーフィックデザインとフラットデザインの違い
さっきのボタンの話ですが、左側はボタンっぽくデザインしたことに対し、右側にはボタンとして認識されやすいように右向きの矢印をデザインに採用しています。
右矢印というのは、Webサイトの多くで次へ進むという意味を持った場合に使われることが多く、一方、左矢印は前に戻るという場合に使われます。
Webサイトにおけるボタンというのは「クリック及びタップすることで、何らかのアクションを引き起こすもの」なので、どちらがボタンぽいか？ という問いに対しての回答は、必ずしもボタンの形をしているものという事ではありません。
フラットデザインは、スキュアモーフィックデザインのようにディティールに拘ってユーザーに訴えかけることは出来ず、シンプルに伝える必要があります。それが故の難しさを感じるのは、スキュアモーフィックデザインと異なる部分です。
3.スキュアモーフィックデザインのメリットとデメリット
メリットは上記の述べたとおり、ユーザーに認識されやすく、機能の訴求がし易いことです。
スキュアモーフィックデザインを採用する場合、質感のリアルさだけでなく、機能についてもリアルのものがそのまま採用される事が多く、そうなるとますますユーザーとデザインのコミュニケーションが短くて済みます。
しかし、外観を似せ、機能も似せるとなると、ちょっとした違いでユーザーに大きなストレスを与えます。ユーザー体験を利用する場合、ユーザーが使い慣れていればいるほど、ギャップによって与えるストレスは大きくなります。
例えば、上記で紹介したボタンが実際には押せなければ大きなストレスですよね？
4.様々なスキュアモーフィックデザイン
Webデザイン
La Maddalena
テーブルの上で食事をしているシーンを想定させるデザインです。食事や飲み物、フォームなどが散りばめられてるのユニークです、若干のパララックスが入って画面が遷移します。横にスライドするのは珍しいですね。
Discover Bagigia – The Bag
レザーバッグのサイト。壁紙にレザーの質感をもたせたり、スライダーにジッパーを利用したりと、サイトで扱う商品にマッチさせたデザインがユニーク。
商品を画面全体使って紹介してるのがすごくいいですね。
注意：音が出ます
http://sovbut.ru/
一昔前のテレビを利用したデザイン。テレビの中で女性が動いて喋ってるのが楽しい。残念ながら日本語ではないので、僕には何をしゃべっているかがわかりません
Havana Bar
お店の壁をモチーフにしたデザイン。ライト、フレームに収められた写真や、テーブル、お酒の瓶などをうまく使い、視線誘導を促しています。パララックスが採用されていますが、この視線誘導がうまく行ってるので、他に意識が行きづらいですね。
UI デザイン
UIはピンタレストにピンをしてるので、いくつかご紹介したいと思います。
Pinterestにはまだまだピンしてるので、よければフォローして下さい。
https://jp.pinterest.com/yat8823jp/
5.最後に
いかがでしたでしょうか？ おそらく懐かしい感じがしたという方もいらっしゃったのではないでしょうか？
なぜ今スキュアモーフィックなの？って思う方もいらっしゃるかもしれませんが、デザインに流行り廃りはあるとしても、流行ってないから使わないっていうものではないんですよね。
チーム全体がイカれてるか、決定権ある人がイカれてるか、受託ならクライアントがイカれてるか、デザイン力というかチーム力やノリの良さだったり感性の一致だったりがとても大事ですね。あとは一人のカリスマが居るか居ないかで大きく変わるかも。イカれてるのって大事。
トレンドに流されるばっかりじゃ、ダメですよね。
まさとん@maka_velicomさんも最後におっしゃってますけど、ホントトレンドに流されるばっかりじゃダメで、現場で必要な物を取捨選択できる力が大事なんだと思います。
イカれてることが必要なら、しっかりとイカれられるか？ってことじゃないかなーと。
それにしてもやっぱりデザインっていろいろ考えることあって楽しいですね。いい記事読ませてもらって勝手に書いちゃったけど、楽しかったな。
まさとんさんの記事で紹介されてたOhDeer Games!が一番好きで何回も見てました。
お役に立てたらお願いします🙇
Comments