【個人開発】子どもとの公園あそびを記録する「公園だいすき」を作りました

個人開発アプリ

このツールをすぐ使いたい方はこちら

公園だいすきを使ってみる →

  1. はじめに — なぜ「公園だいすき」を作ったのか
  2. 「公園だいすき」とは
  3. 主な機能紹介
  4. 使い方ガイド
  5. 技術的なこだわり
  6. 子ども向けUIのこだわり
  7. 今後のアップデート予定
  8. まとめ

はじめに — なぜ「公園だいすき」を作ったのか

子どもがいると、週末はほぼ毎回どこかの公園に行きますよね。うちも例外ではなく、「きょうはどこの公園いく?」が休日の朝のお決まりフレーズになっています。

でも、ふと気づいたんです。せっかく色々な公園に行っているのに、記録が何も残っていない。写真はスマホのカメラロールに埋もれてしまうし、「あの大きなすべり台があった公園、どこだっけ?」と思い出せないことも増えてきました。

公園の訪問記録を、もっと楽しく残せるアプリがあったらいいのに」 — そう思って探してみたものの、子ども向けのシンプルなものが見つからなかったので、自分で作ることにしました。それが「公園だいすき」です。

「公園だいすき」とは

公園だいすきは、近くの公園を地図で探して、子どもとの訪問記録を残せるWebアプリです。

公園だいすき — きょうも こうえん いこう!

現在地から半径1.5km以内の公園を自動で表示。遊んだ遊具や感想、写真を記録して、家族のお出かけ履歴をどんどん積み上げていけます。統計ダッシュボードで訪問数や連続記録も一目でわかります。完全無料・登録不要のPWAアプリです。

既存の公園検索アプリとは違って、「公園だいすき」は訪問を記録して振り返ることに重点を置いています。どの公園で何をして遊んだか、そのときの写真やメモが残っていくので、子どもの成長記録としても楽しめるんです。

PWA対応なので、スマホのホーム画面に追加すればアプリのように使えます。データはすべてブラウザのIndexedDBに保存されるため、アカウント登録も不要。完全無料で使えます。

主な機能紹介

「公園だいすき」には、家族の公園あそびを楽しく記録するための機能がぎゅっと詰まっています。主要な機能を紹介します。

🗺

インタラクティブ公園マップ

OpenStreetMap + Leafletで構築した地図画面。現在地から半径1.5km以内の公園を自動検出して、マップ上にピンで表示します。Overpass APIを使ってリアルタイムに公園データを取得するので、新しくできた公園もすぐに反映されます。

訪問記録

公園を選んだら、遊んだ遊具をタップで選択。すべり台、ブランコ、すなば、鉄棒など定番の遊具があらかじめ用意されています。写真を撮って添付したり、メモを残したり。その日の思い出をまるごと記録できます。

🎨

カスタムアクティビティ

用意されている遊具以外にも、自分だけのアクティビティを絵文字つきで追加できます。「かけっこ」「どんぐりひろい」「しゃぼんだま」など、子どもの遊びは無限大。自由にカスタマイズしてください。

📈

統計ダッシュボード

訪問した公園の数、総訪問回数、連続記録(ストリーク)をひと目で確認できます。遊具ランキングチャート月別トレンドグラフもあるので、「うちの子は最近ブランコがお気に入りなんだ」といった発見があります。

📷

写真管理

訪問ごとに写真を添付できます。写真はIndexedDBにローカル保存されるのでサーバーへのアップロードは不要。自動リサイズ機能つきで、ストレージ容量も心配いりません。公園ごとに写真が整理されるので、思い出を振り返るのも簡単です。

🎉

紙吹雪アニメーション

新しい公園を訪問したとき、記録を保存すると画面いっぱいに紙吹雪が舞います。子どもと一緒に「やったー!」と盛り上がれる、ちょっとした演出です。小さなことですが、記録を続けるモチベーションにつながります。

💾

バックアップ & 復元

すべてのデータをJSON形式でエクスポート・インポートできます。機種変更やブラウザ移行時も安心。大切な訪問記録を失う心配がありません。定期的なバックアップもワンタップで完了します。

選べる遊具・アクティビティ

すべり台
ブランコ
すなば
鉄棒
ジャングルジム
シーソー
+ カスタム追加

使い方ガイド

「公園だいすき」の使い方はとてもシンプルです。登録不要、4ステップで記録が完成します。

  1. アプリを開いて位置情報を許可

    ブラウザで「公園だいすき」にアクセスします。位置情報の利用を許可すると、現在地の周りにある公園が自動で地図上に表示されます。

  2. 行きたい公園を選ぶ

    マップ上のピンをタップして公園を選びます。公園名と距離が表示されるので、「今日はこの公園に行こう!」と子どもと一緒に決められます。

  3. 遊んだ内容を記録する

    公園で遊んだら、使った遊具をタップで選択。写真を撮って添付したり、メモを書いたり。大きなボタンで操作できるので、お子さんと一緒に記録できます。

  4. 保存して紙吹雪を楽しむ

    記録を保存すると紙吹雪が舞って、訪問履歴に追加されます。統計ダッシュボードで訪問数やお気に入りの遊具をチェックしてみてください。

