『うちれぴ』は、サッポロホールディングスによる新たなスマホアプリです。

家族とのコミュニケーションを軸に家事負担軽減と「食」の楽しさや喜び創出を目指しています。現在食品メーカー30社近くによる約2万件のこだわりレシピを紹介しています。

フラーは「うちれぴ」に関するデジタル領域の戦略づくりからスマホアプリの企画、デザイン、開発などアプリのローンチに至るまでの幅広い支援をさせていただきました。

フラーのメンバーはどのような思いで、どのようなことに取り組んできたのでしょうか。ディレクション、開発、デザインを担当したメンバーそれぞれが「うちれぴ」のプロジェクトを振り返りながら思いを綴りました。

今回の書き手はデザインを担当した富山さんです。

フラーでデザイナーをしている富山です。

うちれぴのメインデザイナーとしてアプリ初期開発フェーズから現在のグロースフェーズに至るまで、UI設計・クリエイティブ制作を担当してきました。

今回はうちれぴアプリのデザインの裏側をお伝えできればと思います。

ごはん作りって、がんばらなくて良いらしい。

うちれぴは、家庭内の家事負担に着目し、家族の毎日のごはんをより良くするための手助けをしたいという思いから生まれたサービスです。

特に「毎日の献立を考えることが大変」という課題を解決するため「がんばらないごはん作り」をコンセプトに、生活の中に「今日のごはんを登録して記録していく」というアイデアを元に検討を進めました。

うちれぴアプリには以下の3つの体験があります。

1. 「今日のごはん」を決定

食品メーカーをはじめとした約30社が提供する約2万件のおすすめレシピからお好みの料理を選んでおぼんの上に盛り付けるなど、直感的で食卓のイメージが湧きやすいUIで毎日の献立作りを支えます。

2. 「ごはんトーク」で家族とコミュニケーション

「うちれぴ」のレシピで作った料理を食べた後の感謝や感想は、家族だけのチャット機能「ごはんトーク」におまかせ。

どんな食事をしたのかの記録はもちろんのこと、「おいしかった！」「今度はあれがたべたい！」といった食事にまつわる家族のコミュニケーションを生み出します。

3. 「うちれぴ帳」でごはんと家族の思い出を記録

家族のお気に入りのごはんの感想を書いて記録することができる機能です。

おいしかったおすすめレシピや家族みんなが大好きなおうちの殿堂入りレシピをまとめた「うちれぴ帳」を作成し、家族で共有できるごはんの「思い出」を記録します。

うちれぴを使えば使うほどうちれぴ帳の記録が充実して、今日の献立はどうしよう？ と悩んだ時に家族の好きなレシピからごはんを選んで今日の献立を決めやすくする価値を提供するアプリです。

開発プロセスのまとめ

うちれぴのプロジェクトのはじまりからお話しさせていただきます。

そもそもは、クライアントであるサッポロホールディングス様（以下、サッポロ様）の社内コンペで、ご担当者様の提案したサービスが事業化への挑戦権を得たことがはじまりになります。

そこから現在のうちれぴのβ版である「うちレピ」がスタートしました。

機能としては、LINEで友達登録をするとレシピの閲覧・検索・食材の在庫管理などができるサービスです。（その頃からフラーのディレクターは事業化支援という形で参画していました。）

2021年10月、本格的に事業化するためにプロジェクトがスタートし、UIデザイナーとしてジョインしました。

そして2022年7月、正式に「うちれぴ」がiOS・Android共にリリースされました🎉

うちれぴのアプリの初期開発フェーズは、ざっくり企画・デザインフェーズと開発フェーズに分けられます。

現在は機能改善を行うグロースフェーズに移行しています。

企画・デザインフェーズ

サッポロ様とコミュニケーションを取りながら、主にディレクター・デザイナーで並走して、どんなサービスにするのか？を定義した時期です。

このとき携わったデザイナーは2名で、もう一人のデザイナーがブランディングを、わたしがUIを担当しました。

デザイナーとしてはカスタマージャーニーマップでユーザー行動を可視化し、その上で画面設計を行い、ユーザーインタビューなどを経て検討・改善を繰り返した時期です。

以下のような流れで進めました。

