
背景いっぱいに薄く配置した巨大タイポグラフィが、スクロール速度の0.4倍でゆっくり動くパララックス演出の解説です。
本文テキストは右側1カラムに集約し、画像パネルとの左右非対称な配置で視線誘導を作っています。
段落ごとに時間差でフェードインさせることで、物語を読み進めるような体験を構成するストーリーテリング型レイアウトです。
Read Concept Detail左カラムを画面に固定(sticky)したまま、右カラムの項目をスクロールで送り出すスプリットスクリーン構成の解説です。
罫線で上下を区切ったリスト形式で、アイコンと見出し・説明文を1セットとして積み重ねる構成です。
右カラムがスクロールされるたび、左カラムのアイコンが連動して切り替わる想定のマイクロインタラクションです。
項目数は可変で、同一フォーマットの反復により整列感と情報の一覧性を両立させています。
ホバー時にカードがY軸方向へ浮き上がり、枠線の色が変化するマイクロインタラクションの解説です。
More3列グリッドで等幅に配置し、余白と罫線のみで区切りを表現するミニマルなカードレイアウトです。
More同一の構造を反復することで一覧性を高めつつ、アイコンの発光色でブランドトーンを統一しています。
More現在地を示すアクティブノードはメインカラーで発光し、他のノードより強調して表示されます。
未到達のステップは輪郭線のみのノードで表示し、進行状況の差を視覚的に区別します。
縦線はグラデーションで上から下へ一続きに伸び、スクロールに合わせて進行を追体験できる構成です。
クリック時にプラスアイコンが45度回転してバツ印のような形に変化する開閉表現の解説です。開いた状態では回答エリアがなめらかに展開します。
閉じた状態ではプラスアイコンがそのままの向きで表示され、クリックで展開します。