めっちゃ使いやすいスコアボードを作りました（3チーム以上でも使える）
はじめに
この度、Web スコアボードアプリ「UnScoreboard」を作成しました。このアプリの最大の特徴は、3 チーム以上のスコア管理にも対応している点です。
実際に実装したのは、僕ではなく弊社の新人エンジニアです。
この記事では、なぜスコアボードを作ることにしたのか、使いやすさにこだわったポイント、そして実装について紹介していきたいと思います。
なぜスコアボードを作ったのか
今回、スコアボードアプリを作ろう思ったきっかけは主に 2 つあります。
- 3 チーム以上のスコアボードがあまりない
- Web で調べて出てくるスコアボードが少しダサい
それぞれについて、もう少し詳細に説明します。
3 チームの得点を管理できるスコアボードアプリが Web 上にない
社内で一時期「モルック」が流行しました。今でもたまにやっています。
「モルック」というのは、12 本の木の棒を立てて並べ、離れたところから別の棒を投げて倒し、点数を競う屋外競技です。
モルックをプレイする際に 3 チーム以上に分かれてゲームをすることがあります。弊社にあるアナログのスコアボードが２チーム用のため、3 チームの場合は、スコアをそれぞれ覚えていたり、地面に書いたりしてゲームをしていました。
3 チーム以上のスコアをカウントできるスコアボードがあるだろうと思い、スマホのブラウザで検索したところ、意外と 3 チーム以上に対応したスコアボードが見つかりませんでした。（この時スマホアプリは調べていません。たぶんスマホアプリの方が色々あるだろうけど。）
そこで、Web 上で 3 チーム以上に対応したスコアボードは意外と需要あるかもなーと思いました。
Web で調べて出てくるスコアボードの UI がビミョー
ブラウザで「スコアボード」について調べて出てくるスコアボードアプリの UI はちょっとダサかったり、使い勝手に何があったりと、シンプルで使いやすいものが少ない印象でした。
モルックで使用する分には、UI はひとまずシンプルで十分なので、サクッと作ってみるかという流れになりました。
Web スコアボードアプリ「UnScoreboard」の機能
今回作成した Web スコアボードアプリの正式名称は「UnScoreboard」といいます。
「UnScoreboard」の機能について紹介します。
特に機能が多いわけではない、シンプルなスコアボードアプリです。
1 番の特徴は、3 チーム以上に対応している点です。「チームを追加」ボタンで、スコアをカウントするチームを増やすことができます。最大で 10 チームまで対応しています。またチームは、ゴミ箱アイコンボタンで減らすこともできます。
それぞれ「+」「-」ボタンでスコアを増減させることができます。
最初のリリースでは、チーム名の編集機能やセット数のカウントなどの機能は削りました。
スマホで、さっと調べてすぐ使えるようにできるだけ説明がなくても使えるようなシンプルな UI を心がけました。
基本的な機能は以上です。どこにでもあるスコアボードです。
スコアボードの UI でこだわったところ
今回作成したスコアボードの UI でこだわった部分について紹介させてください。
スマホの縦持ち・横持ちに対応
このアプリを使う場合は、ほぼ 10 割スマホだと思われます。
そこで、デザインはスマホの縦持ち・横持ちで崩れないようにしています。
↓ スマホ縦持ちの場合
↓ スマホ横持ちの場合
スコアの増減が直感的
そんなの当たり前のことじゃないか、と思われるでしょう。しかし、意外と直感的でないスコアボードも見受けられました。たとえば、プラス・マイナスのボタンでなぜかマイナスが上にある、プラスマイナスのボタンがなくスコアをタップするとスコアが増える、そもそもスコアを減らすことができない、などなど。スコアボードというシンプルなアプリでも UI にばらつきがあり、直感的でないものも少なくありませんでした。
今回作成したスコアボードでは、迷うことがなくスコアの増減ができるようにデザインしました。
スコアボードの実装
実装に関しては、実際にアプリを実装したエンジニアが Qiita で詳しく解説しているので、そちらを読んでいただけると幸いです。
まとめ
今回は、3 チーム以上に対応した Web スコアボードアプリ「UnScoreboard」を紹介させていただきました。
Web アプリとしてスコアボードを作成しましたが、スコアボードは基本的にはスマホアプリ（ネイティブアプリ）の方が充実している印象です。ネイティブアプリにも展開してみたいと思っています。（ネイティブアプリには、同じようなアプリが掃いて捨てるほどあるかもしれないけれど。）
まあ、Web の方がサクッと調べて使えるので、これはこれでありだと思っています。
ぜひ、スポーツやボードゲームなどでスコアボードが必要になった際は使っていただけると幸いです。
最後まで読んでいただきありがとうございました。
Discussion