子ども運動教室のWebサイト制作

2026年10月19日

習い事選びは、保護者がスマホで検索して、見比べて、その日のうちに決めることが少なくありません。だからこそ教室のホームページには「かわいい」だけでなく、「見つけてもらえる」「迷わず予約できる」ことが求められます。

この記事では、イトハデザインが手がけた子ども向け運動教室のWebサイト制作について、企画・サイト設計・SEO・デザインの考え方を順番にご紹介します。習い事教室やスクールのホームページ制作を検討している方の参考になればうれしいです。

制作概要

項目	内容
クライアント	子ども向け運動教室（※掲載用に名称・内容を変更）
対象	3歳〜小学6年生のお子さまと保護者
エリア	兵庫県姫路市（太子町・たつの市を含む商圏）
担当範囲	企画／情報設計／SEO設計／UIデザイン／コーディング
対応	スマホファースト／レスポンシブ（PC対応）
サンプルサイト	https://itohadesign.com/works/

※守秘義務に配慮し、実際の制作内容をもとに、スクール名・料金・人物・保護者の声などを架空の内容に置き換えて掲載しています。

制作の背景：習い事選びはスマホで決まる

地域の習い事を探す保護者の多くは、家事や寝かしつけの合間にスマホで「姫路習い事」などと検索します。InstagramやGoogleマップも見比べながら、気になった教室のサイトを数分で確認していきます。

その短い時間で「対象年齢・料金・場所」が分からなければ、そのまま他の教室へ移ってしまいます。そこで今回は「保護者がスマホで迷わず無料体験を予約できるサイト」をテーマに、企画から公開まで一貫して制作しました。

解決したかった4つの課題

制作にあたり、次の4つを課題として設定しました。

対象年齢・料金・場所を、保護者がすぐに確認できること
「運動が苦手な子でも大丈夫？」という不安を、予約前に解消できること
地域名で検索したときに見つけてもらえること
子ども向けらしい親しみやすさと、保護者が安心できる信頼感を両立すること

設計のポイント

デザインに入る前に、「誰が、どこから来て、何を確かめて予約するのか」を整理し、ページ構成と導線をFigmaで設計しました。

① 保護者の気持ちの流れに沿ったページ構成

「ここは何の教室？」→「うちの子のことだ」→「他と何が違う？」→「うちの子でも大丈夫？」→「体験してみよう」。保護者の気持ちが動くこの順番に合わせて、セクションを並べました。

認知：ファーストビュー（対象年齢・エリア・無料体験を即提示）
共感：保護者の悩み、コンセプト
比較：選ばれる理由、クラス・料金
不安解消：レッスン風景、コーチ紹介、保護者の声、体験の流れ、FAQ、アクセス
行動：無料体験の予約

② 予約までの導線を最短にする

予約方法はLINE（メイン）とWebフォーム（サブ）の2つに絞りました。入力よりも「トークで送る」ほうが、忙しい保護者には気軽だと考えたためです。

予約ボタンは、ファーストビュー・料金のあと・保護者の声のあと・ページ最後の4か所に配置しました。スマホではファーストビューを過ぎると画面下に予約バーを常に表示し、どこを読んでいても1タップで予約できます。ボタンのそばには「無理な勧誘はありません」と添え、申し込みのハードルを下げています。

③ 地域で見つけてもらうためのSEO設計

検索キーワードを「地域」「年齢」「悩み」の3つの軸で整理し、それぞれを受け止めるページを決めました。

軸	キーワード例	受け止めるページ
地域	姫路運動教室／姫路子ども習い事	トップページ
年齢	幼児運動教室姫路／3歳習い事	年齢別のクラスページ
悩み	運動苦手子ども／かけっこ教室	悩みセクション・コラム

デザインのポイント

デザインはムードボードをもとに、「子どもが楽しそう」と「保護者が安心できる」の両方が伝わるトーンを目指しました。

幾何学モチーフで「ちがうから、たのしい。」を表現

コンセプトは「ちがうから、たのしい。」です。得意な子も苦手な子も、違いがあるから一緒にいて楽しい。そんな想いを込めました。円・半円・三角・四角といった形の違う図形を組み合わせ、一人ひとり違う子どもたちが一緒に楽しむ様子と、運動のリズムを重ねています。写真はアーチ形や円形で切り抜き、図形と重なり合うように配置しました。