「エンジニアが企画書を書いてサービスを設計する」というところまで続いた、本連載も今回で最終回です。これを機にサービスなどの企画を考えるエンジニアが増えるとうれしいです。ご愛読いただきありがとうございました！
1. 動くモックアップをつくろう
前回はトップ画面のワイヤーを作ってみたんだよね。
そう、それで他の画面も作ってみました。
▲ホーム / 検索 / プロフィール 画面
おぉ、すごい。この調子で主要な画面のワイヤーがそろったら、一旦モックアップを作ってみるとよいでしょう。
ついに！ちなみにモックアップはどのように作ればよいのかな？
最近はOrigami StudioやAdobe XDのように、デザインツールとモック製作が合体したツールが増えてきたけれど、まずは手軽にInvisionやProttなど画像をアップしてリンクを貼るタイプのモックアップツールを利用してみましょうか。
リンクを貼ることで紙芝居のように画面遷移を再現できるけれど、画面がどのように切り替わるかトランジションのアニメーションも再現できるから参考になるなぁ。
▲Invisionでのモックアップの制作
作ったモックアップはWebページやアプリを通して、PC、iPhoneなどのデバイス上で確認することができます。
実際に触ってみると、ボタンの大きさとかいろいろと参考になるなぁ。1時間くらいでモックアップを作れるので便利。
2. 足りない機能を洗い出そう
モックアップを作って気づいたけれど、結構抜けている機能あるね。
ほう。
例えば、マイページを用意したけれどフォローボタンがない。そこで、フォローボタンを入れると今度はフォロー一覧が欲しくなる。さらに、お知らせでフォローされたことも知らせたくなる。
そして、問題のあるユーザーがいた場合のブロック機能も必要。さらにそして、ブロック一覧も欲しい！そして、そして「ブロックされたことって、わざわざ通知されるべきか？」とか悩みが出てくる！！
際限がないね。
他にも「いいね！」した投稿を一覧で見せるかとか、自分がした「いいね！」の一覧は他人にも見せるべきかとか、もう無限に終わらない、助けて！
そう、こうやってモックアップを組んでいくと、開発の終盤で「そういえばあの機能あるんだっけ？」を早めに気づくことができるのです。
たしかに。
全画面にどのようなボタンがあって、押された結果どのようなことが起きるか、機能として抜けがないように考慮してモックアップを作っていきましょう。実際にデザインや開発を始める前に、すべての機能を洗い出して置くと手戻りが少なくなります。
特に「エラー画面」や、「表示内容が0件」だったときの表示とか忘れがち。
3. デザインをお願いしよう
ところで、デザインってどういうふうにお願いすればいいの？
お、良い質問ですね。特にエンジニア中心でデザイナーがいない会社だと、どうお願いすればいいか分かりづらいかもね。
できれば安くて早く、オリジナリティーと万人に通じるセンスがあって、さらに実績のある若手デザイナーがいいな。
ずいぶんと贅沢だね。まぁ、デザインもシステム開発と結構似ているところがあるので、システム開発を依頼するようにお願いするといいよ。
というと？
まず、依頼する前にこちらの要件をしっかりまとめること。今回のように画面数や要素が決まっていると話が早いでしょう。あとデザイナーの得意不得意を確認しましょう。過去のデザインの実績を見せてもらって、作りたいものにマッチしているテイストがあるとベストです。
なるほど。たしかに漠然とした発注だと後々問題になることが多いからね。
もちろん、漠然とした相談から一緒に考えてくれる優秀なデザイナーもいるけれど、限られた予算で良い結果を出したいときは、できる限り「どのようなデザインが欲しいか」をはっきりさせることが大事です。
またそうすることで、デザイナーからの提案や意見も受けやすくなるかと思います。逆にデザインで分からないところは、どんどんと聞いてみるといいでしょう。
確かにシステム開発も要件がしっかりしていて、こちらの意見も取り上げてくれるクライアントとは仕事をしやすいから、同じだね。
とりあえずいくつか気になるデザイン会社が見つかったので、相談してみることにしました。
4. ユーザテスト
デザインが準備できたので、さっそく開発するぞ！
おっと、その前にせっかくなので一回ユーザーテストをしてみよう。
テストコードはたくさん書いたことがあるけれど、ユーザーテストは初めてだぜ。
ワイヤーが完成したタイミングでもいいのだけど、今回はデザインがあるので、Invisionで作ったプロジェクトの画像をデザインした画像に差し替えてテストに使いましょう。
テストの目的は「デザインを含めて、ユーザがサービスをどう思うか？」ということと「ちゃんと操作できるか？」の二つになります。アプリだったら、実際にスマートフォンでモックを表示して、テスターに操作してもらいましょう。
プロトタイプツールを使うと、システムが完成していなくてもデザイン画像があればテストできるので良いですね。人はどう選べばいいのかな？
まず、ターゲットユーザーに近い人を選びましょう。年代や性別をはじめ、どれくらいのユーザーパターンがあるかにもよるけれど、まずは4～5人くらいを対象にテストするといいと思います。
犬好きの友達を呼ぶことにしよう。
モックとテスターの準備ができたら、次のようにテスト項目を考えます。
＜シナリオの例＞
- まずアプリを立ち上げて、どのようなサービスと思ったか第一印象による感想を教えてください
- 新規ユーザー登録をしてみてください
- タイムラインを見て気になったユーザーをフォローし、そのあとにフォローした人の一覧を確認してください
なるほど、それぞれの処理をユーザーが正しく行えるか確認するんだね。他に気にすることはあるかな？
ユーザーテストで大事なのはユーザーが「どう思うか」や「どのように迷っている / 間違えているか」を知ることなので、「考えていることをすべて口に出してもらう」必要があります。
例えば「このボタンにログインと書いてあるから、押してみる」とか「どの画面にいるか分からなくなった」などです。
iPhoneだったら、PCとケーブルでつないでQuickTimePlayerで画面を録画できるから利用してみようかな。
▲QuickTime Playerでの画面と音声の録音
そうだね。ユーザーが緊張するとうまく操作できないこともあるので、大きなカメラで撮影するより画面を直接キャプチャしたり、参加人数を減らすなど、なるべくリラックスできる環境でテストしましょう。
5. ユーザーテストが終わったら
ユーザーテストどうでした？
とても参考になった！ちょっとしたテキストの表記だけで分かりやすさがずいぶんと変わるんだなぁ。あと思った以上にユーザーが説明を読んでくれないということも、驚きました。
あと、デザインや仕様でどちらが正しいか判断に困った場合、複数のパターンでユーザーテストを行って様子をみることもできます。大事なのは勝手に思い込みで進めるのでなく、確かな手応えを得ながら進めることだね。
何はともあれ、実装する前に気づくことができたからよかった。
そう、「間違いに早めに気づくことで、実装の手戻りが減る」ので結果的に工数の削減につながるのがユーザーテストの良いところなのです。
いいことずくめだ！
ユーザーテストが終わったら、デザインにフィードバックしましょう。サービスが完成した時にもういちどユーザーテストを行うとちょうど良い感じになります。
5. 最後に
さて、アイデア出しにはじまり、企画書作成からサービス / UI設計まで一通り理解したことになるけれど、いかがでしたか？
今まで言われた通りに開発していただけだったけれど、企画という観点から考えると視野が広くなった気がする。ただ面倒くさいと思っていた機能も、サービス視点に立つことで実装を頑張れるようになったり、またアイデア出しができるようになりました。あと何より考えながら開発できるのが楽しい！
サービスをイチから企画しなくても、「企画を考える」という視点でいろいろなところに活きてくるのがサービス企画です。またこの企画書講座を読んで「サービスを企画してみよう」と思うエンジニアが一人でも増えるとうれしいです。
シリコンバレーに行って、大ヒットするサービスを作り出すのも夢じゃない！
ご愛読ありがとうございました！
⇒ エンジニアのための企画書講座シリーズ一覧はこちら！
瀬尾 浩二郎（セオ商事）
大手SIerを経て、2005年に面白法人カヤック入社。Webやモバイルアプリの制作を主に、エンジニア、クリエイティブディレクターとして勤務。自社サービスから、クライアントワークとしてGoogleをはじめ様々な企業のキャンペーンや、サービスの企画制作を担当。
2014年4月よりセオ商事として独立。「企画とエンジニアリングの総合商社」をモットーに、ひねりの効いた企画制作からUI設計、開発までを担当しています。
Twitter: @theodoorjp
ホームページ: http://theodoor.jp/
※本記事は「CodeIQ MAGAZINE」掲載の記事を転載しております。
8,568通り、あなたはどのタイプ？
グッドポイント診断で、あなたの隠れた強みを診断してみましょう。
診断結果は8,568通り。あなたはどのタイプ？
あなたの新しい可能性が見つかるかも
リクナビNEXTにログインすると、あなたの志向に合った特別な求人一覧を見ることができます。
予想外の求人が、あなたの世界を広げるかもしれません。
