Step 01
中央の縦ラインを起点に左右交互に配置するジグザグ構成の解説です。
HERO SECTION
中央配置のキャッチコピー×フルスクリーン背景。
発光するメッシュパーティクルの背景を全画面に敷き、中央に大型タイポグラフィを配置したヒーロー領域の解説です。スクロール開始と同時に背景の奥行きが展開する演出を想定しています。
発光するメッシュパーティクルの背景を全画面に敷き、中央に大型タイポグラフィを配置したヒーロー領域の解説です。スクロール開始と同時に背景の奥行きが展開する演出を想定しています。
固定表示されるステータスパネルの解説です。右側のスクロールに関係なく画面内に留まり続ける構成をイメージしています。
右側は通常のスクロールに追従するコンテンツエリアの解説です。詳細情報をブロックごとに区切って配置します。
左右で異なる速度のパララックスを与えることで、単純な左右2分割とは異なる奥行きを演出します。
上部にアイコン、中央にタイトルと説明文を配置した縦積みカードの解説です。
READ MOREホバー時に枠線がセカンダリカラーへ変化するマイクロインタラクションの解説です。
READ MORE3列均等のグリッドで反復させ、複数の要素を並列に比較しやすくした構成です。
READ MORE全体サマリーを示す円形ゲージの解説です。左側に固定配置し、右側の詳細データと対をなします。
中央の縦ラインを起点に左右交互に配置するジグザグ構成の解説です。
奇数と偶数でテキストの配置を左右反転させ、視線の動きにリズムを与えます。
最終ステップまで縦一列のラインで接続し、一連の流れとして完結させます。
マイナスアイコンで展開中であることを示し、見出しの下に本文を表示する開閉式レイアウトの解説です。
プラスアイコンで折りたたみ中であることを示すクローズ状態の解説です。クリックで本文が展開します。