01. Icon & Title
円形アイコン+連番付きの英文見出しで、カード同士のリズムを揃えるレイアウトの解説テキストです。
Full-bleed Background · Left-aligned Serif
縦100vhの背景画像にダークグラデーションを重ね、左側へ余白を取った大判の明朝体見出しを配置。視線を見出しからCTAへ自然に導く構成です。
スクロール誘導ボタン左カラムにセクション見出しと本文、右カラムに円形のビジュアルを置く非対称グリッドです。テキスト側は行間を広めに取り、ゆったりとした余白で高級感を演出します。
円形マスクとレーダー状の同心円ガイドを重ね、中央のグロー(発光)でブランドの「光」というモチーフを象徴的に表現するレイアウト解説のサンプルです。
左に導入コピーと象徴的な写真、右に3枚の横長カードを縦積みする構成です。各カードはアイコン・番号付き見出し・説明文の3要素で揃えています。
円形アイコン+連番付きの英文見出しで、カード同士のリズムを揃えるレイアウトの解説テキストです。
ホバーで右へスライドし、枠線がゴールドに変化するマイクロインタラクションを備えたカードの説明です。
余白とアイコン径を一定に保ち、3枚で一つのまとまりとして見せるグリッド統一の解説サンプルです。
Process
左端に光るドットを並べた縦線で、ステップの順序を視覚化するタイムライン構成の解説です。
円形アイコン・大きな連番・タイトル・説明を横一列に並べ、流れを読みやすくする行のレイアウトです。
各行はホバー時に枠線が金色に灯り、現在地を示す状態変化を持たせた最終ステップの解説サンプルです。