【開催レポ】Cookpad Tech Kitchen #15 〜料理動画・広告のBtoB領域の開発事情〜

こんにちは!人事部の冨永です。

2018年3月28日に「Cookpad Tech Kitchen #15 〜料理動画・広告のBtoB領域の開発事情〜」を開催しました。クックパッドではこのイベントを通して、技術やサービス開発に関する知見を定期的に発信しています!

第15回の今回は、最近リリースをしたクッキングLIVEアプリ「cookpadTV」をはじめとした料理動画事業の開発の裏側や、クックパッドの広告配信周りの開発について等をテーマに、7名が登壇しました。アプリからバックエンドまで具体的な事例を用いてたっぷりとご紹介したイベントの様子をお届けします🎉

cookpad.connpass.com

クックパッドの料理動画事業をご紹介🎬

まずはクックパッドの料理動画事業を簡単にご紹介します。

クッキングLIVEアプリ「cookpadTV」
ライブ配信を見ながら、プロの料理家やシェフから料理を学んだり、有名人と一緒に料理を楽しむことができるアプリです。コメント機能を使ってわかりづらいポイントをその場で質問でき、双方向型コミュニケーションを実現した新しいクッキングアプリとなっています!また、クックパッドに投稿されているレシピの1分動画もご覧いただけます。ぜひ使ってみてくださいね ♪
App Store: https://itunes.apple.com/app/id1344736966
Google Play: https://play.google.com/store/apps/details?id=com.cookpad.android.cookpad_tv

「cookpad storeTV」
全国のスーパーマーケットなどの流通チェーンと連携し、店頭の生鮮売り場にクックパッドオリジナルのサイネージ端末設置して料理動画を配信するサービスです。2018年1月より、大手食品・飲料メーカーの商品を活用した料理動画広告のトライアル配信も開始しております。あなたのお家の近くの店舗でも見られるかも!

詳細はこちら:~クックパッド、料理動画事業に本格参入〜第1弾は『cookpad storeTV』大手流通チェーンと連動し、売場で料理動画を配信12月より日本全国のスーパーマーケット約1,000店舗にてスタート

「cookpad studio」
クックパッドスタジオは、クックパッドのレシピ投稿者が自分のレシピを動画にするために、無料で利用できる動画撮影スタジオです!動画の撮影経験がない初心者の方でもクオリティの高い料理動画の制作が可能です。完成動画はクックパッド内で公開できるほか、Instagramをはじめとする個人のSNSにも投稿することが可能です。昨年12月に東京・代官山に1号店をオープンし、今年5月には心斎橋に2号店をオープン予定です!
公式ページはこちら:「cookpad studio」

これらの事業に沿って、それぞれのメンバーが何を開発しているのか、どんな技術を使っているのか、何を目指しているのかといった内容をお話しました。

f:id:mamiracle:20180423214451j:plain (cookpad storeTVのサイネージ端末)

cookpadTVのライブ配信の裏側

まずはじめにAndroidエンジニア石本と、サーバーサイドエンジニア長田からクッキングLIVEアプリ「cookpadTV」のコンセプトやアプリ構成についてお話しました。LIVE配信・コメント・いいね機能などに関する技術的課題と工夫についてお話しました。

speakerdeck.com


speakerdeck.com


cookpadTVのアプリ開発〜現状とこれから〜

iOSエンジニアの鶴川からは、クッキングLIVEアプリ「cookpadTV」の技術構成や、今後の展望についてお話しました。現在はプラットフォーム間での挙動や体験の違いを、技術的アーキテクチャの統一により解決することを目標にしており、それを前提に置いた基盤開発の工夫についてもご紹介しました。

speakerdeck.com

cookpad storeTVの開発事例

サーバーサイドエンジニアの三浦からは、動画サイネージ事業「cookpad storeTV」の開発事例をご紹介しました。ユーザー(店舗でのサイネージ端末運用者)が使いやすいサービスの設計や、それを実現するために工夫した技術についてお話しました。

