ざっくりわかるモバイルUI史〜UI GRAPHICSを読んで〜
私たちが当たり前に使っているものにも、必ず「当たり前に使われるまでの過程」があり、僕らはそれを歴史と呼んでいます。
その歴史は、今あなたが覗き込んでいる画面の中にも例外なく存在しています。
あなたが今見ている「画面の中のデザイン」を、ITな人たちは「ユーザー・インタフェース（UI）」と呼ぶのですが、このUIのデザインにも、きちんと今のような形になるまでの歴史があるのです。
知ってましたか？
ちなみに、僕は知りませんでした。
下の本を読むまでは。
この本は、第一線のUIデザイナーや研究者が様々な視点からUIを語るアンソロジーなのですが、UIデザイナーではない僕にもとても興味深く読めました。
この本にはTHE GUILDの安藤剛（@goando）さんの「Fluid interface」についての論考と、同じくTHE GUILDの深津貴之(@fladdict)さんの再録記事である「マテリアルデザイン」についての論考が収録されているのですが、奇しくも、この二人の記事を合わさるとスマホ初期のUIデザインからiPhoneXに代表される現代の最先端のUIデザインまでの歴史を追えるようになっています。
これ、編集者のかたは狙ってたのでしょうか？
すごく学ばせていただきました。
学んだことはアウトプットして共有しよう、ということで、この記事では、UI GRAPHICSで学んだ「スキューモーフィズム」から「Fluid interface」までの「モバイルUIデザイン史」を簡単に紹介したいと思います。
あなたは、「フラットデザイン」と「マテリアルデザイン」の違いを説明できますか？
「Fluid interface」の何が「Fluid」か、説明できますか？
ちなみに、僕はできませんでした。
なので、ここで頑張って説明してみます笑
この記事で説明するのは、以下の４つのUIデザインについてです。
第１段階「スキューモーフィズム」
第２段階「フラットデザイン（メトロUI）」
第３段階「マテリアルデザイン」
第４段階「Fluid interface」
第1段階「スキューモーフィズム」
モバイルUI史のはじめを飾るのは、「スキューモーフィズム」と呼ばれる、何やら難しそうな名前のデザインです。
とはいえ、スキューモーフィズムは名前の印象ほど難しいものではありません。
スキューモーフィズムというのは、一言でいうと、「デザインにメタファー（隠喩）を使いましょう」というものです。
私たち人間は、新しい発明を、新しいまま理解するのは不可能です。
たとえば、初期の自動車は、「馬なし馬車」と呼ばれていました。
Twitterは、「マイクロブログ」と呼ばれていました。
iPhoneは、「電話」と呼ばれていました。
これらの表現が適切ではないことは、現代人には当たり前に感じるでしょう。
しかし、新しい発明が出たばかりの当時の人々にとっては、自動車を自動車として理解することも、TwitterをTwitterとして理解することも、iPhoneをiPhoneとして理解することは難しいのです。
そうした時に、新しい発明を人々に理解させるために使われる手法が「スキューモーフィズム」です。
スキューモーフィズムは、「当時の人々が知っている概念をメタファーに使って説明することで、新しい発明を無理やり理解させる」手法です。
このスキューモーフィズムについて、深津さんはこう説明しています。
スキューモーフィズムは、新しいテクノロジーの出現時には非常に有効な手法である。
なぜならばユーザーは、既存のオブジェクトやテクノロジーと比較することで使い方を想像することができるからだ。
新しいテクノロジーには往往にして新しい外見を与えがちであるが、多くの場合、ユーザーが使い方をイメージできずに失敗に終わる。
スマートフォン、アプリ、タッチスクリーンなど様々な新概念を普及させるにあたって、Appleはこのスキューモーフィズムを有効に使って成功した。
たとえば初期の自動車は、わざわざ使う必要のない木材を使って、見た目を馬車に似せていました。
このような現代では「無駄な努力」に思えるところから、モバイルUIの歴史も始まっているのですね。
第２段階「フラットデザイン（メトロUI）」
スキューモーフィズムのあとに現れたデザインが「フラットデザイン」と呼ばれるものです。
ただ、これは僕も驚いたところですが、フラットデザインが普及したのは、その「使いやすさ」によってではありませんでした。
フラットデザインは源流は、2010年にMicrosoftが発表した「メトロ」と呼ばれるデザインコンセプトまで遡れます。
ただ、この「メトロ」はデザインコンセプトであって、モバイルUIとしては実用面でいくつか課題がありました。
実際のところ今でも、メトロのような「フラットデザイン」は、UIを専門としている認知科学者にはわりと不評です。
なぜならメトロのような「フラットデザイン」では、機能の「アフォーダンス」が表現できないからです。
「アフォーダンス」とは、機能の動作を予想させる手がかりのことです。
たとえば、ボタンは前に出っ張っていたほうが嬉しいですよね？
それは前に出っ張っていること自体が、「押す」というボタンの機能を私たちに予感させてくれるからです。
フラットデザインはこうしたアフォーダンスを表現できないので、「ユーザにとって使いにくい」とよく言われています。
「ユーザーにとっての使いやすさ」で言えば、フラットデザインよりも、その前に普及していたスキューモーフィズムのほうが「優れている」のです。
しかし、フラットデザインは普及しました。不思議ですよね？
実は、このフラットデザインの普及には「デザイナーに強く受け入れられた」ことが背景にあります。
ユーザーにとって必ずしも使いやすいとは言えないフラットデザインをデザイナーが受け入れた理由は二つあります。
一つは、「目新しかった」からです。
従来のスキューモーフィズムに比べて、フラットデザインはモダンで、デザイナー用SNSで注目を集めやすいという特徴がありました。
二つ目は、「作りやすかった」からです。
スキューモーフィズム系のグラフィックは、グラフィックデザインにせよCSSにせよ、作成コストは高いものでした。
一方でフラットデザインは、そうではなかった。
スキューモーフィズムに比べれば、作成コストは格段に低かったのです。
こうした要因により、フラットデザインは実用性に難を抱えながらも、デザイナーの支持を受けて普及していきました。
この現象からは、一つ重要な洞察が得られます。
何かを普及させるために必要なのは、エンドユーザーの利便性だけではありません。
エンドユーザーの利便性に対して、デザイナーやエンジニアといったベンダーの利益やコストが釣り合ってはじめて、普及は実現します。
ユーザーにとって使いにくかろうと、ベンダーが提供しやすいために普及したフラットデザインのように・・・。
こうしたフラットデザインの抱える問題を解決しようとしたのが、2014年にGoogleが発表した「マテリアルデザイン」です。
第３段階「マテリアルデザイン」
以前の僕のように、「フラットデザイン」と「マテリアルデザイン」を全く同じものだと考えている人は結構多いのではないでしょうか？
実際のところ、マテリアルデザインは、メトロと同じく、フラットデザインの部分集合ではあります。
しかしその一方で、マテリアルデザインは、従来のフラットデザイン（メトロ）の反省を生かして様々な工夫が施された、全く新しいデザインフレームワークであると解釈することもできます。
マテリアルデザインの革新的な点は、「従来のフラットデザインに部分的にスキューモーフィズムを取り入れた」点です。
マテリアルデザインでは、ピクセルを厚みの物理的な存在（マテリアル）として解釈します。
そのためマテリアルデザインは、一見フラットデザインに見えても、厳密な意味で「フラット」ではなく、物理的な存在と同じように「影」がついたり「質量」を感じるアニメーションが付与されたりします。
深津さんの言葉を引用すると、
マテリアルデザインは、「厚みのあるピクセル」が現実にあった場合どのように挙動するかをシュミレートしたデザインなのである。
スキューモーフィズムは、実際に「現実に存在する物事」を、画面の中のオブジェクトの説明に用いる手法です。
たとえば、テキストエディタを「メモ帳」に模したり、データフォルダを「フォルダ」に模したりといった具合です。
しかし、マテリアルデザインはそうした「現実の存在」を模して、UIの説明に活用しているわけではありません。
マテリアルデザインが模しているのは、現実の存在ではなく、影や物理法則といった「現実の法則」です。
つまり、現実に存在しないピクセルアートに現実の法則を適用し、さも現実に存在するかのように表現する。それが「マテリアルデザイン」なのです。
理論として複雑だと思うかもしれませんが、しかしそのおかげで、マテリアルデザインは認知科学者にもウケがいいです。
つまり、「ユーザーにとってかなり使いやすくなりました」。
なんせ僕たちは「現実の法則」をよく知っているので、現実の法則に従う物体なら、アフォーダンスを掴みやすいからです。
早い話、どんな物体でも影がついていれば、その物体が浮いていることがわかるし、浮いているなら、それが押せるかもしれないということは、僕たち人間は予感します。
しかし、そんな簡単なことさえ、マテリアルデザイン以前のフラットデザイン（メトロUI）はしなかったわけです。
つまり、マテリアルデザインは、当たり前のことを当たり前にやったという点において、革新的だったのですね〜（暴論）
（ちなみにマテリアルデザインは開発者側にとっても革新的だったのですが、それについて知りたい方はUI GRAPHICSを買いましょう！！）
第４段階「Fluid interface」
UIデザインの最先端に立っているプレイヤーといえば、Appleです。
スキューモーフィズムを取り入れ、モバイルUIの黎明期にその操作法をわかりやすく人々に伝道したのもAppleであれば、iOS7からフラットデザインを取り入れ、このデザインの普及に決定的な役割を果たしたのもAppleです。
「Fluid interface」とは、そんなAppleがiPhoneXから採用した新しいUIデザインであり、スキューモーフィズム、フラットデザイン（メトロUI、マテリアルデザイン）の次に位置する最先端のUIデザインです。
とはいえ「Fluid interface」のデザイン革新は、今まで主に変遷を追ってきたような「ビジュアル」に限りません。
Fluid interfaceの革新的な点は、マテリアルデザインがオブジェクトに現実の法則を取り入れて表現する際にこだわった「インタラクション（アニメーション）」に対する、より先鋭的かつ徹底的なこだわりです。
「Fluid」には、「流体」や「流動性」という意味があります。
Fluid interfaceは、流体のごとく、継ぎ目のないインタラクションを目指しています。
安藤さんの言葉を引用すると、
Fluid interfaceは常に変化することを前提に設計されたUIシステムである。
Fluid interfaceでは、「動的ビヘイビア(Dynamic Behavior)」という設計が提唱されています。
従来のアニメーションは、「AからB」というように、キャッチボールのように一方通行するものでした。
しかし、「動的ビヘイビア」におけるアニメーションでは、AからBだけでなく、AからBへ変化する途中にも、BからAへ戻れるなど、AとBを双方向的に行き来する表現が実現されます。
たとえばFluid interfaceでは、アプリを起動し、アプリがフルスクリーンになる前から、拡大中のアプリのUIをスクロールして操作することができます。
今までの「AからB」という逐次的なUIでは、アプリが拡大しきるまでは他の操作は行えませんでしたし、できたとしても、そこに専用のアニメーションは存在しませんでした。
しかし、Fluid interfaceにおいては、「A」と「B」の中間においてさえ操作を可能にし、そこにアニメーション（インタラクション）を用意しているのです。
この流体のような継ぎ目のないインタラクションこそ、Fluid interfaceの革新的な点です。
しかし、なぜこのようなインターフェースデザインが必要とされるのでしょうか？私たちユーザーのメリットは何なのでしょうか？
安藤さんの言葉を借りると、それは「身体の拡張」です。
Fluid interfaceのメリットは、継ぎ目のないインタラクションによって、デバイスを私たちの身体の一部として錯覚させることにあります。
インタラクションの研究者渡邊恵太氏（@100kw）は、「融けるデザイン」という書籍の中で「自己帰属感」という概念を紹介しています。
これは簡単にいうと、ユーザーの「操作しよう」という意識と、実際のアプリの挙動の遅れが少なければ少ないほど、アプリは透明化し、私たちの身体の一部として錯覚されるというものです。
Fluid interfaceが目指すのは、この自己帰属感を最大限に発揮させようという試みです。
私たちの意識は、一瞬たりとも止まることはなく、常に流れるように変化していきます。
デバイスやアプリが自己帰属感を得て、ユーザーの身体の一部として錯覚されるためには、この流れるような人の意識と同期する必要があります。
それを目指すのが「Fluid interface」なのです。
自己帰属感を獲得することによるユーザーのメリットは何か？という問いの答えは、シンプルに「使い心地の快適さ」です。
もっと意地悪な言い方をすると、自己帰属感の高いデバイスに触った後では、あなたは他のデバイスに触りたくなくなります。
自分の身体の一部として道具を認識したときの「快適さ」は、脳に直接働きかけるため、抗いがたいほど強力なものなのです。
Fluid interfaceは今過渡期にありますが、UIデザインの素人の僕としても「Fluid interfaceは次世代のUIのデファクトになりそうだな」と心理学・神経科学的な視点から思います。
（ただフラットデザインが普及した例のように、ユーザーが使いやすいからといって、そのUIが普及するとは限らないのですが）。
最後に、Fluid interfaceを端的にまとめる安藤さんの一節を引用して、この説明を終えましょう。
人間の流れるよな意識の変化のスピードにも対応することで、これまでよりもさらに高いレベルの自己帰属感がもたらされ、iPhoneのディスプレイの世界の中に身体が拡張されている感覚が得られる。
それがFluid interfaceが目指す新たなUIシステムである。
まとめ
ここまでスマホ黎明期のUIである「スキューモーフィズム」から、今hotな最先端のモバイルUI「Fluid interface」までざっくりと紹介してきましたが、いかがだったでしょうか？
短くまとめたつもりが、結構長くなってしまいましたね。
それでも語りきれない部分が多々あるほど、UI GRAPHICSは学びが多かったので、この記事を読んでUIに興味を持った方にはぜひオススメです。
僕はUIデザインは素人なので、解釈に間違っている部分などもあるかもしれませんが、もしそうした発見があったら、ぜひ僕の学びのために教えてください！
かわんじ（@kawanji01）はTwitterのダイレクトメッセージを開放しています！！
よろしくお願いいたします！！
あなたの貴重なお時間をいただき、ありがとうございました！