目的に向かって作り込む、ユーザーを動かすためのデザインの考え方

投稿開発部のデザイナー平塚です。クックパッドにレシピを投稿してくれるユーザーのための機能やサービス全般のデザインを担当しています。
今回は最近投稿開発部で行なったキャンペーンのLPのデザインを具体例に、私の考えるデザインプロセスをご紹介します。

施策の概要

日頃からクックパッドを利用してくれているユーザーに感謝を込めて、投稿した自分のレシピでレシピ本を作れるというキャンペーンを実施しました。 伝える手段としてキャンペーンLPを作成し、対象者にはメールで告知しました。

作成したLPはこちら

デザインコンセプトを決める際に考えること

大きく分けて、ユーザーの体験とクックパッドが伝えたいことの2つを考えてデザインに落とし込んでいきます。

A. ユーザーの体験を整理する

まず、LPを見たユーザーにどうしてほしいかを考え整理していきます。
ユーザーにレシピ本を作ることが目的だと思ってもらうことを考える上で意識しました。ユーザーストーリーをもとに要点を洗い出します。

LPのゴールは「あのレシピ載せたいな！」と思って応募してくれることで、それを実現するためには、LPを見たユーザーに以下の3点が起こることが重要になりそうです。

• 1.面白そう！魅力的！私も作りたいと思う
• 2.手元にどんなものが届くのかがイメージできる
• 3.どうやって参加できるのかが分かる

この3点をベースに構成していきます。

1. 面白そう！魅力的！私も作りたいと思わせるには？

LPを開いてすぐにユーザーの興味を掴めるよう、ファーストビューでどんな嬉しい体験ができるのかが想像できる状態を目指します。
キャッチコピーはユーザーインタビューやターゲットユーザーに近い社内スタッフの意見をもとに決定しました。 またレシピ本のイメージ写真をキャッチコピーの直下に置くことで、訴求する体験と合わせてレシピ本をユーザーがより想像しやすくなるようにしました。

2. 手元にどんなものが届くのかをイメージさせるには？

さらにレシピ本のイメージを膨らませ、ユーザーの頭の中でレシピ本がより鮮明になるようにします。
レシピ本のサイズや質感、厚み、それにどんな情報が載せられるのかが分かる写真を用意しました。

3. どうやって参加できるのかを伝えるには？

レシピ本に興味を持ってもらえたところで、自分はキャンペーンに参加できるのか？どうやって参加するのか？を説明します。
応募条件 → 締め切り → 具体的な流れ という順で重要な情報から先に記載していき、説明が一通り完了したところで応募導線を配置しました。

これらをもとにワイヤーフレームを起こして、情報の優先順位付けや読ませるもの・見せるものの棲み分けをしていきます。

ワイヤーフレームができたらチームで議論を進めます。
キャッチコピーについてはディレクターがテコ入れしてくれてとても良くなりました。

B. 伝えたい世界観を整理する

ワイヤーフレームの作成と同時並行で、デザインコンセプトを固めていきます。
クックパッドが伝えたいこと・ユーザーに感じて欲しいことを整理し、ビジュアルに落とし込みます。 今回は洗い出した要点の中でも「面白そう！魅力的！私も作りたいと思う」部分をさらに掻き立てるようなデザインを目指しました。

キーワードの洗い出し

まず「何を感じたらレシピ本を作りたいと思うか」を考え言語化します。
ユーザーインタビューでレシピ本について話してくれた内容をもとにキーワードを洗い出しました。 そこから、紙ならではの魅力や、普段ユーザーが料理メモやノートに整理するときに思っていることを中心にキーワードを選定しました。

• レシピ本
• 紙
• ぬくもり感
• 手作り感
• 手書き感

レシピ本キャンペーンの世界観を可視化するために、選定したキーワードを表現できる要素は何かを考えていきます。

紙の質感、ぬくもり感

レシピ本を手にとってページをめくる時に感じる紙ならではの質感・ぬくもり感を表現したいと思い、テクスチャの素材で表現できないか考えました。
雑誌や料理本を参考にしたり、Photoshopのテクスチャの素材を探して決めました。

手作り感、手書き感