speakerdeck.com

cookpad studioでの撮影環境について

iOSエンジニアの氏からは、ユーザー向け料理動画撮影スタジオ「cookpad studio」での、カメラ選定や通信方法などといった撮影環境構築についてお話しました。撮影に適した環境をつくるまでのガジェット選定や設計の工夫などについて詳しくご紹介しました。

speakerdeck.com

動画事業でのデータ収集、分析、活用

サーバーサイドエンジニアの今井からは、動画サイネージ事業「cookpad storeTV」のログの活用方法についてお話しました。当時苦戦してた課題から、現在導入しているTableau®の事例までをご紹介しました。

speakerdeck.com

cookpad storeTV 広告配信 いままでとこれから

サーバサイド / Androidエンジニアの中村からは、動画サイネージ事業「cookpad storeTV」における広告配信についてお話しました。店舗に設置したサイネージに動画広告の配信をしており、これからは imp ベースで行っていきます。

speakerdeck.com

付箋形式でお答えするQ&Aディスカッション😊

Cookpad Tech Kitchenではより気軽に質問をしていただくために、付箋で質問を集めています。この日はメディアプロダクト開発部長 渡辺が司会となってQAディスカッションを行いました。

f:id:mamiracle:20180423214502j:plain (付箋に質問を貼ってもらいます)

アプリのアーキテクチャでAndroidとiOSで統一することでUXを統一できる理由が知りたいです

アーキテクチャを統一することで、API へのリクエストタイミング、エラーハンドリング等の設計がプラットフォーム間で共有出来るようになるからです。そうすることで、ローディングの時間やエラーダイアログの表示等をあわせやすくなり、結果的に UX を似せることが出来ます。

cookpadTVのアプリ開発が少数精鋭で驚きました。レビューはどうして回していたのでしょうか?

レビューに関しては正直自分達のチームだけでは回しきれない部分があったので、技術部モバイル基盤チームのメンバに手伝って貰っていました。

ログの量が多そうですがデータ量削減のための工夫はしていますか?(圧縮形式など)

クックパッドのログ基盤はしっかりしているので、サービス側から送るログの量を制限して欲しいという依頼は来たことがありません。そのため、データ量削減の工夫はしていません。

ほんの一部ではありますが、上記のような質問にお答えしました!

シェフの手作り料理🍳

Cookpad Tech Kitchen ではおもてなしの気持ちを込めてシェフ手作りのご飯を振る舞っています!食べながら飲みながらカジュアルに発表を聞いていただけるように工夫しています。みなさまも次のイベントはぜひ遊びに来てくださいね。

f:id:mamiracle:20180423214534p:plain (オリジナルロゴケーキと陳麻婆豆腐焼きそば)

f:id:mamiracle:20180423214521p:plain (いつも美味しいご飯を作ってくださる川嶋先生)

クックパッドでは仲間を募集しています😊

今回のイベントでは、最近リリースした、料理動画事業や広告事業に関する新規サービスについてご紹介しました。ぜひこれを機にみなさまにもクックパッドの料理動画サービスを使っていただけたら嬉しいです。

そしてクックパッドでは料理動画事業や広告事業、その他新規事業、レシピサービス事業などに携わる新しい仲間を募集しています!クックパッドで「毎日の料理を楽しみにする」ことに興味を持ってくださった方は、ぜひ下記のリンクからご応募もお待ちしております。

Android アプリケーションエンジニア(料理動画・広告配信)

バックエンドエンジニア(料理動画・広告配信)

iOSアプリケーションエンジニア(料理動画・広告配信)

また、今後のイベント情報についてはConnpassページについて随時更新予定です。イベント更新情報にご興味がある方は、ぜひメンバー登録をポチっとお願いします!

cookpad.connpass.com

料理をつくる人はどんな課題を抱えているのか? 〜ユーザーの課題を施策につなげるインタビューの取り組み〜

