読者です 読者をやめる 読者になる 読者になる

「お料理アルバム」のアプリデザイン

こんにちは。投稿推進部の長野です。

先日クックパッドでは、お料理アルバムというアプリのAndroid版をリリースしました。 お料理アルバムは、毎日の料理写真をプライベートに記録・整理出来るアプリです。昨年iOS版をリリースし、その後バージョンアップを重ねて、この度Androidへと展開しました。

私はiOS版の開発時からデザイナーとして本プロジェクトに参加してきたので、このエントリーではデザインの観点からお料理アルバムの開発について、ご紹介したいと思います。

アプリが実現したい世界観

お料理アルバムが実現したい世界観は、毎日生まれている料理(レシピの卵)を気軽に記録に残していく受け皿をつくり、その中から特に美味しくできたものや誰かに伝えたいものがレシピとして発信される自然な流れを作ることです。 クックパッドのサービスは、ユーザーさんが日々投稿してくださるレシピによって成り立っているわけですが、日常生活のなかで「レシピを書く」という行為はなかなかハードルの高いものです。そこで、いきなり「レシピを書こう」ではなく、日々の料理とレシピの間をつなぐ、気軽なステップを用意しようというのが、このアプリのねらいです。

どうしたらこのアプリで記録したくなるのか

「毎日の料理を気軽に残す」という行為をどうしたらデザインできるのか、ユーザーの動機付けとなる価値を探すために、プロジェクト開始後しばらくはプロトタイピングと検証を繰り返しました。 以下に検証した仮説とプロトタイプをいくつかご紹介します。

仮説①

  • 作った料理写真をカテゴリ分けして簡単に記録できれば、自分のレパートリーが整理されるので記録のモチベーションになる?
f:id:yoshiko-nagano:20151009111427p:plain

ワイヤーフレーム画像をプロトタイプツールで動かし
画面遷移を体験できるようにしたプロトタイプ

仮説②

  • きれいな料理写真を撮ることができれば、記録のモチベーションになる?
f:id:yoshiko-nagano:20151009111441p:plain

お手本となる構図の料理写真がオーバーレイした状態で
写真を撮れるプロトタイプアプリ

仮説③

  • 日々の積み重ねを実感できる仕掛け(登録件数やカレンダービュー)があれば、記録のモチベーションになる?
f:id:yoshiko-nagano:20151009111514p:plain

写真を登録すると、件数や日数、カレンダービューなどで
記録の蓄積をみることができるプロトタイプアプリ

上記のようなプロトタイプを使ってユーザーテストやインタビューを行い、仮説検証を繰り返した結果、カテゴリ分けや写真をきれいに撮るなどの「機能」は、ユーザーがアプリを使う動機付けにはあまり直結しないということが見えてきました。それよりも、仮説③で検証した、記録したことによって味わえる「達成感」のようなエモーショナルな価値の方が、このアプリを使う動機付けとしては重要だという結論に達しました。

プロダクトの価値をデザインで強める

上記の価値検証を受けて、お料理アルバムではミッションステートメントを以下のように定めました。

「写真を記録するだけで、日々の料理に達成感を感じられる」

アプリのインタラクションデザインやビジュアルデザインは、すべてこのステートメントを軸に置いて設計しています。「簡単に記録できる」価値と「達成感を感じられる」価値をデザインによっていかに強められるかを考え、個々の要素をデザインしていきました。

写真が自動できれいに整理される感覚

お料理アルバムに写真をアップロードすると、撮影日ごとにタイムライン上に自動でレイアウトされ、表示されます。

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

タイムラインビュー

カメラロールの様に淡々と写真を並べるのではなく、複数写真をあえてギュッとまとめたレイアウトにし、日付ごとのカタマリ感を強調するデザインにしています。そうすることで、「自分は写真を選んだだけなのに、アプリがいい感じに整理してくれた!」という印象を強めるのがねらいです。

積み重ねを実感できる見え方

タイムライン表示とは別に、カレンダービューもあり、こちらでは記録した日付部分が写真で埋まっていくような見え方になっています。

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

カレンダービュー

プロトタイプではカレンダー上に丸くトリムした写真を並べていたのですが、空白を埋めていく達成感を演出するねらいから、びっしり写真を敷き詰めるレイアウトに変更しました。

楽しさ・気持ちよさの演出

お料理アルバムは基本的に一人でプライベートに使うものです。友達が使っているからとか、誰かに見てもらえるといったコミュニティ要素をモチベーションにすることができないため、記録が面倒になり負担に感じられてしまったら、すぐに離脱してしまいます。そのため、使っていて楽しい感覚、細部の気持ち良さの演出にはとても気を使いました。

例えば、タイムライン画面から写真をタップして詳細画面へ遷移する際のトランジションや、写真をアップロードした直後に画面上部でフライパンが揺れる演出などは、そのための工夫の一部です。

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

写真を登録すると該当の日付部分に
品数分のお皿が並び、フライパンが揺れる

一方で、華美な装飾は日常使いをするツールとしては逆に邪魔になることもあります。特に、お料理アルバムではあくまで料理写真が主役なので、それを邪魔しないことは大前提として考えました。その上で、極力シンプルさを保ちつつ、細かい部分のインタラクションで使う楽しさを感じられるようなデザインを目指しています。

ユーザーの行動に基づいたブラッシュアップ

リリース後に追加した機能の一つに、1ヶ月分の料理写真を月末にSNSシェアできる機能があります。

リリース後、カレンダー画面のキャプチャをSNSでシェアするユーザーが現れ、日々の料理の蓄積が可視化されて達成感を感じたときに、シェアの欲求が高まることがユーザーの行動から推測できました。 そこで、ひと月分の料理画像をSNSシェアに適した形に成形してシェアできる機能をデザインし、追加しました。

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

SNSシェア用画像

毎日料理をしていなくても、頑張った日の分だけの達成感が感じられる設計にしています。数日埋まっていなくても見栄えのする、カレンダーのようでカレンダーでないデザインです。さらに、シェアされた画像を見た人にアプリに興味を持ってもらえるよう、画像全体でアプリの世界観が伝わるデザインを心がけました。

この機能により、最近では月末・月初にたくさんのお料理アルバム画像がシェアされるようになっています。ハッシュタグ #お料理アルバム でinstagramなどを見てみると、様々な家庭のひと月の食卓が見えてきて、とても楽しいです。

まとめ

以上、ざっとですが、お料理アルバムの実現したい世界観から、それをどのようにアプリデザインに落とし込んでいったのかをご紹介しました。

「写真を記録するだけで、日々の料理の達成感を感じられる」

お料理アルバムの開発・デザインは常にこのステートメントを振り返り、照らし合わせながら進めています。日々の何気ない料理を気軽に記録するところを徹底的にサポートし、そこからクックパッドのサービス全体を使う楽しみを広げていけるようなアプリへと成長させていきたいと思います。

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

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