木曜日, 6月 20, 2013

Skeuomorphic Designとフラットデザインと

WWDC 2013でOS X MavericksやMacBook Airらと一緒に、iOS 7が発表されました。噂どおりのフラットデザイン。よりシンプルに無駄を削ぎ落とした最低限ギリギリのデザイン。

賛否両論のようですが、結局のところどうなんでしょうか?







あなたは否定派?肯定派?

iOS 7: ここ10年で最大の悪夢

WWDC 2013でOS X MavericksやMacBook Airらと一緒に、iOS 7が発表された。フラットデザインになるとかねてから噂されていたし、直前には9to5MacがリークされたiOS 7を元につくったというモックアップを掲載していた。そのデザインは悪い冗談にしか思えなかったが、翌朝WWDCで発表されたiOS 7はその悪い冗談そのものだった。

iOS 7のデザイン変更のきっかけのひとつは、過剰なSkeuomorphicデザインへの批判だと思うけど、おれはiOS 6以前のSkeuomorphicあるいは過剰な装飾が嫌いじゃない。批判されることの多かったNewsstandの木の本棚やGame Centerの緑のフェルトなんかは正直言って結構気に入っていた。無意味な遊び心だけじゃなくそれが何を表してるか明確だし、特に誤解を招く表現でもなかった。それにiOSはシングルタスクでひとつのアプリケーションが画面を占有するんだから、それぞれのアプリケーションにそれぞれの世界観があってもいいと思ってる。

でもまあデザインを変えたい気持ちも分かる。確かに装飾はうるさすぎると感じることもあったし、フラットデザインは流行でもある。だから別にシンプルにするのはいいし、新しいデザインの方向性に踏み出すのもいい。フラットになるという噂を聞いた時には心が躍ったし、WWDCの前日にはうまく寝付けないくらいだった。Appleが流行を踏まえて一体どんな素晴らしいデザインを見せてくれんだろう。
しかし結果は虫の集まった誘蛾灯風デザインか? 凡庸ですらない。悪夢だ。

各種アイコンが目を背けたくなるほど醜いのはもちろん、新しいControl Centerは線が多すぎて全く秩序が感じられないし、全面的に新しくなったデザインも蛍光色の細いHelveticaが散らばってるように見えてただ汚い [1]
それに無意味にユーザビリティを犠牲にしている。

iOS 7の前後には、デザインについてこう語られることが多かった。WIREDの記事:
iOSにこれまでみられたスキューモーフィズムも、元はといえばタッチスクリーン(の操作方法)をユーザーにとって近づきやすく、決して怖がる必要 のないものと感じさせるためのものだった。
しかし、いまではそうした問題は解決されている。いまではタッチスクリーンの操作方法について人に教える必要はなく、3歳児でも使えるものになって いる。
こういう意見には全く納得できない。例えば、ロック画面の “Slide to Unlock” や、そのときに着信すると表示される “Slide to answer” には、iOS 6時代には凹みの左端に右向き矢印のブロックがあって、何をスライドすればいいのか簡単に理解出来た。一方iOS 7では “Slide to Answer” という文字以外に何も表示されない。
どこをどうスライドさせろっていうんだ。「もうiOSの使い方は分かってるだろ」か? 
ふざけるなそんなのデザインじゃない。そんなにユーザは使い方を分かってるというなら、iOS 8では画面を真っ暗にして手探りで操作させろ。
得意の「3歳児」も今と変わらず操作出来るだろうよ。
元から何も分かってないんだからな。
「複雑性のなかに秩序をもたらす (bringing order to complexity)」とかいう曖昧な理念はどうでもいい。そのノリでくだらない会社のスローガンでも作ったらどうだ。

