Overview
概要
| クライアント | almoスポーツ |
| 業界 | スポーツスクール |
| 制作期間 | 約2ヶ月 |
| 提供範囲 | 企画・設計・デザイン・開発・公開 |
| 技術スタック | Next.js / TypeScript / Tailwind CSS / Vercel |
| サイトURL | almo-sports.com |
Background
背景・課題
almoスポーツは、子どもたちが安心してスポーツに親しめる環境を提供するスポーツスクールです。スポーツを通じた心身の成長と、仲間とのつながりを育むことを大切にした活動を展開しています。
スクールの認知度を高め、新規受講生を獲得するにあたって、既存のWebサイトでは「スクールの雰囲気が伝わりにくい」「保護者が知りたい情報（料金・スケジュール・安全への配慮）にたどり着きにくい」という課題がありました。
また、子ども向けサービスという性質上、「安心感」と「親しみやすさ」を同時に打ち出すデザインが求められていました。保護者が「ここに子どもを預けたい」と感じられるブランドイメージの構築が、最大のテーマでした。
Solution
提案内容
HLTは、ヒアリングを通じてスクールの「想い」を深く理解した上で、以下の方針で制作を進めました。
1. 写真・動画を軸にした感情訴求
実際の練習風景・子どもたちの笑顔の写真を全面に使い、スクールの活気ある空気感を一目で伝えるビジュアル設計を採用。テキストより先に「場の雰囲気」が伝わるファーストビューを設計しました。
2. 保護者目線の情報設計
保護者がWebサイトに訪問する主な目的（スクール概要確認・料金確認・体験申し込み）を起点にサイトマップを設計。トップページから3クリック以内で体験申し込みに到達できる導線を実現しました。
3. 明るく活動的なブランドカラー
スポーツの躍動感と子どもらしい明るさを表現するカラーパレットを設計。親しみやすさを保ちつつ、しっかりした運営主体としての信頼感も損なわない配色バランスにこだわりました。
Implementation
実装の工夫
技術スタックにはNext.js + TypeScript + Tailwind CSSを採用。Vercel上でのデプロイにより、世界水準のCDNを活用したパフォーマンスを実現しています。
画像最適化
Next.jsのImage Optimizationを活用し、WebP形式への自動変換・遅延読み込み・レスポンシブ対応を実装。写真を多用するサイトながら、PageSpeed Insightsで高スコアを維持しています。
モバイルファースト設計
保護者の多くがスマートフォンでサイトを確認することを想定し、モバイル表示を最優先にデザイン。タップしやすいボタンサイズ・読みやすいフォントサイズ・縦スクロールに最適化したレイアウトを採用しました。
アクセシビリティ対応
セマンティックなHTMLタグの使用、適切なalt属性の設定、色のコントラスト比の確保など、子どもだけでなく保護者全員が使いやすいサイトを目指したアクセシビリティ対応を実施しました。
Results
成果
サイトリニューアル後、スクールへの問い合わせ・体験申し込み数が増加しました。特にスマートフォンからのアクセスが全体の大部分を占めており、モバイルファーストの設計が保護者の行動につながる結果となりました。
また、SNSでのシェアや口コミを通じたオーガニック流入も増加。「サイトを見て安心してお申し込みできた」という保護者の声も届いており、ブランドイメージの向上に貢献しています。
Summary
まとめ・今後の展望
本案件を通じて、子ども向けサービスのWebサイトにおいて「親が安心して選べるブランドイメージ」の構築がいかに重要かを改めて実感しました。サービスの品質がどれほど高くても、Webサイトで伝わらなければ選ばれる機会を逃してしまいます。
HLTではヒアリングを徹底し、クライアントの「想い」をWebというメディアを通じて正しく届けるサイト制作を強みとしています。スポーツスクール・習い事教室・子ども向けサービスをお持ちの事業者様は、ぜひご相談ください。