日経テクノロジーオンライン
雑誌 特集

iPhoneが示唆する,機器開発のジレンマ《動画あり》

小山 陽子=日経エレクトロニクス
2007/09/21 09:04
 

日経エレクトロニクス,2007年9月24日号,pp.82-89に,特集「思わず好きになる製品を創る」の第3部として掲載した論文を転載し,動画を加えました。

八田 晃
ソフトディバイス 代表取締役 CTO(最高技術責任者)

iPhoneのユーザー・インタフェースを,デザインの専門会社に「作り手」の立場から評価してもらった。他の製品と比べて際立った特徴として,タッチ・パネルを用いた直接操作と動的なグラフィックス表示を,高い水準で融合させたことを挙げる。タッチ・パネルを使って自然な操作を実現するために,念入りなチューニングを施したことがうかがえる。このようなユーザー・インタフェースを実現することは,現在の日本メーカーの開発体制では困難とみる。企画やユーザビリティ・テストなどの段階で,採用されない可能性が高いからである。(本誌)

 米Apple Inc.の携帯電話機「iPhone」のユーザー・インタフェースを,デザインの専門家の視点で分析した。これまでも本誌では,米国のデザイン会社2社によるiPhoneの分析を掲載している1)。ただし,それらはユーザーの視点で見た評価だった。今回は,作り手の立場から分析を試みた注1)。 結論を言えば,iPhoneのユーザー・インタフェースの優れた点は,タッチパネルを使った直接的な操作と,動的なグラフィックス表示の高度な融合にあると考えている。重要なのが,「高度な」という点である。タッチ・パネルを使った製品や,動的に変化するアニメーションを用いた表現はこれまでにもあったが,iPhoneほどの完成度に至った例はあまりない。その違いは,操作感をどこまで高めたかにある。具体的には,タッチ・パネルを使った操作で複数の確定方法を使い分けるなどして,ユーザーが意図した通りに間違いなく操作できるように仕上げた点で,iPhoneは優れている。

 iPhoneのユーザー・インタフェースは,多くのメーカーが思い付く発想に基づいている。しかし,その発想を製品として実現するには,現状の日本企業の開発体制ではいくつかの困難に直面しそうだ。本稿の後半で,開発上の難点と解決策を検討する。

注1) ソフトディバイスは,1984年に創業したデザイン会社で,1990年ごろからユーザー・インタフェースの設計に取り組んできた。デジタル家電やパソコン用ソフトウエアなどに向けたユーザー・インタフェースの提案,制作,コンサルティング業務を手掛けている。

さほど先進性は見られない?

 今回の評価では,まずiPhoneのユーザー・インタフェースのどの部分に先進性があるかを検討した。

 個々の画面の構成や,画面がどのように遷移するのかといったユーザー・インタフェースの構造は,驚くほど普通といえる(図1)。iPhoneの画面を静止画で見ると,少し小ぎれいにできたGUI(graphical user interface)という程度である。後述するように,ウインドウを上下にスクロールさせるバーや矢印といった要素がないことが,すっきりした印象を与えている。

図1 画面の構成や遷移は普通(約42秒の動画)
個々の画面の構成や画面の間の遷移方法は,iPhoneと他の携帯電話機などとでそれほど変わらない。ただし,iPhoneはウインドウを上下左右にスクロールさせるバーや矢印といった,画面操作用の要素を表示していないため,さっぱりした印象を与える(動画の再生にはWindows Media Playerが必要です。再生ボタンを押すと動画を読み込んでから再生が始まります。以下,同じ)。

 しかも,iPhoneのユーザー・インタフェースを構成する要素には,Apple社の製品で既に利用しているものが少なくない。Homeメニューに現れる機能のいくつかは,パソコン用OS「Mac OS X」に搭載したウィジェットの流用とみられる(図2(a))。iPhoneで音楽を再生するときに複数のアルバムのジャケットを並べて表示する機能「Cover Flow」は,もともとパソコン用ソフトウエア「iTunes」の機能である(図2(b))。

