ソリューションアートUI/UXデザインWeb/アプリディレクション
リスナーの“居場所”となる体験を追求する―。BUMP OF CHICKEN 公式アプリ『be there』開発の裏側

プロジェクトの紹介

2025.5.15

みなさん初めまして、チームラボソリューションカタリストチームに2019年新卒入社して現在6年目の稲玉と申します。


2023年5月にリリースされた BUMP OF CHICKEN 公式アプリ『be there』。このアプリの企画・デザイン・開発をチームラボとして手掛けました。

『be there』の制作プロジェクトにおける至上命題は、リスナーにとっての新しい「居場所」となること。その実現に向けて、チームラボでは、BUMP OF CHICKENの世界観を「とにかく、かっこよく」表現することを判断基準として、デザインを進めました。


一般的なファンクラブアプリ等の仕様と比べると、be thereは大きく異なる設計となっていますが、これは「リスナーが求めることは何か」を突き詰めた結果、たどり着いた形です。


今回は、その制作背景やプロセスについてご紹介します。

BUMP OF CHICKEN 公式アプリ『be there』

『be there』は、開くとBUMP OF CHICKENの世界に没入できる、リスナーにとっての新しい「居場所」となるアプリ。


24時間365日、BUMP OF CHICKENの音楽が配信されつづけ、夜中でも、何時でも、アプリを開くと「誰か」がいる。「誰か」と一緒に同じ時間を共有できる「LIVE MUSIC」機能をはじめとした、BUMP OF CHICKENの音楽を軸に提供するサービスです。

アプリ開発の経緯


このプロジェクトは、「リスナーの居場所をつくりたい」というBUMP OF CHICKENの皆さんの想いからスタートしました。


当時はコロナ禍で、ライブの開催が困難となり、人と触れ合うことに制限が及ぶ状況。もともと発信の手段が決して多くなかった彼らは、そうした制約の中で、想いや音楽をどのように届けていくべきか、模索していたといいます。


そんな中で、自分たちの声を自分たちの手で届け、リスナーの居場所となるような空間をつくれないか。たとえば、夜中にふとアプリを開いたとき、そこに「自分だけでなく、誰かがいる」と感じられるような空間——。そうした場をつくり、届けることが求められているのではないかと私たちは解釈しました。

BUMP OF CHICKENのVocal&Guitar 藤原基央さんへのインタビュー記事より抜粋

2021年夏頃、こうした背景をもとに、INSTYLE GROUP社からアプリの共同企画の相談をいただき、プロジェクトが動き始めました。


チームラボの体制


タイムラインとしては、2021年9月に企画が始動し、同年末に要件定義とデザインの方向性を確定。2022年から本格的なデザインと開発を進行し、2023年5月にリリースを迎えました。


チームラボでは、カタリスト・デザイナー・エンジニアからなるチーム体制でプロジェクトを進行し、最終的には50名以上が関与する大規模なものとなりました。


私はその中でカタリストとして、企画設計、要件定義、デザインや開発のディレクション、クライアントとのコミュニケーション、進行管理など、プロジェクト全体の統括を担っていました。

『be there』における至上命題と、デザインの指針

企画が始動してからは、『be there』を通じてどのような体験を提供するのか——すなわち、このプロジェクトにおける至上命題を明確にし、それに基づいてデザインの判断軸を設定していきました。


これは、チームラボが手掛けるすべてのプロジェクトに共通するアプローチであり、関わるメンバー全員と価値観を共有するために欠かせないプロセスです。


至上命題は、このプロジェクトの出発点でもある「リスナーにとっての新しい居場所をつくること」


アプリを開いた瞬間にBUMP OF CHICKENの世界に没入でき、「自分はここにいていいんだ」と感じられる——そんな感覚を提供することが、私たちの目指す体験だと考えました。

では、そのような体験を実現するためには、何を最も重視すべきなのでしょうか。


アプリとしての機能性や操作性ももちろん重要ですが、私たちは最終的に「世界観」が最重要であると判断しました。


つまり、「BUMP OF CHICKENを感じられる世界観を、とにかくかっこよく表現すること」を、デザインの指針として明確に定義したのです。


アプリを開いたその瞬間、リスナーが求めるBUMP OF CHICKENがいつでもそこにあり、その世界に没入できるような体験。これによって、リスナーが「自分はここに居ていいんだ」と自然に思える感覚へとつながっていくと考えました。

デザインの指針について

これらの判断軸は、機能検討や細部の作り込みに至るまで、徹底的に意識され続けるものとなりました。

