- デモ
- ホームページ制作
「うちのチーム」デモサイト なりなりSC ジュニア
Overview概要
子どものスポーツチーム向けホームページ制作サービス「うちのチーム」のデモとして作った、架空の少年サッカーチームのサイトです。練習試合の空いている日からの申し込み、保護者の許可に合わせた選手紹介、合言葉で守る試合の予定など、チームの困りごとに合わせた機能を入れました。
Challenge課題
このデモでは、なりなり市の少年サッカーチームを想定しました。子どものスポーツチームによくある悩みを元にしています。
- ちゃんとしたホームページがなく、入団を考えている家庭が「親の当番は？」「費用は？」を確かめられない
- 練習試合の申し込みが電話や知り合いづてで、空いている日を何度もやりとりする
- 子どもの写真や名前を載せたいが、載せてよい子とよくない子がいて、無料のサービスでは扱いにくい
- 試合の会場や集合時間は保護者に伝えたいが、誰でも見られる場所には出したくない
- 担当の保護者やコーチが毎年替わるので、難しい仕組みだと更新されなくなる
Approach取り組んだこと
「うちのチーム」は、機能を共通の土台（WordPress の親テーマ）にまとめ、見た目はデザインの型から選んで、チームカラー・エンブレム・写真で仕上げる作りです。このデモはその1つ目で、土台とデザインの型「stadium」を一緒に作りました。
チームならではの機能
- 練習試合の予定表：世話人が、大会や行事で受けられない日（NG 日）をカテゴリごとに付けると、空いている日がカレンダーに出ます。日付を押すと、申し込みフォームにその日が入ります
- 写真と名前の公開の許可：選手ごとに「許可あり・なし」を切り替えるだけ。許可のない子は、背番号入りのユニフォームのイラストとイニシャルで紹介します。切り替えられるのはチームの代表だけです
- 試合の予定・戦歴：試合の日と結果を入れると、予定・年度ごとの勝敗・相手ごとの戦績・トップの「次の試合」「最近の結果」に出ます。会場と集合時間は、保護者の合言葉を入れた人だけに見えます（デモの合言葉は soccer2026。ページにも出ています）
- LINE に貼る文：試合の結果を保存すると、チームの LINE にそのまま貼れる文ができ、ボタン1つでコピーできます
- 学年の自動の進級：選手は学年を選ぶだけ。4月に自動で1つ上がり、カテゴリ（キッズ・U-8・U-10・U-12）も付け替わります。卒団した子は一覧から外れます
- 入団を考えている家庭への案内：親の当番・費用・1日の流れ・コーチ・保護者の声・よくある質問を1ページにまとめ、体験の申し込みにつなげます
担当が毎年替わっても更新できる管理画面
- 左のメニューを「チームの更新」「チームの情報」などに分け、各画面の上に「この画面の使い方」を置きました
- チームの代表と書く人で権限を分け、書く人（コーチ・世話人・広報係の保護者など）は、お知らせ・試合結果・予定表を書いてそのまま公開できます
デザインの型「stadium」
- グラウンドのモチーフ：トップは応援の横断幕、スポンサーはタッチライン沿いの看板、試合結果はスコアボード、選手は背番号のユニフォームにしました
- スピード感：前に傾けた形と、左から駆け込んでくる動きでまとめました。チームカラーは芝のグリーンとひまわりのイエローです
架空のチームなので、全ページに「デモサイト」の帯を出し、検索結果には出ない設定にしています。子どもの写真はすべて AI で作った画像で、実在の子どもは写っていません。チーム名・人物・住所も架空のものです。
Result結果
入団を考えている家庭は、当番や費用をホームページで確かめてから体験に申し込めます。練習試合の相手は、空いている日を見てそのまま申し込めるので、日程のやりとりが減ります。写真の公開の許可も、選手ごとに切り替えるだけで守れます。
制作期間は、共通の土台を含めて2日です。この土台があるので、2つ目の野球のデモは、新しいデザインの型とチームの値を足すだけで作れました。学年で分かれる子どものスポーツチームなら、競技を選ばずに使えます。
Galleryギャラリー
-
トップ（応援の横断幕をモチーフにした最初の画面） -
入団を考えている方へ（親の当番・費用などに先に答える） -
練習試合の空いている日（押すと申し込みへ） -
次の試合・最近の結果・お知らせ -
選手紹介（許可のない子は、ユニフォームのイラストとイニシャル） -
団員募集：費用と1日の流れ -
試合の予定（合言葉を入れた保護者だけに会場・集合時間。スマホは入れる前） -
戦歴（年度ごとの勝敗とスコア） -
練習試合の予定表（PC）と、日付を押して開いた申し込みフォーム（スマホ） -
試合結果の記事のスコアボード -
管理画面：練習試合の予定表（カテゴリごとに NG 日を付ける） -
管理画面：試合の予定・結果（LINE に貼る文をコピー） -
管理画面：選手（写真と名前の公開の許可を切り替える）
//contact
このような制作について相談する
お問い合わせフォームに、この実績をご覧になっての相談だと書き添えてお送りします。
相談する
