4月22日（水）、DeNA様オフィス内「Sakura Cafe」にて、amana tech night　2回目となるイベントを開催しました。

今回は、「達人たちから学ぶ。実践！プロトタイピング」と題し、カヤック割石さん、DeNA増田さん、スタンダード吉竹さんのお三方に登壇いただき、実践的な内容をお話頂きましたので、そのレポートをお届けします！

 

今回、登壇者の方との事前ミーティングでお願いしていたことが一つありました。

それは、既にプロトタイピングを導入している方も、これから導入しようという方も、今回のイベントを通して“明日からすぐに使える何かを持って帰ってもらう”ということをコンセプトとしたい、ということでした。
登壇者の皆さんが、これに応えていただき、とても充実したセミナーとなりました。

それでは、振り返ってみたいと思います！

 

「人と向き合うプロトタイピング」
～面白法人カヤック　割石裕太さん～

amana tech night vol.2

 

割石さんは、カヤックで「Lobi」というゲームのコミュニティサービスを運用。このデザインを最近まで一人でされていたとのこと。
また「FILTERS」というカメラアプリも担当されていて、今回は、「Lobi」のリニューアルのお話を中心にしてくださいました。

「Lobi」は、元々位置情報を活用したチャットサービスだったものを、ゲームコミュニティに改修していったとのこと。

プロジェクトを進めるにあたって一番大事なのは「企画の理解」だそうで、50％くらいの力を使っていいのでは、とのことでした。

そして、リニューアルにおける3つの重要なこととして、「ユーザーのゴールを設定する」、「ゴールにつながっているか」、「抵抗はないか」を挙げておられましたが、このうち一番大事だと思っているのは「抵抗はないか」ということ、とのこと。
改善やリニューアルにあたっては、既存ユーザーと向き合わなくてはならないので、企画の意図とは別に、今まで通りの機能が問題なく使えるか？その新しい機能は既存ユーザーに抵抗はないか、を重視しているそうです。

～5/11追記～
割石さんが当日の登壇資料を整理し直したものをslideshareにアップしてくださいました。こちらもご覧いただきながら、レポートをどうぞ！

（ここからは議事録風に…）

■ペーパープロトタイピング
ペーパープロトタイピングは、チームが大人数の時に力を発揮する。

・利点その１：批評モードを避けられる
デザインを作ってからレビューにかけると、そのデザイン自体の良し悪しの議論になってしまいがちですが、プロトタイピングは、絵の美しさより、考え方・設計を重視するもので、まだ修正可能・参加可能なフェーズなので、チームメンバーを巻き込んでしまうことも可能。

・利点その２：個々の意見の擦り合わせ
「ペーパープロトタイピングでは職種は関係ない」
当事者としてレビューに参加してもらうことで、画面自体の必要性、要素の確認、エンジニア目線からのアイデア、また後から出てきそうな意見も先に吸収できるチャンス。みんなを当事者にすることで、意見を集めやすい。

■どうやってやるか？
ネットでテンプレートが出回っているので、まずはダウンロードしてやってみて欲しい。
その際、遷移図を書くということがすごく重要。
ということで、お勧めがマインドマップ。これにより、認識のすり合わせと、抜けもれのないUI設計が出来る。

利点その１：頭の整理と現状把握
よくあるのが、ページ名だけ書くパターンだが、要素も書くことがおすすめ。
Mindmeisterがおすすめ。

利点その２：行き止まりとエラーの発見
タブやリストも書き出す。0件表示や行き止まりの発見につながる。
ユーザーの目線に立って行き止まりを見つけたとき、どんな提案をされれば、気持ちよくサービスを受けられるか、を考えることができる。

■ラフデザイン
Sketchを使用
・利点その１：データ・挙動の軽さ
基本的なファイルサイズが圧倒的に違う！
・利点その２：画面をならべて作業が出来る
・利点その３：素材書き出しが簡単

■導入にあたってのデメリット
・作り込みは結局Photoshop
・.sketchというオリジナルの拡張子
・Photoshop使い泣かせのショートカット
・ベクターツールも使い勝手はやはりIllustrator

■プロトタイピングツール
カヤックではProttを使っているそうです。

利点その１：オーガナイゼーション機能
多数のアプリ制作を行っている場合、レビューや進行の確認などが出来る

利点その２：iOSアプリがあるのでネイティブのような快適さ

■作り込みフェーズ
Sketchを使っているが、ウォークスルーやストアのスクリーンショット等はPhotoshop、アイコンやベクターデータはIllustratorを使った。ベクターデータなら、Sketchにコピー＆ペースト出来る。

■まとめ
表面のインタラクションやビジュアルデザインの部分よりも、インターフェース・サービスは人と向き合うもの。
なので、企画自体が本当にユーザーのためになっているかを理解したうえで、もっとユーザーに歩み寄った設計やアイデアを盛り込めないかを考えることが重要とのことでした。

「誰のための企画かの理解」「ユーザーのための設計」が、もっともUIデザインにおいて大事なこと、ということを強調して、お話を締めくくられました。

 

「DeNAでのサービスの作り方」
～DeNA　増田直生さん～