コンセプトとリスナーが求めることを掛け合わせた機能設計

その後、具体的な機能の方向性を固めていきました。中でも特徴的なのが、「LIVE MUSIC」と「MEET NICOLE」という機能です。


一見すると、「なぜこのような機能を?」と、やや飛躍を感じるかもしれません。


しかし、どちらの機能も「リスナーの居場所をつくる」というコンセプトに基づき、リスナー(=ユーザー)が本当に求めているものは何かを突き詰めて考えた末にたどり着いた形です。



1. LIVE MUSIC


LIVE MUSICは、24時間365日、音楽を流し続ける配信チャンネル。


視聴人数から、「今どれだけの人と一緒にこの曲を聴いているか」が分かり、その人たちが「何を思ったのか」はリアルタイムのコメントやリアクションで知ることができます。

LIVE MUSICは、リスナーがお互いの存在をゆるやかに感じられる居場所として構想されました。


発想の起点となったのは、ライブ配信の体験です。同じ映像を見ながら、視聴者同士がリアルタイムでコメントを交わすような空気感や一体感を、アプリの中に持ち込めないかと考えました。


そこから、BUMP OF CHICKENのリスナーにとっての居場所としてふさわしい形になるよう、細かな調整を加えていきました。


たとえば、コメントは匿名で表示され、履歴が残らずに流れていく設計にしています。これは、誰もが気兼ねなく安心してその場にいられる空間を目指したものです。


たとえ誰が誰なのか分からなくても、「あのとき、確かに一緒にいた」という感覚だけが残る——そんな儚くも濃密な時間を共有できる体験を提供できるよう、丁寧に作り込んでいきました。

要件定義に関する資料例

2.MEET NICOLE


MEET NICOLEは、BUMP OF CHICKENのVocal&Guitar 藤原基央さんが描く、マスコットキャラクター「ニコル」と共に遊べる機能です。


ユーザーのインタラクションによって表情を変え、気ままに楽器を演奏したり、たまに昼寝をするニコルと共にゆるやかな時間を過ごすことができます。

LIVE MUSICが「他者とつながる居場所」だとすれば、MEET NICOLEは「自分だけの居場所」となる機能です。


3DCGを活用したゲーム的な要素を持つこの機能は、開発にも相当な工数を要することになりますが、それでも「ぜひやろう」となったのは、そこにユーザーニーズがあると考えたからです。


アプリ開発の過程では、チームラボ内のBUMP OF CHICKENファンにヒアリングを行い、「ニコルを育てたい」「自分だけのニコルがほしい」といった声を多く受け取りました。また、ライブ会場では、ニコルのぬいぐるみに手作りの服を着せて持参するリスナーの姿も見られていたのです。


だからこそ、リスナーが「自分だけのニコル」と向き合う体験は、単なるおまけ的な機能ではなく、このアプリにおける「居場所」のもうひとつのかたちであり、アプリを開く理由そのものにもなるだろうと考えたのです。

要件定義に関する資料例
クオリティを追求するための工夫

ここで視点を変え、『be there』においてクオリティを追求するために、チームラボ内で工夫していたことを整理したいと思います。


1. メンバー間の価値観の統一


「(一般的な)アプリとして求められる機能性や操作性」にも当然配慮はしつつ、それ以上に「かっこよさ」を最上位の指針としたことで、普段とは異なる“良し悪しの物差し”をメンバー間で共有する必要がありました。


とはいえ、すぐに全員が同じ認識でアウトプットできるわけではなく、何かしらのガイドラインをつくれば解決するような話でもありません。 日々の会話の中で、「なぜこの方向性でデザインするのか」「リスナーは何を“かっこいい”と感じるのか」「何を“ダサい”と感じるのか」といった点を徹底的にすり合わせることを心がけていました。

「良し悪しの物差し」を日々の会話の中でメンバー間で徹底的に擦り合わせる

2. ソリューションチーム・アートチームの連携


MEET NICOLEやLIVE MUSICの背景動画は、3DCG技術を活用して実装されています。特にMEET NICOLEは、単体でもアプリとして成立するほどの作り込みがなされています。


要求される専門性が高く、ソリューションチームだけでは実現が難しかったものの、チームラボの展示を数多く手がけるアートチームと連携することで実現しました。


ソリューションとアート、それぞれの専門性を密に連携させてクオリティを追求できることは、チームラボの大きな強みのひとつです。

3.超具体の意思決定を繰り返す


