こんにちは。クックパッド ダイエットのデザイナーの新妻です。 クックパッド ダイエットでは、「正しく食べてやせる」をコンセプトに銀座と代々木にある店舗でのダイエット指導と、ダイエット情報を毎日配信するメディアサイトの運営を管理栄養士と一緒に行っており、私はデザインやコーディングを担当しています。
今回は新規コンテンツを作る中で、ユーザーの声をどのようにデザインに反映していくかというお話をさせていただきます。
どんな気持ちでダイエットラボを利用している？
クックパッド ダイエットは、ユーザーの約85%が女性で、年齢でいうとメディアの方は20代〜40代と幅広く、店舗の方は40代の方を中心にご利用いただいています。
サイトや店舗ユーザーの目的の多くは“ダイエット”ですが、店舗にいる管理栄養士を通して「歳を重ねるごとに痩せにくくなって困っている」「体調が良くないので改善したい」という、より具体的な悩みがきっかけでお店に訪れる方が一定数おり、これらの悩みは更年期世代に多く「やせたい」という理由だけでなく「体調不良」に悩んで不安な気持ちでダイエットラボを訪れている方がいることがわかりました。
ユーザーの不安を解決できるコンテンツってなんだろう？
「やせたい」という思いから、自己流の食べない・偏ったダイエットを行ってしまう方が多くいらっしゃいます。その結果、一時的に体重が減少しますがリバウンドの可能性も高く、何より体のバランスが崩れ更年期症状が悪化してしまうことも・・・しかし専門家の指導のもと正しい食生活を送ることで心身の不調が改善されることもあります。
そこで、私達の提案する食事改善サービスを知ってもらうきっかけとして【更年期診断】というコンテンツを作る事になりました。更年期症状に悩む方に、いくつかの質問に答えていただき、自分の現状を把握してもらったうえで、改善案の一つとして、ダイエットラボでの食事改善を提案するというコンテンツです。 クックパッド ダイエットにはダイエット診断という100万人以上が実施した大人気コンテンツがありますので、そのシステムを活用し質問内容と診断結果に関しては専門家の指導のもと医学的根拠に基づき作成しました。
各質問に入れるイラストのテイストをユーザーインタビューを元に決めることになり、「最近更年期症状を感じる」という数名のユーザーさんに直接店舗にお越しいただき、３つの質問に答えていただきました。
1.イラストのテイストについて
まず更年期診断の挿絵として良いと思うイラストと、良くないと思うイラストを理由と共に答えてもらいました。最初に仮設を立てた段階では、ターゲットとなる40代50代の女性は、人間味があり感情移入しやすいAやEのようなテイストが有力だと思っていました。逆にBやCは症状に悩んでいる人にとっては少し軽すぎるタッチでふざけたように感じられないかが懸念点でした。
しかし結果はBやCのようなデフォルメされたイラストが人気で「LINEのスタンプのようなイラストで見慣れているので良い」「おしゃれでかわいい」という意見があり、逆にAのようなイラストには否定的な意見が多く、「人間っぽすぎて嫌」ということでした。
仮説の段階では、感情移入のしやすさがポイントだと思っていましたが、実際に話を聞いて見ると更年期症状というつらい経験に対しての質問に答えていく中でイラストのリアルさが逆に気持ちをネガティブな方へ導いてしまうということが分かりました。
2.キャラクターの年齢について
次にイラストを描くにあたり、年齢の表現を探りました。 この4種類のイラストの中で、「自分に近い年齢のイラストはどれですか？」という質問に対し、Bに答えが集中しました。
理由と聞くと「本当はCかもしれないけど、加齢を認めたくない。」「Cがあなたです。と言われたらショック」「現実はDかもしれないけど、気持ち的にはBでいたい！」という実年齢よりも少し若く見えるイラストのほうが良いという意見が多かったです。
これは以前、50代男性向けの健康サービス開発時にも同じようなことがあったことを思い出しました。ストックフォトサイトで「50代、男性」で検索して出てきた画像をユーザーイメージとして提案したら、ちょうどユーザーと同じ年齢層の担当者から「この写真の人は、ちょっと老け過ぎじゃないか？もう少し若い人がいいな。」と言われたことがありました。イラストでも写真でも、実際よりすこし若く見えるほうが感情移入しやすい傾向があるようです。
3.キャラクターの表情について
最後に表情について質問しました。更年期診断は、性質上しかたないのですが体の不調に関してなどマイナスな質問が多くあります。それらの質問の挿絵として、このイラストを見てどう感じるか答えてもらいました。
結果は「この人は本当につらそうな表情で、私も気分が落ち込んでしまいそう」「表情が暗すぎるのでは？」という意見で、私自身は「ちょっと疲れたなぁ」というイメージでこのイラストを選んでいましたので、実際のユーザーが予想以上にマイナスイメージを受けていることに驚きました。 みなさんはどう感じるでしょうか？
ユーザーの声をデザインに反映する
今回ユーザーインタビューをしてみて、私達が思っている以上に更年期症状というのはつらく、不安な状態であるということが伝わってきました。その心理状況はイラストの見え方にも影響しており、表情やリアルさによっては、この診断を利用することでさらに気分が落ち込んでしまう可能性もあることがわかりました。
それらを踏まえ、更年期診断のイラストはなるべくユーザーが暗い気持ちにならないように、以下の様なデフォルメされ年齢がわかりにくく、色味が綺麗なものに決まりました。
診断全体のデザインも、クリーム、ピンク、グリーンなどを使い、フレームの角は丸みを持たせるなど優しい雰囲気に仕上げました。
思い込みをすてて、よりユーザーの気持ちに近づくために
サービスを作る際はユーザーの年齢や利用する環境などから、文字のサイズやボタンの位置など最適なUIを考えるのはもちろんですが、どのような心理状態で使っているのかというのも重要なポイントだと思います。
今回は「ユーザーの気持ちが落ち込まないように」という点に特に注意して制作を進めました。しかし、いくら開発者の中で想定で話し合いをしても、実際のユーザーの声を聞くまで気づけないこともあります。
まずは、小規模に身近な人へのインタビューから始めても良いかもしれません。