サービスを通じて日々の嬉しい体験を増幅する

こんにちは。ユーザファースト推進室エンジニア兼デザイナーの長野です。

クックパッドでは、今年に入ってからレシピやつくれぽ*1を外部のSNSに共有できる機能を拡充しており、そのデザインおよび開発を担当しています。

本エントリでは、特につくれぽ共有の施策について、サービスの背景やねらいをご紹介したいと思います。進行中のプロジェクトのため数値的な成果などをご紹介することができないのですが、本エントリを通じてクックパッドのサービス開発の考え方をお伝えできればいいなと思います。

つくれぽ共有施策の概要

クックパッドのサービス上でつくれぽ写真をタップすると、写真を大きく見ることができ、そこからつくれぽをFacebookやTwitterなどの外部SNSへ共有することができます。

f:id:yoshiko-nagano:20150601110955p:plain

つくれぽ拡大表示画面(左:PC、右:スマートフォン)

このつくれぽをSNSで見た人は、リンクを押すとつくれぽ固有のパーマリンクへ遷移することができます(これまでつくれぽにはパーマリンクがありませんでした)。 さらに、パーマリンクや拡大表示の画面には「いいね」ボタンがあり、つくれぽの作者さんに向けてライトなフィードバックを送ることができます。

f:id:yoshiko-nagano:20150601110947p:plain

つくれぽパーマリンクページ(左:PC、右:スマートフォン)

施策の背景

これまで、つくれぽはレシピの作者さんへ感謝の気持ちを伝えるためのものとして機能してきました。送られたつくれぽはレシピ作者さんの元へ届き、レシピの作者さんはそこに返信コメントを返すことができます。 あくまでつくれぽはレシピに従属するものとして設計されており、それ故に各つくれぽのパーマリンクも用意されていませんでした。

しかし、実際つくれぽを送る工程を想像してみると、他人のレシピを見ながらではあるものの、自分なりのアレンジや工夫を加えたり、盛り付けにこだわったり、写真を綺麗に残すために創意工夫をしたりと、とてもクリエイティブな作業があふれています。 そこで今回の施策では、つくれぽも一人のユーザーさんによって作られた貴重なコンテンツ(作品)であると捉え、サービスの設計を進めました。

施策のねらい

自分がみつけた美味しいレシピを共有できれば、それが誰かの役に立つかもしれない。美味しく上手につくれた料理を誰かに共有すれば、家族やレシピ作者さん以外にも、注目されたり褒めてもらえるチャンスがあるかもしれない。そんな風に、つくれぽを送る人の料理や生活がより楽しくなるチャンスを広げることが本施策のねらいです。

また、レシピ作者さんにとっても、つくれぽが外部に拡散されることによって、よりレシピを見てもらえるチャンスが増えます。 SNS上でつくれぽに出会うユーザは、美味しそうな料理写真をきっかけに、その作り方まで詳細に知ることができるようになります。 もちろんクックパッドは拡散されたつくれぽからクックパッドを訪れてくれるユーザが増えればバンザイです。

このように、各登場人物がwin-winの関係になるよう設計を行いました。

f:id:yoshiko-nagano:20150601101847p:plain

本施策のEOGS(Emotional Oriented Goal Setting*2

リリースと改善

本施策のリリースは以下のステップで段階的に進めました。

  1. つくれぽのパーマリンクをリリース
  2. 各種デバイス・画面にSNSシェアのリンクを順次追加していく
  3. ライトフィードバックをリリース

2の最初でスマートフォンWebにだけ導線を追加し、ある程度流入の傾向が見えてきたところで、一度パーマリンクのデザインを見直しました。 具体的には、FacebookからスマートフォンWebに流入した場合の直帰率が他に比べて高くなっていることが分かったので、そこを重点的に改善対象としました。

直帰率が上がっている原因として以下の仮説を立て、デザインを修正しました。

  • Facebookの場合、友人の投稿した料理写真に興味をもってクリックしている
  • レシピよりも投稿者に関心があるが、初期デザインのパーマリンクでは投稿者の他の投稿などがファーストビュー(および1スクロールくらいで見える範囲)で目に入らない
  • 結果、自分に関心のある情報に出会えず離脱する
f:id:yoshiko-nagano:20150601111004p:plain

パーマリンクデザイン改善(左:Before、右:After)

改善のポイントは以下です。

  • ファーストビューで投稿者の人感を感じられるようにし、その人の他の投稿に遷移しやすくする
  • 同時にレシピの位置は下げずに、興味を持った料理写真のレシピにはすぐアクセスできる状態を確保する

この変更の結果、問題となっていた直帰率はぐっと下がり、PCへの流入の場合や他のSNSからの流入とほぼ同等の数値にまで改善することができました。

このように細かく改善を行いながら、各デバイスでリンクの設置場所を増やし、現在は3のフェーズのライトフィードバック導入へと進んでいます。 拡散したものが見てもらえて、嬉しいフィードバックとして届くところまでがこの施策なので、今後も機能追加と改善を続けていきます。

日常の嬉しい体験を増幅するという考え方

本施策の本質的なゴールは、「レシピを見て美味しい料理が作れた!」という体験で得られる楽しさや喜びを、サービスを通じて増幅させることです。 日常生活で日々行われている作業をテクノロジーの力でより喜びの多いものにする。クックパッドでのサービス開発の根底には、常にこのような考え方があります。

そもそも、クックパッドというサービスの始まりも「レシピを検索する」よりも先に「レシピを載せる」ためのサービスでした。 毎日料理をしていても、褒めてくれるのは家族ぐらい。ともすればとても孤独な作業になりかねない料理を、レシピという形でインターネットに発信することで、遠いどこかの家庭で自分の料理が役に立つ可能性が生まれる。日々の生活に埋もれてしまっているけれど、実はとてもクリエイティブで誰かの役に立てるはずの作業を、ツールとプラットフォームを提供することで世の中にオープンにし、誰かの役に立つ喜びや人に褒められたり注目される喜びを作り出すのが、私たちのサービスの役割だと思っています。

もしこのエントリを通じて、クックパッドのサービス開発にご興味を持っていただけた方がいらっしゃいましたら、ぜひエンジニア・デザイナー採用へエントリーください。ご応募おまちしております!

*1:クックパッド上でレシピを見て料理を作ったユーザから、料理写真にコメントを添えてフォトレポートを送れる仕組み

*2:クックパッド内製のサービス企画フレームワーク。サービスの各登場人物の疑いようのない欲求を整理し、それらを満たす解を導く。企画時にこれをきちんと設定すると、サービスの登場人物と欲求が明確になり、開発の目的がぶれにくく、成功のイメージを共有できる。

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