#

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

#

アプリ

#

ディレクション

訪日客の買い物を支える、
Paykeの主要画面UIリニューアル

8言語と多様な商品画像に対応する、UIとデザイン基盤の設計。

Paykeは、商品のバーコードを読み取り、商品情報を多言語で確認できる、訪日外国人向けのショッピングサポートアプリです。
訪日客の利用増加を見据え、主要画面のリニューアルを担当。クライアントの改修要望をもとに、利用頻度と実装スケジュールを踏まえて優先順位を整理しました。
8言語に対応するコンポーネント設計、商品画像の表示・入稿ルールの整備、配色やイラストの見直しを通じて、使いやすさとブランドの統一感を整えました。

クライアント

-

株式会社Payke

制作年

-

2024年

URL

-

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

着手時の課題

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

デザインと運用設計

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

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

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

要件・課題

クライアントから共有された改修要望をもとに、主要画面のUIとトーン＆マナーを見直しました。8言語の文字量の違いや、商品画像の形状・解像度のばらつきに対応しながら、限られたスケジュールの中で表示品質を整えることが課題でした。

対応

01｜8言語に対応するUI設計
言語ごとの文字量の違いを考慮し、翻訳後もレイアウトが崩れにくいコンポーネントを設計。

02｜商品画像の見え方と入稿ルールを統一
縦横比の異なる画像を見切れずに収め、一覧でのサイズ感を統一。最低解像度と画像の再提供ルールも整備。

03｜Paykeらしい配色とビジュアル
ブランドカラーと補助色で画面の印象を統一。導入説明には既存の3Dイラストを選定し、親しみやすく直感的に伝わる表現に。

実装への反映

実装はPayke社内のエンジニアが担当。実装後はレイアウトのバランスや基本的な導線を確認し、制作した画面は基本的にアプリへ反映されています。