投稿開発部のデザイナー平塚です。クックパッドにレシピを投稿してくれるユーザーのための機能やサービス全般のデザインを担当しています。
今回は最近投稿開発部で行なったキャンペーンの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など他のデザインでも同じように考えることができます。
デザインには様々な手法があり、今回ご紹介したものが万能ということではありませんが、自分の中ではデザインしやすいやり方なので数ある方法の一例として捉えていただければと思います。
最後になりますが、クックパッドではより良いユーザー体験を届けていきたい！というデザイナーを募集中です。 クックパッド株式会社 採用情報