Web制作 / UI設計

工務店LP(AIチャット搭載)

新築・リフォーム会社向けLP。チャットで費用の疑問を先に解消し、無料見積もり依頼へつなげる構成。GSAP + ScrollTriggerでスクロール演出を実装。※デモサイト(架空企業/画像はフリー素材)

Overview

新築・リフォーム会社向けのランディングページ。「いくらかかるか分からない」という問い合わせ前の最大の障壁をチャットで先に解消し、無料見積もり依頼につなげる構成にした。GSAP + ScrollTrigger でスクロール演出・数値カウントアップ・パララックスを実装し、prefers-reduced-motion にも対応。

※ デモサイト(架空企業/画像はフリー素材)

Challenge

住宅リフォームは費用の目安がわかりにくく、「いくらかかるか分からない」ことが問い合わせの最大の障壁になっている。

Solution

チャットUIで費用に関する疑問を先に解消し、自然な流れで無料見積もり依頼フォームへつなげる導線を設計。GSAP + ScrollTrigger によるスクロール演出(数値カウントアップ・パララックス)で施工実績を印象的に見せつつ、prefers-reduced-motion にも対応してアクセシビリティを確保した。

Result

デモサイトとして公開中。

Role

  • UI設計
  • フロントエンド開発
  • チャットUI実装
  • アニメーション実装
  • レスポンシブ対応

Tech Stack

  • HTML
  • CSS
  • JavaScript
  • GSAP
  • UI設計
  • レスポンシブ
デモを見る →