Veliora Flex

変化を力に変える、
柔軟なデジタル基盤。

フルスクリーンのヒーローセクション。抽象的な発光エフェクトを背景に配置し、グラデーションタイポグラフィで主要メッセージを強調。CTAボタンを中央に据えた中心軸レイアウト。

コアテクノロジー

既存の枠組みを超えた、
次世代のインターフェース。

左右2カラムのスプリットレイアウト。画像はネイビーカードに溶け込むグラデーションオーバーレイ処理を施し、右カラムのテキストブロックと視覚的に融合。見出しはグラデーションテキスト、本文はミュートブルーで階層を明確化したフィーチャー紹介セクション。

円形アイコンホルダー、タイトル、説明文を縦に積んだカードコンポーネント。上部に発光ラインアクセントを持ち、ホバー時に上方向へフロートするアニメーション付き。

3カラムのイコールグリッド配置。各カードはダークネイビー背景、1pxボーダー、インナーグロー効果で統一されたデザインシステムを形成。

アイコンはFont Awesomeで統一し、ブランドカラーの青を適用。カード背景のグラデーションとボーダーグロー効果でデプスと立体感を演出。

導入プロセス

Step 01

ヒアリング

円形アイコン、ステップナンバー、タイトルを横並びにしたヘッダーと、その下に続く説明テキストブロックで構成。ステップ間を矢印と水平線でつなぐプロセスフロービジュアル。

Step 02

設計・プロトタイプ

各ステップはネイビーカード上に等間隔で配置。ステップ間を結ぶ水平の発光ラインが視線の流れをガイドし、プロセスの連続性を視覚的に表現。

Step 03

実装・展開

最後のステップには矢印なし。アイコンはコードブラケットでテクノロジー感を表現。3カラムレイアウトはモバイルで1カラムの縦積みに変化するレスポンシブ対応。

よくある質問

アコーディオン展開式のFAQコンポーネント。質問行はアイコン・テキスト・トグルボタンで構成され、クリックで回答が滑らかにスライド表示される。

各アイテムはダークカードにブルーボーダーを持つスタイルで統一。開閉状態でボーダー色が変化し、インタラクティブなフィードバックを提供。回答テキストはミュートカラーでアクセシビリティに配慮。

FAQ 2つ目の質問行。左端の正方形アイコンと右端のプラスアイコンが視覚的な対称性を作るレイアウト設計。

最大高さのCSSトランジションによる滑らかなアコーディオン動作。開いた状態ではプラスアイコンが45度回転してXに変わるマイクロインタラクション付き。ボーダーカラーもオープン時にブルーへ変化。

FAQ 3つ目の質問行。均一な縦間隔と一貫したボーダースタイルで整然としたリストUIを形成。

シンプルかつ情報密度の高いFAQレイアウト。全幅最大860pxでセンタリングされ、レスポンシブ環境でも可読性を維持。ネイビー系カラーパレットで全体デザインと統一感を保持。