Kidsプログラミングラボ様
設計を一から見直し、情報が整理されたユーザビリティの高いホームページへ
東京都八王子市

- 制作プランMeta定額制30プラン
- カテゴリーサービスサイト(PC・タブレット)
![]() | |
---|---|
Web制作のポイント |
ゲーム制作をしながら、子供がプログラミングを楽しく学べる「Kidsプログラミングラボ様」のサービスサイトをリニューアルいたしました。
今回リニューアルの目的として、「無料体験会へのお申し込みを増やしたい」「サイト内の情報をわかりやすく表現したい」という2つのご要望を頂きました。
まずは、無料体験会へお申込みいただくため、メインコンテンツの「コースページ」「教室ページ」の必要な情報を充実させ、見やすく整理いたしました。具体的に、旧サイトでは1ページ内に全コースの情報が密集してわかりにくかったコースページを一新し、「プライマリーコース」「ジュニアプログラミング検定」「オンライン受講」など、コースの種類やユーザーの目的別に、7種類の独立ページとして新設しております。さらに、教室ページには、一般的なアクセス情報だけでなくスクールの強みやコースの種類をわかりやすく掲載し、教室ページ専用のグローバルメニューを設置して動線を整理することで、ユーザーが知りたい情報を直感的な操作で閲覧いただけるユーザビリティの高い設計にいたしました。ホームページ内の原稿は専門ライターがご訪問によるヒアリングのもと一から作成しており、SEO対策に強く、より多くの集客とCV獲得を目的としたWebサイトとなっております。 |
![]() | |
---|---|
設計・デザインのポイント |
子供の習い事が忙しいため「オンライン受講ができるプログラミングスクール」をお探しの主婦の方や、中学受験を控えた子供を「ジュニア・プログラミング検定対策ができる塾」へ通わせたい主婦の方など、特に小学生~中学生のご両親をメインターゲットに設定いたしました。そのため、スマートフォンとPCの使用比率を8:2と想定し、モバイルファーストとして設計しております。
モバイル用サイトでは、小さな画面の中で重要な情報を効率よく見せるため、各コースページの動線を横幅いっぱいに配置しております。特にメインとなる「プライマリーコース」「ベーシックコース」「プレミドルコース」「ミドルコース」「アドバンスコース」の5種類のコースは動線を大きく見せる形で配置することで、タップエリアを拡張しつつ、他のコンテンツと視覚的な差別化をいたしました。また、お客様は数多くのコースをお持ちのため、それぞれのコースのテーマカラーや設定画像をユニークに表現することで、ユーザーが自然とコースを識別できるよう工夫を施しております。 デザイン面では、ズームアップや横スライドなどのアニメーションを多く取り入れることで、トレンドを感じられるデザインにいたしました。また、お客様は全国に教室を展開しているため、地方ごとにテーマカラーを設定し、日本地図のイラストと教室を連携して表示することで、近くの教室が一目でわかるユーザビリティの高いデザインにいたしました。 |
![]() | |
---|---|
Web制作・運用サポート一覧 |
PC・タブレット用フルオーダーメイド設計、オリジナルWebデザイン、PC用UI/UX設計、ワイヤーフレーム作成、HTML/CSSコーディング(レスポンシブサイト)、Googleアナリティクス設定、各種CMS開発、jQueryコーディング、PLESKサーバー、ヒアリング取材、原稿作成、アフターサポート |


