HERO SECTION
巨大タイポグラフィ×フルスクリーン背景。
画面全体を覆う冷却気体の背景に、字間を広く取ったタイポグラフィを重ねたヒーロー領域の解説です。淡い配色で静けさと精密さを最初の一画面で伝えます。
画面全体を覆う冷却気体の背景に、字間を広く取ったタイポグラフィを重ねたヒーロー領域の解説です。淡い配色で静けさと精密さを最初の一画面で伝えます。
左に見出しと説明文、右に大きな画像を配置した非対称の2カラムレイアウトの解説です。スクロールに応じてテキストと画像がそれぞれ異なる速度で動くパララックス効果を添えています。
暗い背景に白文字を組み合わせたコントラストの強いパネルの解説です。左右で背景色を反転させ、視覚的な対比を明快に表現しています。
明るい背景に濃色文字を組み合わせたパネルの解説です。隣接するダークパネルと1対1でペアにし、静と動の対比を演出します。
アイコンとタイトルの下に説明文、さらに罫線で区切ったスペック一覧を配置したカードの解説です。
2×2のグリッド配列で規則的に並べることで、信頼感と秩序を感じさせる構成です。
ホバー時に枠線がアクセントカラーへ変化するマイクロインタラクションの解説です。
同じフォーマットを4枚反復させ、複数の製品仕様を一覧比較しやすくした構成です。
縦のラインに沿って円形アイコンを配置したステップ表現の解説です。
各ステップにタイトルと説明文を添え、上から下へ順序立てて読ませます。
最後のステップまで縦一列で完結させるシンプルな構成です。
マイナスアイコンで展開中であることを示し、見出しの下に本文を表示する開閉式レイアウトの解説です。回答エリアは高さのアニメーションで滑らかに開きます。
プラスアイコンで折りたたみ中であることを示すクローズ状態の解説です。クリックでアイコンが切り替わり、本文が展開します。