画面全幅・縦100vhのヒーロー。左に大型の明朝見出し、右に回転する黄金スパイラルを重ね、ディープネイビーと金の対比で世界観を立ち上げるレイアウト解説です。
主要導線ボタン見出し・本文を左カラムに、右カラムへ軌道リングと中央球体のシンボルを配置。余白を広く取り、視線が左から右の象徴へ流れる導線を設計したセクションの解説です。中央の球体は金のリムライトでブランドの核を示します。
左の固定見出しに対し、右側へアイコン付きカードを4枚均等配置。各カードはアイコン・小見出し・補足の3要素で統一し、ホバーで浮き上がる演出を持たせたグリッド構成の解説です。
上にアイコン、中央に小見出し、下に説明文を置く基本カードの型を示します。
細いゴールドのボーダーで矩形を定義し、内側に余白を確保したレイアウトです。
4枚を同サイズで並べ、視覚的な比較がしやすい一覧パターンを表現します。
カーソルを乗せると持ち上がり、内側にゴールドの光彩が差すインタラクション解説です。
各ステップは番号・円形アイコン・見出し・説明で構成されます。
ステップ間を破線で結び、順序と流れを視覚化したレイアウトです。
左から右へ進む時系列を、等間隔の3カラムで表現するパターンです。
設問をクリックすると回答が開閉する蓄積型のレイアウト。設問は「Q.」マーカー＋テキスト、右端に開閉アイコンを置き、回答は「A.」マーカーと本文で構成する解説行です。
初期状態は閉じており、回答領域の高さをアニメーションで展開します。縦に項目を積み重ね、必要な情報だけを開いて読ませる省スペースな設計の解説です。
各項目をカードとして等間隔に並べ、ボーダーで領域を明示します。中央寄せの幅に収め、長文でも読みやすい行間を確保した一覧パターンです。