デザイナー・エンジニア待ちだったデータ可視化を、バイブコーディングで自分たちの手に - Squadbaseで変わったSHIBUYA CITY FCの開発フロー

概要

SHIBUYA CITY FCは、渋谷からJリーグを目指すサッカークラブです。クラブ運営の中でファン向けのデータページを充実させたいという思いがありながらも、デザインから開発まで複数の工程が必要で更新が滞りがちでした。

今回は、Squadbaseを使ってオフィシャルサイトのデータページを自ら作成したビジネスサイドの担当者・畑間直英さん(以下畑間さん)に、その背景と実際の使い勝手、そして今後の展望についてお話を伺いました。

取り組みの背景

データページをご自身で作る前は、どのようなフローで進めていましたか？

畑間さん

以前からクラブとしていろんなデータをファンの方々に見てもらい、楽しんでもらえるようなページにしたいという思いがありました。ただ、クラブでさまざまな情報を取っているものの、それを可視化するというところがなかなかできずにいました。

まずパートナーであるQueueさんとともにデータを整理して、その上でクラブ内のデザイナーが色やグラフのレイアウトを決め、その仕様に沿ってQueueさんに開発してもらう、という流れでした。

要件定義 → デザイン作成（Figma）→ 外部エンジニア（Queue）に開発依頼、という工程が必要だったので、かなりの工数がかかっていて、更新が止まってしまっていた部分もありました。

article-scfc-1

Squadbaseを使う選択をした理由

自分たちで作ることのメリットをどう感じましたか？

畑間さん

Squadbaseはバイブコーディングでダッシュボードを作るサービスで、エンジニアでない方でも自由に使えるというところが魅力でした。Queueさんからご提案いただいた時に、「これなら自分でできるかも」と感じましたね。

更新のたびに外部に依頼するフローから抜け出して、自分たちで作って、自分たちで直せる状態にしたいという思いがあったので、試してみようと思いました。

バイブコーディングの実態

実際に使ってみた印象はどうでしたか？

畑間さん

まず、自然言語でチャットベースで全部できるというのが本当に良かったです。自分の言葉でAIと会話しながら、「こういうデータにしたい」「こういう見せ方をしたい」と指示するだけで、大まかな形ができてしまう。これは想像以上でした。

最初にQueueさんから大まかな使い方をレクチャーいただいた後、「じゃあ試しにデータページを作ってみてください」と言われて、プロンプト1行で「こんな感じでできました」というものが出てきた時は正直驚きました。

最初に作ったMVP（最小構成）はどのようなものでしたか？

畑間さん

ファン向けに選手のデータランキングを表示するページです。得点ランキングや出場時間などを視覚的に見せるシンプルなものから始めました。

出てきたものを見て「これならいける」と判断して、そのURLをデザイナーにそのまま投げたら「めっちゃいいじゃん、このままでいこう」となって。あとは色を白にするか黒にするかくらいの調整だけで、デザイナーのGoが出てそのまま公開まで進みました。

AIへの指示はどのようにしていましたか？

畑間さん

「ファンに向けて面白い見せ方をしたい」というような一文を最初に入れたのですが、それだけでもアウトプットが変わってくるんですよね。自分だったら思いつかないようなレイアウトやデータの見せ方をしてくれて、期待以上のものが出てびっくりしました。

article-scfc-ai-output

途中でこんなやり取りもありました。2024シーズンのページを追加で作ろうとしたら、2025には存在するけど2024にはない選手データ（身長など）があって、AIから「データが足りないので追加しますか？」と聞かれたんです。そこで「SHIBUYA CITY FCの公式サイトから調べてください」と指示したら、「はい」とすぐ調べて反映してくれました。