こんにちは。投稿開発部 ディレクターの五味と申します。 初日の記事から5日間に渡ってお届けしてきた「クックパッド MYキッチン」の連載も、いよいよ今回が最終回です!

私たち投稿開発部では、クックパッドユーザーの中でも特に「レシピを投稿するユーザー」にとって最適なアプリを追求するために、「クックパッド MYキッチン」アプリをリリースしました。ではこれからそこで、ユーザーにどのような体験や機能を提供していくべきでしょうか。

今回は、ユーザーの課題を起点に次の施策を発想していくために行なっている、ユーザーインタビューの取り組みについて紹介します。

f:id:natsuki53:20180419194028p:plain App Store / Google Play

料理をつくる人はどんな課題を抱えているのか

投稿開発部は現在「クックパッドにレシピを投稿するユーザーを増やすこと」を目標とし、その戦略として「レシピ投稿の継続率を改善すること」と「レシピを投稿し始める人を増やすこと」の2点に注力することを決めています。

施策を考える上では、目先の数字を稼ぐのではなく、レシピ投稿を、何らかユーザーの課題を解決する、ユーザーが使いたくて使う手段にすることを重視しています。それを実現する指針を得るためには、料理をつくる人が抱えている課題を知り、できるだけ深く理解をする必要があります。

チームではそのため、アプリ開発と同時並行でユーザー調査を進めてきました。

調査の計画:ユーザーの実際をもっと知りたい

ところで投稿開発部は2018年に新設された部署です。メンバーは部長含め、サービス開発の経験はあれど、レシピ投稿者にフォーカスして取り組むのは初めての面々でした。さらに部内には、ユーザーインタビューを通してユーザーの課題を発見するための設計をしたことがある人もいません。そのため、部の発足当初から、定性的なユーザー調査に積極的に取り組むことは計画していました。

2月に入り「クックパッド MYキッチン」アプリの開発目処が立ってきた段階で、計画の実行に着手しました。投稿開発部のメンバーは7名と多くはないのですが、知見を自分たちのものにするためにも、インタビュー対象者のリクルーティングからすべて自分たちの手で行うことにしました。

まず有効な調査手法を手っ取り早く学ぶため、『ユーザビリティエンジニアリング*1』を参考図書とさせていただきました。書籍を読んで、サービス開発で重用する定性的ユーザー調査は大きく3つに大別されると考えました。

▼私の理解は以下の通りです f:id:natsuki53:20180419192007p:plain

当時ようやく主要機能が動くようになっていた「クックパッド MYキッチン」アプリがある状況で、投稿開発部としてユーザー調査を始めるなら、そのアプリを用いたユーザビリティテストから行うことが順当に思えました。

開発チーム全員が参加するインタビューに

インタビューを始めるにあたり意識していたことが、この取り組みにエンジニア含めたチーム全員が直接関わり、ユーザー理解を一緒に深められるようにすることです。

そのため、すべてのインタビューに中継機材とカメラを用意し、別室に待機するチームメンバーがインタビューの様子を同時中継で見られるようにしました。モニター室では各自メモを取ってもらいながら、ユーザーに聞きたいことがあれば、ファシリテーター役をしている私のPCにチャットで質問を入れられるようになっています。これによって、メンバー全員が当事者としてインタビューに関わることができるようになりました。

インタビュー開始と早々の方針見直し

ユーザーのリクルーティングや調査票・スクリプトの設計、会議室や機器設置に手間はかかったものの、リハーサルなども行いながら、何とか3週間程度でインタビューの開始に漕ぎつけました。しかも実際テストを開始してみると、新しいアプリは思った以上に円滑に操作され、用意したタスクリストは大きな問題なくこなされ、上々に過ぎていきそうに見えます。しかしその反面、ポジティブな反応も希薄なことが徐々に気がかりになってきました。

チームの興味は段々、アイスブレイクとしてヒアリングしていたユーザープロファイルに移っていきました。思えばチームメンバーにとって、「既存/潜在作者」とされる社外のユーザーにきちんと話を聞くのはそれが初めてだったのです。その人物像や生活背景への自分たちの理解の浅さに気がつくまで、時間はかかりませんでした。

