HERO SECTION
中央配置の大型タイポグラフィ×フルスクリーン背景。
画面いっぱいに泡が立ち上る背景ビジュアルを敷き、字間を広く取った欧文タイトルを中央に配置したヒーロー領域の解説です。透明感のある配色でブランドの世界観を最初の一画面で伝えます。
画面いっぱいに泡が立ち上る背景ビジュアルを敷き、字間を広く取った欧文タイトルを中央に配置したヒーロー領域の解説です。透明感のある配色でブランドの世界観を最初の一画面で伝えます。
背景に薄く縁取りだけの大きな欧文を配置し、手前に半透明のカードを重ねたパララックス構成の解説です。スクロール量に応じて背景と前面カードが異なる速度で動き、奥行きを演出します。
左にアイコン、右にタイトルと説明文を配置した水平カードの解説です。ホバー時にわずかに右へ移動するインタラクションを添えています。
同じフォーマットを縦に反復し、複数の項目を一覧として読みやすくしたリスト構成です。
左側の進捗バーと連動させることで、選択中の項目が視覚的に対応づけられる構成です。
円形アイコンと発光ラインで接続したフロー表現の解説です。
中間ステップを挟むことで工程の順序を明確に示します。
3分割の均等配置で一連の流れとして読ませる構成です。
マイナスアイコンで展開中であることを示し、見出しの下に本文を表示する開閉式レイアウトの解説です。回答エリアは高さのアニメーションで滑らかに開きます。
プラスアイコンで折りたたみ中であることを示すクローズ状態の解説です。クリックでアイコンが切り替わり、本文が展開します。