CodeIQ MAGAZINECodeIQ MAGAZINE

最終回 : はじめてサービス設計をするときの進め方(後編)──エンジニアのための企画書講座vol.10

2017.01.17 Category:【連載】エンジニアのための企画書講座 Tag: ,

  • 17
  • このエントリーをはてなブックマークに追加

「エンジニアが企画書を書いてサービスを設計する」というところまで続いた、本連載も今回で最終回です。これを機にサービスなどの企画を考えるエンジニアが増えるとうれしいです。
1年におよび、ご愛読いただきありがとうございました!
by 瀬尾 浩二郎

1. 動くモックアップをつくろう


前回はトップ画面のワイヤーを作ってみたんだよね。


そう、それで他の画面も作ってみました。

ホーム / 検索 / プロフィール 画面


おぉ、すごい。この調子で主要な画面のワイヤーがそろったら、一旦モックアップを作ってみるとよいでしょう。


ついに!ちなみにモックアップはどのように作ればよいのかな?


最近はOrigami StudioAdobe XDのように、デザインツールとモック製作が合体したツールが増えてきたけれど、まずは手軽にInvisionProttなど画像をアップしてリンクを貼るタイプのモックアップツールを利用してみましょうか。


リンクを貼ることで紙芝居のように画面遷移を再現できるけれど、画面がどのように切り替わるかトランジションのアニメーションも再現できるから参考になるなぁ。

invision-1   ▲Invisionでのモックアップの制作


作ったモックアップはWebページやアプリを通して、PC、iPhoneなどのデバイス上で確認することができます。


実際に触ってみると、ボタンの大きさとかいろいろと参考になるなぁ。1時間くらいでモックアップを作れるので便利。


2. 足りない機能を洗い出そう


モックアップを作って気づいたけれど、結構抜けている機能あるね


ほう。


例えば、マイページを用意したけれどフォローボタンがない。そこで、フォローボタンを入れると今度はフォロー一覧が欲しくなる。さらに、お知らせでフォローされたことも知らせたくなる

そして、問題のあるユーザーがいた場合のブロック機能も必要。さらにそして、ブロック一覧も欲しい!そして、そして「ブロックされたことって、わざわざ通知されるべきか?」とか悩みが出てくる!!


際限がないね。


他にも「いいね!」した投稿を一覧で見せるかとか、自分がした「いいね!」の一覧は他人にも見せるべきかとか、もう無限に終わらない、助けて!


そう、こうやってモックアップを組んでいくと、開発の終盤で「そういえばあの機能あるんだっけ?」を早めに気づくことができるのです。


確かに。


全画面にどのようなボタンがあって、押された結果どのようなことが起きるか、機能として抜けがないように考慮してモックアップを作っていきましょう。実際にデザインや開発を始める前に、すべての機能を洗い出して置くと手戻りが少なくなります。


特に「エラー画面」や、「表示内容が0件」だったときの表示とか忘れがち。


3. デザインをお願いしよう


ところで、デザインってどういうふうにお願いすればいいの?


お、良い質問ですね。特にエンジニア中心でデザイナーがいない会社だと、どうお願いすればいいか分かりづらいかもね。


できれば安くて早く、オリジナリティーと万人に通じるセンスがあって、さらに実績のある若手デザイナーがいいな。


ずいぶんと贅沢だね。まぁ、デザインもシステム開発と結構似ているところがあるので、システム開発を依頼するようにお願いするといいよ


というと?


まず、依頼する前にこちらの要件をしっかりまとめること。今回のように画面数や要素が決まっていると話が早いでしょう。あとデザイナーの得意不得意を確認しましょう。過去のデザインの実績を見せてもらって、作りたいものにマッチしているテイストがあるとベストです。


なるほど。確かに漠然とした発注だと後々問題になることが多いからね。


