Full-Screen
Hero Layout
大判ビジュアル+中央寄せ見出しのファーストビュー
画面いっぱいに高精細の背景写真を敷き、暗いグラデーションを重ねて視認性を確保。中央に大きなセリフ体の見出しとリード文、CTAボタンを縦に積み、下部にスクロール誘導アイコンを配置した没入型の構成です。
View Details
大判ビジュアル+中央寄せ見出しのファーストビュー
画面いっぱいに高精細の背景写真を敷き、暗いグラデーションを重ねて視認性を確保。中央に大きなセリフ体の見出しとリード文、CTAボタンを縦に積み、下部にスクロール誘導アイコンを配置した没入型の構成です。
View Details
画面を縦に二分し、片側に余白を生かした縦長の写真、もう一方に淡いトーンの背景パネルとテキストを配置するアシンメトリー構成です。 写真は上のセクションに重なるように引き上げて配置し、境界に奥行きを生み出しています。 テキスト側はアイブロウ・見出し・装飾区切り線・本文・テキストリンクの順で縦組みし、視線を自然に下へ導きます。
Learn More等幅3カラムで並べたカードの基本形。内側に二重罫線の額装を施し、ラインアイコン・見出し・短い中央寄せ説明文を縦に積んでいます。ホバーで浮き上がる動きを付与しました。
3枚のカードはすべて同一フォーマットで統一。アイコンはゴールドで色を揃え、見出し下に短い区切り線を入れて視覚的なリズムを作っています。余白を広く取り上質感を演出。
背景はやや濃いアイボリー、カードは白で抜くことでコントラストを確保。レスポンシブ時には縦1列へ自然に折り返し、中央寄せの可読性を保ちます。
ゴールドの細い円で囲んだラインアイコンを起点に、ステップ番号・見出し・説明文を中央寄せで縦に配置するブロックです。
各ステップの円を破線と矢印アイコンで横につなぎ、左から右への進行手順を視覚的に示すフロー構成にしています。
狭い画面では横並びを解除して縦1列に再配置し、連結の矢印も下向きへ切り替えてレスポンシブに対応します。