Photo by Bagus Hernawan on Unsplash
iPhoneは登場以来、比較的高い価格設定にもかかわらず絶大な人気を集めてきた。理由の一つはその「操作感」ではなかっただろうか。スマートフォン普及黎明期、なぜ他メーカーのスマートフォンとiPhoneとでは決定的な操作感の違いがあったのだろうか。iPhoneの操作感の「気持ちよさ」の正体とはどういったものだったかを解説。
本記事は2015年1月25日に刊行された、渡邊恵太『融けるデザイン ハード×ソフト×ネット時代の新たな設計論』（株式会社ビー・エヌ・エヌ新社）の内容を一部抜粋・再編集したものだ。
渡邊恵太
undefined
明治大学総合数理学部 先端メディアサイエンス学科 准教授。博士(政策・メディア)(慶應義塾大学）。シードルインタラクションデザイン株式会社代表取締役社長。知覚や身体性を活かしたインターフェイスデザインやネットを前提としたインタラクション手法の研究開発。近著に『融けるデザイン ハードｘソフトｘネットの時代の新たな設計論 』（BNN新社、2015）。
iPhoneのGUIはなぜ気持ち良いのか
iPhoneのユーザーインターフェイスは、登場した当初から他のスマートフォンからは逸脱した一線を画す存在であった。物理的なボタンはほとんどなく、画面は大きく、指での操作が前提だった。それゆえに、ユーザーが体験するほとんどすべての設計が画面の中に移行した。
実際のところ、iPhone登場まではタッチパネルを採用したユーザーインターフェイスは「物理的な感触がない」ことを主な理由として、あまり積極的な採用は見られなかった。仮に採用されるとしても、併用してボタンが取り付けられていた。たとえば任天堂DSは、タッチパネルを取り付けたものの、依然として十字キーやABボタンを取り付けていた。
したがって、ほとんどすべての操作をタッチスクリーンで行う方針は、ユーザーインターフェイスにとって「触感がない」「使いにくい」という課題に対する挑戦であった。しかしiPhoneはそれを行ったし、しかもマルチタッチの採用や、GUIによって触感のなさをカバーすることもしてきた。iPhoneは他のタッチスクリーンのGUIに比べて圧倒的にフレームレートが高く、操作に対する応答速度が高い。したがって、マルチタッチを行っても指への追従性が高い。この追従性は、ハードウェアのスペックによってというよりも、GUIの設計によって実現されている。ソフトウェアキーボードについても、触感はないが視覚的なフィードバックや反応領域のしきい値などの調整がうまく設計されていた。
アイコンやアプリケーションのUIコンポーネントといった美観面も優れていた。等々、他にもさまざまな特徴があるが、iPhoneはとにかくよくつくりこまれていたということだ。これはAppleがコンピュータのUIに精通している結果でもあるが、スマートフォンというまったく新しいプラットフォームで最初からこのような、触っているだけ楽しい、気持ち良さがある、といったある一定の完成度を出せることはやはり驚きだ。結果的に、このiPhoneのGUIは他のスマートフォンへも影響を及ぼしたし、他の家電にもタッチパネルが搭載され、iPhoneのような設計を真似するような流れが起きた。
しかし、問題は「何を真似したのか」だ。筆者から見れば、実際は真似できておらず、真似の観点が間違っていたということだ。そのために、逆に気持ち良さや触っているだけで楽しいという感覚から遠のいてしまっている製品も多くあった。では、iPhoneのUIの作り方から学ぶべきことは何だろうか。
自己帰属感とiPhone
結論から言ってしまうと、「自己帰属感の高いユーザーインターフェイス」である。iPhoneは身体に近い、身体と親和性の高いインターフェイスになっている。だから操作自体は透明になり、情報に直接触れているかのような感触を与えるのである。
さて、これまで「マウスとカーソルの連動」という点で自己帰属感について説明してきた。しかしながらiPhoneはタッチパネルで、カーソルはない。けれども、カーソルがないと自己帰属は起きえないかといえばそんなことは全くない。何が連動しているのかを考えることでわかる。あるいは、どう連動させるかで自己帰属感は生起するのだ。
iPhoneの場合、カーソルがない。だから指がカーソルに思うかもしれない。しかし指はどちらかといえばマウスの位置づけで、カーソルではない。ではカーソルの代わりは何か。ここで重要なのは、カーソルということではなく、iPhoneでパソコンのカーソル並に身体の動きに連動している部分は何かということだ。
それは「画面全体」である。たとえばiPhoneのホーム画面は指に追従し、アプリケーションリストが左右に移動する。ウェブブラウザでは画面全体が指に追従しスクロールする。カーソルはないが、カーソルと同じレベルでiPhoneの画面は非常になめらかに連動している。この連動が画面の中と指を接続し、自己帰属感が生起して身体の一部となり、ハイデガー的に言えば、道具的存在になるのだ。
iPhoneのUIの誤解――アニメーションに自己帰属感はない
iPhoneの真似をするというと、だいたい美観、ジェスチャ、アニメーションの３つを真似る製品が多い。アイコンやGUIコンポーネントのグラフィックスの美観を真似るのは比較的簡単であるし、グラフィックデザイナー次第というところはある。
日本にも素晴らしいグラフィックデザイナーは大勢いる。しかし問題は、ジェスチャとアニメーションの理解と設計だ。これはグラフィックデザイナーだけではできない。
まず、iPhoneの自己帰属感として説明したホーム画面でのページ送りや、ブラウザのスクロールの話から考えてみよう。これらはたしかに画面だけを見たらアニメーションに見える。しかしこれをアニメーションとして捉えてしまったのが、多くの真似の失敗原因である。
先に述べたように、この画面はアニメーションではなく、カーソルと同じ意味で「動く」のである。パソコンのカーソルはアニメーションだろうか。テレビなどでパソコンの操作の解説ビデオを見ていれば、カーソルは他のUIの要素と同じようにアニメーションかもしれない。それに画面上で動くグラフィックを「アニメーション」と定義するなら、たしかにカーソルだってユーザーのマウスからの入力によるアニメーションかもしれないし、計算機上では同列の扱いで処理されるかもしれない。
しかし、述べてきたように、カーソルは人の手の動きと連動して動き、自己帰属感をもたらすものだ。同じ画面上で動くグラフィック、たとえばダウンロード時に表示されるプログレスバーの動くグラフィックには自己帰属感は生まれない。そういうものとは違う存在なのだ。
この理解なしに、iPhoneの画面がダイナミックに変化することをアニメーションとして捉え、iPhoneよりもっと動かそうとアニメーションを導入してしまう事例をよく見てきた。しかしこれは、自己帰属感や透明性を得るどころかその逆であり、人はそのアニメーションの最中には操作できず、その時間は、ハイデガーの言う道具的存在から事物的存在になってしまうのである。
ではアニメーションは悪いものなのか。そうではない。UIにおけるアニメーションは、基本的にユーザーの操作や通知を機に「ユーザーの操作とは連動せず」に一定時間動き、状態を示すものだからだ。GUI環境では主に注意を引くための通知表現として使われることが多いが、最近では画面遷移や切り替えにアニメーションを導入することが増えてきている。このアニメーションはナビゲーションを意味することが多く、前に見ていた画面やファイルがどこに行ったか（隠されたのか、消えたのか）を表現するときに有効である。たとえばMacに搭載されている最新のSafariでは、ファイルをダウンロードするとアイコンが弧を描くようにダウンロードフォルダに移動し「どこにファイルが保存されたか」を伝えている。
ジェスチャの誤解
そして、ジェスチャの理解もまた難しく、誤解も多いように見える。まずジェスチャを２つに分けてみることから始めよう。ジェスチャには、コマンドジェスチャとオペレーションジェスチャがあると言える。
「コマンドジェスチャ」というのは、たとえば画面に三角形の絵を書くと、ある機能が実行されるというようなものである。かつてPDAと呼ばれた端末では比較的よく使われていた手法だ。Kinectなどの空中で何も持たずに手の動きを認識するインターフェイスの場合もコマンドジェスチャがよく使われる。たとえば、手を振ってバイバイとするとアプリケーションが終了したり、２回手を前に出すと実行など、そういった動きのパタンと機能が結びついたものだ。こうしたコマンドジェスチャはタッチパネルが搭載された携帯電話やスマートフォンあるいは電子書籍でも採用されている。
一方「オペレーションジェスチャ」は、画面の動きと手のジェスチャの動きが連動するジェスチャである。たとえばiPhoneのSafariは、ブラウズ中に左スワイプすれば、そのスワイプの動きに連動して画面が右に隠れながら、前のページが下に現れるようになっている。また、iPhoneのホーム画面を次のページに移動するのも、指の動きに連動する。こういった操作のためのジェスチャを「オペレーションジェスチャ」とここでは呼ぶことにする。オペレーションジェスチャはグラフィックの連動性が大きな特徴である。筆者としては、これは操作方法であってジェスチャとはあまり言いたくないのだが、世間一般ではこれも「ジェスチャ」と呼んでいるため、ここではオペレーションジェスチャと名づけた。
さて問題は、このコマンドジェスチャとオペレーションジェスチャを混同したまま設計されていることである。たとえば隣のページに移動する画面遷移の時に、コマンドジェスチャを採用してしまうケースをよく見かける。
当初タッチパネルが搭載されたデジカメでは、写真閲覧モードで画面上を指で左になぞると、ひとつ前の写真に戻るというものがあったのだが、これは左になぞったあと、そのなぞったということが認識されてワンテンポ置いたあとに、ひとつ前の写真が表示されるというものであった。また、コマンドが認識されたあと、今見ている写真が左にアニメーションして動いていくトランジション効果をかけたものもあった。電子書籍も、ページをめくっている感じを演出として出したいのか、画面をなぞると次のページに切り替わるというものがあった。特に電子ペーパーの場合はアニメーションには強くないので、なぞりのジェスチャの後に画面がクロスフェードして次のページが現れるというものがあった。
iPhoneのジェスチャは、その多くがオペレーションジェスチャを採用している。かつ、グラフィックと指の動きが連動するようにされている。だから、ひとつひとつの操作でも自己帰属感が生まれるのだ。
プログラマがジェスチャの認識の仕組みを作り、デザイナーが画面遷移のアニメーションをつくるという設計をしてしまうと、自己帰属させるような発想にはなりにくい。また、こういった自己帰属感の設計はなかなか仕様書に落とし込みにくいという課題もある。
美観、ジェスチャ、アニメーション。iPhoneはいずれもよく設計されているがゆえに、一見わかりやすい美観の良さに引っ張られ、美観や演出という観点でジェスチャもアニメーションも捉えられてしまっていたようにも感じられる。もし自己帰属感という観点をもってiPhoneの良さを理解していれば、アニメーションやジェスチャについて誤解せず、適切に設計できていたかもしれない。透明性を得るための道具の設計は、人とグラフィックの細かい現象をひとつひとつ適切に捉えていくことであり、感覚や演出で行うものではない。UI設計は原理に基づいて設計されるべきであり、だからこそ Appleは、1984年のMacintoshからそれを原理として意識し、ガイドライン化しているとも言える。画面という場所の都合上、アーティストによる美観の演出は時に必要かもしれないが、それも売り出していく要素のひとつだとしても、このような人間の自己帰属感を設計に取り込むかどうかで、道具になるか否かが決まるのだ。