図2 既存の技術を使い回す
iPhoneの機能の一部は,同社のパソコン用OS「Mac OS X」に搭載しているウィジェットを使っているようだ。iPhoneの機能とMac OS Xのウィジェットのうち,共通点があるものを,(a)に赤色の○や□で示した。iPhoneで音楽を再生するときに,複数のアルバムのジャケットを並べて表示する「Cover Flow」機能は,パソコン用のコンテンツ管理ソフトウエア「iTunes」の機能を流用したとみられる(b)。

 Cover Flowなどが用いる動的なグラフィックスは,OS Xの描画用API「Core Image」などを利用して実装しているようだ。iPhoneの大きな売り物である2本の指を使った操作も,Apple社のノート・パソコンで一部実現済みだった。

 iPhoneはいわゆる「スマートフォン」と呼ばれる製品の一種である。ただし,そのユーザー・インタフェースは決してスマート(賢い)とはいえない。Apple社が1993年に発売したPDA「Newton」のユーザー・インタフェースと比べると,その差は歴然としている。Newtonには,ユーザーが手で書いた文字や図形を認識したり,例えば「Call Tom」と書き込むと電話帳からTomの電話番号を探して電話をかけたりといった,知的な要素がふんだんにあった(図3)。iPhoneには,ユーザーが機器を賢いと感じるような要素はあまりない。

図3 Newtonの方が賢かった
Apple社が1993年に発売したPDA「Newton」のユーザー・インタフェースには,手書きの文字や図形を認識したり,ユーザーが文字で書いた指示を解釈して実行したりといった,知的な要素があった。iPhoneには,このような要素はほとんどない。

タッチ・パネルの確定方法を工夫

 それでは,iPhoneのユーザー・インタフェースが他の機器と大きく違う点は何か。これを突き詰めて考えた結果が,冒頭に書いた「タッチ・パネルを使った直接操作と,動的なグラフィックス表示の高度な融合」である。

 タッチ・パネルを用いた直接操作はユーザー・インタフェースの設計上,大きな利点がある。画面に表示した要素を触るだけで操作できるので,ユーザーにとって分かりやすい。実際,カーナビの操作がリモコンからタッチ・パネルに変わったとき,使い勝手が大きく改善された。GUIとタッチ操作はもともとなじみが良いのである。そもそも,パソコンなどで当たり前になっているマウスで画面上のオブジェクトを選択するというGUIの手法自体が,手で触る行為の代替手段だったとも解釈できる。

 ただし,タッチ・パネルを用いたユーザー・インタフェースは,設計が非常に難しい。それを端的に表すのが,ユーザーが画面上の要素を選ぶときに,どのタイミングで確定するかの方法である。我々がiPhoneのユーザー・インタフェースでうまく考えられていると判断したのはこの点だった。iPhoneは,複数の方法をうまく使い分けており,自然な操作性の実現に大きな役割を果たしている。

 確定には大きく分けて二つの方法がある。ユーザーがタッチ・パネルを押した瞬間に確定するのか,離した瞬間に確定するのかである。便宜上前者を「ダウン確定」,後者を「アップ確定」と呼ぶ。

 ダウン確定では,ちょっとでも画面に触ると確定してしまう。レスポンスは軽快だが入力ミスも起こりやすい。アップ確定の場合は,誤って押してしまったら,触っている場所を変更する(指をスライドさせる)とキャンセルするといったルールを盛り込める。

アップ確定かダウン確定か

 iPhoneは,用途に応じてこれらの確定方法を使い分けている。例えば,iPhoneのメニュー階層の最上位に位置するHome画面では,ダウン&アップ確定を用いている(図4(a))。すなわち,同じ場所で指を押して離さないと確定しない。このため,間違って押しても,他の場所で指を離せば何の機能も起動しない。

 ダウン確定を使っているのが,電話をかけるときのキーである(図4(b))。触ったらすぐに確定する。ユーザーは,間違って押した場合はバックスペース・キーで消すわけである。この方法の利点は,画面全体を使って大きなキーを配置することができることである。アップ確定の場合と異なり,間違えて押したときに指が逃げる領域を作る必要がないからだ注2)