結局私たちはインタビュー開始3日目には、開発中のアプリのユーザビリティよりもずっと前の段階に自分たちの問題点があると判断し、テストは早々に切り上げ、ターゲットユーザーの日常生活に潜む課題を見つけるための生成的調査へ転換することにしました。

生成的調査の試行錯誤

既に存在するプロトタイプの調査をするユーザビリティテストに比べ、まだ目に見えないユーザーの課題を対話の中で引き出す生成的調査は、難易度が高いと思います。この種のインタビューは漫然と行うと、得られる学びも漫然のまま終わることは経験してきているため、やるからには確固たる学びを得たいと考えていました。

- 苦慮したポイント1:設問設計

設問設計には当初から苦心しました。先述の『ユーザビリティエンジニアリング』には、ユーザーとの対話の中からキーワードを見つけて根掘り葉掘り質問をしていく手法をお薦めされており、「事前にインタビューガイドを作っても絶対にその通りにインタビューするな」と書かれています。しかし私たちのインタビュー対象者は、普段実際にクックパッドをご利用いただいているユーザーさんでもあるので、会話が途切れたり失礼を働くことが怖くなってしまい、結局、電話営業のトークスクリプト並みにがっちりと設問を並べた台本を用意してしまいました。

- 苦慮したポイント2:インタビュー後の振り返り

インタビュー後の振り返りの仕方にも悩みました。そもそもの課題抽出を目的とする生成調査は、検証調査やユーザビリティテストのように、答えを出す項目が先に存在するわけではありません。事前に想像できる範囲には限りがあるため、結局最初の1〜2回のインタビューを実地演習と割り切っていくつかの手法を試すしかありませんでした。

振り返りは、モニター室でインタビューを見ていたメンバーのふせんメモとホワイトボードを使うのが効率的です。ふせんメモをネガティブ/ポジティブで整理してみたり、対話中に見せたプロトタイプの種類別に整理してみたり、いくつかパターンを試した結果、ユーザーに語られたエピソードからメンバー各自気になったものを出し合い、「事実」と「(ユーザーご自身の)意見」に分けて整理する手法に今は落ち着いています。

「事実」「意見」ごとにKJ法を用いて重要そうなキーワードを見出したら、その周辺のエピソードを洗い出し、背景にある動機を想像して、各対象者が持っている「料理に関する課題」を推察して書き出せたら、その回の振り返りは完了です。

▼振り返り時の板書のイメージ(内容は架空です) f:id:natsuki53:20180419192140p:plain

振り返りの手法が固まると、インタビューの構成も、こちらが用意する質問に広く浅く答えてもらうのではなく、ユーザーの言葉で普段の料理や食事を取り巻く状況を語ってもらうものになっていきました。それに従い、設問もおのずとシンプルになります。当初20問近くあった設問が、最終回のインタビューでは2問まで減ったのは、とても印象的な出来事でした。

f:id:natsuki53:20180419192214p:plain

得た学びを確実にする作業:総括レポート

ユーザーの普段の料理の状況を根掘り葉掘り聞き出し、インタビューごとにチームで振り返りを行って、彼らが料理に関して持っている重要な課題を書き出す手法により、個別のインタビュー対象者ごとの理解は深められるようになりました。対象にしたユーザーごとに書き出した課題をリスト化して、次の施策を考えるネタにもできそうです。

しかし、インタビュー全体としての評価はどうでしょうか?得られた学びが何だったか、明言はできるでしょうか?コストをかけてしっかり行ったインタビューなので、結果はうやむやにせず、チーム全員で得た学びを確実にものにしたいです。

そこで私たちは、普段プロジェクトごとに作成している施策設計・評価用のレポート「report.md*2」を、インタビュー調査でも作成するようにしました。

インタビュー調査は機能開発とは施策設計が異なるため、report.mdの構成も少々見直し、以下の項目で作成しています。