1.情報整理〜アプリのゴール設定

アプリのコア機能を探るため、ディレクターさん主導のもとサッポロ様とディスカッションを繰り返しました。

デザイナーはアイデアを手描きラフに起こすなど、チームが共通認識を持つためのたたき台を視覚化し、それを共有して、社内メンバーの意見・サッポロ様の意見を取り込んで、アウトプットする役目を担っていました。

2.ターゲットユーザーの行動整理

ユーザーの理解をより深めるため、本を読んだりネットで調べたり、なるべくターゲットと近しい人に聞いてみたり、カスタマージャーニーマップでユーザーの生活と気持ちを追ってみたり。

納得できるまで、メンバーと共に様々なユーザー行動を理解するための整理を行いました。

ただ言われたものを作り始めるのではなく、ユーザーと向き合う時間をとことん持つことが出来るのもフラーでデザインをする良さではないかと思います。

3.WF設計

各画面において、使う上でユーザーがどんな時にどんな気持ちで使うのか、課題に対してどんな状態になっているのが理想的か、理想の状態にするには画面上にどんな機能や情報があるべきか、などを言語化しながら整理して進めていきました。

この段階ではスピード重視で、なるべく早く1〜3の工程を繰り返し改善点を話し合う、というサイクルを回せるように意識していました。

特に0→1の案件だと、「最初は何もないから誰も答えを知らない」状態から始まるので、デザイナーはチームメンバーとの認識をなるべく早くアウトプットし、最適に近づけていく努力をすることが重要だと感じました。

なので、自分の中で考えられる一番良いと思う答えが出せたら、多少個人的にもやもやしていてもアウトプットをチームメンバーに共有するようにしていました。

4.ビジュアライズ設計

元々ビジョンなどを先にメンバー内で共有していたため、うちれぴの理想とする世界観はチーム内で認識は揃っていましたが、ビジョンである「家族の食を通じて、よりあたたかい世界に」を実現するために、そこからさらに細かくメンバーとサッポロ様で検討を進めていきました。

うちれぴではサービスの印象を表す上で「あたたかい」というワーディングを元々よく使っていたのですが、うちれぴにとっての「あたたかい」を目に見える形にすると寄り添うような柔らかいあたたかさなのか、ポジティブな明るさのあるあたたかさなのか、言葉の持つイメージの細部まですり合わせながら進めていきました。

どんなビジュアルが最適なのか、中立的な案・振り切った案など様々な方向性から3案ほどイメージを作成しました。

うちれぴと聞いて思い浮かぶ情景やイメージのすり合わせを社内・サッポロ様と丁寧に行うことで、その後の他の工程やアプリの顔であるホームのデザインなど、一貫性のあるビジュアル作りをすることができました。

複数人のデザイナーで共同作業を行うことは（特にデザインルールが固まっていない段階において）難しいですが、デザインパターンを出す時においては複数人でデザイン案を出し合った方が表現の幅が広がり良かったと思います。

開発フェーズ

エンジニアさんと話し合いながら、デザインと実装をすり合わせて落とし所を探りながら、どんな使われ方にするのか？を定義した時期です。

デザインデータ作成

かなり短期間でリリースを予定していたプロジェクトであったため、基本的に直接Slackでエンジニアさんとやりとりしながら仕様ズレをなくしつつ進めていきました。

スピード感がある分、コミュニケーションロスも起こりやすかったので、Figmaに「FIX済み」「確認中」などステータスを画面ごとに付与し管理を行っていました。

このフェーズにおいて、ディレクターさんから伝聞で意思決定を聞くのではなく、自分が仕様などをメンバーと共に考えられたこともやりがいを感じられたシーンのひとつです。

ネーミング・ロゴ作成

開発用デザイン作成と並行して、ネーミングやロゴ作成も進めていきました。

まず取り組んだのは言葉で発散を行いモチーフを絞り込み、ラフ案に起こすこと。

ここでもデザインパターン同様に、複数人のデザイナーで共同作業を行うことでそれぞれの違うアイデアを集結させることができました。

グロースフェーズ

機能改善

リリースを経て、次のグロースフェーズに移っていきます。

