Dの憂鬱［24］iOS7のフラットデザインについて、もうちょっとまじめに考えてみた
── 笠居トシヒロ ──

前回の時は、iOS7のベータ1が出たところだったので、慌ててインストールして、雑感を書いただけで終わってしまったのですが、しばらくの間ベータを使い続けてみて「これはなかなかいいぞ」とか「うーんこりゃちょっと考えなおしたほうがいいんじゃねえの？」なんてところがチラホラ見えてきたので、そんなこんなについて、改めて書いてみようかなと。

まずは、フラットデザインの対極にあるとされる「スキューモフィックデザイン（Skeuomorphic Design）」について。

スキューモーフィックデザインとは、擬似的な光源の設定による陰影の表現や表面テクスチャなどを用いて、とあるものを別のものに見せようとすること。プラスチックの表面に木目を施したり、逆にメッキを使って金属風に見せるなどの加工も、広い意味でのスキューモフィックだといえます。

UIにおけるスキューモーフィックデザインは、現実世界の物理的なモノをデジタルなエレメントのモチーフにしようとするもので、フォルダや書類のアイコン、ブラウザのタブ、もちろんiOS6までのUIにおけるボタン類の形状などもこれにあたります。

スキューモーフィックデザインがコンピュータのUIに（少なくとも市販品として広く）現れたのは、1980年代のMacOSにおけるGUIが最初だったとおもいます。

起動後の初期画面を「デスクトップ」と呼び（視覚的に机の上には見えませんでしたけど）、画面上のアイコンには、先程も例に上げた「フォルダ」や「書類束」「ゴミ箱」など現実の机上にある様々なものが、デジタルデータのそれぞれの概念を表す「モチーフ」として用いられました。

なぜこのような「現実のもの」を想起させるモチーフが用いられたのか、といえば、コンピュータ（デジタルデータ）というものが、これまで「一般的には存在しなかった」ものだったからです。

なので、PCの中では0と1の羅列にすぎない「デジタルデータ」というものを、現実世界にある物体に準えて、概念として理解させるスキューモーフィックデザインは、コンピュータをあらたに使おうとするユーザにとって、大きな助けになったと思われます。

コンピュータが発達するにつれ、そのグラフィックにおける表現力もどんどん増していきました。最初、白黒2値で表現されていたアイコンやウィンドウなどのグラフィックも、今や人間の目の判断力を超えるとさえ言われている細かい解像度と有り余る色数によって、実物と見紛うまでに精密なものに進化しています。

と同時に、それを使うユーザの方もどんどんデジタルに慣れ、現在では生まれた時からコンピュータもネットワークも身の回りにあった「デジタルネイティブ」と呼ばれる世代が成人してきています。

こういう世代にとっては、逆にコンピュータのGUIに用いられている「現実のモチーフ」のほうが馴染み薄い、といった現象が起きているのも事実です。現実の「紙ばさみ」であるところの「フォルダ」を見たことがない、とか、「電話」のアイコンを「形としては」電話だと認識しているものの、アイコンとして描かれている「黒電話」は見たことがない、とかですね。

余談ですが、先日Androidのホーム画面のテーマを変更したところ、このテーマのアイコンが全部丸い形のものだったんですね。で、電話のアイコンが「ダイヤル」の形だったんです（笑）。さすがにリアルタイムでダイアル式電話を知っているオレでも、これに気づくまでには半日かかりました。

でまぁ、こういった新しい世代にとっては、スキューモーフィックデザインは、もはや無用の長物であろう、ということで今現在台頭してきているのが、フラットデザインだということなわけでしょう。

機能を失って単に「装飾」に成り果てたものは、実用性の面から削り落とされていく、というごく当たり前の流れの中で起きてきたことかと思います。

ただ、今回のIOS7のフラットデザインを見ていると、「あれ？　これはどうやって操作するんだろう？」と戸惑うことがままあります。中でもいちばん「あれ？」と思うのは、電話着信時と電源OFF時のボタンの操作です。

この時、表示されるボタンは、画面の左右いっぱいに延びた赤や緑の幅広のベタの中に、白い文字で「電源OFF」とか「応答」とか書いてあるボタンなのですが、このボタンは「タップ」してはダメで、「スワイプ」しないと反応しません。

ところが、電話が終わってから通話を切るときに表示される「終了」のボタンは、上記の「応答」と全く同じデザインでありながら、スワイプではなくタップで操作します。

これらのボタンがiOS6ではどのように表示されるかというと、スワイプして操作するボタンは、グレーの凹んだ溝の中の左側に若干膨らんだように見えるボタンが填っているような形状。

タップして操作するボタンは、単に膨らんだ形状のボタンのみで溝のような土台はナシと、どのように操作すればいいのか、ユーザがハッキリと区別できる表現になっています。

これがiOS7では、単に「iOS6までにおいて、画面幅いっぱいのボタンだった」という区分だけで、全く同じ形状のボタンとしてデザインしてしまっているわけです。

スキューモーフィックであるか、フラットであるか、という以前に、今回のiOS7には「アフォーダンス」の考慮が欠けているような気がしてなりません。

アフォーダンス：< http://goo.gl/IBaK
>

─例えば引き手のついたタンスについて語るのであれば、「"私"はそのタンスについて引いて開けるという行為が可能である」、この可能性が存在するという関係を「このタンスと私には引いて開けるというアフォーダンスが存在する」あるいは「このタンスが引いて開けるという行為をアフォードする」と表現するのである。─（上記Wikiから引用）

「見ただけでそれをどのように操作すればいいのかが理解できる」ことは、UIのデザインにとっては必要不可欠ですし、それを推進・牽引してきたのは、ほかならぬAppleだったと思います。

おそらく、こういったデザイン上の不具合も、ベータ終了までには改善されるとは思います。ぶっちゃけ、スワイプ操作のボタンには右矢印を入れる、ってだけでも大幅に認知性は改善されると思うし、その程度のことに気づかないApple開発陣でもないでしょうから。

とはいえ、現状を見る限りでは、タイポグラフや情報の伝え方に重点を置いて、グラフィックは文字の補助であるというコンセプトで押し通しているWindows8のほうが潔くてわかりやすいと思ってしまうんですが、最終リリースまでに逆転してきてくれるでしょうか。


【笠居 トシヒロ／WEBディレクター、デジハリ大学院客員教授、京都嵯峨芸術大学講師】
< http://www.mad-c.com/
> < kasai@mad-c.com >

今日（7/9）iOS7のベータ3が配布になりました。インストールしてみたところ、本稿で指摘した「スワイプしなければならないボタン」の表記が「応答」から「スライドして応答」、「電源OFF」から「スライドして電源OFF」に変更されていました（笑）

やっぱり気づきますよね。でもビジュアルデザインとしてもうちょっと工夫して欲しいところではあります。

未だにテニス肘が治らないです。四十肩やったときは3ヶ月くらい苦しんだけど、そのくらい長引くんでしょうか。。。。