Philosophy
Section — 2カラムレイアウト / 左パネル
Our Philosophy
左半分のテキストパネル。ブランドの哲学やビジョンを説明するエリアです。複数行にわたる本文テキストが縦方向中央に配置され、セクションラベルとセットで構成されます。
センター揃えのサブテキストエリア。ブランドキャッチコピーや製品概要など、簡潔なメッセージを配置するスペース。
Section — 2カラムレイアウト / 左パネル
左半分のテキストパネル。ブランドの哲学やビジョンを説明するエリアです。複数行にわたる本文テキストが縦方向中央に配置され、セクションラベルとセットで構成されます。
Core Features
アイコン・見出し・本文の3要素で構成されるフィーチャーカード。ホバー時にトップボーダーがアニメーション展開する設計。グリッドレイアウトで3列に並置されます。
各カードは独立した枠線で仕切られ、ダークトーンの背景色でフラットに設計されています。アクセントカラーのアイコンが視線を誘導する役割を担います。
グリッド全体は細いボーダーで統一され、カード間のギャップを背景色で表現することで視覚的な整合性を保ちます。レスポンシブ時は1カラムに折り畳まれます。
フルブリード3分割の数値表示。背景に写真を重ね、オーバーレイで暗度を調整。大型数字がメインビジュアルとなる統計セクション。
Bebas Neue書体による巨大な数値が視覚的インパクトを生む。UP/DOWNバッジがカラーコードで方向性を示す。
ホバー時に背景画像がズームし、オーバーレイ透明度が変化するインタラクション。各ブロックは縦下部にテキストを配置するデザイン。
How It Works
Step 01
各ステップは円形アイコンと番号ラベル、見出し、説明文のセットで構成。ホバーでアクセントカラーが発光する。
Step 02
矢印アイコンがステップ間を橋渡しし、左右方向のフローを視覚化。モバイルでは縦方向に再配置される。
Step 03
最終ステップは連結矢印なしで終端。全体はmax-widthで中央配置されたflexレイアウトで構成される。
FAQ
クリック時にプラスアイコンが45度回転し、回答エリアがmax-heightアニメーションでスライド展開します。開いたアイテムにはアクセントカラーのボーダーが適用されます。
背景はダークな単色で統一され、ホバー時にわずかに明るくなるトランジションが設定されています。回答テキストはやや小さいフォントサイズで、インデントを設けて可読性を確保します。
FAQセクション全体はページ下部に配置され、フッターへの自然なブリッジ役を担います。項目数は任意に追加可能なコンポーネント設計です。