注2) このほか,電卓機能のキーなどでもダウン確定を採用している。

 文字を打つキーボードは,アップ確定である(図4(c))。指で押した部分と関係なく,離した場所にあるキーが選ばれる。これは,押し間違いを減らすためとみられる。間違って横の文字を押してしまったときに,指をずらして正しいキーに移して離せば確定する。

図4(a) ダウン&アップ確定の画面操作例(約41秒の動画)
iPhoneでは,ユーザーが画面中の要素を選ぶときに,どのように指を動かすと要素が確定されるかで,複数の方法を使い分けている。Home画面で機能を選択するときは,ある機能を示すアイコンの上でユーザーが指を押して離すと,その機能が選ばれる。あるアイコンを押した後で指をずらすと,どの機能も起動しない。
図4(b) ダウン確定の画面操作例(約44秒の動画)
電話のキーでは,指を押した瞬間にそのキーが選ばれる。
図4(c) アップ確定の画面操作例(約33秒の動画)
文字を打つキーボードでは,指を押した場所は関係なく,離した場所の文字が選ばれる。押されていない文字の表示は小さく,押している文字だけ大きく表示されるため,ユーザーは押している文字を拡大表示で確認し,正しい文字であれば,そこで指を離すことで文字が確定する。

 ただし,この方法には難点もある。Apple社は,キーボードの操作に慣れてきたら,両手の親指を使って,2本の指で入力することを推奨している。ところが最初の指が離れるまで前の文字が確定しないため,2本の指で連続的に文字を打とうとすると,2本の指が同時にタッチしている時に不具合がでる。一つ確定したら次の文字と,順繰りに文字を打たざるを得ない注3)

注3)iPhoneには,キーボードで単語を打ち間違えた場合に正しいとみられる単語の候補を表示する機能がある。これはユーザーが親指で打つことを想定しているようだ。両手の親指でキーボードを打つ場合,ユーザーは狙った場所よりも外側のキーを打ってしまうことが多い。単語の予測機能は,これを考慮しているようにみえる。

複数の画面操作を混在させる

 タッチ・パネルを介したユーザーの操作は,確定以外にいくつもある。例えばiPhoneのWWWブラウザーでは,ページをスクロールさせたり,指ではじいて流れるように動かしたり,拡大/縮小したりできる(図5)。どの操作の場合もコンピュータ側は,指が触れたり離れたりといった情報しか得られない。ユーザーの意図をなるべく正しく判定するには,触れた場所の座標や離れた場所の座標,触っていた時間などを細かく取得し,場合分けをする必要がある。

図5 指の動きを異なる操作に対応させる(約58秒の動画)
iPhoneでは,ユーザーの指の動きに応じて異なる操作を実現している。例えばWWWブラウザーでは,画面上で指を動かすだけで,ページのスクロール,ページの拡大/縮小などができる。

 多くのユーザーがこれらの操作を自然と感じるようにするには,意図の判定に使うアルゴリズムや数値を,念入りにチューニングしなければならない。例えばApple社は,「ユーザが指を押してから離すまでに0.何秒たっていれば確定と判断する」といった数字を設定しているはずである。この時間をどれだけに設定するかが問題で,一つの操作に重きを置きすぎると,他の操作が悪影響を受けやすい。

 ユーザー・インタフェースの作り手としてiPhoneで一番感心するのは,このチューニングの部分である。単に画面の動きだけであれば,デモでよく作るような内容といえる。これを製品として使える水準に高めたことが,他社にはなかなかできない点だと思う。

流れるように動くグラフィックス

 ユーザーに操作を自然と感じさせている要素は,ユーザーの操作意図の判定だけではない。操作に応じて滑らかに動くグラフィックスの役割も大きい。

 iPhoneでは1画面に収まらないページやリストがあった場合,指でなぞったりはじいたりすることで,ページやリストをスクロールして閲覧できる。その動きは滑らかで,物理的な慣性や弾性を持っているかのようだ(図6)。例えば,リストが上端まで来ているにもかかわらず,ユーザーがさらに下にスクロールさせようとすると,あたかもリストに弾性があるかのような動きを示す(図6(b,c))。こうしたアニメーションを自然に見せるために,Apple社は操作を表示に反映させるまでの反応速度や,画面表示のフレーム速度に気を使っているはずである。