これは丸みがあって人が書きそうなフォントで表現しようと考えました。
ただユーザーインタビューで見せていただいた普段書く料理メモやノートのような雑な感じとは差別化したいので、字として崩れすぎていない・きれいで憧れるようなフォント選びを意識しました。
出せるだけフォントを集めてPhotoshopで並べ、スマホ画面でのサイズ感、カーニングの扱い、ひらがな・漢字・数字のバランスなどを見て厳選していきます。

色

レシピ本の質感と手書き感から連想するイメージが見えたのでそれに合う色を探します。
基準としては「明るい印象を持ちつつ、落ち着きがある」で、前述で決めたデザインとの相性から緑を連想し、彩度低め・明度高めでカラーパレットを作成しました。
最終的にクックパッドのデザインシステムに定義されている Mint #40b2aa が考えていたものと近かったため、カラーパレットとしました。

クックパッドであることが分かる

LPなのでクックパッドであることが分かる要素も重要です。
ここまで考えたデザインがクックパッドらしさと少し離れているなと感じたので、色を足すことにしました。
ここでもクックパッドのデザインシステム Mint #40b2aa と相性の良い Orange #ff9933 を選定し、LPデザインのアクセントカラーとして使用しました。

まとめ

ユーザーの体験整理と伝えたい世界観の整理を同時並行することで、デザインコンセプトは行き過ぎていないか、逆に体験を意識しすぎてメッセージ性がないものになっていないかバランスを見ながら進めることができます。

今回はキャンペーンLPを具体例にあげましたが、このデザインプロセスはアプリUIなど他のデザインでも同じように考えることができます。
デザインには様々な手法があり、今回ご紹介したものが万能ということではありませんが、自分の中ではデザインしやすいやり方なので数ある方法の一例として捉えていただければと思います。

最後になりますが、クックパッドではより良いユーザー体験を届けていきたい！というデザイナーを募集中です。 クックパッド株式会社 採用情報

Tokyo Machine Learning Kitchen

Hello, I'm @lunardog. I work in Cookpad's Research and Development team as a machine learning researcher. I also host Tokyo Machine Learning Kitchen events. If you'd like to attend, you can sign up using meetup.com or connpass.

I first heard about Cookpad back in 2012 when I joined Tokyo Rails Meetup. At the time, Rails was immensely popular in the developer community and many coders, if not working with Rails in their day jobs, would learn Rails and build hobby projects in Rails after hours. I remember being quite impressed by the talks, especially the ones by Cookpad employees. I was amazed by Cookpad's hospitality and willingness to share the event space, the expertise of the staff and even contribute to open source projects. Cookpad was truly the cornerstone of the Rails community for Tokyo.

(A talk at the Tokyo ML event)

Fast forward to now. Machine Learning in general and Deep Learning in particular is the hot topic. I joined Cookpad's newly created Research and Development department as a Machine Learning researcher. Cookpad is, as it was those years ago, a dynamic, fast-paced company with a positive attitude to open source and sharing knowledge, be it recipes, open-source code or datasets for machine learning researchers. I have decided to make it my mission to contribute to the community of Deep Learning researchers in Tokyo by organizing Tokyo Machine Learning Kitchen events. Much like Tokyo Rails, the ML Kitchen events are a place where professionals and hobbyists can get together to share their interests, network and enjoy a good meal.

The focus of ML Kitchen events is networking between practitioners of Machine Learning. You can expect presentations on:

• professional or personal ML-related projects
• machine learning, deep learning, data science walkthroughs
• paper reviews: own or found somewhere
• reviews of machine learning frameworks and libraries
• really interesting talks about math and statistics

To further facilitate networking, Cookpad provides snacks prepared in the kitchen where the event takes place. This is why it's called "ML Kitchen", by the way. It takes place in a kitchen.

Talks are in English, but it's not a problem to do a talk in Japanese, if the slideshow is in English. We usually have a keynote talk, followed by a snack break and a series of lightning talks. We end the evening with more networking, exchanging of business cards, eating and drinking.

If you'd like to share something with the Machine Learning community in Tokyo, contact me through our group page or meetup or raise an issue in our github repository.

Hope to see you soon!

RubyKaigi 2018 ありがとうございました！

人事部の@mamiracle__ です。好きな Ruby のメソッドは Enumerable#entries です。みなさまからの entries をお待ちしています💖

