Step 01
中央の縦ラインを起点に左右交互に配置するジグザグ構成の解説です。
HERO SECTION
グラデーションタイポグラフィ×フルスクリーン背景。
液体金属を思わせる背景ビジュアルを全画面に敷き、シルバーからシアンへ流れるグラデーション文字を中央に配置したヒーロー領域の解説です。
EXPLORE液体金属を思わせる背景ビジュアルを全画面に敷き、シルバーからシアンへ流れるグラデーション文字を中央に配置したヒーロー領域の解説です。
EXPLORE左に見出しと説明文、右に流動的な3Dビジュアルを配置したスプリットスクリーンの解説です。スクロールに応じて文章が段階的にフェードインするストーリーテリング演出を想定しています。
VIEW DETAIL
上部にアイコン、中央にタイトルと説明文を配置した縦積みカードの解説です。
READ MOREホバー時にカードの枠線が発光しつつ浮き上がるマイクロインタラクションの解説です。
READ MORE3列均等のグリッドで反復させ、複数の要素を並列に比較しやすくした構成です。
READ MORE中央の縦ラインを起点に左右交互に配置するジグザグ構成の解説です。
奇数と偶数でテキストの配置を左右反転させ、視線の動きにリズムを与えます。
最終ステップまで縦一列のラインで接続し、一連の流れとして完結させます。
マイナスアイコンで展開中であることを示し、見出しの下に本文を表示する開閉式レイアウトの解説です。回答エリアは高さのアニメーションで滑らかに開きます。
プラスアイコンで折りたたみ中であることを示すクローズ状態の解説です。クリックでアイコンが切り替わり、本文が展開します。