特集
カテゴリー
タグ
メディア

Appleが推奨するSkeuomorphic Designとそのメリットデメリット

  • カテゴリー:
  • TOOL
Appleが推奨するSkeuomorphic Designとそのメリットデメリット

米Appleは10月29日、iOSを担当する上級副社長、スコット・フォーストールが2013年退任することを明らかにしました。その理由として、公開時より悪評の高かったMapアプリの責任者であったことを挙げる報道もあります。ただ、彼が推し進めてきたクラシックなデザインが、iPhoneのタッチパネルに魅力的な<手触り>を与えてきたのも事実です。

Skeuomorphic Designと呼ばれるそのデザインについて述べている、あるブログ記事を紹介します。フリーランスのWebデザイナーHiroさんによる考察は、先日リリースされたWindows 8で実装されているMetro UIとの比較にまで話が及びます。以下、ブログ記事を転載します。

(ライフハッカー編集部)


最近Appleのアプリを中心に、質感や特徴など現実世界のモチーフを模倣したデザインをよく見るようになりました。このようなデザインをSkeuomorphic Design(またはSkeuomorphic UI)と呼ぶそうです。このSkeuomorphic Designについて書いてみました。Skeuomorphic Designとは

まずskeuomorphという言葉から。

skeuomorph

語源:ギリシャ語のskeuos(容器、実装)morph(フォーム)から。


skeuomorphは、様々な目的のために用いることができます。デジカメのシャッター音もその一例です。

人は経験的にカメラのシャッター音で撮影されたのを知ることができます。そこでデジカメでも撮影した時に人工的にシャッター音を入れることで、写真が撮影されたことをより理解することができます。また、その音がユーザーエクスペリエンスを高めることもあるでしょう。

skeuomorph-camera

Skeuomorphic Designは要約すると、機能的に必要であるないに関わらず、似たような人工物・工芸品・芸術品からコピーされたデザインです。

このSkeuomorphic Design はデザイン手法の一つとしてAppleで推奨されてます。

アプリケーションのリアルさ、物質的な質感はできる限り高めるようにします。多くの場合、アプリケーションの外観と動作が実物そっくりであればあるほど、ユーザはアプリケーションがどのように機能するかを理解しやすくなり、より楽しく使うことができます。たとえば、iPadの「連絡先 (Contacts)」が表示するリアルなアドレスブックの使いかたはすぐに分かります。

例えばiPhoneの「ボイスメモ」は、その機能と使い方をすぐに理解できます。

skeuomorph-voice-memo.jpg

Skeuomorphic Designのメリット

視覚的にリッチで魅力的

細部まで作り込まれたデザインは視覚的にリッチであるだけでなく、使ってみたい・触ってみたいなど高いユーザーエクスペリエンスも提供します。

skeuomorph-rock-memo.jpg

身近に感じる

コピーの元になったものをよく知っているのなら、Skeuomorphic Designされたものはそれが初めて手にする場合でも身近に感じます。どのような役割か、どのような機能があるのか理解しやすくなります。

iBooksはその外見から現実世界の本であるかのような感じが味わえ、それが本を読むアプリであると理解できます。

skeuomorph-ibook

操作方法を想像しやすい

上記と似てるのですが、現実のものから機能を理解できるということは操作方法も予測できます。どこをどのように動かせば良いのか、ボタンには何の意味があるのか、など。iBooksの例でいうならページを捲るという操作を予測できます。

デザインを楽しめる

デザイナーにとっては新しいデザインに挑戦でるチャンスです。特にwebではミニマルな方向に進んでるので、テクスチャをふんだんに使ったりノイズや汚れを加えたり、存分に凝ったデザインができるチャンスになります(それを楽しめるかどうかは人によるのですが...)。

Skeuomorphic Designのデメリット

ユーザービリティを低下させることもある

現実のものと同じにしようとするあまり、シングルタップで実装できるものをマルチタップにしたり、簡単にできる動作を敢えて難しくしてしまうことがあります。

ダイヤル電話のアプリはダイヤルを回すという懐かしい体験が得られます。しかし最初は楽んで使ってたユーザーも一つ一つの入力に時間がかかる効率の悪さにフラストレーションがたまるでしょう(※このアプリは体験を提供するのが主なのでそれも織り込み済みでしょうが)。

skeuomorph-dial

