左カラムに縦長のビジュアル、右カラムにテキストを配置した左右分割レイアウトです。見出しは明朝体で大きく組み、本文はゆとりある行間で可読性を確保します。ラベル前に細いゴールドの罫線を添え、十分な余白でブランドの世界観を演出します。
アイコン・見出し・説明文・右下の矢印で構成したゴールド枠のカードです。要素の優先順位を縦方向で整理しています。
ホバー時に枠線・背景・アイコン色が変化し、操作可能であることを伝えるインタラクションを設定しています。
グリッド内で配置位置を調整し、余白の取り方で情報の重みづけを表現するカードレイアウトです。
円形アイコンと連番で順序を明示。各ステップを矢印でつなぎ、流れの方向を視覚的に示します。
見出しと説明文を縦に積み、左右の余白を均等に保つことで読みやすいリズムをつくります。
最終ステップを王冠アイコンで象徴的に締めくくり、ブランドのトーンを保ちます。
クリックで開閉する回答エリアです。プラス／マイナスのアイコンで開閉状態を示し、開いた項目には淡い影を付けてアクティブであることを伝えます。回答文は質問テキストの開始位置に揃えて配置します。
初期状態では回答を折りたたみ、見出し行のみを表示します。複数項目を縦に等間隔で並べ、白背景＋ゴールドの細枠でリスト全体の統一感を保ちます。
各項目は同一コンポーネントの繰り返しで構成されるため、追加・削除をしても余白やレイアウトが破綻しません。レスポンシブでは左右パディングを調整します。