Hero Section
ヒーローセクション：
ヒーローセクション：
フルブリード背景 ＋ 左寄せ見出し
背景写真の全面に濃紺のグラデーションオーバーレイを重ね、画面左に大型のセリフ見出しを2行で配置。その下へ補足リード文を添えることで、視線を左上から自然に下へ誘導するファーストビューの構成です。
下スクロール誘導アイコン
背景写真の全面に濃紺のグラデーションオーバーレイを重ね、画面左に大型のセリフ見出しを2行で配置。その下へ補足リード文を添えることで、視線を左上から自然に下へ誘導するファーストビューの構成です。
下スクロール誘導アイコンセクション見出しを中央に置き、その直下にゴールドの短いディバイダーを添える、定番のセンタリング・ヘッダー構成です。続く本文も中央揃えで2〜3行に収め、左右に十分な余白を確保することで、可読性と落ち着いた上品さを両立させています。
左カラムに見出しと導入文を固定し、右カラムへ機能カードを縦に積み上げる非対称レイアウト。情報の優先度づけと視線誘導を同時に成立させています。
左にfont-awesomeのアイコン、右に見出しと説明文を並べた横並びカード。余白と柔らかなドロップシャドウで浮遊感を演出しています。
同一フォーマットを反復することで、ページ全体にリズムと一貫性を持たせています。ホバー時にはわずかに浮き上がる微細なインタラクションを付与。
カードを3枚並べることで要素を均等に見せつつ、比較しやすく整理。アイコンのカラーはブランドカラーのグラデーションで統一しています。
円形アイコンを点線コネクタで結び、手順の流れを縦方向に表現するタイムライン。STEP番号のエヤブローで順序を明示しています。
各ステップは見出しと説明文をセットにし、左のアイコン列と右のテキスト列で整列させた2カラム構成になっています。
点線のコネクタが各ステップの連続性を示し、上から下へ読み進める導線を自然に作り出しています。
質問行をクリックすると回答が開閉する構成です。展開時は右端のアイコンがプラスからマイナスへ変化し、その下に回答テキストがスライド表示されます。各項目は細いボーダーラインで区切られています。
初期状態では回答を非表示にし、見出しのみを一覧表示。クリックで該当項目だけが開く、省スペースで情報量を扱えるパターンです。
見出しは明朝系のセリフ書体、回答はサンセリフ系の本文書体と、役割ごとに書体を使い分けて階層を明確にしています。
アイコンのアクセントカラーにゴールドを使い、開閉状態を一目で判別できるよう視覚的なフィードバックを与えています。