もちろん、漠然とした相談から一緒に考えてくれる優秀なデザイナーもいるけれど、限られた予算で良い結果を出したいときは、できる限り「どのようなデザインが欲しいか」をはっきりさせることが大事です

またそうすることで、デザイナーからの提案や意見も受けやすくなるかと思います。逆にデザインで分からないところは、どんどんと聞いてみるといいでしょう。


確かにシステム開発も要件がしっかりしていて、こちらの意見も取り上げてくれるクライアントとは仕事をしやすいから、同じだね。

とりあえずいくつか気になるデザイン会社が見つかったので、相談してみることにしました。


4. ユーザテスト


デザインが準備できたので、さっそく開発するぞ!


おっと、その前にせっかくなので一回ユーザーテストをしてみよう。


テストコードはたくさん書いたことがあるけれど、ユーザーテストは初めてだぜ。


ワイヤーが完成したタイミングでも良いのだけど、今回はデザインがあるので、Invisionでつくったプロジェクトの画像をデザインした画像に差し替えてテストに使いましょう。

テストの目的は「デザインを含めて、ユーザがサービスをどう思うか?」ということと「ちゃんと操作できるか?」の二つになります。アプリだったら、実際にスマートフォンでモックを表示して、テスターに操作してもらいましょう。


プロトタイプツールを使うと、システムが完成していなくてもデザイン画像があればテストできるので良いですね。人はどう選べばいいのかな?


まず、ターゲットユーザーに近い人を選びましょう。年代や性別をはじめ、どれくらいのユーザーパターンがあるかにもよるけれど、まずは4~5人くらいを対象にテストするといいと思います。


犬好きの友達を呼ぶことにしよう。


モックとテスターの準備ができたら、次のようにテスト項目を考えます。

<シナリオの例>

  1. まずアプリを立ち上げて、どのようなサービスと思ったか第一印象による感想を教えてください
  2. 新規ユーザー登録をしてみてください
  3. タイムラインを見て気になったユーザーをフォローし、そのあとにフォローした人の一覧を確認してください


なるほど、それぞれの処理をユーザーが正しく行えるか確認するんだね。他に気にすることはあるかな?


ユーザーテストで大事なのはユーザーが「どう思うか」や「どのように迷っている / 間違えているか」を知ることなので、「考えていることをすべて口に出してもらう」必要があります。

例えば「このボタンにログインと書いてあるから、押してみる」とか「どの画面にいるか分からなくなった」などです。


iPhoneだったら、PCとケーブルでつないでQuickTimePlayerで画面を録画できるから利用してみようかな。

       ▲QuickTime Playerでの画面と音声の録音


そうだね。ユーザーが緊張するとうまく操作できないこともあるので、大きなカメラで撮影するより画面を直接キャプチャしたり、参加人数を減らすなど、なるべくリラックスできる環境でテストしましょう。


5. ユーザーテストが終わったら


ユーザーテストどうでした?


とても参考になった!ちょっとしたテキストの表記だけで分かりやすさがずいぶんと変わるんだなぁ。あと思った以上にユーザーが説明を読んでくれないということも、驚きました。


あと、デザインや仕様でどちらが正しいか判断に困った場合、複数のパターンでユーザーテストを行って様子をみることもできます。大事なのは勝手に思い込みで進めるのでなく、確かな手応えを得ながら進めることだね。


何はともあれ、実装する前に気づくことができたからよかった。


そう、「間違いに早めに気づくことで、実装の手戻りが減る」ので結果的に工数の削減につながるのがユーザーテストの良いところなのです。


いいことずくめだ!


ユーザーテストが終わったら、デザインにフィードバックしましょう。サービスが完成した時にもういちどユーザーテストを行うとちょうど良い感じになります。


5. 最後に


さて、アイデア出しにはじまり、企画書作成からサービス / UI設計まで一通り理解したことになるけれど、いかがでしたか?


