aoma

aomaです。エンジニアしてます。

サッカー戦術ボードアプリ「QuickBoard」をリリースしてから、多くの方に使っていただけるようになりました。今回は、なぜQuickBoardを作ることになったのか、開発過程での試行錯誤、そして込めた想いについてお話しします。

なぜQuickBoardを作ったのか

きっかけは友人コーチの悩み

事の始まりは、地域のサッカーチームでコーチをしている友人からの相談でした。

「最近練習でタブレットを使い始めたんだけど、なかなか良い戦術アプリが見つからないんだよね。サクッとフォーメーションをいじれる、シンプルなアプリってない？」

その時調べてみたところ、確かに戦術ボードアプリはいくつかありました。でも、友人が求めるシンプルさからは少し離れていて。

既存アプリの問題点：

  • 機能が豊富すぎて逆に使いづらい
  • スマホ・タブレット対応されていない
  • 会員登録が必要で面倒
  • 有料版でないと満足に使えない
  • 日本語対応していない

「せっかくだし自分で作ってみようかな」そう思ったのが始まりでした。

開発コンセプト：物理的な戦術ボードの操作感を再現

1. 直感的な操作性の実現

一番こだわったのは物理的な戦術ボードの操作感でした。

実際の戦術ボードって、コマを手で動かすだけでフォーメーションが変わりますよね。QuickBoardでもその感覚を再現したかったんです。

追求した操作感：

  • ドラッグ&ドロップでプレイヤーを直感的に配置
  • タッチ操作とマウス操作の違和感ゼロ
  • 物理的なコマを動かすような滑らかさ
  • 控え選手もフィールド外に置いておける

また、戦術ボードって「今すぐ使いたい」ツールでもあります。だからこそログイン不要で、アクセスした瞬間から使えるように設計しました。

従来：アプリダウンロード → 会員登録 → ログイン → やっと使える
QuickBoard：URLアクセス → 即使える

2. URL共有という革新

QuickBoardの最大の特徴はURL共有機能です。

作った戦術図がURLに自動的に保存され、そのURLを共有するだけで、相手が全く同じ戦術図を見ることができます。

技術的な実装：

  • フォーメーションデータをエンコードしてURLパラメータに埋め込み
  • 圧縮アルゴリズムでURL長を最適化

この仕組みにより、LINEなどでURLを送るだけで戦術の事前共有も簡単にできます。

開発過程での試行錯誤

技術選択：なぜWeb技術なのか

選択肢の検討：

  1. ネイティブアプリ → ストア審査、開発コスト高
  2. 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言語サポート

コーチの方はもちろん、サッカーファンの戦術議論、お子さんへのサッカー戦術説明など、様々な場面で活用していただけると嬉しいです。

フィードバックやご要望があれば、いつでもお気軽にご連絡ください。より良いツールにしていくために、ユーザーの皆さんの声をお待ちしています！

Updated:

You May Also Enjoy