HERO SECTION
全画面で魅せる、ファーストビュー。
宇宙空間に漂う粒子ビジュアルを全面に敷き、中央揃えの大型見出しを重ねたヒーロー領域の解説です。マウス操作に反応する背景演出（WebGL想定）で世界観への没入感を高める構成にしています。
SCROLL DOWN
宇宙空間に漂う粒子ビジュアルを全面に敷き、中央揃えの大型見出しを重ねたヒーロー領域の解説です。マウス操作に反応する背景演出（WebGL想定）で世界観への没入感を高める構成にしています。
左カラムに見出しと説明文をまとめ、右側に2枚の画像を高さと余白をずらして重ねたスタガード配置のビジュアルを添えた非対称レイアウトの解説です。
スクロール量に応じて左右の要素がそれぞれ異なる速度で動くパララックス効果を加え、静止画に奥行きと動きの余韻を持たせています。
上部にアイコン、中央にタイトル、下部に説明文を配置した縦積みカードの解説です。3列の均等グリッドで要素を並列に紹介します。
同じフォーマットを反復させることで視線の流れをそろえ、複数の要素を横並びで比較しやすくするグリッド構成の解説です。
カードホバー時に枠線と位置がわずかに変化するマイクロインタラクションの解説です。操作可能であることを視覚的に伝えます。
円形アイコンを起点としたフロー表現の解説です。
ステップ同士を横一列の接続ラインで結んでいます。
左から右への進行順序を視覚的に示す構成です。
4分割の均等配置で一連の工程として読ませます。
アイコンと大きな数値を組み合わせ、スクロールをトリガーに0から目標値までアニメーションするカードの解説です。
単位を数値の直後に添えることで、桁数の大きい数字でも一目で読み取れるようにした構成です。
マイナスアイコンで展開中であることを示し、見出しの下に区切り線を挟んで本文を表示する開閉式レイアウトの解説です。回答エリアは高さのアニメーションで滑らかに開きます。
プラスアイコンで折りたたみ中であることを示すクローズ状態の解説です。クリックでアイコンが切り替わり、本文が展開します。
同じ書式を縦に反復することで、項目数が増えても一覧性を保てるようにしたリスト構成の解説です。