amana tech night vol.2

増田さんは、現在「マンガボックス」と、新規案件のデザイン設計に携わっておられます。今回は、DeNAで、どのようにサービスを開発していっているかを、具体的にお話頂きました。

 

１．プロトタイピングの前に

■サービスの土台（コンセプト）をしっかりと築く

・サービスを作る理由
なぜ必要か、何を解決してくれるのか？

・ペルソナ設計
自分たちの理想のペルソナを作らない
ユーザー調査をもとに、ペルソナを設計する

・ユーザーシナリオの設計
ペルソナが、いつ、どこで、どのように使ってくれるかのストーリーを固める

・サービスのゴール（KPI）
最終的なサービスのゴールと、それを達成するための短期的なゴールを設定する

これは、プロトタイピングより大事。3か月～半年かかることもある。

■おすすめのトレーニング方法
「疑問と課題意識を持って生活してみる」
・満員電車をどうすれば快適に過ごせるか？そもそも乗らない方法は？などを考えてみる。
サービス設計をする際の練習になる。
２．プロトタイピングの進め方

■機能を決める
ユーザーが抱えている課題・要望、利用シーンを考えながら機能を考える。
サービスのコンセプトに立ちかえる

■リサーチ＆スケッチ
・いろいろなアプリを使ってみる

■ペーパープロトタイピング
・画面遷移、UIイメージをインタラクションを確認する
⇒割石さんはこの段階で、チームメンバーに共有するとのことでしたが、増田さんは、ここでチームメンバーとはレビューせず、自分の中で整理するためにペーパープロトタイピングをやっている、とのことでした。

■ワイヤーフレーム＆遷移図作成
・ある程度の精度のものを作る
・モノクロで作る
・Prottに落とし込み、チームにシェアする

■デザイン＆プロトタイピング
デザイン
↓
プロトタイピング
↓
フィードバック

を繰り返して、改善をする
やはりここでも、コンセプトに立ち返る

■主なデザインツール
・SketchとProttを使っている

サービスのデザインは設計という感覚で作っている。Sketchは向いている。
画像編集やベクターイラストの作成は、Illustratorで作成して、Sketchに取り込んでいる。

■プロトタイピングツール
・Prott　サービスの全容、画面遷移確認
・Pixate、After Effect インタラクション、アニメーションの作成

■開発着手
・Sketchのデータをエンジニアに渡して開発

■リリース
公開がスタート
データ分析や、SNSの反応を元に、コンセプトの立ち返り常に改善・最適化
ただし、SNSの反応は、その時の感情の基づく感想なので、常にコンセプトに立ちかえって、取り入れていいかを判断することが重要

■リリース後もやるべきこと
・サービスが終了するまで、常に改善・最適化を心がける
・プロトタイピングで、動くものを速く作ってフィードバックをもらう
・多くのメンバーからフィードバックをもらう
・リリース後も、コンセプトに立ちかえる
・デザイナーとしてリサーチを怠らない

■DeNAでの強み
・フィードバックが素晴らしい
・開発スピードが速い
・モチベーションが高い

■まとめ
・サービスのコンセプトに立ち返る
・動くものを速く作る
・多くの人からフィードバックをもらう
・リサーチを行いながら、常に改善・最適化を行う

増田さんがお話の中で、何度も強調されていたのは、「常にコンセプトに立ち返る」ということでした。どのような手法を使おうと、一番大切なのは、ユーザーにとってよりよいプロダクトであるかどうかで、それを判断するには、最初に設定をしたコンセプトに照らし合わせて考えること、という基本に忠実に、真摯にサービスを開発されているということが伝わりました。

 

実践！Pixate
～スタンダード　吉竹遼さん～

amana tech night vol.2

吉竹さんは、Pixateの使い方の基本を、ワークショップ形式でお話頂きました。

実際に、みなさんに事前にPixateに登録いただき、吉竹さんにご用意頂いた素材を使いながら、Pixateの体験を行いました。

このパートは、吉竹さんが、後にSlideShareに当日の資料をアップいただいていますので、そちらをご覧いただきながら、実際に、このブログをご覧のみなさんも、体験してみてください！

 

■まとめ
・作ったプロトタイプをどう使うかが大切
・実際に触って出来る／できないを知ろう
・手法に振り回されすぎないように

前のお二人と同様、プロトタイプ自体や、Pixateを使うということが大事なことではなく、なぜプロトタイプを作るのか、また、どう使うのかを意識することが大切だとおっしゃっていました。
また、プロトタイピング自体は、とても楽しいステップではあるので、楽しみながらサービスの開発を進めてください、とのことでした。

 

≪パネルディスカッション≫

amana tech night vol.2

最後に、白ヤギコーポレーションの中村文豪さんにモデレーターを務めていただき、パネルディスカッションを行いました。会場からの質問と、事前アンケートに対して、お答えいただきました。

（ここからは議事録形式で…）

■ユーザーテスト
Q　ユーザーテストについては話に出て来なかったが、あえてやっていないのか、本当はやっているのか？
A　（増田）デザインが決まってからテストすることが多い。ワイヤーフレームやペーパープロトタイピングの段階でユーザーテストをしても、具体的なイメージがわいていないことが多く、コンセプトとずれてしまうことがある。