- 目的
- 対象ユーザー
- スクリプト
- 議事録
- 結果
- 次のアクション

インタビュー調査の計画時・完了時にこのレポートをGitHub Enterpriseの自部署のリポジトリにPull Requestで作成し、チームメンバーにレビューしてもらいます。こうして1枚の簡潔なレポートにまとめることで、調査計画も、全回のインタビューを経た考察や結論も明確に提言され、またチームメンバー間での理解の差も埋められ、結果を次の施策に生かしやすくなりました。

「クックパッド MYキッチン」での検証へ

私たちはいま、このインタビュー調査から得たユーザーの課題リストを元に、次に注力するユーザー課題を絞って取り組んでいます。メンバー全員が一連のインタビューの様子や結果を共有しているため、調査以前に比べてターゲットの人物像から具体的に解決策のイメージが湧くようになったことを実感しています。

ここから得た理解やアイデアを元に、次の施策のプロトタイプを鋭意進めています。近日中に「クックパッド MYキッチン」アプリで検証を始める予定でおりますので、リリースを楽しみにお待ちください。

アプリのインストールはこちらから! App Store / Google Play

終わりに

5日間に渡りお届けしてきた「クックパッド MYキッチン」の連載記事、いかがでしたでしょうか。最後に今一度、これまでの連載記事と、執筆した開発メンバーを紹介させていただきます!

クックパッドMYキッチンアプリ、ならびに、投稿開発部にご興味を持ってくださった方、一緒に開発に取り組んでくださるメンバーを募集中です!

採用サイトまで、お気軽にお問い合わせください!!

*1:橋本徹也 著『ユーザビリティエンジニアリング(第2版)―ユーザエクスペリエンスのための調査、設計、評価手法』amazon

*2:クックパッドのサービス開発チームで行なっている、施策レポートの取り組み。詳細は私の昨年の記事で触れています。

「クックパッド MYキッチン」のアプリアイコンができるまで

こんにちは投稿開発部の佐野大河です。React Native 新アプリシリーズ連載4日目はReact Native のお話はしません。今日はその新アプリ「クックパッド MYキッチン」のアプリアイコンの制作過程について書こうと思います。

f:id:sn_taiga:20180418115300p:plain

連載初日の記事でもありましたように、クックパッド MYキッチン(以下、MYキッチンアプリ)は、レシピ投稿者に使いたいと思ってもらうことを目指したアプリです。ベースの機能はクックパッドとは大きく変わらない派生アプリのようなものですが、レシピ投稿者に好んで使い続けてもらえるように、全く新しいアプリとしてユーザーに届けたいという想いがありました。なので、MYキッチンアプリのアイコンを考えるにあたって、通常のクックパッドアプリのブランドイメージを引き継ぎつつも「MYキッチンアプリらしい」シンボルをいちから考えました。 今回はこのアプリアイコン完成までのプロセスを(迷走したことも含めて)紹介していきます。

🏃 まずは情報収集

まず最初にアイデアを出すための情報収集を行いました。MYキッチンアプリのサービス開発の過程で「アプリケーション定義ステートメントシート」というものを作成し、そこからMYキッチンアプリの要素を抽出しました。

アプリケーション定義ステートメントシート

ここではサービスのコアの価値やターゲット、ユースケース、利用シーンなどを定義しています。このシートの使い方については過去の記事でも紹介されているので興味のある方はご覧ください。

ここからサービス名の「キッチン」や「自分の場所」「記録、蓄積」「育てる」「整っている」といったものをキーワードとして上げました。また、サービスのキャッチコピーを「料理を楽しんでいるあなたに」とチームメンバーで定め、これも要素の一つとして取り上げました。

💭 モチーフを考える

これらの情報をもとにアプリアイコンのモチーフを考え始めました。

アイデアが浮かばない

がしかし、初めは思うようにアイデアが浮かばず、理想の形に全く辿り着けませんでした。

ラフスケッチ

