“同じ熱量を持つパートナー” オフィシャルサイト開発の舞台裏。

SHIBUYA CITY FCは、現在200社を超えるパートナー/スポンサーの皆さまに支えられながら活動しています。

本企画「SCRAMBLE TALK」では、どのような想いでパートナー各社がSHIBUYA CITY FC（以下、渋谷シティ）のチャレンジに参画したのか、実際にどんな取り組みを行なっているのかをお伝えしていきます。

今回は、クラブのオフィシャルトップパートナーである株式会社Queueから柴田 直人様（CEO）、三橋 啓多様（CCO）、大道元貴様（Software Developer）をお招きし、渋谷シティから畑間直英（取締役）、田口文也（デザイナー）を聞き手に対談を実施しました。

同社は、技術革新格差、イノベーションディバイドと呼ばれる技術革新によるソリューションの恩恵を受けられていない領域を解決していくことを目指し事業を行っています。

記事は前編と後編に分かれ、前編となるこちらではSHIBUYA CITY FCとQueueが一緒に作り上げたオフィシャルサイトの話を中心に取り上げます。

■記事の後編はこちら

SHIBUYA CITY FC×Queue。渋谷を拠点とする両者が出会ったきっかけ

ーー2019シーズンからQueueとSHIBUYA CITY FC（以下、渋谷シティ）はパートナーシップ契約を結んでおり、Queueは様々な形で渋谷シティをサポートをしていると思いますが、どのような想いからサッカークラブへのパートナーシップがはじまったのでしょうか？

三橋

当初、Queueという会社はスタートアップという位置付けの中で、型通りのサービス開発をしている訳ではありませんでした。その中で、渋谷シティも当時は通常のビジネスモデルとは違うスタートアップ的なサッカークラブという点で親和性があるなと。そこから、何か面白い取り組みや話がお互いに共有できるんじゃないかという形でパートナーシップが始まりました。

当時の僕らは機械学習にすごく重きを置いていた時期でもあり、その方向性で何かできないか、みたいなところでまずは関わらせていただき、最初はチームの練習動画を共有してもらい、機械学習をいかした映像解析にトライをしていました。

畑間

Queueのメンバーと渋谷シティの選手・スタッフ合同でのワークショップなども開催しましたね。

その中で、クラブのオフィシャルサイト（以下、サイト）はスポーツチームとして必要最低限の機能を備えたシステムを使っていたのですが、クラブの成長とともに「このままだと僕らのやりたいことが表現できないね」というシステム的な課題が出てきました。そこで、せっかくQueueとも良い関係性を築き始めているし、サイトをフロントエンドだけではなくバックエンドも含めて開発してもらおうという話になり、そこもパートナーシップの契約内容に入れさせていただいて取り組みがスタートしました。

まずは、2022年3月に1回目のアップデートとしてシステムの入れ替えとデザインの大幅な刷新を。2023年5月にECサイトの刷新とデザインの軽微な変更を加えました。あとで話に出てくるかと思いますが、ECサイトの刷新にあたり1回目に入れ替えたシステムをさらに別のシステムに入れ替えることになります（笑）

夜通しで行われた、SHIBUYA CITY FCのサイト制作

ーーQueueはそれまでにサイトの制作案件は実績としてあったのでしょうか。

三橋

サイト制作単体の案件はなかったですね。

ただ畑間さんと最初にサイト制作についてディスカッションした時に、データの効率的な管理や整理が根幹にあり、そこをフロントエンドでどう表現・デザインしていくかという流れだったので、これまでQueueがデータ周りのサービス開発をしていた経験に近いイメージを持っていました。

畑間

実際に開発・制作が始まり、サイト用のCMS（ウェブサイトの作成、管理、運用を行うためのシステム）としてContenfulが選定されたと思うのですが、どういう基準や理由があったのでしょうか？

三橋

まず、当時の課題感としては前述の通り、データがあまりきれいな形でストア（蓄積）されていなかったという点があり、データベースの設計をきちんと整理するところから始まりました。そこはQueueの得意な領域でもあります。

なので、サイトの表側からはわからないかもしれないですが、裏側のデータ構造をきれいにするというのが1回目のメインの改修でした。

その上で、構築したデータベースが将来的に何とつながるかはまだわからない、というところがあったので裏側での外部サービスとの連携のしやすさは意識しました。なので、ヘッドレスCMS（コンテンツを表示するビューワーを持たないCMS）というAPI連携（アプリケーションやシステム間でデータや機能を連携し、利用できる機能を拡げること）がしやすいバックエンドを選定しようとは思っていて、その中で割とメジャーで、技術的な癖がないContentfulを採用しました。

ーーありがとうございます。

ここからはデザイナーの田口さんにも加わっていただき、サイトのデザインの話もできればと思います。1回目のアップデートで大幅にデザインを変更しましたが、どんなところを意識したのでしょうか。

