About Us
イントロダクションセクション：
ストーリーテリング型 パララックスレイアウト
スクロールに連動してテキストがフェードインしながら上昇するアニメーション演出を採用。左カラムにブランドの課題提起とナラティブなコピー、右カラムにはケン・バーンズ効果でゆっくり拡大する風景写真を配置し、ユーザーの感情に訴えかける構成です。深みのある背景画像とテキストのコントラストが、情緒的な没入感を生み出します。
ストーリーを読む
スクロール連動アニメーションと星雲グラデーションが、ブランドの深層コンセプトを視覚的に表現します。
Scroll Down
About Us
スクロールに連動してテキストがフェードインしながら上昇するアニメーション演出を採用。左カラムにブランドの課題提起とナラティブなコピー、右カラムにはケン・バーンズ効果でゆっくり拡大する風景写真を配置し、ユーザーの感情に訴えかける構成です。深みのある背景画像とテキストのコントラストが、情緒的な没入感を生み出します。
ストーリーを読む
Core Service
右カラムがスクロールする間、左の見出しとアイコンが画面に固定されるピン留めパターン。ユーザーは常にどのサービスを閲覧中か把握でき、情報の文脈を失わずに読み進められます。
スプリットスクリーンの右カラム第一項目。現状分析から課題の本質を見極め、最適な戦略を提案するサービス内容を、番号・タイトル・説明文・画像の4要素で構成。スクロールに応じてフェードインします。
右カラム第二項目。最新技術と豊富な知見を活かした高品質ソリューションの構築内容を説明。ピン留めされた左見出しと番号の対応により、複数サービスの関係性を常に明示します。
右カラム最終項目。導入後の継続的サポートと安定成長の支援内容を掲載。このアイテムが画面を抜けると左カラムのスティッキーが自然に解除され、次セクションへと滑らかに移行します。
Features
各カード上部にFont Awesomeアイコンを円形ボーダーで配置。カードホバー時に上方へ浮き上がりシャドウが強調されるマイクロインタラクション。サービスの強みを視覚的に整理して訴求します。
グリッドレイアウトで多角的なメリットを整理。3カラム構成はデスクトップで高い視認性を保ち、タブレット・モバイルではレスポンシブにリフロー。統一感あるカードデザインで情報の並列比較を促します。
カードの背景にラジアルグラデーションのホバーエフェクトを実装。ダークテーマと統一されたボーダーカラーが、セクション全体のコンシステンシーとブランドの高級感を維持します。
Performance
導入企業数
ビューポート進入時に数字がカウントアップするアニメーション。棒グラフはSVGトランジションで下から積み上がるように描画されます。
顧客満足度
円グラフはconic-gradientとSVGアニメーションで実装。満足度に対応した弧の長さが、数値カウントアップと同期して変化します。
削減コスト実績
折れ線グラフはSVGポリラインのstroke-dashoffsetアニメーションで描画。右肩上がりのトレンドを視覚的に強調します。
Work Flow
01
タイムラインの起点。中央を横断するラインがスクロール連動で伸びるアニメーションにより、プロセスの進行を直感的に可視化します。
02
各ステップの丸いアイコンボックスにグロー効果を適用。ボーダーとシャドウがブランドの深海テーマと調和したデザインを形成します。
03
ステップ型とタイムライン型を組み合わせた複合パターン。等幅グリッドで4ステップを均等配置し、情報の対称バランスを保ちます。
04
タイムライン終点。継続的な改善サイクルを示す最終ステップ。ホバー時にアイコンが発光し、ユーザーの視線を誘導するインタラクションを実装。
FAQ
アコーディオンパターンは情報の過密を防ぎ、ユーザーが必要な回答のみを選択して展開できるUIです。クリックで回答エリアがスライドダウンし、アイコンがプラスからマイナスへ切り替わるマイクロインタラクションにより、開閉状態を直感的に伝えます。
この項目はデフォルト展開状態のサンプルです。アコーディオンのmax-heightトランジションにより、滑らかな展開・折りたたみアニメーションを実現。背景の水面リップル画像と組み合わせることで、セクション全体に奥行きと神秘的な雰囲気を演出しています。
料金プランの詳細と選択基準をここに展開表示。折りたたみ状態ではタイトルのみ表示されるため、ページ全体の情報密度を適切にコントロールし、スキャナビリティを高めます。
差別化ポイントと競合優位性の詳細説明。アコーディオンは視覚的なノイズを最小化しながら、必要に応じて詳細情報を展開できる最適なUIパターンです。
宇宙的なグラデーション背景と光彩エフェクトが、コンバージョンボタンへの視線誘導を最大化します。
CTAボタン：ホバー時に光彩と3D浮き上がりを演出