さて、クックパッドは先日の RubyKaigi 2018 に Ruby Committers Sponsor と Network Sponsor としてスポンサーをいたしました。私たち人事メンバーも、ブースやドリンクアップを通じて、RubyKaigiを盛り上げることに貢献できたのではないかとおもっています。

会期中には、クックパッドに所属する桑原仁雄（@pocke）、Kirk Haines（@wyhaines）、 笹田耕一（@ko1）、遠藤侑介（@mame）がスピーカーとして登壇し、심 상용（@riseshia）がライトニングトークを行なっています。また、RubyKaigi運営では、オーガナイザーとして @nano041214、@asonas 、@sorah が、スタッフとして @mozamimy が活躍してくれました。

イベント参加のご報告として、当社所属のメンバーの発表やブースの紹介をいたします！！！

発表

A parser based syntax highlighter

桑原仁雄（@pocke）からはパーサーベースのシンタックスハイライターであるIroに関して発表がありました。通常のシンタックスハイライターで利用されている正規表現では、複雑なプログラム表記でうまく機能しなくなってしまいがちですが、パーサーベースであればそういった問題が生じないそうです。また、gemとして提供されているので、Vimだけではなく色々なエディタでも活用できるとのことです。

また、RubyKaigi効果で意識が高まった本人からも力強い宣言がでておりますので、ぜひ今後にご期待ください！

CTOに「来年のRubyKaigiではComitter vs the worldで前に出たい」などと宣言した

— Pocke(ぽっけ) (@p_ck_) 2018年6月5日

It's Rubies All The Way Down

自身が2001年以来の Rubyist であると紹介した Kirk Haines（@wyhaines）からは、主に Web アプリケーションを動かすときのテクノロジスタックについて、それぞれの時代における Ruby で作られたソフトウェアの紹介や、概念実証（Proof of Concept）が示されたりしました！

特に Web アプリケーションにおいては Rack の登場がキーポイントになり、ミドルウェアとWeb サーバーの関係がそれ以前と比べてシンプルになったという説明は納得できました。また、10年以上前の Ruby では、ロガーやロードバランサーなどをやるには遅すぎると言われることがありましたが、近年の Ruby では十分なパフォーマンスが確保できることも示され、Ruby の進化がよくわかりました。

Guild Prototype

Ruby の新しい並行プログラミングモデルである Guild について、笹田耕一（@ko1）から発表がありました。冒頭では、シングルプロセスで合計40コアのCPUを使いきるデモがされていて、未来感ありましたね。

従来の並行プログラミングでは、データを共有するために競合状態をプログラマが頑張るか、データを共有しないという手法が主にとられてきました。Guild では、メンバーシップという概念を導入することで、容易にデータを共有しつつも、マルチコアを活用できるようにしています。Rubyで実用段階になるのが、今から楽しみです！

Guild Prototype from Koichi Sasada

Type Profiler: An analysis to guess type signatures

遠藤侑介（@mame）の発表では、提案されている複数のRubyの型システムを概観したあと、Ruby 3に必要となってくる型データベースのために、型プロファイラーの導入が提案されました。型プロファイラーは、いくつかの手法で型を推測するための機構です。静的解析や動的解析をつかって、いい感じに型を推測できないかという試みです。それぞれの手法にメリットやデメリットがあって、まだまだ難しいところも多いようですが、 Ruby の改善が着実に進んでいる様子が伝わってきました。

Type Profiler: An Analysis to guess type signatures from mametter

また、ブースの質疑応答タイムでは、海外のファンからチョコレートのプレゼントをもらうなど、大人気ぶりを発揮していました！

ライトニングトーク

Find Out Potential Dead Codes from Diff

Cookpad のような長期でメンテナンスされているコードでは、どうしてもどこからも呼び出されないデッドコードが生まれてしまいます。심 상용（@riseshia）のライトニングトークでは、未使用コードの差分からデッドコードを検出する手法について発表がありました。クックパッドでも実際に使われて効果がある手法とのことです。

ブースやグッズ

クックパッドが海外展開している国を示した世界地図や、「Cookpad storeTV」、ユーザーボイスやミッションなどを詰め込んだオリジナルボードなどを展示しました。

