2014年3月22日、リクルートメディアテクノロジーラボ (MTL) にて、デザイナーとエンジニアでつくるWebプロトタイプとユーザーテストを行うイベント「デザイニアン002」が開催されました。

プロトタイピング作成の意味と利点とは

プロトタイプ作成で得られる利点は、早い段階で設計を多様な角度から検証し、企画や機能を実際に体験することでユーザーからフィードバックを得て問題解決に役立てられることです。

可能な限り早期に問題を見い出して、制作の工程を最終的には早くて手戻りのないものにする。そして、検証結果から多くの問題を修正することで、ユーザー体験をより理想の形に近づけることが可能となります。

はじめに部長の秋葉さんより、イベントの趣旨／本日の流れ等の全体の説明が行われました。

以前ご紹介した「html5jデザイン部が目指す、ユーザー体験も含んだデザインを実体験で学べるイベントとは」と同様、「JRの新幹線予約サイト『えきねっと』を、目的の新幹線チケット購入までたどり着きやすくする」を課題にし、

1. 課題のサイトの問題の洗い出し
2. 情報整理と仮説
3. プロトタイプ作成
4. ユーザーテスト
5. ヒアリング　

の流れで行いました。

エンジニアの方には、デザイン部エンジニアが少ない時間の中で、できるだけ早く進められるようイベント用に用意したテンプレートを渡し、作業してもらいます。

説明の後に、デザイナーとエンジニア2～3名ずつのチームを作り課題に入りました。

前半はそれぞれのチームでディスカッション。

後半は、デザイナーとエンジニアが各々の担当分を制作していきます。

18時には、テストユーザーの皆さんが到着。各チームに1人テストユーザーが着席し、課題で作成したプロトタイプを操作していきました。

一通りテストが終わったところで、各チームごとに何に問題を感じ、どのようなコンセプトでつくったのかをプレゼンテーション。テストユーザーの方には、操作した感想を発表していただきました。

チーム1）　不必要な機能を削除し、画面をわかりやすく

どんなふうに到達するのが違和感ないのかを考え、不必要な機能を消し必要な機能のみで作ることにした。制作者側として画面の流れはわかりやすくなったかと思いましたが、デザインを適用する時間が足りなかった。乗車する日にち選択で、テストユーザーの方の「iPhoneの”ドラムロールUI（※1）”はわかりづらい」という意見が参考になった。

※:iPhoneの”ドラムロールUI
　正しくはDate Pickersと呼ばれているUI。HTMLのselect要素を使ったときに出てくるUIを本記事では「ドラムロールUI」と呼称しています。

[テストユーザーの感想]
ビジュアルとしてはっきりしておらず、薄い線などで見にくいと操作がしづらい。iPhoneのドラムロールUI式カレンダーは使いにくい。ネットに慣れていない人間は緑の窓口で購入する機会が多く、自分の記憶の中から勝手に窓口でのイメージを求めてしまうため、券売機に近いデザインの方がエンドユーザーには使用しやすい。

チーム2）　無駄なスペースを削り、スクロールを減らす

入力フォームの項目に関しては縦並びにせずに、画面の横につめられる内容のものはつめて、少ないスクロールで必要な情報を見られるようにした。検索結果のボタンの色が変えて、わかりやすくと考えた（時間不足で未実装）。

[テストユーザーの感想]
チケットの有無を「○」「△」「×」で表示する方がわかりやすい。
検索結果に時間が何時から何時と出ているのがわかりやすかった。料金の比較もあるとわかりやすい。
自分が医療関係者なのでその視点で考えると、障碍者は対人コミュニケーションを避ける傾向があり、窓口での購買よりもスマホ使うことが多いと思う。白内障や色盲の人には白と黄色の組み合わせが判別しにくいので、スマホサイトに背景が黄色で文字が白、といった組み合わせは避ける方が好ましい。

チーム3）日付と時間をわかりやすく設計

