01. Card Layout
アイコン・番号付き見出し・説明文を縦に並べたガラス調カード。ホバーで浮き上がり、下線が伸びる演出を加えています。
Full Screen
Hero Visual
全画面の背景ビジュアルに、中央配置の大型セリフ見出しを重ねたファーストビュー領域です。
背景画像にグラデーションのオーバーレイを敷き、視差を感じる緩やかなズームアニメーションで奥行きを演出します。下部はページ背景へ自然に溶け込ませています。
SCROLL
全画面の背景ビジュアルに、中央配置の大型セリフ見出しを重ねたファーストビュー領域です。
背景画像にグラデーションのオーバーレイを敷き、視差を感じる緩やかなズームアニメーションで奥行きを演出します。下部はページ背景へ自然に溶け込ませています。
左にビジュアル、右にテキストを配置した非対称の2カラムレイアウトです。視線を左の画像から右の説明へ自然に誘導します。
見出し・本文・ボタンを縦方向に積み重ね、十分な行間と余白で読みやすさを確保。画像にはブレンドモードでアクセントカラーを重ねています。
モバイルでは縦1カラムに切り替わり、画像が上、テキストが下の順で中央寄せに再構成されます。
Read Moreアイコン・番号付き見出し・説明文を縦に並べたガラス調カード。ホバーで浮き上がり、下線が伸びる演出を加えています。
半透明の背景にぼかしを効かせたグラスモーフィズム。細いボーダーと内側の発光で、暗い背景上でも輪郭を際立たせます。
3つのカードを等幅グリッドで均等配置。アイコンはfont-awesomeを使用し、グロー効果で象徴性を高めています。
ステップの始点。発光する円形アイコンで各工程を象徴し、見出しと短い説明を中央揃えで配置します。
各ステップは破線の曲線と矢印で連結。左から右への時系列を視覚的に示すプロセス図の中継点です。
フローの終点。3つの工程を等間隔に並べ、モバイルでは縦積みに切り替わり連結線は非表示になります。
背景ビジュアルの上に余白を大きく取り、行動を促すボタンを中央に置いたクロージング領域です。
Contact Us