（地図にはクックパッドが展開している68カ国を⭐シールで示しました）

ノベルティには今年初めて作った「ロゴ入りお箸」や、仙台をイメージした「ずんだ餅どら焼き」を用意しました。どら焼きは、仙台の老舗和菓子屋さん「こだまのどら焼き」さんに相談をして作っていただきました。控えめな甘さのずんだ餡と、もちもちの食感が美味しくてあっという間に完売してしまいました！

【RubyKaigi 2018のスポンサーで仙台にきています♦️】 クックパッドは毎年、Rubyというプログラミング言語のカンファレンス #RubyKaigi に協賛しています🤗 2018年は5/31〜6/1まで #仙台 での開催なので、 #ずんだ餅どら焼き を作ってみました❤️ 仙台の老舗 #こだま さんのどら焼きです！ クックパッドでは、ユーザーさんにより速く良い価値を届けるために、技術もすごく大事にしているんですよ！ 今後はそういったこともご紹介できればと思います🎶 #クックパッド #テクノロジーカンパニー #どら焼き #ずんだ餅 #仙台名物 #こだま #cookpadorayaki #クックパッどら焼き #rubykaigi #rubykaigi2018 #cookpad #makeeverydaycookingfun #毎日の料理をたのしみにする #♦️ #💎 #🖥 #🥞 #🤗

クックパッドHRさん(@cookpad_hr)がシェアした投稿 - 2018年 5月月31日午後10時51分PDT

その他ブースでは、クックパッドでRubyフルタイムコミッターとして活躍する遠藤侑介（@mame）と、仙台のずんだ豆にちなんで「mameさんの豆つかみ」も実施！CTOの成田一生（@mirakui）をはじめとして、まつもとゆきひろさん（@matz）さんやAaron Pattersonさん（@tenderlove）さんも参加してくださる盛況なイベントとなりました！

（今回の最速王はクックパッドHRメンバーで叩き出したタイムは0:06:92でした！）

Cookpad X RubyKaigi 2018: Day 2 Party

2日目の夜に開催したパーティには、90名近くのゲストが参加してくださいました！RubyKaigiの会期中にパーティを企画するのは、クックパッドにとってこれが初めてでドキドキしていましたが、多くの方にお楽しみいただけて本当に良い機会となりました！

【Asakusa.rb × Cookpad】Meetup after RubyKaigi 2018

RubyKaigi 2018終了後の翌火曜日には、Asakusa.rbとのコラボレーションイベントを開催しました！Railsコミッターであり、Rubyコミッターの松田明さん（@amatsuda）に司会を務めていただき、RubyKaigi 2018 の余韻を楽しみました。

この日は「Rubyコミッターによる RubyKaigi 2018の見どころ振り返り」「RubyKaigi 2018会期中に決まったRubyの次の方向性について」というふたつのテーマを設定。笹田耕一（@ko1）と遠藤侑介（@mame）を中心に、飲みながら食べながら語り合いながら、会場全体で楽しむことができました。

（クックパッドイベント恒例のキムラシェフの絶品ご飯）

おわりに：Rubyとクックパッドについて

クックパッドは、2008年にRuby on Rails へとリニューアルしてから、世界的にも大規模な通用事例として知られてきました。Ruby への貢献を現在も強化しており、二人のフルタイムコミッターを迎え入れクックパッドで次世代Ruby の開発に取り組んでいます。

また、技術をわたしたちが使うことはもとより、社外にも共有することで価値を生むようなソフトウェアやライブラリは、積極的にオープンソース化を行い公開しています。

今後もRuby を含む、さまざまなオープンソースソフトウェアの発展に貢献できるよう、クックパッド一同頑張りたいと思います！

次は8月30日から開催されるiOSDC Japan 2018に参加する予定です。みなさまにお会いできることを楽しみにしています😄

（来年こそはRubyKaigiに参加した社員全員で集合写真撮るぞ！）

クックパッドでRubyを書きたいなと思ったら...
- バックエンドエンジニア（料理動画・広告配信）
- UXエンジニア
- バックエンドエンジニア（決済基盤）
- Webアプリケーションエンジニア
- セキュリティエンジニア
- ソフトウェアエンジニア (Site Reliability)