ユーザーが何をしたいのかを重要視した。日付と時間がわかりやすいことが重要と考えて、画面一番上にした。クリックしたら表示されるようにしたが、反映しきれなかったので迷わせてしまった。
流れを直感的に予約できるようにし、必要な情報をしぼることを心がけた。時間がなくデザインが当て込めなかったが、ユーザーは意外にわかってくれるということもわかった。

[テストユーザーの感想]
最初つまづいたが、使っているうちにわかった。時間不足で機能していないボタンがあったので、どうとればいいかわからなかった。

チーム4）操作しにくいラジオボタンから、押しやすいボタンに

検索画面のわかりやすさを考えて操作順にタブ式に選択できるようにした。スマートフォンではラジオボタンでの操作はしにくいという判断をして、ボタンとして押しやすいように制作した。
往路を購入する場合は一度に往復を購入するのではなく、まず往路を購入し、片道を購入してから復路を買うボタンと完了ボタンを作り、ユーザーが動線を迷わないようにした。

[テストユーザーの感想]
やっぱりiOSのドラムロールUIの操作がわかりづらい。Androidの方が日にちを選びやすい。

チーム5）　ぱっと見た瞬間に空席が表示される

UIの要素を極力減らしてシンプルにする方向にし、不要な要素は削除した。ぱっと見た瞬間に必要な情報がある程度出るように考え、席がどの程度空きがあるかを表示するようにした。階層的に選べるようにした。

[テストユーザーの感想]
空席を探した時に「○」「△」「×」が表示され残席数がおおよそわかる点が良かった。指定席の空席がないとわかった時点で、そこから再検索できれば使いやすいと思う。
ボタンが小さくて狙ったところを押せないとストレスになるので、大きめのボタンの方がよかった。ロード中にロードしていることがわかるようになっていると良いと思いました。

チーム6）カレンダー表示やボタンサイズの拡大

日付の予約は、カレンダーで表示させた。縦横表示できるようにした。席選択のボタンを色分けし、見てすぐ判別できるようこだわり、スマホで選択しやすいようボタンサイズを大きくした。
配布テンプレートに戻るボタンを追加し、動線をわかりやすくした。機能の取捨選択をすることが大事だと思った。こういった場があったことを感謝しています。

[テストユーザーの感想]
乗車駅と降車駅がドラムでの選択でなく、キーボードで1文字入れると予測結果が表示される方が、個人的に使いやすい。
ラジオボタンは小さすぎて親指で隠れ押しにくいので、大きい方が良い。人数をテンキーで入力する仕様でつくられていたが、使いやすくて良い。
検索結果がたくさん表示されるより、精度のよいデーターが絞り込まれて出るほうがいい。選択項目を色分けしているのがわかりやすくて良かった。

イベントを終えて

テストユーザーの方には、iOS 7とiOS 6両方で比較してもらいました。iOS 7ではシンプルに線が細くなっていますが、iOS 6のドラムの方が線も文字もはっきりし、選択するとチェックが出るのでわかりやすい、という意見も出ました。

短い時間の中で、各チームのデザイナーとプログラマが課題に対して問題解決を図るアイデアを出し合う。多様なアプローチで試行錯誤することで、さらなる問題解決の可能性を見い出せた印象を抱きました。

イベントを運営した我々デザイン部一同、参加者の皆さんやテストユーザーの皆さんから学ばせて頂く機会となったことに感謝するとともに、 デザイン部では今後も積極的に取り組んでいきたいと思います。

2014年2月17日、日本マイクロソフトの品川本社オフィスにて、第45回HTML5とか勉強会を開催しました。今回は「ユーザーエクスペリエンスとペーパープロトタイピング」というテーマで、安藤幸央さんのご講演およびワークショップといういつもとは違った試みを行っています。

参加枠も100人の定員がすぐに埋まり、140人もの応募がありました。普段のHTML5とか勉強会に比べると、デザイナーの方の参加率が高いことが印象的ですが、エンジニアの方も興味を持って参加されていて、職種を問わず多くの方が興味を持っているテーマだということを感じました。