図6 動的な表示を多用(約30秒の動画)
iPhoneのユーザー・インタフェースの大きな特徴は,指の動きに応じたアニメーションを多用していることである。膨大な曲目のリストなどをスクロールさせるとき,画面を勢いよくなぞるとリストが流れるように表示される(a)。ユーザーが指を速く動かすほど,表示の動きの勢いが増す。また,リストが上端まで来たときにさらに下にスクロールしようとすると,リストの余白部分が現れ,あたかもゴムを引っ張ったときのように動きが鈍くなる(b)。指を離すと,引っ張ったゴムが元の状態に戻るように,リストの上端まで戻る。

 こうした工夫によって,iPhoneのユーザーはタッチ・パネルを用いた直接操作に自然に慣れるとみられる。この結果,iPhoneでは通常のGUIで使っているウインドウ操作にかかわる制御要素を,基本的に画面から排除している。パソコンのGUIなどでは,ウインドウをスクロールさせるバーや矢印,ウインドウの拡大/縮小に使う領域などを明示的に表示する。iPhoneにはこのような要素がほとんどない。リストなどのスクロール中には,現在表示されている部分が全体のどれくらいを占めるのかを示すバーが表示されるが,スクロールが止まると消える。これらの制御要素をなくしたことが,前述したように画面がすっきり見える一因である注4~5)

注4)タッチ・パネルを使った直接操作には弱点もある。例えば,指でアルバムのジャケットをぱらぱらとめくるCover Flow機能では,アルバムの枚数が1万枚など膨大になったときに,快適に操作できない可能性がある。通常のユーザー・インタフェース設計では,数枚の場合と1万枚の場合を両立できる方法を考えるが,Apple社はあえてそこに踏み込んでいないようだ。リスト表示など,別の手段では高速にアクセスする方法を設けているため,Cover Flowは一般的な人が普通に使えればよいと割り切り,膨大なアルバムを持つヘビー・ユーザーにそれほど配慮しなかったのかもしれない。

注5)ユーザー・インタフェースの歴史から考えると,iPhoneはGUIとポストGUIのはざまにある製品とみなせる。これまでコンピュータのインタフェースは,物理的なボタンを用いる方法からコマンド・ラインでやりとりする方法,そしてGUIへ進化してきた。GUIの中でも,当初の静的な表現から,アニメーションや3次元グラフィックスを活用した豊かな表現に変わってきている。iPhoneは,Mac OS XのCore Imageを利用していることなどを含めて,GUIの進化の成熟過程にあるものといえる。一方で,GUI後のユーザー・インタフェースとして,画面だけではなく,音声認識,身振り,手振り,触覚などを利用する方法や,いわゆる実世界指向インタフェースなどが以前から研究されてきた。実世界指向インタフェースとは,実世界の物理的な空間の中で,例えば指で機器をさしただけでデータが移動するといった方法である。iPhoneのユーザー・インタフェースは,タッチ・パネルによる自然な操作など,ポストGUIの要素も兼ね備えている。

動的な操作環境の開発には体制の見直しが必要

   iPhoneが実現したような,動的で操作感が重要なユーザー・インタフェースは開発が難しい。日本の機器メーカーの多くが採る開発体制には,このようなインタフェースを作る上で障害になる点がいくつもある。以下では,現在の開発体制の難点と解決策を検討する(表1)。

表1 既存の開発工程でぶつかる問題点と解決策
iPhoneのような製品を作ろうとしたときに,現在の日本メーカーの開発手法では,いくつかの難関を越える必要がある。

