- 内容
- 個別指導塾の集客を目的としたランディングページのコーディングを担当しました。
デザインカンプをもとに、ファーストビューでサービスの魅力が伝わる構成を意識し、ユーザーが自然にお問い合わせへ進める導線設計で実装しています。
CTAボタンを各セクションに配置し、スマートフォンからでも操作しやすいよう配慮しました。
また、背景固定パララックスやスライダー、タブ切り替えなどのインタラクションを取り入れ、視覚的にも分かりやすく印象に残るLPに仕上げています。
- 制作背景
- 塾の集客を目的としたLPとして制作しました。
ユーザーが短時間でサービス内容を理解し、お問い合わせへとつながるよう、情報の見せ方や導線設計を意識してコーディングを行いました。
- 課題
- absoluteで配置した装飾アイコンが、レスポンシブ時に崩れやすく調整が難しかった
- タブ切り替えとモーダルの配置バランスが難しく、情報の見せ方に工夫が必要だった
- ファーストビューのアニメーションにおいて、要素の表示タイミングを調整しないと単調な印象になってしまう課題があった
- 解決
- absolute配置のアイコンは、ブレイクポイントごとに位置やサイズを調整し、各画面幅で崩れないように対応
- タブ切り替えとモーダルは、ユーザーの操作フローを考慮して配置を見直し、情報が整理された状態で閲覧できるように設計
- ファーストビューではアニメーションの表示タイミングをずらすことで、視線誘導と印象に残る演出を実装
- 工夫
- 背景固定パララックスを取り入れ、スクロールに変化をつけて視線を誘導
- タブ切り替えをactiveクラスの付与で切り替え可能にしました
- モーダルを開いた際のコンテンツとアイコンの配置を中央に制御しました
- アイコンをabsoluteで配置し、レスポンシブ時も自然な自然な位置になるように調整
- 担当範囲
- コーディング
- レスポンシブ対応
- JavaScript実装
- アニメーション実装
- 使用言語
- HTML / CSS / SCSS / JavaScript
- 制作期間
- 2〜3週間
- 料金目安
- 4万円〜6万円
- URL
- https://school-demo.toyo-portfolio.com