前半はスライドを見ながら　「ユーザーエクスペリエンス」に関してご講演頂きました。
まずは有名なサイトのプロトタイプを見て、どのサービスのプロトタイピングかを考えるということから始めました。

プロトタイプ制作でのポイント

今回は紙を使用してプロトタイプを作成します。
なぜ紙で作るのでしょうか？紙で作成すると以下のようなメリットがあります。

紙とペンでの試作のメリット

• 素早くできる
• コストが少なくてすむ
• やり直しが簡単
• 失敗してもリスクが少ない
• でき上がった感じがしない （ Photoshopだとでき上がったと勘違いされやすい）
• 余計なことを作り込めないので重要な所に集中できる
• 目と指で感じる感覚を得られる
• 紙とペンは潤沢に使えるツール

逆に欠点としては、

• また完成していないので、想像しながら試す必要がある
• アニメーションは確認できない
• 理解するのには空想力が必要かもしれない

等の欠点があるそうです。

プロトタイプの法則

それでは実際にプロトタイプを作成する場合の法則には、どのようなものがあるでしょうか。

1 画面を見直すと気づきがある

画面を見直すといろいろなことに気づきます、普段アプリなどを使っていて使いづらい、使いやすいシーンがあったら、なぜ使いやすいのか・使いづらいのかを分析してくことで気づきが生まれてきます。

2 道具にこだわろう

例えばクロッキー帳やポストイット、インターネットで入手できるUIテンプレート、ペンなどの道具や、ペンの太さを2種類に変えて、押せる部分と押せない部分をわかりやすく表現するなどTIPSなど。実際に安藤さんが使用されている用紙が文具を見本にわかりやすい作り方のポイントも解説されました。

3 アウトプットの質はインプットの質と量に比例する

良いものを作りたいのなら、いいものをたくさん見るーつまりアプリの場合はたくさんのアプリをみて使ってみることが大事です。

例えば「モバイルウェブの見本を集めているサイトなどを見て、自分の気に入るテイストや案件に合うサイトを調べてみる」、「アプリストアのランキングなどをチェックしなぜ人気なのかを考える」こともおすすめだそうです。

安藤さんの情報収集方法として、実際に参考となるサイトをスマホでキャプチャしたあとに、インターネットの書籍作成サービスで自分のミニ本を作成されているのだとか。クライアントの打ち合わせ時に手軽に見せて打ち合わせをしたり、手軽にまとめてみられるのが便利なのだそうです！

安藤さんのMinibook

アンテナを研ぎすませて新しいことを常にキャッチする姿勢とともに、自分の仕事やスタイルに合わせて、情報のまとめ方や生かし方を工夫することも、質を高めるために必要なことだと感じました。

4 素早く試して、素早く失敗しよう

5 本当に大切な2.3の機能を作ろう

すべての機能をたくさん試すよりも、まずそのアプリの中で重要な2つ3つの機能から考えてみることが大切です。

6 凝りすぎない。作り込みすぎない

紙で書くだけで大雑把で、ここに時間をかけすぎて開発時間が減るのは本末転倒です。素早く試しましょう！

7 完璧を目指さない、失敗を受け入れる

どんな人でも失敗するのは当たり前。早く失敗して良かったと考えましょう。

8　実際の環境で検討するのが重要

実際にスマートフォンで画面表示を試すにしても、会社のデスクで試すのではなく、会社の中を歩き回りながら使うだけでも違います。

例えば　車関係のアプリであれば実際車の動いている時や乗り降りに使うので、その環境に近い状況で試してみることが重要です。

9　客観的に見る、時間をおいて見る

使うであろうユーザーの立場に立って切り替えてみてみることが大切です。また、ずっと開発やデザインをしているとゲシュタルト崩壊というのか、良いのか悪いのか判断がつかなくなることがあります。その場合は時間をおいて確認しましょう。

10　素晴らしい試作も、本物ではない

リソースをかけすぎない。試作は試作と割り切って、ある段階になったら次の段階に進めるように考えると良いと思います。

手を動かしてわかる、プロトタイピングの効果

