「HTML5 Conference 2013」では「モバイルフロンティア よりよいモバイルUXを生み出すためのデザインガイド」を翻訳したメンバーによる、ユーザーエクスペリエンス講座「モバイルフロンティア：フロントエンジニアとデザイナーのためのモバイルユーザーエクスペリエンスのセッションが行われた。

2013年4月に発売された「モバイルフロンティア　よりよいモバイルUXを生み出すためのデザインガイド」は、モバイル中心の世界が急速に変化しつつある今、既存のサービスの焼き直しや単なる移植ではない、モバイルならではのユーザー体験を創り出すための指南書だ。

ただ「つくる」だけでなく良い体験をデザインすることが重要な開発フローと認識され始めている近年、ネイティブアプリ・Webアプリ関係なく「体験のデザイン」を考えるテーマとして注目されている。今回のセッションでは、実際に翻訳を担当したメンバーが、内容を構成する1～9章それぞれの中身に関して、簡潔に紹介してもらったので、そのダイジェストをまとめた。

1章いかりを上げる 2章モバイルNUIパラダイムの登場
────────────────────清水かほる氏

昔の携帯は、機能拡張を繰り返すうちにいわゆる「ガラパゴス携帯」と揶揄されるようになったが、実は開発側にとっても制約が多く発生したり、開発環境が複雑化することで開発しにくいものになっていった。そこに登場したのが「iPhone」などのスマートフォン。必要最小限のアプリや直観的UIといった、ユーザーにとって非常に使いやすい新たなデバイスの登場は、開発側にとっても制約のない理想的な開発環境が出現した。いわば「モバイル黄金時代」が本格的に到来したといえる。事実、デスクトップからモバイルに世の中のトレンドは大きく移行しているのだが、両者の開発環境に関して改めて比較したい。

• デスクトップ───標準化が進んだ入力手法　学術的研究結果が豊富　開発者やデザイナー
• モバイル───まだ上記のような開発環境がない上、デスクトップ環境での開発手法が使えない

このようにそれなりの歴史の中で培ってきたノウハウを生かせるデスクトップ環境と比べ、モバイル環境はこれからルールを作っていかなければならない。この状況はとらえ方によっては「苦労」ではなく「チャンス」があるといえる。すなわちそのチャンスこと、本題になっている「モバイルフロンティア」というキーワードに結びついているのだ。

• モバイルNUIパラダイムの登場───これまでの開発手法は、3つの段階を経ている。

＜第1段階＞
●コマンドラインインターフェース（CLI）
●コマンドを覚えて、テキストベースのインターフェースに打ち込む

＜第2段階＞
●グラフィカルユーザーインターフェース（GUI）
●ユーザーにコマンドを見せて選ばせる
●フォルダなどオフィスをまねたメタファーを利用することで親しみやすいUIを実現

＜第3段階＞
●ナチュラルユーザーインターフェース（NUI）
●ユーザーの状況に応じて表示される情報が変化
●タッチパネル操作が可能

現在、第2段階のGUIと第3段階のNUIの間にいるが、その理由としてまだNUIに対応できてないユーザー多いことが挙げられる。スマートフォンやタブレット端末の急速な普及でNUI環境が普及している一方、まだGUI環境に慣れた考え方が多い状況だ。

3章_デンバーのピーナッツバター
────────────────────脇坂善則氏

モバイルデバイスは、根本的にPCとは利用体験が異なる。トイレや電車の中、はたまた教会など「いつでも、どこでもつながる。つかえる」ことが前提。また何かをしながら使える、つまり「ながらつかえる」ということを前提にデザインする必要がある。それが「モバイルならではの体験にフォーカス」するということ。

例えば、その場で流れる音楽を聞かせて検索することで曲名を調べるといった、音声入力。カメラ機能を利用して撮った画像をその場でアップ、共有。現在地から検索する位置情報入力。一方で、モバイルならではの体験によるデメリットとして、注意が散漫になったり、行動がさえぎられることが挙げられる。

そこでそうした認知的負荷・機会費用を減らすためのデザイン、つまり「モバイルUX」を新たに創っていくことが今、求められている。

4章_形態の変化
────────────────────羽山祥樹氏

