asterleeds.com

最初期のプロトタイプ

asterleeds.com の構想以前にもブルプロ関連でファンサイトを作ろうという構想はあり、主にプレイヤー同士のマッチング・交流を主とするサイトを考えていた。だいたい2020年の3月ごろ。

▲ Protocol Online というプロトタイプの画面構想

▲ プロフィール画面。傾向を登録し、似ているユーザーをマッチングできたらいいなと考えていた。

結果的にこの案は実現しなかったが、カード生成機能などに形を変えて実装されることになった。

SSストックサイトとしてのプロトタイプ

次に構想していたのは、スクリーンショット蓄積サイト。クローズドβテスト後の2020年7月頃。

この頃交流の深かったユーザーグループ「ブルプロSS撮影班」用に、スクショを投稿できるシステムを作りたいなと考えていた。

▲ SS班用サイトの構想。デザインは今見ても格好いいというか、サイトというよりかはアプリ感がある。

この構想時には、まだCBT後の盛り上がりがあった時期でもあり、他にも開発に携わりたいと手を上げてくれていた人も数名いた。結果的に、スキルセットの違いやその後のブルプロ公式供給の無さからこの開発グループは自然消滅した。

プロトタイプ

最終的に、ブルプロのマップを Google Map のように閲覧できるサイトとして構築することに決めた。これには、先立ってブルプロマップを Google マップ風にしてみたファンアートを作成していた経験が強く影響していたように思う。

▲ Google Map 風のブルプロマップファンアート

▲ マップのテクスチャを変えて仮組みしてみたプロトタイプ。メニューからもコンテンツが本当にマップしかないのがわかる。

この構想にあたっては、ブルプロのファンサイトを名乗る以上は以下の要望を満たしたいという思いがあった。

1. ある程度の実用性を持つサイトにしたい
2. 見た目の素人感をできるだけ排除したい
3. 将来的に SS ストックやユーザー交流ができるプラットフォームにしたい

以上より、まずはマップサイトとしてブルプロ世界を追体験できるようにしつつ、Google Map を利用することで拡縮や移動を簡単にし、さらにできるだけ見た目をわかりやすくしようという風に決めた。

▲ 最初期のリリース時。マップのテクスチャが現在と違い、ほぼダークブルートーンで視認性が低い。

Nuxt.js で Google Mapを上手いこと扱うには…マーカーの描画を切り替えるには…素材はどうやって作ったらいいんだ…と Google Map JavaScript API 仕様書を何度も行ったり来たりしながら試行錯誤していたのを昨日のことのように思い出す。結果としてマップ関連のコンポーネントはひどくスパゲッティコード化しています…反省。

その後

その後の開発経緯は、サイトの「このサイトについて」→「アップデート履歴」にある通りなので割愛。マーカーを追加できるようにしたり、マップのテクスチャを変えたり、SS投稿やユーザー検索、カード生成等の機能を追加したり…と現在に至る。

▲ マーカー作成機能開発時の画面。2021年3月。