後半では2～3人でチームを作成し、自己紹介タイムの後にプロトタイプ作成に入りました。 テーマサイトは「Esty.com」通販サイトです。

PC用のサイトを見ながら要素を10個以上書き出しました。その中からスマートフォン用に表示させる内容を選んで行きました。まず各々がPICK UP！　そのあとチームで話し合って意見交換。

最後にチームの中から一人代表を選んでコンセプトと合わせて発表します。
それぞれのチームごとにさまざまな解があり、そのコンセプトを聞くことで自分の考えに凝り固まらずに、気づかなかった視点を認識します。

各チームのプロトタイプを見た後に、Esty.comの実際のスマホサイトが実際にどのようになっているかを確認。各々のプロトタイプとの違いを確認し合い、イベントを終了しました。短い時間でしたが、プロトタイプ作成でのポイントから考え方、制作まで体験することができ、続きもぜひ作りたいという声も聞かれ、有意義な時間となりました。

イベントの動画はこちら

イベント資料はこちら

デザイニアンプレイベントのご報告とVOL2のお知らせ！

最後に今回のHTML5とか勉強会・チューターの秋葉秀樹さんより、1月に行われたデザイニアンプレイベントを動画を交えながら報告、そして次回のイベント開催の告知が行われました。（プレイベントのレポート記事はこちら）

このイベントでは実際のサイトをテーマにHTMLのテンプレートを使用しエンジニアとデザイナーがチームを作りプロトタイプを作成します。3/22（土）に開催です、ぜひご参加ください！

＜デザイニアン 002＞

• 開催日:3/22（土）
• 開催時間:12:00会場 12:30より開催予定
• 定員:デザイナー15名 コーダー／プログラマー（ノートPC持参）15名　計30名
• 会場:メディアテクノロジーラボ（日比谷、銀座）
  　　　 東京都中央区銀座7-2-6 リクルートアネックス1ビル B1F　MAP
• イベントの詳細はこちらで紹介しています

2014年1月12日、株式会社ツクロアの事務所にhtml5jデザイン部スタッフが集まり、3月開催予定のイベントの打ち合わせを兼ねたプレイベントを行いました。どのようなチームで、どのように課題サイトの設定やテストを行ったのか。イベントの予告を兼ねたレポートをさせていただきます。

「デザイニアン Vol.2」で目指すもの

デザインという言葉から想像するものはどんなものでしょうか？

一般的には多くの方がPhotoshopやFireworksで作成したデザイン画像を想像されるかもしれません。しかしデザインとは「画面の意匠」という意味だけではなく、ユーザーが抱えている課題を解決するために思考や概念を組み立て、展開する媒体に応じた表現をし、さらなる問題解決を図ることです。

WEBやスマートフォンのアプリの場合、ユーザーが操作することで目的に到達します。つまりサービスから得られる体験を設計する事もデザインに含まれています。

Webデザイナーの通常業務の中で納期や予算の関係などから、プロトタイピングを制作し検証する機会がない方も多いのではないでしょうか。このイベントではサンプルとなるサイトを課題にして現状の問題点を分析し、プロトタイピングを作成し「ユーザー体験」まで含めた設計を行う、これが今回のイベントが目指すところです。

プレイベントの流れ

課題のサイトは、一般の利用経験者が比較的多いと考えられるJRの新幹線予約サイト「えきねっと」に設定しました。新幹線の予約を課題にいかにスムーズに情報を伝え、目的となるチケット購入までたどり着けるかをテーマに、

1. 課題のサイトの問題の洗い出し
2. 情報整理と仮説
3. プロトタイプ作成
4. ユーザーテスト
5. ヒアリング　

の流れで進めます。

1. 課題のサイトの問題の洗い出し

課題のサイトは、一般の利用経験者が比較的多いと考えられるJR東日本の新幹線予約サイト「えきねっと」に設定しました。

新幹線の予約を課題にいかにスムーズに情報を伝え、目的となるチケット購入までたどり着けるかをテーマにします。

