NESCAFE Hero Bottle Project Digital Experiences

ROLE
Art Direction, UX/UI Design, Web Design, Front-end Developing, Back-end Developing
DELIVERABLE
Responsive Website, Illustration, Package Design, Event Visual Assets
DATE
Jun 2024

monopo Tokyoはネスカフェ ヒーローボトル プロジェクトにてオリジナルのラベル画像を中心としたイラスト・アートディレクション、ラベルを作成できるジェネレーターおよびジェネレートを行うキャンペーンWebサイトの制作などを行いました。
自分の名前が入った世界に一つだけの「ネスカフェ」詰め替え用オリジナルデザインボトルのラベル画像を簡単に作成することができ、SNS上でシェアもできるキャンペーンです。

CLIENT BRIEF

  • 「ネスカフェ」の新ブランドメッセージ、「そのコーヒーは、あなたをちょっとだけヒーローにする。」を伝えるキャンペーンの制作

  • イラストによるオリジナルラベルのジェネレート、およびキャンペーンサイトの制作

  • ラベルと同じ世界観での店頭周りのビジュアル素材のデザイン

OUR PROPOSAL

  • ユーザーがイメージを反映しやすい抽象的なイラストによるディレクション

  • 使いやすさとバリエーション数の双方を担保したイラストパーツとUI設計

  • SNSシェアもしやすい画像のジェネレートシステム

CONCEPT

あなたもちょっとだけヒーローになれる

サステナビリティに力をいれる「ネスカフェ」の新ブランドメッセージは「そのコーヒーは、あなたをちょっとだけヒーローにする。」。 一人ひとりが未来を想ってコーヒーを選ぶことで世界にポジティブな変化が広がってほしいという想いが込められています。 今回は、この「ネスカフェ」詰め替え用のオリジナルデザインボトルを作ることであなたもちょっとだけヒーローになれることを伝えるキャンペーンでした。 monopoでは主に「どんなボトルを作ってお客様にヒーローになってもらう?」を考えたプロジェクトとなりました。

ILLUSTRATION

自分も、送る相手も、推しもヒーローになれる

スタート時点ではイラストを用いてオリジナルラベルを作るという企画はあれど、世界観は固まっていませんでした。 そこでmonopoでは複数のトンマナを提案するところからスタート。 当初は水彩タッチや、ヒーローからの連想でアメコミ調のアイデアなどもありましたが最終的に抽象度の高いシンプルなものに決定。 ユーザーがユーザー自身・ギフトとして贈る相手・推し活の人物やキャラクターを作成することを想定し、描写しすぎないシンプルなものにすることで作りたい人物像を反映しやすくしています。 最終的にモーション グラフィック クリエイターmoi.さんとコラボレーションしてたくさんのパーツを作成し検証を重ねました。 ヒーローらしく見えるポーズはなにか、背景はどれくらいの描写にすれば人物が埋もれないか、どれくらいのパーツ数を用意すればよいか、実際のボトルに貼る形状とサイズはなにがベストかなど、さまざまな観点での細かい検証を行いながらイラストパーツを決定していきました。

初期の提案資料のイメージボード。複数の世界観から絞り込んでいったことがわかる。

GENERATOR

イラストの組み合わせは合計199万通り以上!

最終的にイラストをジェネレートするWebサイトのUIを検討した結果、1スクロールで見きれる量として1パーツにつき8種類程度のバリエーションを設けました。そうしてできた組み合わせは199万通り以上に。 一方で選択肢やジェネレートのステップ数が多すぎるとユーザーの参加ハードルが上がってしまいます。背景パーツにはいくつか裏でルール付けを行うことでランダム性があるように演出。気軽に何度もチャレンジしやすい設計にしています。

最終的に使用したパーツ素材たち

Webサイト上では大量のパーツ画像の軽量化や演出動画の作成などを実施し操作の快適性とわくわくする演出双方を追求しました。ジェネレートしたイラストがボトルラベルとして出るプレビュー画面では、背景画像はCG、ボトル本体は影やハイライトの画像に生成したイラストなど、複数の画像を重ねることでリアルな表現を追求しています。

実際に生成する画像は3種類。画像をXにシェアしてもらうプレゼントキャンペーンも実施された。

ACTUAL STORE

イラストの世界観を実店舗にも

「ネスカフェ 原宿」では2024年6月28日(金)~9月1日(日)、全国のスーパーマーケットなどのイベントスペースでは順次、デザインしたボトルを実際に入手し、持ち帰ることができる特設ポップアップストアが展開されました。 monopoではストアに使うサイネージや店頭装飾などのビジュアル素材のディレクション・制作も手掛けています。 店頭で実際にラベルを印刷するため、実はジェネレーターにはモニターで表示する用と印刷する用の異なる色データを持たせ、印刷しても色味が変わらないように色校を重ねました。 またイラストの生成時に選んだエレメントによって自動でパラメーターも生成。 LOVE・JUSTICE・COURAGE・KINDNESS・DREAMからなるヒーローステータスがボトルの裏面に印字されます。作る人物像と比較して楽しんでもらえるようなギミックとして設計しています。

CREDITS

CLIENT
ネスレ日本株式会社
ROLE
Art Direction, UX/UI Design, Web Design, Front-end Developing, Back-end Developing
THE TEAM

#Agency / PR Planning
株式会社電通

Project Director / Producer
Rumiko Nango (Bascule)

Planner
Mayumi Sato (Bascule)

Technical Director
Yoshikazu Iida (Bascule)

Back-end Engineer
Kosuke Nojima (Bascule)

Creative Planner
Ryo Miyakawamonopo Tokyo

Lead Designer
Takuya Kenmokumonopo Tokyo

Designer
Kanae Fukushima

CG Designer
SUNJUNJIE, Shun Yazawa

Illustrator
moi.

Web Producer
Daiki Teraimonopo Tokyo

Front-end Engineer
Ibrahim Menzel

#Venue Design
株式会社 博展