THE WISDOM DISSEMINATES.
知識が広がり、社会を結節する。
Learn More
左パネルを画面幅の半分に固定した、シンプルな左右分割ストーリー構成の解説です。
右側は複数のテキストブロックを縦に積み重ね、左境界線でグループ分けした構成です。各ブロックはスクロールで画面に入った順にフェードインします。
見出しと本文をセットにした最小単位のテキストブロックの解説です。
同一フォーマットを反復させることで情報の粒度を揃えています。
最後のブロックも同じ余白・書式で統一しています。
ホバー時に背景色がわずかに明るく遷移するマイクロインタラクションの解説です。
Read Moreアイコン・見出し・本文・リンクという統一フォーマットを反復させています。
Read More細い罫線のみで区切り、装飾を抑えたミニマルなグリッドの解説です。
Read More箱型のステップカードを均等な間隔で横に並べる構成です。
各ステップの間に矢印アイコンを挟み、流れの方向を明示します。
最終ステップの右に到達点を示す円形バッジを配置しています。
画面到達と同時に、線が左から右へ描画されるSVGパスアニメーションの解説です。
クリック時に矢印アイコンが180度回転し、回答領域がなめらかに展開します。開いた状態では罫線の色がシルバーへ変化します。
質問文は1行に収まる長さを基準に組んでいます。
最後の項目まで同一の開閉挙動を保っています。