学習塾サイト(デモサイト)

あすなろアカデミー

中学生・高校生に向けた、個別指導型の学習塾デモサイトを制作しました。学習の悩み・選ばれる理由・コース紹介・成績アップ事例・講師紹介・教室案内・無料体験までを1ページに整理し、保護者にも生徒にも安心感が伝わる構成にしています。

デモサイトを見る

別のタブで開きます

業種
学習塾・個別指導塾
担当範囲
構成・デザイン・HTML/CSS実装
使用技術
HTML / CSS
ページ構成
シングルページ
タグ
HTML / CSS / 学習塾 / Demo / レスポンシブ対応
あすなろアカデミーのPC・スマートフォン表示のモックアップ

このサイトについて

定期テスト対策や受験対策に悩む中高生と、その保護者に向けた学習塾サイトを制作しました。

青を基調にした清潔感のあるデザインで、誠実さ・信頼感・前向きな学びの印象が伝わるようにしています。ファーストビューでは「その一歩が、未来の選択肢を広げる。」というコピーで塾の姿勢を伝え、学習の悩み、解決策、選ばれる理由、コース、成績アップ事例、講師紹介、教室案内、無料体験へ自然につながる流れを意識しました。

デザインのポイント

  1. 信頼感が伝わる明るいブルー基調

    学習塾らしい誠実さや清潔感が伝わるよう、ブルーを基調に、白背景と余白を活かした見やすいデザインにしました。

  2. 不安から無料体験へつなげる導線

    勉強の悩みを提示した上で、解決策・選ばれる理由・成績アップ事例へつなげ、保護者が安心して問い合わせを検討できる構成にしました。

  3. 成果とサポート内容が伝わる情報設計

    コース内容、成績アップ事例、生徒・保護者の声、講師紹介を整理し、塾の強みが具体的に伝わるようにしました。

ページの流れ

トップから順に、どんな順番で情報を見せているかをまとめました。画像を押すと、セクション全体を拡大して見られます。

  1. 01 / 05

    TOP

    メインビジュアルとキャッチコピーで、未来に向けて学ぶ前向きな印象を伝えました。

  2. 02 / 05

    お悩み・解決策

    勉強が続かない、成績が伸びないなどの悩みを提示し、個別指導で解決できる内容へつなげました。

  3. 03 / 05

    選ばれる理由

    地域密着、個別指導、保護者連携など、塾の強みを3つに整理して伝えました。

  4. 04 / 05

    コース紹介・成績アップ事例

    高校受験、中学生、高校生、大学受験などのコースと、成績アップ事例を掲載しました。

  5. 05 / 05

    講師紹介・教室案内・無料体験

    講師や教室情報を紹介し、最後に無料体験・資料請求へつながる導線を設計しました。

こんなサイトを作りたい、
というご相談も。

新しくホームページを作りたい。今のサイトを見直したい。まだ内容が固まっていなくても大丈夫です。お話を伺ったうえで、いま必要なものだけをご提案します。

ご相談・お見積もりは無料です。