今まで言われた通りに開発していただけだったけれど、企画という観点から考えると視野が広くなった気がする。ただ面倒くさいと思っていた機能も、サービス視点に立つことで実装を頑張れるようになったり、またアイデア出しができるようになりました。あと何より考えながら開発できるのが楽しい!


サービスをイチから企画しなくても、「企画を考える」という視点でいろいろなところに活きてくるのがサービス企画です。またこの企画書講座を読んで「サービスを企画してみよう」と思うエンジニアが一人でも増えるとうれしいです


シリコンバレーに行って、大ヒットするサービスを作り出すのも夢じゃない!


ご愛読ありがとうございました!


(イラスト : Shiori Clark

⇒「エンジニアのための企画書講座」バックナンバーを読む


瀬尾 浩二郎(セオ商事)
大手SIerを経て、2005年に面白法人カヤック入社。Webやモバイルアプリの制作を主に、エンジニア、クリエイティブディレクターとして勤務。自社サービスから、クライアントワークとしてGoogleをはじめ様々な企業のキャンペーンや、サービスの企画制作を担当。
2014年4月よりセオ商事として独立。「企画とエンジニアリングの総合商社」をモットーに、ひねりの効いた企画制作からUI設計、開発までを担当しています。
Twitter: @theodoorjp ホームページ: http://theodoor.jp/

  • 17
  • このエントリーをはてなブックマークに追加

■関連記事

はじめてサービス設計をするときの進め方(中編)──エンジニアのための企画書講座vol.9... 1. 必要な機能を掘り下げてみよう 前回は「犬の写真共有サービス」の機能を「写真をとってアップする」「他の人の犬の写真が見られる」というところまで一旦しぼったんだよね。 そう、大枠の機能が決まったら、その機能を実現するにはどのような機能が必要か書き出してみましょう。このような感じになります。...
はじめてサービス設計をするときの進め方(前編)──エンジニアのための企画書講座vol.8... 1. サービス設計をすることになったぞ ブレインストーミングをして生まれた「犬の写真共有サービス」の企画。上司に「面白そうだから、作ってみよう」と言われまして...。 おぉ、それはスゴイ! でも、よくよく考えたらサービスを作るのって、何から手をつければ良いのかさっぱり分からないのですよ。 そ...
苦手克服!ブレインストーミングの方法(後編)──エンジニアのための企画書講座vol.7... 1.アイスブレイク 今回はブレインストーミングで使える様々なアイデア出しの方法と、アジェンダの作り方だよね! そう!その前に少し間が空いてしまったので、前回の復習を少しすると「効率的なブレインストーミングを行うコツ」とは…? "考える時間と話す時間を分ける" こと。 そのとおり!今回はその「...
苦手克服!ブレインストーミングの方法(前編)──エンジニアのための企画書講座vol.6... 1. ブレインストーミングの基本 「ブレインストーミングでアイデアを出してほしい」と社長に言われたけれど、何をどうすればよいのやら…。人と話すのが苦手でエンジニアになったようなものなのに困った。 まずはメンバー集めだね。人数は大体4〜6人くらいがベスト。人が少ないと盛り上がらないこともあるし、逆...
UX(ユーザ体験)から企画を考えてみよう──エンジニアのための企画書講座vol.5... 1. UXってなんだろう? 部長が「もっとUXを導入して製品のレベルを上げていこう」と言っているんだけど、最近よく耳にするUI/UXって…何!? UXポリスだ。UIとUX混同罪で逮捕する! ひゃあ! というのは冗談で、実際にUI/UXという表現があるように、UXというのはなんとなく良いUIを...
読みやすい企画書の書き方(後編)──エンジニアのための企画書講座vol.4... 1.分かりやすいイラストを活用しよう 企画書に画像を入れるとき、ついついありものの画像をイメージ画像として使いがちですが、手描きだと程よい抽象度でアイデアを伝えられるので、イメージにとらわれず便利です。身の回りに絵の上手い人がいたら描いてもらうのも一つの手です。 海外のスタートアップの企画書を見...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