ひとまずキッチン周りの道具で思い浮かんだものを一通り描き出してみたり、キーワードから連想する形を描いてそれらを組み合わせたりしながら色々模索しましたが、MYキッチンアプリのモチーフとしてしっくりくるものが全く出てきませんでした。

キーワードから発想を得ようとしても「自分の場所だから家?」「記録だからペン?メモ帳?」と直接的な発想しかできなかったり「こうしたら料理が楽しい雰囲気出そう?」「そもそも楽しいってどういう状態だ?」と具体的なイメージが定まらずにしばらく迷走しました。

f:id:sn_taiga:20180418143042p:plain

それでも現状思い付くものを具体化してみましたがとても納得できるものではありませんでした。

🔍 サービスを理解する

これ以上ペンを動かしても何も出てくる気がしなかったので、あらためてMYキッチンアプリというサービスについて理解しようと立ち戻りました。先輩デザイナーからのアドバイスも受けながら、まずはサービスを表現するためのキーワードの抽出を行いました。

キーワードを抽出する

初めはサービスのコンセプトやキャッチコピーを眺めてそれをただそのまま引用するようなことをしていましたが、視野を広げて「料理」に少しでも関係のありそうな形容詞を一旦洗い出し、その中から「MYキッチンらしい」と思えるワードを絞り込みました。

料理に関係しそうなキーワード

「MYキッチンらしいものは何か」「MYキッチンを使ったユーザーにどう思ってもらいたいのか」という考えのもと、イメージに近いものをオレンジ色に、逆にこれは違うというものを青色にしてチームメンバーに共有しました。メンバーからのフィードバックも受け、最終的にMYキッチンアプリを表すキーワードを以下のように整理しました。

f:id:sn_taiga:20180418142212p:plain

「楽しい」に「充実感」が加わり、自分の作った料理を見返して達成感を得たり自己満足したりするような、そういう楽しさが大事なんだとイメージが具体化しました。また、新しい料理を作っている人たちの「アイデア」や「創造性」「自由さ」といったものもMYキッチンアプリにとって重要な要素だと気づくことができました。

キーワードを視覚化する

整理したキーワードをもとにアイコンのムードボードを作成しました。ムードボードとは、具体的なアウトプットを出す前にデザインの雰囲気やトーンを視覚化したもので、他者との認識のずれをなくしたり、発想の元にしたり、その後の制作の手助けをしてくれます。

f:id:sn_taiga:20180418142350p:plain

ムードボードを作成することで抽象的だったキーワードのイメージが視覚化されていきます。そうすると全体を通して見えてくるものもあり、例えば「静的じゃなく動的」「動的ではあるがカオスまではいかず秩序のとれた形」「単色ではなく複数色」といったように、MYキッチンらしさを表す上でキーになりそうな要素が色々と見えてきました。(このとき、最初に考えた案がいかにMYキッチンらしさを表現できていなかったかをあらためて実感しました)

サービスの人格を作る

アプリのイメージをより固めるために「MYキッチンアプリというサービスを擬人化したらこんな人」を視覚化しました。

サービスの人格

ベースとなる人物やプロフィール写真はチームメンバーが共通で知っている人物を用いると認識のずれが少なくなって良いです。

f:id:sn_taiga:20180418142422p:plain

また、この人格を憑依させたスマホのホーム画面を作り、アイコン案を並べて見てモチーフやクオリティの良し悪しを判断するのに用いました。

✍️ 形にする

ここまで整理した要素を元にもう一度手を動かし始めました。

ラフスケッチ

初めのときに比べ表現したいキーワードのイメージが固まり、ムードボードを作成したことで形の着想もしやすくなりました。キーワードから連想できる形を描き出し、具体化して色を付けたり要素同士を組み合わせたりしながらモチーフのアイデアを出していきました。

ラフスケッチ

