Concept Service Process FAQ Contact
Hero / First View

フルスクリーンの没入型ヒーロー、
左揃え大型セリフ見出し。

Full-bleed Background · Left-aligned Serif

縦100vhの背景画像にダークグラデーションを重ね、左側へ余白を取った大判の明朝体見出しを配置。視線を見出しからCTAへ自然に導く構成です。

スクロール誘導ボタン
2カラム / 左テキスト・右ビジュアル

Concept

左カラムにセクション見出しと本文、右カラムに円形のビジュアルを置く非対称グリッドです。テキスト側は行間を広めに取り、ゆったりとした余白で高級感を演出します。

円形マスクとレーダー状の同心円ガイドを重ね、中央のグロー(発光)でブランドの「光」というモチーフを象徴的に表現するレイアウト解説のサンプルです。

星雲のビジュアル
Service

3カラム
カード構成

左に導入コピーと象徴的な写真、右に3枚の横長カードを縦積みする構成です。各カードはアイコン・番号付き見出し・説明文の3要素で揃えています。

ランタンの灯り

01. Icon & Title

円形アイコン+連番付きの英文見出しで、カード同士のリズムを揃えるレイアウトの解説テキストです。

02. Hover Motion

ホバーで右へスライドし、枠線がゴールドに変化するマイクロインタラクションを備えたカードの説明です。

03. Consistent Grid

余白とアイコン径を一定に保ち、3枚で一つのまとまりとして見せるグリッド統一の解説サンプルです。

Process

縦型タイムライン

01

発光ドット付きの起点

左端に光るドットを並べた縦線で、ステップの順序を視覚化するタイムライン構成の解説です。

02

アイコン+連番+本文

円形アイコン・大きな連番・タイトル・説明を横一列に並べ、流れを読みやすくする行のレイアウトです。

03

ホバーで枠線が発光

各行はホバー時に枠線が金色に灯り、現在地を示す状態変化を持たせた最終ステップの解説サンプルです。

Achievements

円形プログレス
94.8%
アイコン+棒グラフ
100%
アイコン+波線
88.2%

FAQ

A.質問行をクリックで回答が高さアニメーションで開閉します。先頭項目を初期表示にして、答えの読みやすさを示すレイアウトの解説テキストです。シェブロンは開閉に合わせて回転します。
A.左にセリフ体の Q・A 記号を揃え、本文の開始位置を統一することで、質問と回答の対応関係を明快に見せる構成の説明サンプルです。
A.各項目を角丸の薄い枠で囲み、十分なパディングとホバー反応でクリック可能であることを伝えるアコーディオン設計の解説です。

中央寄せの大型 CTA セクションの解説

グラデーションのアクションボタン