#

UI・UX

#

Web

#

アプリ

#

ディレクション

コミュニティアプリ「BASE FOOD Labo」
ビジュアルリニューアル

研究員として、BASE FOODを一緒につくる場所へ。

BASE FOODは、主食を通じて健康的な食生活を提案するフードテックブランドです。
定期購入者限定コミュニティ「BASE FOOD Labo」のアプリ内グラフィックを全面的にリニューアルしました。
課題は、「研究員としてBASE FOODを一緒につくる場所」「ユーザー同士やスタッフとのつながりを育てる場所」という、Labo独自の価値が既存のビジュアルから十分に伝わっていなかったことです。
そこで、コミュニティの役割とブランドメッセージを整理し、約50点のバナーやイラストへ展開。さらに、継続的な運用でも品質と世界観を保てるテンプレートを整備し、アプリ全体のビジュアルを刷新しました。

クライアント

-

BASE FOOD株式会社

制作年

-

2025 ~ 現在

URL

-

https://labo.basefood.co.jp/view/home

着手時の課題

色・イラスト・表記のトーンが混在し、Labo全体の一貫性が弱かった
BASE FOODらしさと、コミュニティに参加する楽しさが伝わりにくかった
既存プラットフォームの制約内で、実装可能な表現へ落とし込む必要があった

デザインと運用設計

BASE FOOD JOURNALの既存イラストを起点に、線・配色・デフォルメの特徴を体系化
不足するモチーフは新規制作し、黄色と内容に沿ったイラストで約50点を統一
レイアウトと合成フォントをテンプレート化し、継続運用できる制作基盤を整備

写真とテイストの異なるイラストが混在し、情報の見せ方にもばらつきがあった既存バナーを見直しました。
イラストの表現や写真との組み合わせ方を統一し、タイトルの位置や文字組みのルールを整理。目的の弱い装飾を削ることで、内容をひと目で理解できる、一貫性のあるバナーデザインへ再設計しました。

複数のページを行き来するアプリだからこそ、ユーザーが現在地を把握し、必要な情報や次に取る行動を直感的に選べることを重視しました。
各クリエイティブでは、内容に適したイラストと情報の優先順位を設けながら、配色や文字組みなどの共通ルールによってLabo全体の世界観を統一。分かりやすさと楽しさを両立し、毎日自然に開きたくなる心地よい体験を一つひとつ設計しました。

結果・反応・学び

リニューアル週登録者の翌週再訪率が25.1%へ向上（従来16.1〜21.5%）
新CAMPカテゴリーの訪問数が増加し、現在地や次の行動を捉えやすい体験へ
完成物だけでなく、要件・ルール・レビュー方法まで含めて設計する重要性を学んだ

実績一覧

Other Works

事例タイトル

Web / App / Logo

事例タイトル

Web / App / Logo

事例タイトル

Web / App / Logo

事例タイトル

Web / App / Logo

全ての仕事へ

CONTACT

ご覧いただきありがとうございます。

デザインのご依頼や制作に関するご質問など、どんなことでもお気軽にお問い合わせください。

お問い合わせ

arare

制作実績

テキスト

お問い合わせ

#

UI・UX

#

Web

#

情報設計

#

ディレクション

専門的な測定を、親しみやすい体験へ。
Dig!のUI・UX設計

専門的な測定を、迷わず取り組めるWeb体験に。

Dig!は、企業の研修・組織内で、潜在的な態度の傾向を知るためのWebサービスです。Bubbleで作られた試作版をもとに、UI・UX、説明文の再構成、世界観の設計、制作ディレクション、実装後の確認を担当しました。研究者と内容を確認しながら、動画・操作体験・直前確認で理解を助け、短い制限時間でも操作に迷いにくい体験を設計しました。

制作体制

-

デザイナー1名・研究者兼実装担当1名

制作年

-

2026年／約2か月

URL

-

https://labo.basefood.co.jp/view/home

着手時の課題

色・イラスト・表記のトーンが混在し、Labo全体の一貫性が弱かった
BASE FOODらしさと、コミュニティに参加する楽しさが伝わりにくかった
既存プラットフォームの制約内で、実装可能な表現へ落とし込む必要があった

デザインと運用設計

BASE FOOD JOURNALの既存イラストを起点に、線・配色・デフォルメの特徴を体系化
不足するモチーフは新規制作し、黄色と内容に沿ったイラストで約50点を統一
レイアウトと合成フォントをテンプレート化し、継続運用できる制作基盤を整備

写真とテイストの異なるイラストが混在し、情報の見せ方にもばらつきがあった既存バナーを見直しました。
イラストの表現や写真との組み合わせ方を統一し、タイトルの位置や文字組みのルールを整理。目的の弱い装飾を削ることで、内容をひと目で理解できる、一貫性のあるバナーデザインへ再設計しました。

複数のページを行き来するアプリだからこそ、ユーザーが現在地を把握し、必要な情報や次に取る行動を直感的に選べることを重視しました。
各クリエイティブでは、内容に適したイラストと情報の優先順位を設けながら、配色や文字組みなどの共通ルールによってLabo全体の世界観を統一。分かりやすさと楽しさを両立し、毎日自然に開きたくなる心地よい体験を一つひとつ設計しました。

要件・課題

専門的な測定の条件を保ちながら、初めての人でも説明を理解し、迷わず操作できることが課題でした。各ジャンルは12秒の練習1セットと本番5セットで構成され、誤回答が一定数を超えると測定できません。研究者と説明内容を整理し、Bubbleの実装制約も踏まえて、操作に起因するミスを抑えるUIを設計しました。

対応

01｜段階的に理解を助ける導線
長い説明を再構成し、動画・操作体験・課題直前の確認へと情報を分け、測定前の理解をサポート。

02｜入力ミスを防ぐフィードバック
選択直後の色変化、回答済み表示、次の回答枠へのフォーカスにより、操作の進行状況を伝えるUIを設計。

03｜親しみやすさと実装の両立
イラストの色・表情・ポーズを調整し、専門的な内容へのとっつきやすさを演出。セット間のカウントダウンは、Bubbleで実装しやすい画像切り替えで構成。

実装への反映

研究者がBubbleで実装し、制作スケジュールの調整・ディレクションと実装後の確認を担当しました。企業への試験導入・測定まで完了し、世界観は研究者から好評をいただきました。今後はユーザーインタビューを踏まえ、改善案の作成・制作・ディレクションを行う予定です。