仕様書で記述しづらい

 まず問題になるのが,動的なユーザー・インタフェースを仕様書の段階でどのように表現するのかという点である。現状のユーザー・インタフェース開発でも,この点には苦労する。スケッチを描いたり,一連の画面の流れを示す絵コンテ(ストーリー・ボード)を描いたりする(図7(a))。

 これらの方法で,動的なユーザー・インタフェースを記述することは難しい。iPhoneの大きな特徴である操作感の表現は特に困難である。開発の初期段階で操作感などを記述するには,パソコンなどで動作する,ユーザー・インタフェースのシミュレーション・モデルをよく使う。これまでなら紙芝居をぱらぱらとめくるようなもので十分に役立った(図7(b))。しかし動的な操作感を表現するには,最初の段階からかなり綿密に作り込んだ動作モデルが必要になる。

 我々が請け負う仕事でも,最近はこのようなモデルが多くなりつつある(図7(c))。以前であれば,簡単なアニメーションを表示できる市販ソフトを利用して動作モデルを実現できたが,操作感が重要になる製品をモデルで検証するには,微妙なチューニングが必要になる。

 このようなモデルの作成には非常に労力がかかる。今後は,紙に書いた仕様書と動作モデルを,目的に応じて使い分けることになりそうだ。

図7 文書では表現できない
静的な画面構成のユーザー・インタフェースでは,スケッチや絵コンテ(ストーリー・ボード)を描いたり,簡単な画面遷移を実現するプロトタイプで仕様の定義や設計,評価ができていた(a,b)。動的なユーザー・インタフェースの設計で操作感などを設計・評価するには,設計の初期段階から実際に動作するシミュレーション・モデルが必要になる(c)。

ノウハウが属人的

 次の問題点は,動きをデザインするときの手法が確立していないことである。動的なユーザー・インタフェースを設計できる人材はいる。こうした人材は図7(c)
に示したような動作モデルを,1~2日で作ることができる。ただし,ノウハウが属人的で,多くのデザイナーが利用できる定石や理論がない。

 動的なユーザー・インタフェースとは,単に画面の間の遷移にアニメーションを使うといったものではない。動きによって,操作に意味を持たせるインタフェースである。静止画の場合は,どのような構成にすればユーザーの視線を導いたり,感情を伝えたりできるかが,理論や定石として整備されている。いわゆる「造形言語」と呼ばれるものだ。

 動きについては,これに相当するものがない。特定の動きの意味や,動きによってユーザーに何かを分からせるテクニック,人間が認知できる動きの量などを,今後理論化,ルール化していくべきだろう注6)。動的なインタフェースでは,どの部分に触れるかなどがiPhoneのように暗示的になることが多い。どのように操作をガイドし機能を実現するかは今後の課題だろう注7)

注6) ソニーは,「クロスメディアバー」などの動的なユーザー・インタフェースを製品に使っている。同社は,動くアイコンは複雑な絵柄でなく,なるべく簡単な表現にしようと配慮しているようだ。これは,ユーザーの認知負荷を減らし「軽い」印象を与えるためではないか。iPhoneが,具象的なアイコンを使っているのと対照的である。

注7) iPhoneの操作は,自分で触ってみたり,他人が使っているのを見たりすれば理解できる。しかし,そうする前には,どうやるのか分からない。それを許しているところに,Apple社の割り切りが感じられる。このような場合,日本のメーカーが採用する設計基準では,大抵何らかの手掛かりを画面に明示することが求められる。例えば,iPhoneでは曲目などのリストの全体を画面に表示できない場合に,現在の表示部分が全体のどの程度かを示すバーは,画面に触れてリストを動かすまで現れない。日本メーカーでは,最初からこのようなバーや,リストのスクロール用ボタンなどの表示を要求される。

評価から体験の設計へ

 もう一つの大きな問題は,開発段階で試作機の使い勝手(ユーザビリティ)を調べたときに,新規のユーザー・インタフェースの場合は得てして評価が低いことである。理由の一つは,試作機を使う想定ユーザーが,新しいユーザー・インタフェースに慣れていないこと。比較対象が従来の使い慣れたユーザー・インタフェースであれば,そちらの方が良い結果が出やすい。また,iPhoneのように操作感が重要な製品は初期の試作でチューニングが十分でなく,快適に使えないことが多い。これも,ユーザビリティ・テストで悪い評価をもたらす。つまり,初期段階で評価した結果,後から使い勝手が大きく向上するユーザー・インタフェースの可能性をつぶしてしまうことになる(図8)。

