HERO SECTION
全画面ビジュアル×ミニマル見出しのファーストビュー。
背景いっぱいに幾何学的なビジュアルを敷き、余白を広く取った左寄せの見出しを重ねたヒーロー領域の解説です。装飾を削ぎ落としたモノクロームの配色でブランドの硬質な世界観を表現しています。
SCROLL DOWN
背景いっぱいに幾何学的なビジュアルを敷き、余白を広く取った左寄せの見出しを重ねたヒーロー領域の解説です。装飾を削ぎ落としたモノクロームの配色でブランドの硬質な世界観を表現しています。
画面を左右に2分割し、片方にクローズアップ画像、もう片方に見出しと説明文をまとめたスプリットスクリーンレイアウトの解説です。
スクロールに合わせて画像側がゆるやかに動くパララックス効果を添え、静的な2分割構成に奥行きを持たせています。
細い罫線で3列を区切り、余白の代わりに境界線でグリッドを表現したカード構成の解説です。
VIEW DETAILSホバー時にカード全体の背景と外枠がわずかに変化するマイクロインタラクションの解説です。
VIEW DETAILS同一フォーマットを反復させ、3つの要素を並列に比較しやすくしたグリッド構成の解説です。
VIEW DETAILS左側の縦ラインに沿ってノードを並べたタイムラインの解説です。アクティブな項目はノードが発光色に変化します。
非アクティブな項目はノードがグレー表示になり、視線をアクティブな項目へ誘導する構成です。
同じ書式を縦に反復することで、年表のように時系列で読ませるレイアウトです。