新規アプリを開発する際にディレクターとして心がけたこと

こんにちは。投稿推進部ディレクターの新里です。

先日、iPhoneアプリみんなのお弁当 byクックパッドをリリースしました。みんなのお弁当では、作ったお弁当をクックパッドのレシピ付で記録したり、アプリ内で共有したりすることができます。 今回は、新規アプリを開発する際にディレクターとして心がけたことをご紹介したいと思います。

1.ユーザの気持ちを代弁できるぐらい理解する

まず企画を考えるにあたり、お弁当作りをしているユーザーの気持ちを知るために、日々のお弁当作りからはじめました。試しに数日作るのと、習慣として日々作るのでは、全く感じ方が変わるので、週4〜5日ペースでお弁当を作り続け、これまでに作ったお弁当は300個以上にのぼります。 お弁当を作っていると、たくさんの課題に遭遇しました。以下は一部抜粋です。

  • おかずがマンネリになる
  • 彩りのいい盛り付けって難しい
  • 寝坊したから10分で作りたい
  • カレーをお弁当に持っていきたい

しかし、たくさんの課題がある反面、お弁当作りには楽しさもあります。日々記録としてたまっていくお弁当の写真をSNSにUPすると、知らない人から反応をいただけて、それがモチベーションにつながることを知りました。 また、ほかの人のお弁当を参考に作り続けていくと、お弁当作りが上達し、お弁当作りが楽しみに変わるという経験をすることができました。

f:id:Teriyakky:20151027151543j:plain

2.サービスイメージを具体化する

「ほかの人のお弁当を参考にしながら、お弁当作りを楽しくするサービスを作りたい」頭の中でイメージすることまでは出来ましたが、そこからどうやってエンジニアやデザイナーに共有するか?という時に、遷移図とあわせて使ったのがProttというサービスです。

f:id:Teriyakky:20151027163542j:plain

Prottでは画像さえあれば、コーディング経験がない私でも簡単に動くモックを作ることができました。

Prottのメリット

  • ユーザーインタビューに早い段階でかけられる
  • 遷移の抜け漏れが発見しやすい
  • コーディング前に、端末でデザインチェックができる

具体例

お弁当を投稿する画面で「保存」「公開」というボタンを2つ並べてレイアウトしたところ、ユーザーテストで引っかかるユーザーが続出しました。 話を聞くと「保存して公開したいんだけど、その場合はどっちを押せばいいのか分からない」とのこと。

f:id:Teriyakky:20151027152800j:plain

インタビューの結果をふまえて、デザイナーと相談し、より押して欲しい「公開する」ボタンを上に配置し、その下に「保存」ボタンを置くことにしました。

f:id:Teriyakky:20151027153220j:plain

ディレクターの作業としては、確かに上乗せにはなりますが、コーディング後の手戻りなどは大幅に削減できたため、プロジェクト全体で考えると有効な取り組みだったと思います。

3.ユーザーの声をきちんと聞く

1〜2時間のユーザーインタビューで試作品の感想を聞くことはよくあると思いますし、今回のアプリ開発でも行いましたが、それに加えて、みんなのお弁当ではTestFlightという仕組みを利用しました。 TestFlightを使うと、指定した相手にだけアプリを配信することができます。今回は日常的にお弁当作りをしているユーザーの声が聞きたかったので、クックパッドのサービス内でお弁当を投稿している数十名の方にご協力いただき、1ヶ月間アプリを利用してもらいました。

f:id:Teriyakky:20151027153412j:plain

TestFlightのメリット

  • 複数名のユーザーに同時配信できる
  • クローズドな環境でテストできる
  • 長期間使ってこそ分かる、意見をいただける

具体例

いただいた意見の中に「日々投稿されるお弁当は参考になる。けれど毎回お弁当を拡大しないと、レシピが付いているかどうか分からない」といったものがありました。

f:id:Teriyakky:20151027153814j:plain

