新規アプリのデザインで心がけたい5つのこと

こんにちは、株式会社トクバイ出向中のデザイナー 吉井です。

まだあまりご存知ない方も多いと思いますが、株式会社トクバイは2013年にクックパッドの新規事業としてスタートした「クックパッド特売情報」を分社化し、今年7月に設立されました。 それに伴いサービス名も「トクバイ」と改め、この夏Android / iOSの両アプリをリリース致しました。

※9月5日現在、iOSアプリはAppStoreのおすすめにフィーチャーされています!

f:id:hrtk441:20160905164635j:plain

トクバイは日々の特売品やチラシ、タイムセール情報など、リアルタイムで自分の近くのお店の買物情報を閲覧できるサービスです。

私はクックパッド特売情報の頃からデザイナーとして一連のサービス開発に携わっていますが、今日はその「トクバイ」も含め新規アプリをデザインする際、私が心がけている大きなポイントを5つご紹介します。

ユーザーをしっかりと理解する

f:id:hrtk441:20160905163720p:plain

まず基本中の基本ですが、価値を届けたいユーザーを知らないことには良いサービスは作れません。

そのなかで私個人としては、ユーザーと直接対話したことがあるかどうかで、実際のプロダクト開発に与える影響が格段に変わってくると考えています。

今回のトクバイの開発でも、「買い物」という行動はあまりに日常的で普遍的であるため、とりあえずなんか(我々が思うに)良さそうで便利なアプリにしよう、という感じでぼんやりしたままに進めてしまうと、結果なんだかよく分からないモノになってしまいかねませんでした。

また、レシピサービスであるクックパッドの内部に同居していたこれまでとも状況が異なります。

今まではレシピに紐付く形で買物情報が提示されていましたが、今回単体のサービスとしてクックパッドから切り離されることで、ユーザーのアプリの使い方が今までとは変わってくることが予想できました。

そこで私も含めた開発メンバーで、開発に入る前に実際に色んな属性のユーザーの方(クックパッド特売情報のユーザー)にお会いしてみるという試みをしました。

実際に10名以上のユーザーさんとお会いしてお話を聞いてみると、やはりそれぞれで持つ課題感が微妙に異なることが分かります。

子連れでゆっくり買い物できない、買いたいものがいつも決まらない、色んなお店の情報を比較して見たい...

ユーザーさんと直接対話することでより身近に課題感を感じられたことは、その後の開発プロセスにおいて具体的なイメージがつきやすくなるなど様々な好影響がありました。

本エントリでの詳細は省きますが、このあたりはプロダクトオーナーである弊社三浦のエントリも是非合わせてご参照ください。

最初にコアとなる価値を作りこむ

現在トクバイではスーパーに加え、ドラッグストアやクリーニング、ホームセンターなど、食品に限らない生活領域に関する様々なお店からも日々情報をお届けしています。

それが我々の持つコンテンツのひとつの強みではあるのですが、ただその情報を並べて表示するだけでは、他の競合サービスと何ら差別化が図れません。

そこで我々は前項で掴んだユーザー像をもとに、「複数のお店の情報から効率的に欲しい情報へアクセスできる」ことをコアとなる価値として設定し、それを実現するためのプロトタイプの作りこみを先に進めていきました。

特に「トップ」と呼ばれる複数店舗の情報を集約して表示する画面については、これまでのクックパッド特売情報にも存在しないものでありながら、上記のコア価値を体現する画面としてかなり多くの時間を割きました。

その名の通り起動して一番最初に開かれる画面でもあるので、アプリの「顔」となるべく相応しいものを、とメンバー間で議論を重ねに重ね、何度もプロトタイプを作り直しています。

ProttやFlinto for Macを用いてそれらを再度ユーザーさんや社内スタッフにも触ってもらいながら、率直な意見・感想を吸い上げ、組み立てては壊し...の繰り返しです。

f:id:hrtk441:20160905163700p:plain

苦しい時間が続くときもありましたが、粘り強く検証を繰り返すことでようやくひとつの形が見えてきます。

ここであまり固めきらずにある程度柔軟性を残した形で次のフェーズに移りますが、この部分の試行錯誤を早くから重ねておくことで、早期に足元が固められたような実感がありました。

我々のコアはこれだ、とチームで共通認識が持てるようになることで、その後の議論の不要な発散を抑えられ、腰を据えて開発を進めやすくなる効果があったと考えています。

早く全体像を捉える

f:id:hrtk441:20160905163713p:plain

コアが見え始めてきたら、次に思いつく限り、このアプリをリリースさせるために必要な画面の総量を洗い出します。

個人的に手法は何でもいいのですが、とにかく明確な画面単位、または機能単位で洗い出すようにします。 これも開発初期の早い段階で「今からやらなければいけないことの全体像を把握できている」という状態を作れていることが大事だからです。

そうして洗いだしたタスク量をもとにざっとマイルストーンを敷いていくわけですが、これを開発メンバー間にも見えるようにすることで、

  • 決まっていないことがいつまでに決まっていないとまずそうかが分かる
  • 時間をかけて考えるべき画面とひとまずそうでもない画面のバランス感が分かる
  • タスク消化がどれだけ遅れだすと後半の巻き返しで余裕がなくなるが分かる
  • 工期に対してできないこと、やらないこと(優先度)が早いうちに見極められる

など、自分のスケジュール管理の範囲を越えて様々なメリットが生まれました。