田口

Jリーグクラブや前身のTOKYO CITY F.C.のものを含め、サッカークラブのサイトは載っている情報がとても多く、デザインがごちゃっとしている印象だったので、なるべくシンプルなサイトにしたいと思っていました。

さらに、クラブの特徴として、試合ごと、イベントごとにクリエイティブを作るというところがあるので、そのクリエイティブたちが綺麗に見えるような構成にしたい、というのを一番気にしました。

なので全体的にはシンプルなサイトの構成にしつつ、様々なサムネや強いコンテンツが入っても耐久性のあるデザインを意識をしています。

現状として、渋谷シティの細かい情報を知りたいファン・サポーターの方ってまだそんなに多くないので、それよりもシンプルなサイト構成の中でクラブの世界観が伝わりやすいようなデザインを意識しながら作りました。

ーーQueue側で、デザイン面での苦労などはありましたか?

三橋

そうですね、ちょっと特殊な制作現場だったなと思うのは、試合を主とするクラブの活動が絶対的なマイルストーン(締切)としてあった点ですね。

毎週試合があって、結果が変わって、クリエイティブを作って、というサイクルが早いです。おそらく他の分野のクリエイティブ現場で毎週必ず一定の量の全く新しいクリエイティブを作らないといけない、というのはあまりなかったので、単純に驚きました。

田口

特に納期の部分で一番苦労をかけてしまったかなと思うんですが、その中で僕自身がQueueと組めてすごくよかったなと思ったことがありました。

こちら側のスケジューリングやディレクションが疎かだった部分もあって、Queueのオフィスをお借りして両者のスタッフで夜通し作業していました。渋谷シティのスタッフはみんなスポーツをやってた人間で、好きなことを仕事にしているというのもあって、休みなく「気合で！」という感じのやることに対して熱量がかなり高い方だと思っていたんです。今回のサイト制作もその熱量が必要になったんですが、現場でQueueの皆さんと熱量を共有してずれない感じがすごく良かったなって、Queueのことをさらに好きになった瞬間で。熱量高いエンジニア集団で、かつめちゃめちゃ最先端で僕には到底理解できないハイレベルな技術開発をしているというギャップがたまらなかった記憶があります（笑）

三橋

ありがとうございます（笑）

畑間

あの時の現場はやばかったですね、最高でした（笑）

Queueの社内では、1回目のアップデートの時はどういうテンションだったのでしょうか。

三橋

1回目のアップデートの時に関しては、事前と事後で両方あるのですが、事後に関してはああいう（泊まり込みで仕上げる）ことって、僕らも起業直後とかはよくあったのでそういう懐かしさがありました（笑）

今でも例えば無理やりプロトタイプ的にトライしたことがうまく動きそうってなった時に、「すぐ出したいよねこれは」みたいなことがあると泊まり込みで、ということはあるので、根底の文化は近かったのかなと思いました。

事前に関しても、期限の1週間前とかの時点で「渋谷シティの開幕は来週、ということはをその前日にサイトローンチ、1週間前で今この状態、はいはいOKです、なるほどな」みたいな感じです（笑）

心の準備はできてました。

田口

話は少し逸れますが、ありがたいことに渋谷シティのサイトに関しては他のサッカークラブの関係者の方から参考にしてますとか、かっこいいですねという声が本当に多いです。

畑間

まず言われますよね。「サイトかっこいいですね渋谷シティさんは」って。

三橋

そうですね。僕の担当してもらっている美容師さんがサッカーがすごく好きな人なんですけど、サイトを見せた時に、いい意味でサッカークラブっぽくないって言われました。

畑間

これはすごく嬉しいですし、もっと進化させていきたいですよね。

5月に行われたサイトのアップデート

ーーサイトを進化させていきたいという言葉がちょうど出ましたが、2回目のアップデートが今年の5月にありました。

畑間

これまでECサイトにあまり力を入れてこなかった中で、新しいグッズを販売するタイミングとファンクラブ「MyCITY」をスタートさせるタイミングが重なり、ECサイトを刷新することにしました。

ECサイトのシステムはこれまでBASEを使っていてBASEのショップリンクをサイトに飛ばしていただけなのですが、渋谷シティのサイトのシステムごとWixに変更しました。

（Queue側の担当である）三橋さんと大道さんの中で、こちらの要望を受けて、どういう社内での話があって、Wixが採用されたかというところを聞ければと思うんですが、、、大道さんめっちゃ笑ってません？（笑）

大道

いや、自分は言われたことをただやるだけだったので。

（一同爆笑）

三橋