図8 初期段階で評価すると見誤る
先進的なユーザー・インタフェースを,ユーザーの習熟度や試作機の完成度を無視して既存のインタフェースと比較すると,当然使いにくいと判断される。

 これを避けるには,ユーザビリティ・テストを含めたユーザー・インタフェース設計全体の方向性を見直すべきだろう。これまでのユーザビリティ・テストは,悪い点を探し出して修正することを念頭に置いてきた。いわばマイナスをゼロにする方法である。これに対して,プラスの価値を生む方向で,開発を進める動きがある。具体的には,ユーザーの体験を設計するという発想である。

 例えば,ファクスのユーザー・インタフェースの改良を考える。従来のユーザビリティ・テストでは,各種のボタンの配置や色,操作手順をどのように設計すれば使いやすくなるのかを対象にしてきた。ユーザーの体験という発想では,そもそもユーザーが何をしたいのかから設計を始める。ファクスでは,ユーザーはボタンを押したいわけではなく,紙の内容を複製して相手に送ることが目的のはずである。さらに,「こんなふうに送りたい」「本当は手渡したい」といった要求があるかもしれない。こうした要求を実現するために,機器やユーザー・インタフェースはどのような姿になるべきかを設計していくわけである。

 ユーザーの体験の設計方法は,いまだ確立したとはいえない。多くの企業が様々な手法を試行錯誤している段階である。我々も独自に考えた方法をいくつか試している。例えば携帯機器にかかわる体験を考えるときに,手近にあるものを利用して,その形から導き出される行為を参考にしたりしている(図9)。

図9 新たな体験を探る
新しい体験を設計する手法は,いくつか開発されつつある。ソフトディバイスでは,手近にあるものを利用して,その形から導き出される自然な行為を参考にするといった手法などを試みている。

 先述したように,新しいユーザー・インタフェースは,当初はユーザーになじんでもらえない可能性がある。これを解消して普及を進める方策を考えることも重要である。Apple社が,他の製品に使った多くの機能をiPhoneに組み込んでいるのは,個々のアイデアを少しずつ製品に入れて試してきたとみることができる。

 新しいものを受け入れやすい状況をつくるためには,製品そのもの以外のさまざまなメディアの活用も重要である。Apple社ではCEOのSteve Jobs氏自らが製品のデモをして注目を集めるほか,WWWサイトに操作方法を説明した動画をいくつも掲載したりしている注8)

注8) 任天堂の家庭用ゲーム機「Wii」でも,展示会でのデモやCMなどを使って新しい使い方を浸透させようとしている。Wiiで遊んでいるときに誤ってリモコンを投げて物を壊したという動画がYouTubeに掲載されたりするのも,ユーザーを教育する効果がある。

割り切りがiPhoneの強さ

 iPhoneは編集などを目的としたコンピュータというよりも,iPodのように再生を主としたプレーヤーとして設定されたように見える。これまでにも指摘されているように,iPhoneには足りない要素がたくさんある。写真などの複数選択ができなかったり,テキストのコピーや張り付けができなかったりする。これは,Apple社が考えたユーザーの体験を実現する上での割り切りとみられる。 ユーザー・インタフェースを開発する立場からいえば,特定の手段を使うと必ず利点と欠点がある。だからこそどこに焦点を当てて,どこを切るのかが重要になる。

参考文献
1) Keysほか,「iPhoneはどこがすごいのか」,『日経エレクトロニクス』,2007年7月30日号,no.957,pp.101─110.

マイページ

マイページのご利用には日経テクノロジーオンラインの会員登録が必要です。

マイページでは記事のクリッピング(ブックマーク)、登録したキーワードを含む新着記事の表示(Myキーワード)、登録した連載の新着記事表示(連載ウォッチ)が利用できます。

協力メディア&
関連サイト

  • 日経エレクトロニクス
  • 日経ものづくり
  • 日経Automotive
  • 日経デジタルヘルス
  • メガソーラービジネス
  • 明日をつむぐテクノロジー
  • 新・公民連携最前線
  • 技術者塾

Follow Us

  • Facebook
  • Twitter
  • RSS

お薦めトピック

日経テクノロジーオンラインSpecial

記事ランキング