リリース前とは違う点として、App StoreのレビューやKARTEによる分析結果などから、実際に使ってくれている実際のユーザーの声から課題抽出を行えるようになりました。

ユーザーインタビューを適宜実施したり、各画面〜画面における離脱率なども細かく分析を行いながら、デザインを行なっています。

思ってもみなかったところで改善が必要なことが分かることもありました。（思ったより、新しい機能をユーザーに使ってもらうことの難しさも…）

作って、リリースしてみて、ユーザーの声をもらって、のサイクルで改善を続けています。

クリエイティブ制作

アプリ内におけるクリエイティブ制作やプロモーションなどの制作も行なっています。（部分的に別会社が制作）

特にアプリ内に表示されるクリエイティブは同じデザイナーが担当する方がデザインに一貫性が出ます。

現在はプロモーションは外部に委託する場合も出てきていますが、その際にはガイドラインを定義し、クオリティの担保を図るように努めています。

チームで考えて作るフラーの体制

うちれぴの現在のメンバー構成は以下のようになっています。

メンバーはPO、ディレクター、テクニカルマネージャー、エンジニア、デザインマネージャー、デザイナーの計10〜15名ほどです。

チャレンジしやすいデザイン環境

アプリ初期開発フェーズでは、まっさらな状態から、デザイナーとしてディレクターさん・エンジニアさんと並走しながら、アプリのコアとなる体験・機能を考えるところから、開発するためのUIを設計するところまで、役割とスキルは多岐に渡りました。

アプリにおいての0→1フェーズは考えるべきことも多く、求められることも幅広くなるためデザインの難易度も高まります。

それでもアプリ初期開発フェーズを乗り越えられた理由のひとつは、フラーのレビュー体制があります。

フラーではプロジェクトにつきデザインマネージャーがおり適宜レビューを行い、新規のデザインについては弊社の社長・副社長がレビュアーとなる場合も多いです。（フラーは社長と副社長がデザイナーなのです。）

デザイン品質について妥協を許さずこだわり抜くために、デザインチームのサポート体制がしっかりとあるので、新しいチャレンジも思いきってできる環境だと思います。

他職種との協力的な関係性

また、エンジニアさんとの関係性もフラーは良い意味で特徴的だと思っており、ファーストリリース時に印象的だったのが、とても難しい実装をエンジニアさんにお願いすることになった時、それがプロダクトにとって良いこと（必要なこと）なら難しくてもチャレンジしてみると言ってくれたことです。

そして、すごく頑張ってデザイン通りのアプリを実現してくれました。（それが今のうちれぴの顔であるおぼんを模した形のUIです！）

前職ではそもそも開発は外注だったり、そこまでチャレンジングなことはやりにくいことが多かったので、エンジニアさんがすごく協力的なことにも驚きました。

ファーストリリース時はディレクター・デザイナーが施策〜デザインまで固めた上で、エンジニアさんとのすり合わせを行う流れでしたが、グロースフェーズに入りチームとして安定してきた段階になってからはチーム全員で最初から考える流れに変わってきたことで、後でデザイン変更や認識齟齬なども起きにくくなってきたと思います。

ディレクターさんはビジネス面からの意見など色んな観点で見てくれますし、デザインに興味を持ってくれるエンジニアさんもいて意見やアイデアをくれることが多いです。

アウトプットに対し、いつもこだわりを持って一緒に考えてくれるサッポロ様、プロジェクトのメンバーにはいつも心から感謝しています。

ファーストリリースを終えて

プロジェクトを続けてやりがいと感じていることのひとつは「作って終わり」ではなく、今でもうちれぴを継続してアップデートし続けられることです。

デザインを一から作ったからこそ、もっと良くしていきたい、細部までこだわりたいと思って作れる環境は、デザイナーにとって恵まれた環境であると思っています。

お知らせ

富山さん、ありがとうございました！

デザイナーの他に、ディレクター、エンジニアから見たうちれぴプロジェクトの記事も公開しています。

プロジェクトの全体像が見えてくるので、ぜひ一緒にご覧になってみてください。

フラーでは一緒に働くメンバーを積極採用中です。
ご興味お持ちいただけましたら、お気軽にご連絡ください。