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 - イベントの詳細はこちらで紹介しています