Q　その段階まで行くと遅いのでは？
A　（割石）チーム内で多く意見が上がってくるので、外部にも意見を求めることはやっているが、そういう意見があった、ということに留めておき、実際には取り入れないこともある。
（吉竹）ワイヤーフレームの段階で、ユーザーテストを行っている。受託の場合もあるので、お客様や決裁者の方に見てもらうようにしている。
（増田）最初のコンセプトメイキングの段階で、ユーザーにインタビューをしている。その上でコンセプトを固めている。

Q　一人ひとりの意見を真に受けていたら大変なのは分かるが、どういうユーザーから話を聞いた方がいいか
A　（割石）最近解析するメンバーが入ってきたので、その結果に基づいて意見を聞いているが、％が少ないからといってきかないわけではない。
（吉竹）属性から外れたユーザーからの意見を聞くということは経験したことがない。少数意見を吸い上げるかはケースバイケース。現場の人間が気付きを得られた場合には検証することもある。
（増田）チームでゴールを共有した上で、ゴールに反映出来るものは取り入れる。明らかに、ボタンが使いにくいとか遷移が分かりにくい、見たいなものについては、プロトタイピングしてみて反映することはある。

■ハードウェアのプロトタイピングについて
Q　ハードウェアやスマホのUIなどのご経験があれば教えて欲しい
A　（増田）経験はないが、使いやすい・気持ちいいという感情は共通していると思っているので、そのシチュエーションにあって、使いやすい、危険がないなどについては共通しているのではないか。
（割石）会社として仕事を受けたことはある。インターフェース的なことは経験を活かせるかもしれないが、実際には、その場に合わせて検証していくしかないのでは。
（吉竹）ハードウェアについては、デザイナーが現場に張り付いてユーザーテスト含め検証していたので、現場で検証を繰り返すということは、アプリでもハードウェアでも同じではないか。

Q　現場とやり取りするには工数が増えると思うが、どのくらい費用が増えるものなのか？
A　（吉竹）お客様が、その辺りも理解してくれていたので、多めの予算をもらっていたようだ。

■おすすめのツール
Q　プロトタイピング以外でも、日々の業務の効率を上げるツールがあれば教えて欲しい
A　（増田）チームでスケジュール共有する際にAllocateというガントチャートツールを使うといい。
詳しくは増田さん執筆のDeNA CREATOR BLOGで。
（割石）マインドマップツールをよくつかっている。Mindmeister、MindNodeを使っている。ノート系のアプリで、LETTERSPACEにまとめている。
（吉竹）LiveSurface、街の広告やマグカップ、Tシャツなどに、ロゴなどのデータを貼り付けてシミュレーションできる。

■ユーザーインタビュー、再び。
Q　ユーザーインタビューを行う対象は一般の方？
A　（増田）社内の人にすることもある。

Q　どうやってターゲットになりそうな一般の人を捕まえてくるか？
A　（増田）サービスのコンセプトを組み立てる途中で、こういうサービスはどうだろう？というコンセプトを出す。その際、アンケートサービスを使ってデータを収集する。そのデータをもとに、ターゲットとなる人物像を割り出し、マーケティング担当者が募集をする。ネットで募集したり、知り合いを当たることもある。

Q　ユーザーインタビューはどのようにやっているか？
A　（割石）社内でやっていることが多い。特にゲームアプリなのでゲームをやっていない人から逆に話を聞くことがある。また自分の知り合いに聞くことが多い。会社としてやる場合は、ユーザーインタビューの対象を集めてもらうこともある。

 

＜最後に＞
今回は、プロトタイピングというテーマで、多くの方にお集まりいただき、3名の第一線で活躍されているUIデザイナーの方から、現場のお話も交えながらのお話、またワークショップと、かなり充実した内容となりました。

その中で、特に印象に残ったのが、みなさんおっしゃっていたように、プロトタイピングはあくまで手法であって、大切なのは、プロトタイピングに入る前の段階、ユーザーにどんなサービス・プロダクトを届けるか、ということを重要視されているということでした。

こうして話を聞くと当たり前に思えるかもしれませんが、実際にプロトタイピングを回している過程、そして、サービスのリリース後は、どうしてもデザインやUIに目が行きがちだと思います。まして、ツールを使って改善を繰り返している時はなおさらだと思います。

ですが、そんな時こそ、コンセプトに立ち返り、ユーザーに向き合ってこそはじめて、正しい改善が出来るのだと思います。

そんな大切なことを、講師の皆さんから学ばせて頂きました。割石さん、増田さん、吉竹さん、本当にありがとうございました！

また、最後に、今回会場・設備、さらにはUSTREAM配信やグラフィックレコーディングまで、ご提供いただいたDeNAさま、ありがとうございました！

amana tech night vol.2

——————————————————————————————-
当日の写真はFacebookページにアップしています！
https://www.facebook.com/media/set/?set=a.476123889208254.1073741830.445929342227709&type=3