まずは、デザイン部スタッフ一同で課題サイトの問題点を洗い出します。

• 目的の切符を買いづらい、
• 空席情報がわかりづらい、
• 往復チケットが買えない、
• 動線がわかりづらい、
• 押す場所がわからない、

など、さまざまな課題が見つかりました。

デザイン部スタッフが課題をテストしながら、同時にイベントの進行や時間配分、参加者の方にやっていただける内容・段取りも検討していきました。

2. 情報整理と仮説

次に課題サイトの情報を付箋に書き出して細分化し整理分類します。

その中から必要な機能や不要なものを取捨選択しカテゴライズしながら、目的への流れの中で発生するユーザーの動きを考えていきます。

3. プロトタイプ作成

フロントエンジニアとデザイナーが担当ごとに分かれて、プロタイプを作成していいきます。プロトタイプを作ることで トライ＆エラーを素早く繰り返すことができ、”自分たちの分析した内容が正しいのか？”をより早く検証することができます。

4. ユーザーテスト

サービスを作る時、誰のためのサービスを考えて、使用する人の目線で問題解決することが必要になります。しかし、制作に携わる側は開発しているサービスに慣れてしまい、ユーザーの目線でとらえられなくなります。

設定ターゲットに近い2名の方に来ていただいてプロトタイプの検証を行います。

• Aさん（女性　ITリテラシーは低め　新幹線には乗るが、予約サイトでのチケット購入経験はなし）
• Bさん（20代男性 普段はiPhoneを使用する程度の利用。Webサイトでの購入経験はなし）

課題の「えきねっと」と合わせて、JR西日本の新幹線予約サイト「JRおでかけネット」も比較対象として検証します。さらに新幹線の乗車券と特急券を、提示した2パターンで予約を取ってもらい、その手元の動きを動画で撮影します。

5. ヒアリング

サイト検証の終了後は、録画した動画を見ながらレビューを行います。どの段階で操作が詰まったか、何がわかりにくかったのか、コントリビューターのお二人に細かく説明していただきました。

操作中の声も記録されているので、言葉からも何を迷っているか把握できました。

• ボタンかと思っておしたらアイコンで、操作に迷った。
• 一見しただけでは指定席を取っているかがわからなかった。
• ボタンの色が赤だったので警告なのかとおもったら違っていた。
• ボタンのテキストを「確認する」など次の動作がわかる言葉に変えた方が押しやすい。

etc — たくさんの問題点が浮き彫りになります。私たち制作に携わる側が当然だと思い込み、気がつかなかった点や問題点、予想していなかったユーザーの行動など知ることができました。

“求める解に近づく力を体験から培う”イベントに参加しませんか？

この日のプレイベントはこちらで終了しましたが、スタッフは引き続きイベントに向けて準備を続けています。

3月開催予定のデザイン部イベント「デザイニアン Vol.2」では、エンジニアとデザイナーがチームを作り、スタッフの行ったプレイベントと同じ流れで課題サイトのプロトタイプを作成し、ユーザーテストを行います。仮説を立て試行錯誤しながら一緒に考えるイベントです。

みなさんも一緒に学びませんか？

イベントの詳細は以下です。募集に関してはhtml5jのメーリングリスト（ML)にてお知らせします。 ご興味のある方はぜひご参加ください！！！

• イベント名：　デザイニアン002
• 開催日：　3/22（土）
• 開催時間：　昼12時会場 12:30より開催予定
• 定員：　デザイナー15名　・　コーダー／プログラマー15名　計30名
• 会場：　メディアテクノロジーラボ
• 会場住所：　東京都中央区銀座7-2-6 リクルートアネックス1ビル B1F　http://mtl.recruit.co.jp/access/
• 参加資格：　スキルは問いませんがワークショップがあります
• イベントの募集について：　html5jメーリングリストでお知らせします

タイムテーブル：

• ◎チーム編成　…　13:00〜13:30
• ◎ワークショップ　…　13:30〜18:00
• ◎ユーザー評価　…　18:30〜20:30
• 終了後、任意参加で打ち上げ