Kidsプログラミングラボ様（サービスサイト）｜Web制作実績 スマートフォン対応｜ネオインデックス茨城

本格的なプログラミング言語を、お子様がゲーム制作を通じて楽しく学べる「Kidsプログラミングラボ様」のモバイル用サービスサイトをリニューアルいたしました。

こちらのサイトでは、子供の習い事が忙しいため「オンライン受講ができるプログラミングスクール」をお探しの主婦の方や、中学受験を控えた子供を「ジュニア・プログラミング検定対策ができる塾」へ通わせたい主婦の方など、特に小学生～中学生のご両親をメインターゲットに設定いたしました。そのため、スマートフォンとPCの使用比率を8：2と想定し、モバイルファーストとして設計しております。

今回、「サイト内の情報をわかりやすく表現したい」というご要望をいただきました。そのため、継ぎ接ぎでページが足され、「情報の重要度がわかりにくかった」旧サイトの各コンテンツにたいして明確な優先順位をつけました。さらに、ターゲットに合わせた綿密な設計を行い、優先順位順に合わせてコンテンツを配置することで、訴求したいポイントをユーザーがすぐに認識できるサイトに仕上げました。

モバイル用サイトでは、小さな画面の中で重要な情報を効率よく見せるため、各コースページの動線を横幅いっぱいに配置しております。特にメインとなる「プライマリーコース」「ベーシックコース」「プレミドルコース」「ミドルコース」「アドバンスコース」の5種類のコースは動線を大きく見せる形で配置することで、タップエリアを拡張しつつ、他のコンテンツと視覚的な差別化をいたしました。また、お客様は数多くのコースをお持ちのため、それぞれのコースのテーマカラーや設定画像をユニークに表現することで、ユーザーが自然とコースを識別できるよう工夫を施しております。

今回、「無料体験会ページ」「講師紹介ページ」という2種類のページを新設いたしました。無料体験会へ参加するメリットや当日のスケジュール、どんな講師が指導するのかを事前に知っていただくことで、ユーザーが安心して無料体験会へご応募いただくための後押しとなるコンテンツにしております。

システム面では、お客様側でお持ちのシステムとAPI連携を行い、各教室ページに無料体験会の開催日時を自動表示しているほか、お申込みフォームに進んでいただくと、ご選択いただいた日時が自動入力されるシステムにいたしました。さらに、フォームから送信された情報をお客様側の管理画面へ連携させるなど、外部のシステムをご利用の方にもスムーズに一括管理していただきやすいよう、お客様ごとに柔軟なシステム構築をご提案させていただいております。

デザイン面では、実際に作成するゲームのキャラクターやプログラミングの画面キャプチャをデザインとして用いることで、プログラミングスクールの楽しさを演出しつつ、お客様のオリジナリティが伝わるサイトを意識しております。また、丸型や曲線の切り抜き写真や、生徒目線の笑顔の写真を多く取り入れることで、ユーザーに親近感や安心感をもっていただけるデザインにいたしました。リニューアル後は「希望に合ったデザインになり、非常に満足しています」と喜びの声をいただいております。