モバイルユーザーは、常に「つながりの中」にいる。これまではこちらが提供するサービスや機能に対して、ユーザーが理解した上で、使いこなす。つまりユーザー側がサービスに合わせてくれていたが、モバイル環境の今、「ユーザーが何かしたいことの途中にあなたのウェブサイトがある」。つまり「コンバージェンス」な状況で、使われている。

また「エコシステム」と呼ばれる様々なものがつながって価値を生むのがモバイル環境の大きな特徴。

• 一人もいないフェイスブック
• 一人もフォローしていないツイッター
• 接続できないネット

これらはそれがどんなに高機能かつ良質なサービスであったとしても、つながっていなければ意味をなさない。iPhoneが多くのユーザーから支持されたのも、デバイスとしての機能だけではなく「アップルストア」という存在が大きかった。

デバイス・アップルストア・アプリ開発者・ユーザーすべてがつながることで、価値が生まれる。そのため、モバイル環境におけるデザインを考えたとき、誰もが利用しやすい「参加型デザイン」が望まれる。

5章_モバイルUXパターン
────────────────────野澤紘子氏

モビリティのためのデザインには大きな特徴がある。モバイルは決して「小さなPC」ではない…「PC」は積むデザイン、「モバイル」はデザインパターンを広げることにある。

• コンテンツがＵＩになる──────NUI（ジェスチャーとスーパーリアル）

その上で、モバイルならではの入力方法（カメラ、QR、加速度センサ、GPSなど）を活用するUXが必要。これまでPCなどを利用する目的は、何か作業することがメインだった。しかしモバイルを利用する目的は、「使い続けること」。それによって価値が増えていく。

そこでユーザー視点でついついいじりたくなるような感覚を察し、ユーザーの状況に応じて適切なアウトプットを創り上げていく必要がある。

6章_モバイルプロトタイピング
────────────────────佐藤伸哉氏

「アイデアが広がる」→「アイデアを実現する」。この間でプロトタイピングが行われる。未知の探求や、ユーザーフィードバックの収集、デザインアイデアやエクスペリエンスの伝達共有、アイデアの微調整等の目的で行われるプロトタイピングには、大きく2つの方法がある。

• 戦術的プロトタイピング──スケッチ　ペーパープロトタイピング、実機上でのインタラクティブプロトタイプ
• 体験的プロトタイピング──ストーリーボーディング、ボディストーミング、スピードデート法、コンセプトビデオ

その中でモバイルプロトタイピングを成功させる条件、それは「適度な忠実度で行う」というもの。

• 完璧主義者にならない　
• 失敗を受け入れる　
• 勇気をもって次のアイデアに進む

つまりプロトタイピングは万能薬ではないということを認識した上で取り組むことが重要だ。

7章_モーションとアニメーション
────────────────────安藤幸央氏

世界中の人に愛されるディズニーのアニメーションには、UI UXの向上の観点から、「命を吹き込む魔法」が存在している。

例えばスクロールの動かし方一つとっても、「少しずつ動き出し、徐々に加速。その後少しずつとまる」といったような動かし方。また動かす直前に少しだけ後戻りする「予備動作」をつけることで、感覚的に「これから動くんだ」とユーザーが予測できるので、よりスムーズに操作できる。このような手法は「アンチシペーション」や「ステージング」等現在、主なもので12の手法がある。 　 他にも実際にどういう動きをすると見やすいか？
ディズニーアニメで検証するのは非常に効果的。こうしたアニメの原則をモバイルUI・UXに活かす方法として、以下のようなものがある。

• いいアプリたくさんさがし、使い込むことで事例の引き出しを増やす
• いいものがいいのか？要素分析・分解
• 常用するアプリが更新されたら、前のバージョンとどこが変わったか比較

8章「感覚の目覚め」／9章「新しいモバイルの形」

またほかにも「第8章 感覚の目覚め」では、タッチやジェスチャー、音声などこれまで主に利用してきた「視覚」以外の感覚を活用することで「より押しやすい」「タッチしやすい」コンテンツ制作が求められること。

「第9章 新しいモバイルの形」では、腕時計型やペン型などモバイルデバイスの新しい形の登場や、モバイルが銀行の代わりになるなど、「コンピュータと身体・環境との境界」が明らかに変わってきている点が紹介された。