結局のところ新しいデザインで何が改善される? 新しい「無意味な装飾」を生み出しただけじゃないか。しかも今回は深刻なユーザビリティの低下と一緒に。上の記事でiOS 6以前を「機能性の追求よりも売上の追求を優先した」デザインだと書いてるけど、それはiOS 7のほうだろ? 流行に取り残されない/ユーザを飽きさせないために行われた小手先のデザイン変更だよ。
まさかこんな日が来るとは思わなかったけど、もしこんなクオリティのiOS 7がリリースされるのなら、アップデートはせずにAndroidに買い替えるかもしれない(AndroidのデザインがiOSより優れているとは思わないけど、始めから期待してないだけマシだ)。どうしてこんなことになってしまったのか。本当に悲しい。iPhoneがはじめて発表されたとき、もうこれで、使っててイライラする携帯とはおさらばできると思ったのに。
はあ、いやだな。

  1. 個人的にHelvetica (Neue) をそこまで好きではないし、特に細いウェイトのHelveticaは嫌いだということは前提にあるかもしれないけれど(曲線が強調されてねちっこく見える)  ↩

 

あくまで一意見ではありますが、

もうだめぽい感じですね、

 

 

UIがまとめられた画像です。「iOS6」のデザインは、例えばタブバーは他のデザインと比べて黒色をベースとしており統一感に欠けていましたが 「iOS7」では全て白を基調としたデザインとなっており統一感が計られています。




続いてアイコンです。
 

スライドバーなどは確かにユーザービリティを考えると多少情報を省きすぎな面はあるのかもしれませんが、iOS4の時代からどっぷり使ってる人からすると特に問題なさそうな感じもします。

ただ、この細いHelveticaは、はやりなのかもしれませんが正直あまり好きではないですね。視認性の悪さと、不安感というか頼りなさというか、か細すぎ?
フラットデザインならノーマルHelveticaでもいい気もしますが、Helveticaもノーマルってわけではないけど、、、。


UIについては、もしかしたら人種、文化の違いによって多少受け取り方の違いがあるのかもしれません。

たとえばですが、

日本人の感性は非常に繊細です。

細やかな配慮、気配りをさせると世界一かもしれません。

なので日本人の考えるUIというのはと〜っても丁寧に作られている。

そして日本人はそのUIになじんで育ちそれが身体に染み付いている。

説明書なんかを海外のモノと見比べるとよくわかる気もします。

日本のは細かい。バカ丁寧。やたら分厚い。

海外のものはシンプル 。最低限。わからなければ問い合わせる。電話に出ない。

欧米の方は合理性を追求する。ストレート。Yes or No!

日本人は所作を見て察する。ごにょごにょ。ひそひそ。うん。ううん。知らない。

そのあたりが関係するのかしないのか、海外のSNSとかたまにUIが非常に使いにくかった
り、取っ付きにくかったり感じることがある。

英語圏がグローバルスタンダードというなら、日本だけ特殊とういことにもなります

が、、、どうなんでしょ?


ぶっちゃけiOS 7のアイコンのことみんなどう思ってるの?

というわけで
こちらで感想をしらべてみた方がいました。

こちらのページでは、文句はあるけど比較的肯定的な意見が多いようでした。


ま、メーカーとしてはアップデートは必須だし、トレンドというものも意識しないわけにはいかないし、改悪という言葉もありますが、デザインは最終的には好みの問題なので、正解なんていうのはないのだと思う。

受け入れるか、否か。

好きな人は買えばいいし。いやなら他を探せばいいし。 選択肢はいくらでもあるので。

UIについても慣れたもん勝ちかなとは思う。


個人的には
ちょっとこざっぱりしちゃったけど、まぁいいんじゃないのって感じです。



そもそもフラットデザインになる前のデザイン、iOS7以前まで積極的に採用されてた、

Skeuomorphic Design スキューモーフィック デザイン

について。

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を主としながらもユーザービリティも保つ工夫をしてます。
結局つまらない答えになってしまうのですが、
どのようにデザインするかは適材適所でしょう。
機能やコンセプト、ターゲットによって手法は変わってくると思います。
同じデザイン手法でもコンセプトによって良い時も悪い時もあるので、
どの手法が優れてるかは答えようのないことだと思います。
新しいデザイン手法も次々に生まれてきているので、
それらの特徴、メリットデメリットを抑えつつ
どのデザインがそのコンセプトに最適なのか選択できる力を養うのが大切かなと思います。

 

 

 参考にしたサイト

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