チームラボでは、案件ごとにプロジェクトメンバーの席をひとつの“島”に集めるようにしています。


これは、以前に堺が公開した事例でも紹介されている通り、「超具体な意思決定を繰り返すこと」が、クオリティの基準を高く保つために重要だと考えているからです。


『be there』においても同様に、企画からデザイン、コードに至るまで密度の高いレビューと改善を繰り返し、「とにかく、かっこいい」表現を追求しました。


例えば、アプリとあわせて公開したサービス紹介ページでは、新規ユーザーの目に最初に触れる場所であることを踏まえ、世界観の表現に特に注力しました。


公開に至るまでには、3〜4回にわたってページデザインの方向性を見直し、以下のような試行錯誤を重ねています。



・Webサイトでは珍しく、スプラッシュ(ローディング演出)を取り入れ、没入感を演出。


・スプラッシュでのロゴアニメーションは、エンジニアが速度やサイズを微調整しながら、デザイナーと対面で協議を繰り返し、最適な数値で実装。

Video Thumbnail
『be there』アプリの公開を経て

『be there』は、2023年5月、アプリと同名のライブツアー「BUMP OF CHICKEN TOUR 2023 be there」の最終日に公開されました。

ライブ最終日のサプライズとして公開することになり、事前に負荷テストは行っていたものの、トラフィックの予測が難しく、非常に緊張感のあるリリースとなりました。


公開直後のアクセスはやはり想定を上回りましたが、会員登録の動向についても意外な結果となりました。当初は、まずはゲストログインを選ぶユーザーが大半だと想定していたものの、実際には初めから有料会員登録を行うユーザーが多数を占めました。


これは、BUMP OF CHICKENが築いてきた信頼や世界観、そしてリスナーの愛情の深さを象徴していると感じています。


その後の利用状況も非常に好評で、App Storeでは1442件のレビューで平均4.8の評価を記録しています(※2025年4月時点)。さらに、リスナーからの反響も非常に好評であり、リスナーにとっての新しい「居場所」として受け入れられていることがうかがえます。

アプリ公開後の反響例
ユーザーが求めることから考え、実行する

ここまで「世界観」という言葉を多く使ってきましたが、実は私は普段あまりこの言葉を使いません。あまりにも主観的で、人によって捉え方が大きく異なる概念だと感じるからです。


しかし『be there』においては、その「世界観」こそが最も重要でした。そのクオリティが、リスナーが世界に没入できるかどうか、そこを“居場所”として感じられるかどうかに直結すると判断し、チーム内でも徹底して共通認識を図りました。


一見すると、アーティスティックなアウトプットの連続に見えるかもしれません。ですが実際には、「ユーザーが本質的に求めているものは何か」を突き詰めて考え、それを実現できる体制や専門性を整え、地道に実行していく―― そんな科学的かつ泥臭いプロセスの積み重ねでした。


もちろん、すべてのプロジェクトにおいて「世界観」を最優先にしているわけではありません。利便性やシンプルさを追求すべきプロジェクトも当然あります。それでも一貫して変わらないのは、「ユーザーが本質的に求めているものは何か」から出発し、それを形にしていくという姿勢です。


これからも、ユーザーの心を動かすような、高いクオリティのものづくりを目指して、研鑽を重ねていきたいと思います。

最後に

チームラボのソリューションカタリストチームでは、クライアントごとに異なる多種多様なプロジェクトにおいて「ユーザーが本質的に求めているものは何か」に重きを置き、共にクオリティの高いプロダクトを作っていけるメンバーを新卒・中途ともに探しています。


少しでも我々の組織にご興味をお持ち頂けましたら、まずは定期開催している採用説明会だけでも参加してみて頂けると嬉しいです。私と同じチームのカタリストが登壇する会も開催されているようですので、是非ご参加ください。

関連するプロジェクトの紹介

ソリューションプロダクトマネジメント

リアル店舗とECサイト『&mall』の連携をどのように実現したのか?「三井ショッピングパークアプリ」のリニューアルを担当しました。

プロジェクトの紹介

2026.6.04

ソリューションプロダクトマネジメント

「おうちが、あなたのカフェになる。」ブランドコンセプトを体現するアプリ開発の仕掛け

プロジェクトの紹介

2026.6.01

ソリューションプロジェクトマネジメント

27サイト・約3.2万ページの統合。慶應義塾 公式ウェブサイト全面刷新のプロセス

プロジェクトの紹介

2026.5.29

