01.アイコン付き横並びカード
左にアイコン、中央にタイトルと説明、右に矢印を置いた水平カードの解説。情報の優先順位を左から右へ整理しています。
Full-Screen Visual
画面全体を覆うビジュアル × 中央配置の大型タイポグラフィ
ヒーローセクションの解説です。背景に全画面の宇宙ビジュアルを敷き、その上に発光するブランドタイポグラフィを中央揃えで重ねた構成。最初の一画面で世界観とトーンを伝えるレイアウトです。
スクロール誘導CTA
画面全体を覆うビジュアル × 中央配置の大型タイポグラフィ
ヒーローセクションの解説です。背景に全画面の宇宙ビジュアルを敷き、その上に発光するブランドタイポグラフィを中央揃えで重ねた構成。最初の一画面で世界観とトーンを伝えるレイアウトです。
スクロール誘導CTA
コンセプトセクションの解説です。左カラムに大きな見出しと説明テキストをまとめ、右側に円形にマスクした銀河ビジュアルを配置した非対称レイアウトです。
暗い背景へ淡いグラデーションを重ねることで奥行きを表現し、余白を広く取って視線を見出しへ集めています。テキストの行間とブロック間隔をそろえ、静かで読みやすいリズムを設計しています。
左に見出し／右に縦積みカードの分割レイアウト
左にアイコン、中央にタイトルと説明、右に矢印を置いた水平カードの解説。情報の優先順位を左から右へ整理しています。
カードの枠線がシアンに発光し、横方向へわずかに動くマイクロインタラクションの解説。操作可能であることを視覚的に伝えます。
3枚のカードを均等な余白で縦に並べた構成の解説。同じ書式を反復させ、視線を上から下へ自然に流す設計です。
アイコン・番号・説明を縦に積み、ステップ同士を発光ラインで結んだフロー表現の解説です。
各ステップの円アイコンを水平のラインでつなぎ、左から右への進行と順序を視覚化しています。
3つのステップを等幅で並べ、同じ書式を反復することで一連の流れとして読ませる構成の解説です。
FAQセクションの解説です。マイナスアイコンで展開中であることを示し、見出しの下に区切り線を挟んで本文を表示する開閉式レイアウトです。回答エリアは高さのアニメーションで滑らかに開きます。
プラスアイコンで折りたたみ中であることを示すクローズ状態の解説です。クリックでアイコンが切り替わり、本文が展開します。
コンタクトセクションの解説です。左にビジュアル、右に入力フォームを置いた2カラム構成。各フィールドはフォーカスでシアンに発光します。