これは、ユーザーに『レシピ付きのお弁当にはサムネイルの下にマークが付く』という仕様が伝わっていなかったためです。そこで、アプリの初回起動時に以下の説明画面を追加することにしました。

f:id:Teriyakky:20151027153959j:plain

リリース前の貴重な1ヶ月。長期間のテストを実施するかどうかは、プロジェクトの内容や案件にもよると思います。しかし、テスト期間終了後に回答いただいたアンケートは、最後の作り込みの部分で、非常に有用なものとなったと個人的には思っています。

4.メンバーに企画の熱量を伝え続ける

そして最後は手法というよりも、気持ちの問題です。この企画を始めた当初から心がけているのが、メンバーに対して企画の熱量を意識して伝え続けることです。 デザイナー、エンジニアは他の案件を抱えていたりもするので、その中でプロジェクトへのモチベーションを持続してもらうために「お弁当ってこんなに素晴らしい!」というのをしつこいまでに伝え続けています。

具体例

  • お昼休みにお弁当を作ってきて食べよう!という「お弁当会」を負担にならない頻度で実施(もちろん男性も参加)
  • みんなのお弁当に関するポジティブな情報をこまめにグループチャットに共有
  • ネットで見つけたお弁当に関するおもしろ情報を都度共有

アプリに関する課題や問題点はミーティングなどで話し合われますが、良いこととなると意識しないとキャッチできないので、ここは私が意識的に情報収集するようにしています。

まとめ

新規プロジェクトの中でディレクターとして心がけたことをまとめてみました。はじめての新規アプリ開発で、正直右も左も分からない状況からスタートし、こういうツールがあるよというアドバイスを都度いただきながら、リリースにこぎつけました。 試行錯誤してみて便利だな、いいなと思ったことをまとめているので、このエントリが次の新しいサービスの参考になれれば幸いです。

iPhoneアプリ みんなのお弁当 byクックパッド

/* */ @import "/css/theme/report/report.css"; /* */ /* */ body{ background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527163350.png'); background-repeat: repeat-x; background-color:transparent; background-attachment: scroll; background-position: left top;} /* */ body{ border-top: 3px solid orange; color: #3c3c3c; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; line-height: 1.8; font-size: 16px; } a { text-decoration: underline; color: #693e1c; } a:hover { color: #80400e; text-decoration: underline; } .entry-title a{ color: rgb(176, 108, 28); cursor: auto; display: inline; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; font-size: 30px; font-weight: bold; height: auto; line-height: 40.5px; text-decoration: underline solid rgb(176, 108, 28); width: auto; line-height: 1.35; } .date a { color: #9b8b6c; font-size: 14px; text-decoration: none; font-weight: normal; } .urllist-title-link { font-size: 14px; } /* Recent Entries */ .recent-entries a{ color: #693e1c; } .recent-entries a:visited { color: #4d2200; text-decoration: none; } .hatena-module-recent-entries li { padding-bottom: 8px; border-bottom-width: 0px; } /*Widget*/ .hatena-module-body li { list-style-type: circle; } .hatena-module-body a{ text-decoration: none; } .hatena-module-body a:hover{ text-decoration: underline; } /* Widget name */ .hatena-module-title, .hatena-module-title a{ color: #b06c1c; margin-top: 20px; margin-bottom: 7px; } /* work frame*/ #container { width: 970px; text-align: center; margin: 0 auto; background: transparent; padding: 0 30px; } #wrapper { float: left; overflow: hidden; width: 660px; } #box2 { width: 240px; float: right; font-size: 14px; word-wrap: break-word; } /*#blog-title-inner{*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-position: left 0px;*/ /*}*/ /*.header-image-only #blog-title-inner {*/ /*background-repeat: no-repeat;*/ /*position: relative;*/ /*height: 200px;*/ /*display: none;*/ /*}*/ /*#blog-title {*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527172848.png');*/ /*background-repeat: no-repeat;*/ /*background-position: left 0px;*/ /*}*/