結果、波を描いた鍋またはボウルから具材が広がっていく形が、料理をしている人の楽しさや創造性といったものを表現できそうで良いとモチーフの方向性を定めました。また、配色はブランドカラーのオレンジをメインに、アプリの主要機能である「キッチンモード」のテーマカラーに用いている緑と、色相の近い黄色または茶色を段階的に使い、動きを作りつつ全体をまとめる方向で進めました。

f:id:sn_taiga:20180418142457p:plain

上部のパーツを抽象化させ、配色や形状のパターンを出し、その中からbowlの5番が良いとなり最後の詰めの作業に移りました。

🎨 磨き込む

アプリアイコンとしてのクオリティを上げるための磨き込みを行いました。

視認性を上げる

「ホーム画面で他のアプリと並べたときに埋もれてしまわないか」という点を意識し、アイコンの視認性や存在感を上げる修正を行いました。

f:id:sn_taiga:20180418142542p:plain

まず上部のパーツをよりシンプルにしました。パーツ数が減って動きや広がりの印象が弱まった分、葉の大きさに差を付けて奥行きを出したり、緑の明度を若干下げてくっきりさせたり、パーツの向きやバランスを調整したりしました。

f:id:sn_taiga:20180418142611p:plain

柄の形状もいくつかパターンを試し、ホーム画面で見たとき一番視認性の高かった5番を採用しました。

このように形状や色味の調整を行いましたが、まだ他のアプリアイコンに比べて印象が弱いなと思うところがありました。そこで、元々全体のまとまりを出すために配色を3色に抑え段階的に使っていましたが、オレンジや緑に対してアクセントになる色を取り入れて印象を強めることを考えました。

意味を持たせる

印象を強めるのと同時に、色や要素に意味を持たせることも合わせて行いました。

ここまで漠然とボウルや具材と置いていたけど「この人が作っているものは何だろう」という疑問を抱き、「ボウルと泡立器ならスイーツ系かな」「緑は葉を表しているけど黄色の丸は何?」「赤青系の色ならベリーと連想できそうだ」といったように発想し、モチーフと色との意味付けをしました。

そうと決まれば、赤青系の中からベストな色を選んでいきます。

f:id:sn_taiga:20180418142647p:plain

予定通りアクセントの色を加えたことで全体的に印象が強まりました。赤〜青とその周辺の色を試し、サービス人格と比較したりホーム画面に置いたりしながら評価していきました。結果、赤寄りの色は楽しさが出る反面若々しすぎて人格よりも5~10歳程下だなと思ったり、紫寄りは少しお洒落感が出てちょっと違うなと思ったりして、2番の青が良さそうとなりました。

f:id:sn_taiga:20180418142711p:plain

さらに青の中でも微調整を行い、最終的に2_Aが一番アプリのイメージに一致していてこれがベストだと決定しました。

完成

アプリアイコン

あらためてクックパッドMYキッチンのアイコンは、料理を作っている人たちの「楽しさ」や「充実感」、新しい料理を生み出す「豊富なアイデア」や「創造性」「自由さ」、またそれらが蓄積し広がっていく状態を表しています。

🍵 まとめ

今回の制作過程で強く実感したのは「形が出てこない = サービスの理解が足りていない」ということで、もちろん自身の発想力不足というのもありますが、初めは「良い形を思いつかなければ」とアイデアを捻り出す感覚だったのに対し、サービスの理解や整理を徹底した後では「自然に形ができていた」という感覚に近く、最終的に納得のできる形にもっていくことができました。 紹介したプロセスは一例で他にも良い手法が様々あると思いますが、これからサービスのアイコンやロゴを作ろうとしている方の参考に少しでもなれば幸いです。明日はディレクターの五味夏季さんから「料理する人の課題を起点に施策を作る試み」のお話です、お楽しみに!

投稿開発部では、今回作成したアプリアイコンのコンセプトを、アプリ内でも強く実感できるようなサービス開発をこれからどんどん行なっていきます。興味を持たれた方がいらっしゃれば採用ページを是非ご覧ください。軽く話を聞いてみたいという方は@sn_taigaにDMしていただいても大丈夫です😄

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