何か具体的な画面がなければ体験がどうこうという議論もしづらく、エンジニアも実装計画が立てにくくなります。

プロダクトの輪郭を浮かび上がらせていくことはデザイナーのひとつの職責であると思っているので、ここを率先して進めていくことが、大きなトラブルもなくリリースまで至れた一つの要因であったと考えています。

都合の良いケースだけで考えない

f:id:hrtk441:20160905163706p:plain

トクバイは、全国各地のお店から投稿いただいたチラシ情報を掲載することで成り立っています。

そのため各コンテンツに付随する情報量や、そもそもの投稿の有無はお店の裁量に委ねられる部分が多く、地域やお店の日毎の投稿状況によって、ユーザーさんに届くコンテンツの量や密度に少なからず差が出てしまうのが現状です。 (すべてのユーザーさんに均質な価値を届けられるよう、鋭意改善を重ねています)

デザイナーであれば心当たりがある方がいるかもしれませんが、要件を深く理解しないままついつい都合の良い理想的なデザインだけを作って、それだけで満足な気持ちになってしまったことはないでしょうか。

もちろんそういった状態を見越してデザインを作り上げていくことも大事ですが、足元を見ずに一部のケースでしか成り立たないものを作っていてはあまり意味がありません。

今回の開発でも、ここでいう「お店からの投稿が少ないなど、ユーザーの期待に反するがっかりなケースはなんだろう」と私個人が常に頭に置いておくことで、デザインのパターンを深く網羅的に展開できるようになりました。

複数のケースを想定する意識を強く持つことは、デザインを決定へ導くにあたって議論に深みを持たせ、実装面でも考量漏れによる工期遅延やデザインの練り直しなどのリスクが減らせるため、新規開発に限らず重要であると感じています。

また副次的な効果として、そういった「がっかりなケース」を減らしていくためにはどういう打ち手を仕掛けていくべきか、というネクストステップの手がかりが掴めてくるのも、この点を徹底していて良かった、と感じる点です。

シンプルな体験を追求する

デザインとはユーザーの体験をいかに心地よく設計できるかが一つの重要な要素であり、決してセンスよく、オシャレに、だけで語られるものではありません。

そのためトクバイのリリースバージョンでは、まずはシンプルでミニマムな、最低限ストレスのないユーザー体験を作っていく、ということに重点を置いて進めました。

例えば、Material Designに代表されるトランジションのアニメーションですが、確かに見ていて気持ち良く、新しいことを自由に試せる段階ではつい取り入れたくなることもあるかと思います。

しかしあれは本来ページ前後の関係を分かりやすくする、一連した体験を提供する、などの目的を持って設計されているものであり、「なんとなく今っぽいイカした感じのアニメーションをつける」ことが目的にすり替わっては本末転倒です。

トクバイの開発でも、写真がついたUIパーツをタップした時のトランジションについて、商品写真を拡大しながらシームレスに次ページへ遷移するといった演出を試みたタイミングがありました。

やや分かりにくいですが、プロトタイプ上だと下図のようなイメージです。

f:id:hrtk441:20160905163625g:plain

しかしこの内容でエンジニアに実装してもらったものを端末上で確認してみると、遷移時に微妙なチラつきが発生するなど細かな違和感があり、思っている品質に届かせるにはまだいくらかの調整が必要であると感じました。

工期に比較的余裕があればその後のブラッシュアップにも時間をかけるところですが、私の経験上このようなアプリ開発(特に新規)の現場においてそういったことは多くはないのではないかと思います。

勿論、今回の我々の場合も例外ではありませんでした。

局所的な調整に時間をかける余り、他の部分がおざなりになってしまい、アプリ全体を通した品質が犠牲になっては折角の苦労も意味を成し得ません。 上記のトランジションを検討した際にも、今後の開発量を見据えると今この調整に時間をかけるべきではないと判断し、単純にページングをするようなシンプルなトランジションに変更して進めました。

他にも「あったら便利そうな気がするけど仮説の検証が不十分な機能」「細かなビジュアルの作り込み」など、目指すべきユーザー価値を担保できない、あるいは明確に価値を向上させるものではない、と判断したものについては、初期の段階では適度に諦めて優先度を下げるようにしました。

細かな枝葉に拘ることよりも、まずは幹となるシンプルなユーザー体験を追求することを何よりも優先させ、アプリの持つ本質的な価値の向上を重視すべき、と方針づけたのです。

この方針をチームにも浸透させていくことで、チーム全体でひとつの方向を向いて、一丸となってスムーズに開発を進めることができたように思います。

最後に

デザイナーとして心がけた、としていくつかの内容をご紹介してきましたが、クックパッドの開発文化を受け継ぐトクバイでは、これらのマインドは私に限らず広くメンバーに備わっています。

トクバイアプリは開発期間が数ヶ月と、かなりのスピード感を持って進められたと感じていますが、それもこれらの共通理解が開発メンバーに根付いていたことがひとつの要因だったのかもしれません。

アプリもリリースしたばかりでまだまだこれからといった段階ですが、これからもユーザー視点を第一によりよい改善を重ねていきます。是非ご利用ください。

(★ダウンロードはこちら Google Play / AppStore)

なお、トクバイでは買い物の未来を楽しくするデザイナーを募集しています。 一緒に素敵なサービスを作っていきましょう。

/* */ @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;*/ /*}*/