1回目のアップデートでContentfulを採用していたので、元々ECサイトの繋ぎ込みはShopifyという想定でした。ですがShopifyを使うとなるとAPI連携でかかってくるコストがどうしても拭えない課題としてあったので、渋谷シティ、サッカークラブが使うシステムとしてはあまりサステナブルじゃないぞと。

そこでサイト機能とEC機能を一元管理できて、エンジニア以外でも扱いやすいノーコードのツールで、EC機能も国内の商習慣にある程度フィットしているという基準で、Wixを選定しました。渋谷シティ側から会員システムの構築も今後の要件として伝えられていたので、その点も後からなんとかできるようなものを採用しました。

畑間

Wixの管理画面も元々使っていたContentfulの管理画面にかなり近くて、我々としては非常に助かっているのですが、そのあたりのこだわりはQueue側でもあったのでしょうか？

大道

そうですね。ユーザーが使いやすくするように寄せたというのもあるんですけど、実はそもそもの管理画面の作りがContentfulとWixで似てるというところもありました。

対戦相手やサムネ、日付といった入力項目の順番をContentfulと一緒にする工夫ぐらいでしたね。

三橋

過去の試合結果やニュースなどもサッカークラブのサイトとして見ることができる状態である必要があるので、ContentfulにあるデータをWixに移行する必要がありました。データ移行の時に、1回目のアップデートの時に綺麗にしたデータ構造をなるべくそのままWixに持っていきたいということもあり、Wixの管理画面がContentfulに似た仕上がりになったという面もあります。

畑間

データの移行はすごく気になっていたんですが、あれはプログラムを書いてデータをWixに入れていくというやり方だったんですか？すんなりいきましたか？

三橋

そうですね。プログラムを書いて入れていきましたが、すんなりはいきませんでした（笑）

畑間

そうですよね、移行が一番難しそうだなと思って。

三橋

どのプロジェクトでもデータ移行は基本すんなり行かないです。力技ですね（笑）

サイト内に新たに作られたECサイトのデザインについて

ーーありがとうございます。

続いて、ECサイトについてもデザインの話ができればと思います。田口さん、ECサイトのデザインはどんなところを意識したのでしょうか。

田口

ECサイトは商品ページのようにある程度デザインのフォーマットが決まっているところもありましたが、1回目のアップデートの時と同様に出し方や見せ方の部分は重視しました。

グッズを使ったファッションコーデ記事を出し、ECサイト内でただ商品を陳列して見せるだけでなく、その記事へ飛べる動線を作れるようなレイアウトにしました。商品ページだけではないECサイトにする、というところに意識を向けた感じです。

畑間

Wixはノーコードでサイトの構造が分かりやすいので、僕らもできることがとても考えやすいです。

ユーザーがより楽しめるサイトに。SHIBUYA CITY FC×Queueのこれから

ーー最後に渋谷シティのサイトに関して、今後の展望を聞かせてください。

畑間

クラブとしては、サイトを訪れた人が色々なコンテンツを楽しんでいただけるようにしていくことと、並行して裏側でデータがしっかりと蓄積されていって、この人が何を買ったとか、どの試合に行ったとか、今何が欲しいのか、みたいなところまで追っていけるようになりたいというイメージがあります。

三橋

渋谷シティのサイト開発・制作を通じて、Wixができること、できないことや、使い心地の部分などがフロントエンド・バックエンドの両面からわかったというのは非常に大きかったです。

Queueではバックエンドのためのサービスを開発することが多く、そのサービスをフロントエンド側のノーコードツールに接続していくというところを展望として持っているので、今後はそういった具体的な取り組みができると我々としてはありがたいなと思います。

この後に話すMorphというサービスの話につながるのですが、エンジニア向けのツールとして、データベースの開発から始まっていて、それを去年の秋、冬頃に「この技術はもしかしたら開発者じゃない人のために作り上げた方がいいんじゃないか」という形でピボットしています。バックエンドだけではなく、フロントエンドにつながるサービス開発ができるといいですね。

あとはデータという観点で、スポーツのデータはすごく魅力的で、例えばこの街の人口がいくつだとか、株がどうとか、関心を寄せている人はいると思うんですが、エンタメのデータはその数がもっと多いと思うんです。特にサッカーはどう計測するかによってもすごく幅があると思いますし。なので、昔からそうですが、スポーツのデータには関心を寄せているので、その分野で具体的なアウトプットを出せるとすごく嬉しいなと思います。

畑間

僕らもデータという点では、どんどん蓄積をしていかないといけないけれど、その使い方や、そもそもそれが有意義なものか、専門知識がないこともあり、よくわからないというのが正直ありまして。そのあたりはQueueと一緒にやっていきたいですし、そのデータがサイトに表示されるとなると、渋谷シティに興味を持ってサイトを訪れた人も「こんなデータもわかるんだ」みたいなところでより渋谷シティを好きになるきっかけにもなっていくと思います。

■記事の後編はこちら