2月17日，第45回目のHTML5とか勉強会は，マイクロソフトさんに会場をお借りして開催しました。今回は「ユーザエクスペリエンスとペーパープロトタイピング」をテーマとして，『⁠とか勉』初のハンズオン形式の勉強会となりました。

本稿ではその内容についてレポートします。

PC WebからモバイルWebへ。

勉強会の前半では，今回チューターしていただいた株式会社エクサの安藤幸央さんより，ユーザ体験をより豊かな物にするための試作・プロトタイピングの技やコツについて紹介いただきました。

モバイルUXと役立つペーパープロトタイピング指南

まず最初に，ペーパープロトタイピングのメリットとデメリットを取り上げました。

紙とペンを使用するペーパープロトタイピングは，何よりも素早くでき，コストが少なく，やり直しも容易であると言います。また，機能や配置など，議論を重要な部分に集中させることができるそうです。

他にも，次のメリットがあると言及しました。

• 使いにくさ，使いやすさが体感できる
• 完成していると思わせない
• 進歩の早い技術と違い，たぶん10年後も有効

ただし，次のデメリットもあると指摘しました。

• 完成していないので，いろいろ想像しながら試すことになる
• 動きやアニメーションはこの段階では検討できない
• 風で飛んでいく
• 紙で手を切る

そして，ペーパープロトタイピングの法則を紹介しました。

1. 画面を見直すと気づきがある
   • 使いにくいサイトやアプリがあるとき，なぜ使いにくいのか自分の中で分析してみると，新しい発見できるかもとのこと。
2. 道具にこだわろう！
   • 安藤さんが普段使用している道具やツールを紹介しました。

3. アウトプットの質はインプットの質と量に比例する
   • いいものを作りたいのであれば，いいものをたくさん見て，使って，調べること繰り返すことが重要と言います。
4. 素早く試して，素早く失敗しよう
5. 本当に大切な2，3の機能を作ろう
6. 凝りすぎない。作り込みすぎない
7. 完璧を目指さない。失敗を受け入れる
8. 実際の環境で検討するのが重要
9. 客観的に見る，時間をおいて見る
10. 素晴らしい試作も，本物ではない

前半のまとめとして，ペーパープロトタイピングを行う際のコツとして，次の事柄を挙げました。

• 必要な要素を適切な場所に配置する。本当にそこに必要か？
• ある目的に向かって，素直に操作できるか流れを確認する
• 間接的な操作（ボタンやスイッチ）と直接操作を意識する
• アイデアが有益で正しい方向を向いているのか確かめる
• 抜け，漏れ，作らなければいけない事項を洗い出す
• 目的を実現するための機能，使いやすさ，楽しさを確認する

PC WebとモバイルWebとの連続したユーザ体験の構築

続いて，旅行サイトを例として，PCサイトとモバイルサイト（モバイル用アプリ）両方を提供するサイトでの，連続したユーザ体験の提供することの重要さについて説明しました。

例えば楽天トラベルではPC用のサイトとモバイルアプリ両方を提供していますがが，アクセス解析を行った結果，モバイルアプリ上でツアーやホテルを購入する人はそれほど多くはなかったとのことです。実際のところ，仕事の空き時間や電車乗車中などにモバイルサイトで旅行やツアーを検索・検討しても，購入の手続きはPCで行っている人が多かったことが原因でした。

安藤さんは「PCとモバイル両方をうまく連携した体験を提供しなければ，良いサービスは提供できない」と述ていました。