Vision Framework
Calm・Balance・Driveの3軸で世界観・情報・導線を束ね、
進化し続けるCBD産業のハイレベルな起点を形成します。
規制知能と整合する静かな信頼感
日本市場の最新エビデンスを反映したガバナンスをビジュアルに落とし込み、初見でも安心できる静かな呼吸感を演出します。
データと感性が同居するハーモニクス
動的なグリッドと余白のリズムで専門家とブランド担当者の双方に響く情報表現を実現。指標とストーリーをシームレスに並走させます。
行動を加速するアクティブな流れ
ガイド付きCTAとスクロール同期モーションで意思決定のスピードを高め、導線全体に前進する勢いを与えます。
科学・法規制・ブランド体験を有機的に接続するストーリーレール
スクロール進行に合わせて情報の粒度が変化。視線誘導のモーションと背景のパララックスで、
規制根拠→価値訴求→導線誘導の三幕構成を実現します。
英雄帯では分子3Dとオーロラメッシュを重ね、CBDの科学的世界観を没入的に提示。スクロール開始で深度が変化します。
ストーリーテリング用の解説カラムと可変データカードを交互に配置し、規制根拠とビジネス価値の両立を可視化。
最後は行動カード群でCTAを段階的に提示。試用→相談→導入の3レベルを設定し、行動摩擦を低減します。
Motion Modules
動的要素を段階的に組み合わせ、UXと実装負荷のバランスを最適化します。
スクロール初動で背景グラデーションが呼吸し、3Dシーンが緩やかにピボット。カルムな没入感を提供。
Interactions
- スクロール位置と連動したオーロラ強度の変化
- CTAホバー時のノイズテクスチャの流動
- キーボードフォーカス時のグロー強調
Stack
Tailwind CSS + CSSカスタムプロパティ
セクションカードが視差風の浮遊でディファレンスブレンド。データとコピーの境界を柔らかく滲ませます。
Interactions
- ホバーでカード枠がネオブルータリズム調にシフト
- Intersection Observerで段階的にフェードイン
- Reduced Motion時は静的ボーダーにダウングレード
Stack
CSS変形 + Intersection Observer
3段階CTAを進行バー付きで提示。マイクロコピーとアイコンが逐次アニメーションします。
Interactions
- タブ幅以下でスライダー化
- フォーカスアウトラインをブランドカラーで強調
- スクロール内トラッカーで現ステップを可視化
Stack
CSS Grid + 原生JavaScript
Live Indicators
実績と運用基準をライブカウント。視覚的に信頼を補強します。
パフォーマンス重視のため requestAnimationFrame で1度のみ再生します。
3,500 +
配合レシピ
ラボ検証済みの基盤データセット
25,000 +
計算実行
セッションあたり中央値 42 秒
48 h
規制更新反映
国内法改定からの反映リードタイム
Implementation Guide
レスポンシブ戦略とアクセシビリティ、コピー指針を
フロント実装に接続するためのリファレンス。
- ≤640px：ヒーローの3Dは比率4:5で固定し、CTAは縦積み
- 641-1024px：モジュール群を2カラム、モーションを20%軽量化
- ≥1025px：12カラムグリッドで視差装飾を解禁、余白は8remベース
- LCP 1.8s 未満 / CLS 0.1 未満 / INP 150ms 未満をベースラインとし、3D要素は遅延読み込み
- WebGL非対応・低電力端末にはグラデーション静止画フォールバックを提供
- ARIA属性とフォーカススタイルを保ち、CTAはキーボード操作で100%到達可能に