プログラミング教室のサイトには、元気で楽しそうな雰囲気のものが多い気がします。子ども向けのロボットプログラミング教室「プログラボ」のサイトを見て、その「楽しさ」と、保護者が求める「安心」をどう両立しているのかを分析しました。
はじめに
この記事でわかること
- 授業の写真で「楽しそう」と「安心」を同時に伝える見せ方
- ネジが回りながら見出しが現れる、ロボット教室らしい動き
- 名前の由来や「1人1台」の方針を言葉で見せる作り
- 子どもの作品の見せ方について、私が考えたこと
結論
Proglab（プログラボ）公式サイトは、授業風景の写真、黄緑を中心にした明るい色、歯車のモチーフで、子どもの学びの楽しさと保護者の安心感の両方を伝える教室のサイトです。スクロールに合わせて動く見出しが、ロボット教室の世界観をさりげなく伝えています。
サイトの基本情報
- サイト名：Proglab（プログラボ）公式サイト
- ジャンル：子ども向けのプログラミング教育
- 目的：教室の案内、体験授業への案内
- 基礎知識：プログラボは2016年、阪急阪神ホールディングス系のミマモルメと読売テレビが共同で始めたロボットプログラミング教室で、全国に教室を展開しています。
授業の写真で「楽しそう」と「安心」を伝える
主に見に来るのは、小学生から中学生の子どもを持つ保護者です。習い事を探している人に向けて、トップページでは実際に学んでいる子どもたちの写真が大きく載っていました。写真を見るだけで「楽しそう」「安心して通わせられそう」と感じられます。ロボットの教材や学習の様子の写真も多く、何を学ぶのかが文章を読まなくても分かります。
色は白を土台に、黄緑がメインです。アクセントに青・ピンク・黄色も使われていますが、背景をシンプルにしているので、にぎやかでも見やすさは保たれていました。黄緑は成長や未来を思わせる色で、子どもの学びの場によく合っています。
名前の由来と方針を、言葉でも見せる
「ProgLab」という名前が、「プログラミング」と「プログレス（前進）」を組み合わせた言葉であることが、教室の紹介のページで説明されていました。また、すべてのコースで1人1台のロボットを使う方針も紹介されています。
「楽しそう」という雰囲気だけでなく、教育の方針の裏付けを言葉でも見せている点が、保護者の安心につながると感じました。
ネジが回りながら現れる見出し
ページは、最初の画面で教室の特徴を伝え、教室の紹介（About）、教室を探す（Search）、利用者の声（Voice）、お知らせ（News・Event）と、テーマごとに並んでいます。最後は体験授業の申し込みへと案内されます。
特に印象に残ったのが、スクロールに合わせて動く見出しです。ネジのアイコンが回りながら、英語の見出しが1文字ずつ現れます。ロボットやプログラミングの世界観と自然に結びついた動きでした。
この動きは、GSAP（Webページに動きをつけるための道具）とScrollTriggerという機能で作られているようです。見る人がスクロールしたときにだけ動くので押しつけがましくなく、サイトへの没入感を高めています。全体の動きは控えめで、この見出しの動きが「ここぞ」という場所で効いていました。
このサイトから取り入れたいこと
- 写真で「使ったあと」を見せる：授業の様子が見えると、通ったあとのイメージがわきます。
- 動きは、世界観を表すところだけに使う：ネジが回る見出しのように、テーマに合った動きは印象に残ります。
- 雰囲気だけでなく、方針も言葉にする：名前の意味や教え方の決まりを書くと、安心につながります。
自分が教室のサイトを作るなら、動きをつける場所は「見出しだけ」のように一か所に決めて、その教室らしいモチーフ（たとえばブロックや鉛筆）で動かしてみたいと思います。あちこち動かすより、一か所の動きのほうが印象に残るはずです。
ほかのサイトと比べると
同じ「学び・科学」のベネッセ（「No.023 ベネッセのデザイン分析」）は、緑を中心にした落ち着いた色で、教育の会社としての安心感を大切にしていました。プログラボも同じ緑の仲間の黄緑を使っていますが、アクセントの色や動く見出しで、より「楽しそう」を前に出しています。会社全体を伝えるサイトと、子どもが通う教室のサイトで、同じ教育でも明るさの度合いが違うのが面白いところです。
Proglab公式サイトを見て、私が気づいたこと
このサイトから学んだこと
子どもたちが実際に学んでいる様子を写真で見せることで、サービスの内容を文章だけで説明するより分かりやすく伝えられることを学びました。また、余白や色の使い方で、情報が多くても見やすく整理できる点が参考になりました。
自分ならこう作る
教室で実際に作れる作品や、学んだ成果を、もっと目立つ場所で紹介してもよいと感じました。通ったあとのイメージがより具体的になれば、保護者が学ぶ内容を理解しやすくなると考えられます。
これから学ぶ人へ
動きは派手にすることが目的ではなく、サービスの世界観や情報の理解を助けるために使うことが大切だと感じました。また、分析するだけでなく、実際に自分で試しに作ってみることで、デザインとコーディングの両方の理解が深まると学びました。
※この分析は、Webデザインの専門校での学習の一環として、公開サイトを実際に観察・整理した記録です。
同じ「学び・科学」のサイトとして、「No.021 国立科学博物館 公式サイトのデザイン分析」も分析しています。見比べると、それぞれの工夫の違いがよく分かります。
この記事のまとめ
Proglab公式サイトは、授業風景の写真と黄緑を中心にした明るい色で、子どもの学びの楽しさと保護者の安心感の両方を伝える教室のサイトです。ネジが回りながら現れる見出しで世界観を表し、名前の由来や「1人1台のロボット」の方針も言葉で見せています。子どもの作品がもっと目立つと、通ったあとの姿がさらに想像しやすくなりそうです。
よくある質問（FAQ）
Q. プログラミング教室のサイトは、なぜ楽しい雰囲気のものが多いのですか？
A. 「プログラミングは難しい」というイメージをやわらげるために、楽しさを前に出しているのだと思います。授業の写真で、子どもが笑顔で学ぶ様子を見せることが多いです。
Q. 教室を選ぶとき、サイトで何を確認すればいいですか？
A. 教える内容、通い方（教室かオンラインか）、費用、教え方の方針などが大切な情報だと思います。プログラボでは「1人1台のロボット」という方針が書かれていました。
Q. 子ども向けの教室のサイトで大切なことは何ですか？
A. 保護者が安心できる情報と、子どもが興味を持てる見た目の両方をそろえることだと思います。実際の画面はProglab公式サイトで見られます。