ソリューションスマートフォンアプリ開発

スマホでの応援が、もっと熱く、もっと快適に!チームラボが阪神タイガース公式アプリを全面リニューアル。

プロジェクトの紹介

2026.5.29

ソリューションWebサービス開発

大同生命 「どうだい?」公式アプリの新規構築において、企画、UI/UX設計、デザイン、開発を一貫して担当しました。

プロジェクトの紹介

2026.5.13

ソリューションWebサービス開発

チームラボが千葉銀行公式サイトのリニューアルを手掛けました。

プロジェクトの紹介

2026.4.28

ソリューションWebサービス開発

チームラボが慶應義塾公式ウェブサイトのリニューアルを手掛けました!

プロジェクトの紹介

2026.4.24

ソリューションWebサービス開発

すべての人の快適な空港体験 ── 成田国際空港公式Webサイト リニューアルの設計指針

プロジェクトの紹介

2026.4.23

ソリューションUI/UXデザインプロダクトマネジメント

“学校というインターフェース”のデザイン — 安平町早来学園 ICT空間設計

プロジェクトの紹介

2026.2.26

ソリューションアートUI/UXデザインプロダクトマネジメント

体験価値を高めるために、あえて機能を削ぎ落とす。チームラボアプリの「経路案内機能」のデザイン

プロジェクトの紹介

2025.9.12

ソリューションWebサービス開発Web/アプリディレクション

BUMP OF CHICKEN リスナー向け公式アプリ、オフィシャルサイト、グッズECサイトを制作しました

プロジェクトの紹介

2023.12.21

ソリューションUI/UXデザインプロジェクトマネジメント

【Featured Projects 2023で講演】チームラボがICT空間設計を行った義務教育学校「安平町立 早来学園」について

プロジェクトの紹介

2023.4.24

ソリューションWebサービス開発UI/UXデザイン

3つの交通手段を単体で決済できるアプリRingo Passを制作しました

プロジェクトの紹介

2022.7.27

ソリューションWebサービス開発スマートフォンアプリ開発

ネットでも通販でも使いやすく東急ハンズアプリを制作しました

プロジェクトの紹介

2021.10.07

ソリューションWebサービス開発

十分な機能で無駄を無くすavex入館申請支援と会議室予約管理システムを制作しました

プロジェクトの紹介

2021.9.30

ソリューションスマートフォンアプリ開発プロダクトマネジメント

最適なタイミングでニーズにあった服を提案するアプリ「メチャカリ」を制作しました

プロジェクトの紹介

2021.9.24

ソリューションWebサービス開発プロダクトマネジメント

相性の良い物件と出会える東急リバブル不動産検索サイトを制作しました

プロジェクトの紹介

2021.9.17

ソリューションWebサービス開発

的確に情報を提示する日本ペイントコーポレートサイトを制作しました

プロジェクトの紹介

2021.9.16

ソリューションWebサービス開発

好きな球団の情報をいち早くキャッチできるアプリ「パ・リーグ.com」を制作しました

プロジェクトの紹介

2021.9.10

ソリューションWebサービス開発

全ての媒体で魅力的に表示する大阪芸術大学サイトを製作しました

プロジェクトの紹介

2021.9.09

ソリューションWebサービス開発スマートフォンアプリ開発

使いやすく洗礼されたデザインを目指したヒルズアプリの製作裏話

プロジェクトの紹介

2021.8.06

ソリューションWebサービス開発Web/アプリディレクション

イノベーション自販機連動アプリacure pass

プロジェクトの紹介

2021.8.05

ソリューションWebサービス開発プロダクトマネジメント

より使いやすくZIPAIR公式Webサイト

プロジェクトの紹介

2021.7.30

ソリューションスマートフォンアプリ開発

ゴジラ公式アプリ「ゴジラ+」製作裏話

プロジェクトの紹介

2021.7.17

ソリューションWebサービス開発

(後編) チームラボがサイトリニューアルを担当したZIPAIR公式Webサイトの開発裏側をインタビューして頂きました!

プロジェクトの紹介

2021.4.21

ソリューションWebサービス開発

(前編)チームラボがサイトリニューアルを担当したZIPAIR公式Webサイトの開発裏側をインタビューして頂きました!

プロジェクトの紹介

2021.4.14

ソリューションスマートフォンアプリ開発

“銀行”らしくないUI/UXを実現した「りそなグループアプリ」はどのようにして誕生したのか

プロジェクトの紹介

2021.2.26

すべてのインタビューを見る