スイマーズゼロ

開発の目的

水泳データの活用の幅を広げる

当時の日本水泳連盟公式サイトへの不満ともどかしさが発端でした。そちらのサイトでは大会ごとにまとまった記録は閲覧できますが、それぞれの選手が過去の他の大会で出した記録は検索できませんでした。また毎年更新されるランキングに掲載されるのは各都道府県1～50位までのみでした。全国全ての大会のレース結果がサイトには掲載されているわけですから、それらを整理すれば「各選手のタイムの推移・最近の調子」や「全国全選手のランキング」を作成することが可能だと考えました。

全員、ランクイン。

「水泳データの民主化」が一つのテーマでした。トップアスリート(専属のコーチがついていてタイムを詳細に分析してもらえる)でなくとも、データの恩恵を受けることができるはずだと考えました。自分より少し速い選手のタイムのデータは自分のレースの参考にできます。またベストタイムを出す度に「全国ランキングが〇〇位から〇〇位に上った」という感覚を得るのも新たなモチベーションの源になるでしょう。トップ50だけじゃなくよりオープンに、どんなレベルの選手も等しく水泳を楽しめるようにという思いを込めて、「全員、ランクイン。」をサービスのキャッチコピーとしました。

技術スタック

先に開発したTiMがベースになっており、PythonのWebフレームワークのFlaskを使用しています。ただJSONを返すTiMと異なりHTMLのページを返すためにJinja2を新たにとりいれています。データベースはホスティング先のHerokuの標準であるPostgreSQLを採用しています。PostgreSQLとの接続にはPythonのORMのSQLAlchemyを使用しました。こちらのライブラリは国内の情報が少なかったため、エラーの度に公式のドキュメントを頑張って読んでいました。またPostgreSQLとは別に、一部の計算結果をインメモリDBのRedisに保存するようにしてあります。

サイト構成

モバイルファースト

ユーザーはほとんどがスマホで閲覧すると考えました。大会の会場や部活の帰り道などで選手の間で話題になることを想定していたためです。また多くの中高生は自宅でも同様にパソコンでなくスマホを触るでしょう。そのためどのページもスマホでの見た目を第一に考えて設計しています。

使い方が分かるサイトに

サービスのコンセプトに自信があったので、使ってもらえさえすれば必ずユーザーに刺さると考えました。したがって初めてサイトに訪れた人にサイトの趣旨・使い方をいかに早く分かりやすく伝えるかを念頭にデザインしていました。(画像内の人名・団体名はダミーデータです)

トップページ

ランキング閲覧や選手検索がすぐにできるようページ上部に配置しています。

ダッシュボードページ

ダッシュボードページは数万人以上の全スイマーに対して動的に生成されます。ページ上部にはその選手のおおまかな傾向をつかめるような情報を、そしてスクロールしたページ下部にはより粒度の高い詳細な情報を配置するようにしています。

ダッシュボードページ下部

また、トップページからランキングを見て、誰かのダッシュボードページを見る、というサービスの動線を強く意識しながらデザインしています。初めてサイトに訪れたユーザーなら、これでサービスの概要がつかめるはずです。

検索ページ

選手名やチーム名を検索できます。DBにはインデックスを張っていましたがかなりコストの高い処理で、レスポンスに問題がありました。

ロゴ

ロゴはやはりPowerPointで作っていました。アップデートの度に作り直しています。フォントへの理解を深めました。

パフォーマンス不足

Twitterでサービスが少し話題になり、利用者が急激に増えました。その結果、集中したアクセスをさばききれなくなりました。同時接続者数約40人ほどでまともにレスポンスを返せなくなり、タイムアウトしてしまうのです。当時はわけも分からず課金してHerokuのインスタンスを強化していましたがほとんど改善することができませんでした。サービスの規模に対して技術力が追いついておらず、どうすれば良いか何もわからずに苦しんでいたのを覚えています。サーバー攻撃の標的にならなかっただけ運が良かったでしょう。

サービス停止

2020年2月、諸事情によりサービスは終わりを迎えました。サービスが正式に稼働した100日間でのべ11万回以上のアクセスをいただきました。現在サイトは閉鎖しています。