
左に静止画のクローズアップビジュアル、右にブランドの考え方を語るテキストブロックを配置した定番のスプリットスクリーンの解説です。
左側の画像はスクロール量に応じてクリッピングマスクが徐々に広がる演出を想定した構成です。
Learn More
輪郭線のみの丸いノードに小さなアイコンを重ね、進行段階を示すタイムラインの起点を表します。
縦線に沿って等間隔にノードを配置し、各段階の見出しと説明文をセットで並べる構成です。
スクロール位置に応じて縦線の色がアクセントカラーへ変化していく進行表現の解説です。
アイコンをカード上部に固定し、下部に見出しと説明文を積み重ねる縦長カードの解説です。
ホバー時に枠線の色が変化し、カード全体がわずかに浮き上がるマイクロインタラクションです。
細い罫線のみでカードを区切り、装飾を抑えたシャープな質感を演出する構成です。
クリックするとこの領域がなめらかに展開し、回答テキストが表示されます。
開いた状態ではマイナスアイコンが表示され、回答領域の高さが自動計算されて展開します。
見出しにカーソルを重ねると下線がアクセントカラーへ変化するホバー表現の解説です。

フォーカス時に下線がアクセントカラーへ変化し、柔らかな光のにじみが加わる入力欄の演出です。