わかば個別指導塾
- URL
- https://wakaba-kobetsu.too-code.com/
- サイト概要
- 個別指導塾をテーマにしたコーポレートサイト。塾の特徴、指導方針、講師紹介、コース案内、FAQ、お問い合わせを1ページに整理し、保護者や生徒が必要な情報をスムーズに確認できる構成を意識したサイトです。
- 担当範囲
- コーディング / アニメーション実装
- 使用技術
- HTML / CSS（Sass） / JavaScript （Swiper.js , GSAP） / Figma
- 実装内容
-
・スムーススクロール
・パララックス
・時間差フェードイン
・左側固定スクロール
・clip-pathアニメーション
・タブの切り替え
・アコーディオン
・ハンバーガーメニュー
・モーダル
・Swiperを用いたスライダー
・バリデーション付きお問い合わせフォーム
・ホバーアニメーション - 工夫した点
-
① 保護者が安心して閲覧できる情報設計
塾選びで気になりやすい情報を順序立てて整理し、必要な情報をスムーズに確認できる構成を意識しました。ページ内リンクやスムーススクロールを取り入れることで、知りたい情報へ移動しやすい導線にしています。
② 信頼感と親しみやすさを伝えるUI設計
講師紹介はスライダーで実装し、それぞれの担当教科やメッセージが見やすく伝わるように工夫しました。また、コース案内やFAQは情報を整理しながら表示できる構成にすることで、掲載内容が多くても画面が煩雑に見えにくいよう配慮しています。
③ 問い合わせにつながる回遊しやすい導線づくり
ページ内の複数箇所にお問い合わせへの導線を配置し、閲覧中のタイミングに合わせて行動しやすい設計を意識しました。FAQで不安を先回りして解消しつつ、フォームでは必要項目を整理することで、保護者が安心して問い合わせしやすいサイトを目指しました。
④ 第一印象を損なわないファーストビュー設計
ファーストビューでは、塾のやわらかい雰囲気を伝えながらも、ユーザーを待たせすぎないようアニメーションの表示速度を調整しました。訪問直後の短い時間でサイトの印象が決まりやすいことを踏まえ、主要な情報が2〜3秒以内に把握できるよう意識し、演出性と閲覧しやすさのバランスを工夫しています。 - 制作期間
- 1～2週間
- 値段
- ￥43,000（税抜）
