インタラクションと開発
5月. 2026
ClinIQ
ClinIQ は B2C ヘルス製品向けの信頼感を軸にしたマーケティング LP です。検査結果の平易な解説と受診準備であり、医療診断ではありません。イントロ preloader、ヒーロー、ピン留め How it works、シナリオストーリー、pricing、contact、コンバージョンを締める upload ブロックまで、一続きのストーリーとして設計・実装しました。
モーションは可読性を損なわず narrative を支えます。Lenis がスムーススクロール、GSAP ScrollTrigger がセクション reveal、How it works の desktop pin（Upload → Understand → Prepare）、ストーリーカードの magnetic hover を担当。イントロと hash ナビは curtain preloader で Pricing / Stories へジャンプしても pop-in しません。prefers-reduced-motion に配慮したレイアウトです。
ヒーローフォールド——health clarity を伝える見出し、マーキーリズム、upload へ向かう読みやすい CTA。深い証拠ブロック前の落ち着いた構成。
How it works——desktop pin scroll で Upload、Understand、Prepare。スクロールに合わせ copy とビジュアルが cross-fade。
Stories——CSS ビジュアルのシナリオカード。mock UI の magnetic hover。caregiver と labs の narrative で信頼を構築。
Pricing——Free / Plus ティアカードと scroll reveal。落ち着いた copy と disclaimer footnote。enterprise 調のないコンバージョン。
Contact——Say hello パネルと email CTA。responsive な semicircular arc が下のダーク upload セクションへ。
Upload ファネル——積み上げ file cards、line-style フォーム、success state。preloader トーンの footer と compliance disclaimer。
Nav menu——大きな section links の sidebar、dimmed overlay、curved panel edge。hero が viewport 外れた後 FAB が同じルートを開く。