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

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

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

Skeuomorphic Designとは

まずskeuomorphという言葉から。

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

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

デジタルカメラ

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

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

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

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

voicememo

Skeuomorphic Designのメリット

視覚的にリッチで魅力的

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

rockmate

身近に感じる

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

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

ibooks

操作方法を想像しやすい

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

デザインを楽しめる

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

BizTome

Skeuomorphic Designのデメリット

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

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

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

iDial

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

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

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

address book

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

技術革新を遅らせる

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

余分である

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

go Explore

流行に応じて古くなる

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

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

Jam Boxx

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

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

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

iHandy 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

最適なデザインは?

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

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

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

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

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

参考にしたサイト

本記事を書くにあたり下記のサイトを参考にしました。

Add Comment

本文

  1. [...] Appleが推奨するSkeuomorphic Designとそのメリットデメリット 現実世界のモチーフを模倣したデザインをよく見るようになりました。 このようなデザインをSkeuomorphic Design(またはSkeuomorphic UI) [...]

  2. [...] Appleが推奨するSkeuomorphic Designとそのメリットデメリット │ Design Spice iOS6, iPhone5, UI, デザイン Address: http://pooledraft.com/?p=454 « jQuery 2.0、IE8以下はサポート廃止について Trackbackno [...]

  3. [...] Appleが推奨するSkeuomorphic Designとそのメリットデメリット │ Design Spice [...]

PAGE TOP