Full-Bleed Hero
画面全体を覆う抽象背景と中央寄せの構図
最上部はビジュアルを主役にした没入型のヒーロー。大きなセリフ体の見出しを画面中央に置き、上下の余白と暗いオーバーレイでコントラストを整え、視線を一点に集める設計です。
プライマリ CTA の配置例
SCROLL
画面全体を覆う抽象背景と中央寄せの構図
最上部はビジュアルを主役にした没入型のヒーロー。大きなセリフ体の見出しを画面中央に置き、上下の余白と暗いオーバーレイでコントラストを整え、視線を一点に集める設計です。
プライマリ CTA の配置例テキスト左・ビジュアル右の 2 カラム構成
このセクションは説明文をどこに置くかを示す見本です。左側にコピーを縦に積み、右側に大きなアートワークを配置することで、読み進める視線の流れと余白のリズムをつくります。行間をゆったり取り、装飾を最小限に抑えることで、素材そのものの質感を引き立てる意図があります。
濃紺で反転した、カード 3 枚のリスト
左にアイコン、中央にテキスト、右に矢印を並べた横型カードの基本形です。
カード同士を同じ間隔で積み、視覚的なリズムを保つことを示す例です。
カーソルを重ねると横に滑る微細なモーションで操作可能性を伝えます。
円形プログレスで割合を表現。中央に数値を大きく置き、一目で達成度が読めるパターンです。
大きなカウンター数値の下に棒グラフを添え、規模と推移を同時に示すレイアウトです。
なだらかな波形の折れ線で、安定した推移や継続率をやわらかく可視化する見せ方です。
各工程を円形アイコンと連番で示し、順序があることを構造として伝える見本です。
3 つのカラムを均等幅に揃え、背景の曲線で時間の流れを可視化しています。
見出しと補足文を上下に分け、情報の粒度で読みやすさを整えたレイアウトです。
これは展開時のレイアウト見本です。質問行にアイコンとテキストを横並びで置き、回答は左のインデントを揃えて表示します。プラスとマイナスのアイコンで開閉状態を明示し、余白を保ちながら段階的に情報を開示する設計を示しています。
行をクリックすると回答が滑らかに開き、アイコンがプラスからマイナスへ切り替わります。高さのアニメーションで開閉の状態変化を視覚的に伝えるパターンです。
カード同士に一定の間隔を設け、境界線と淡い影で個々の項目を区切ります。中央寄せの列幅を抑えることで、長い文章でも視線が横に流れすぎない構成にしています。