大型アイコンのカード
カード上部に番号、中央に大きめのアイコンを置いて視認性を確保。役割を一目で伝えるレイアウトです。
暗黒と赤で構成する
フルスクリーン・ヒーロー
画面全体を覆う背景ビジュアルに白の極太見出しを重ね、赤い放射状のグローで視線を中央へ誘導するファーストビュー。強いコントラストで第一印象を決める領域です。
画面全体を覆う背景ビジュアルに白の極太見出しを重ね、赤い放射状のグローで視線を中央へ誘導するファーストビュー。強いコントラストで第一印象を決める領域です。
左カラムに見出しと本文、右カラムにフルブリードの写真を置く2分割レイアウト。重要な数値は赤の極太フォントで際立たせ、視覚的に危機感を伝える構成です。以下の数値はレイアウト確認用のサンプルです。
IMAGE PLACEHOLDER
中央の縦ラインと丸番号（01〜03）で順序を明示し、左右交互にカードを配置するタイムライン。各カードはアイコン・見出し・説明文で構成し、ホバーで浮き上がります。
アウトラインアイコンを枠内に配置し、見出しと短い説明文を続けるカード。左側の工程は右寄せテキストで対称性を演出します。
偶数番目のカードは右側に配置し、視線をジグザグに誘導。番号ノードはラインの中央に固定され、進行方向を示します。
マウスオーバーで浮き上がり、左端に赤いアクセントバーが伸びるインタラクション。ダークカードに赤の差し色で緊張感を保ちます。
通し番号・大型アイコン・見出し・説明文・矢印リンクを縦積みにしたカードを等幅3列で配置。ホバーで下から赤いグローが立ち上がる演出を加えています。
カード上部に番号、中央に大きめのアイコンを置いて視認性を確保。役割を一目で伝えるレイアウトです。
3枚のカードを同じ高さ・同じ余白で整列させ、比較しやすい面を作ります。文字量が違っても崩れません。
カーソルを乗せると下方から赤い光がにじみ、アイコンと矢印が動くマイクロインタラクションを実装しています。
アイコン・巨大な数値・単位・赤いラベルを中央揃えで積み上げた3枚のパネル。数字を主役にして成果を直感的に伝えます。表示値はサンプルです。
質問行をクリックすると回答が展開する開閉式リスト。左にQ/Aのマーカー、右にプラス・マイナスのトグルを配置し、開いた項目は赤枠で示します。
左右を対比させる2分割の行動喚起エリア。左は彩度を落とした暗い写真で「もう一方の選択肢」を静かに表現します。