現実と操作が違うとストレスを感じる

Skeuomorphic Designのメリットは操作が容易に想像できることですが、逆にその想像通りに操作できないとユーザーにストレスを与えることにもなり得ます。

iCalやiBooksでは右下をドラッグしてカレンダーを捲ることができます。しかしアドレスブックでは右下をドラッグしてもページを捲ることはできません。

skeuomorph-adress-book.jpg

ドラッグしてページを捲れることを学んだユーザーはアドレスブックで同じ動作を行う可能性があります。想像通りに機能しないことはストレスであり混乱も招きます。

技術革新を遅らせる

そもそも現実世界のものと平面であるスクリーンでの表現を完全に一致することは不可能です。

平面には平面なりのメリットやそこでしかできないこともあります。表現手法にこだわるあまり、固定観念に捕らわれて新しい手法を見いだす可能性を無くすことにもなりかねません。

余分である

機能的に必要でないものも現実世界のモチーフを表現するために取り込みますが、単純にそれは余分なものです。その余分な要素を入れることでメインとなるコンテンツ部分の領域が狭まることになります。特に画面領域の少ないモバイルに取ってそれは顕著です。

skeuomorph-go-explore.jpg

流行に応じて古くなる

コピーした現実世界のものが最新のデザインだったとしても、それは流行とともに古くなっていきます。それにつられてコピーしたデザインも古く感じられていきます。

JamBoxxのデザインは意図して古いラジカセをモチーフにしてると思いますが、このようにそのモチーフの流行と共にデザインは古く感じられていきます。

skeuomorph-radio

理解できるかどうかはユーザーの経験値次第

現実世界のものをモチーフにデザインすれば理解してくれるだろうと言うのも開発者の一方的な目論見であり、理解するかどうかはそのユーザーの経験値によります。一般的に知られてないものをモチーフにする時はその点も注意する必要があります。

水平が計れる水準器も知ってる人からすればすぐに使い方は理解できますが、水準器を知らない人にとっては見ただけでは何に使うのかすぐには理解できません。

skeuomorph-level

Metro UI

Skeuomorphic Designに相反してると言えるのがMetro UIです。Metro UIはWindows Phone 7やWindows8で採用されてます。

Metro UI は、スイスのクラシカルなデザインを基にしている。Microsoft の設計チームによると、Metro UIはロンドンの地下鉄の標識を基調にしている。ロンドンの地下鉄は大きなフォントと読みやすさに重点をおいている。Microsoftはこれは、「お洒落、わかりやすい、モダン」と評しており、AndroidやiOSなどのアイコンベースUIを「リフレッシュ」するものだとしている。

引用元:Metro UI - Wikipedia

常にコンテンツがメインであり、余分なグラフィックや効果はありません。

アフォーダンスが低いなどの欠点もありますが、シンプルで洗練されてて美しく個人的にはこのデザインも好きです。平面らしいデザインとも言えるでしょう。

metro

最適なデザインは?

全てのUIを完全なSkeuomorphic Designで表現しようと考えるよりもっと柔軟に使っても良いのではないかと思います。

iBooksは現実の本を模倣した外見で、右下から指をドラッグする事でページを捲るという現実と同じ体験を得られます。ただし、初めて体験するユーザーには良いですが、何百ページもその動作を繰り返すことは煩わしいと感じるユーザーもいるでしょう。そこでiBooksでは紙のエッジをタップするだけでもページが捲れるようになってます。Skeuomophic Designを主としながらもユーザービリティも保つ工夫をしてます。

結局つまらない答えになってしまうのですが、どのようにデザインするかは適材適所でしょう。機能やコンセプト、ターゲットによって手法は変わってくると思います。

同じデザイン手法でもコンセプトによって良い時も悪い時もあるので、どの手法が優れてるかは答えようのないことだと思います。

新しいデザイン手法も次々に生まれてきているので、それらの特徴、メリットデメリットを抑えつつどのデザインがそのコンセプトに最適なのか選択できる力を養うのが大切かなと思います。

HiroTSUKURIBE

参考サイト

Skeuomorphic Design: What it is, Who uses it, and Why You Need to Know | MediaLoot

Skeuomorphic Design: The Tactile Illusion | We are Embedded

Skeuomorph, Pt II

Skeuomorph, Pt III

swiper-button-prev
swiper-button-next