QuickBoardを作った話
サッカー戦術ボードアプリ「QuickBoard」をリリースしてから、多くの方に使っていただけるようになりました。今回は、なぜQuickBoardを作ることになったのか、開発過程での試行錯誤、そして込めた想いについてお話しします。
なぜQuickBoardを作ったのか
きっかけは友人コーチの悩み
事の始まりは、地域のサッカーチームでコーチをしている友人からの相談でした。
「最近練習でタブレットを使い始めたんだけど、なかなか良い戦術アプリが見つからないんだよね。サクッとフォーメーションをいじれる、シンプルなアプリってない?」
その時調べてみたところ、確かに戦術ボードアプリはいくつかありました。でも、友人が求めるシンプルさからは少し離れていて。
既存アプリの問題点:
- 機能が豊富すぎて逆に使いづらい
- スマホ・タブレット対応されていない
- 会員登録が必要で面倒
- 有料版でないと満足に使えない
- 日本語対応していない
「せっかくだし自分で作ってみようかな」そう思ったのが始まりでした。
開発コンセプト:物理的な戦術ボードの操作感を再現
1. 直感的な操作性の実現
一番こだわったのは物理的な戦術ボードの操作感でした。
実際の戦術ボードって、コマを手で動かすだけでフォーメーションが変わりますよね。QuickBoardでもその感覚を再現したかったんです。
追求した操作感:
- ドラッグ&ドロップでプレイヤーを直感的に配置
- タッチ操作とマウス操作の違和感ゼロ
- 物理的なコマを動かすような滑らかさ
- 控え選手もフィールド外に置いておける
また、戦術ボードって「今すぐ使いたい」ツールでもあります。だからこそログイン不要で、アクセスした瞬間から使えるように設計しました。
従来:アプリダウンロード → 会員登録 → ログイン → やっと使える
QuickBoard:URLアクセス → 即使える
2. URL共有という革新
QuickBoardの最大の特徴はURL共有機能です。
作った戦術図がURLに自動的に保存され、そのURLを共有するだけで、相手が全く同じ戦術図を見ることができます。
技術的な実装:
- フォーメーションデータをエンコードしてURLパラメータに埋め込み
- 圧縮アルゴリズムでURL長を最適化
この仕組みにより、LINEなどでURLを送るだけで戦術の事前共有も簡単にできます。
開発過程での試行錯誤
技術選択:なぜWeb技術なのか
選択肢の検討:
- ネイティブアプリ → ストア審査、開発コスト高
- Webアプリ → 即座にアクセス可能、クロスプラットフォーム対応
Webアプリを選んだ決め手はアクセシビリティでした。
多言語対応の実装
グローバルに使ってもらいたいと思い、7言語対応を実装しました。
対応言語:
- 日本語、英語、中国語(簡体字)
- スペイン語、ドイツ語、イタリア語、ポルトガル語
特にスペイン語圏での利用があり、この判断は正解だったと思います。
リリース後の反響と学び
ユーザーからのフィードバック
- 「シンプルで使いやすい」
- 「URL共有が便利すぎる」
- 「無料でこの機能は凄い」
技術的な工夫とこだわり
URL設計の詳細
QuickBoardのURL共有は、技術的にけっこう面白い仕組みになっています。
// フォーメーションデータの例
const formation = {
players: [{x: 100, y: 200, color: 'blue'}, ...],
};
const encodedData = btoa(JSON.stringify(formation));
const shareUrl = `https://aoma23.com/app/quickboard/?q=${encodedData}`;
このような方式により、サーバー不要でデータ永続化を実現しています。
レスポンシブ対応
戦術ボードはPCでもスマホ、タブレットでも使いたいツール。どのデバイスでも快適に使えるよう設計しています
対応策:
- タッチ操作とマウス操作の統一
- 画面サイズに応じたUI要素のリサイズ
- フィールド全体の縦横表示変更機能
今後の展望
機能追加の予定
短期的な改善:
- SNS共有時の画像(OGイメージ)改善
- カラーのカスタマイズ
- より多くのフォーメーションテンプレート
中長期的な展望:
- 描画ツールの追加
- 軽量なアニメーション機能
- チーム管理機能
- API提供による他サービス連携
最後に:作って良かったこと
QuickBoardを開発して一番良かったのは、友人を含むユーザーに喜んでもらえていることです。
海外からのアクセスも多々あり、時々届くお礼のメッセージは開発のモチベーションになっています。
QuickBoardを試してみませんか?
もしサッカーに関わる機会があれば、ぜひQuickBoardを使ってみてください。
🔗 QuickBoard: https://aoma23.com/app/quickboard/
- ✅ 軽快動作 - ストレスフリー
- ✅ ログイン不要 - すぐ使える
- ✅ URL共有 - 簡単シェア
- ✅ 多言語対応 - 7言語サポート
コーチの方はもちろん、サッカーファンの戦術議論、お子さんへのサッカー戦術説明など、様々な場面で活用していただけると嬉しいです。
フィードバックやご要望があれば、いつでもお気軽にご連絡ください。より良いツールにしていくために、ユーザーの皆さんの声をお待ちしています!