今すぐ近くの公園を探してみよう

登録不要・完全無料。スマホでアクセスするだけですぐに使えます。

公園だいすきを使ってみる

技術的なこだわり

エンジニアとしてのこだわりも紹介させてください。「公園だいすき」は以下の技術スタックで構築しています。

Frontend
React 19
最新のReact 19を採用。コンポーネントベースの設計で、地図・記録・統計の各画面をスムーズに切り替えられます。

Map
Leaflet + OpenStreetMap
軽量で高速な地図ライブラリLeafletと、オープンソースのOpenStreetMapを組み合わせ。商用利用も無料で、個人開発に最適です。

Data Source
Overpass API
OpenStreetMapのデータを動的にクエリ。現在地から半径1.5km以内の公園(leisure=park)をリアルタイムに取得します。

Storage
IndexedDB
訪問記録・写真・設定をすべてブラウザ内に保存。サーバー不要でプライバシーも安心。写真は自動リサイズしてから保存します。

Build
Vite
高速なビルドツールViteを採用。開発時のHMR(ホットリロード)が爆速で、効率よく開発を進められました。

Architecture
PWA (Service Worker)
Service Workerによるオフライン対応。一度読み込めば、電波の悪い公園でも記録画面が表示されます。ホーム画面追加でアプリ風に。

技術選定で最もこだわったのは「サーバーレス」であることです。すべてのデータをブラウザのIndexedDBに保存する設計にしたことで、バックエンドサーバーの運用コストがゼロになりました。個人開発で月額費用がかからないのは大きいです。ユーザーのデータが外部に送信されないので、子どもの写真を安心して記録できるのもポイントです。

地図まわりでは、Overpass APIのクエリ最適化に苦労しました。半径1.5kmという範囲は、都市部だと数十件の公園がヒットすることもあります。レスポンスのキャッシュやデバウンス処理を入れて、快適な表示速度を実現しています。

子ども向けUIのこだわり

「公園だいすき」は、子どもと一緒に使うことを前提にUIを設計しています。いくつかのこだわりポイントを紹介します。

🖐

大きなタッチターゲット

ボタンやタップ領域は、小さな指でも押しやすいように大きめに設計しています。遊具の選択ボタンも十分なサイズを確保しました。

😊

絵文字ナビゲーション

メニューや遊具の選択には絵文字をふんだんに使用。文字が読めない小さなお子さんでも、絵文字を見て直感的に操作できます。

ひらがな表記

画面上のテキストはできるだけひらがなで表記しています。小学校低学年くらいのお子さんなら、自分で読んで操作できるようになっています。

子ども向けアプリで大切なのは、「子どもが自分で触りたくなるUI」だと思っています。親がずっと操作するのではなく、子どもが自分で「きょうはブランコであそんだ!」とタップして記録する — そういう体験を目指して作りました。

今後のアップデート予定

「公園だいすき」はまだまだ進化の途中です。現在、以下のような機能を開発中・検討中です。

  • お気に入り公園の登録 — よく行く公園をお気に入りに追加して、すぐにアクセスできるようにする機能
  • 公園の口コミ・メモ共有 — 「このすべり台は小さい子にはちょっと怖いかも」といった情報を家族間で共有
  • 訪問スタンプカード — 一定回数訪問するとバッジがもらえるゲーミフィケーション要素
  • 天気情報の連携 — 公園に行く前に天気をチェックできるようにする機能
  • 複数キッズ対応 — きょうだいそれぞれの記録を分けて管理できるようにする機能
  • 公園の遊具情報データベース — ユーザー同士で「この公園にはこの遊具がある」という情報を蓄積していく仕組み

ユーザーのみなさんからのフィードバックを最も大切にしています。「こんな機能がほしい」「ここが使いにくい」という声があれば、ぜひXのDMやお問い合わせからお聞かせください。

まとめ

公園だいすきは、子どもとの公園あそびをまるごと記録できるWebアプリです。改めてポイントをまとめます。

  • 近くの公園を自動検出 — 現在地から1.5km以内の公園を地図に表示
  • 遊具・写真・メモを記録 — その日の遊びをまるごと保存
  • 統計ダッシュボード — 訪問数、ストリーク、遊具ランキングを可視化
  • 紙吹雪で盛り上がる — 新しい公園の訪問を親子で喜べる演出
  • PWA対応 — オフラインでも使える、ホーム画面に追加可能
  • 完全無料・登録不要 — データはすべてローカル保存で安心

子どもと過ごす公園での時間は、振り返ってみるととても貴重なものです。「あのとき初めてブランコに乗れたんだよね」「この公園のすべり台が大好きだったよね」 — そんな思い出を形に残しておけるアプリを作りたい、という気持ちで開発しました。

個人開発のアプリなので至らない点もあるかもしれませんが、子育て中の方にとって少しでも役立つものになればうれしいです。ぜひ一度試してみてください。感想やフィードバックも大歓迎です。

公園だいすき — きょうも こうえん いこう!

登録不要・完全無料。家族の公園あそびを記録してみませんか?

公園だいすきを始める

タイトルとURLをコピーしました