CRESCENT

— Sharp Light in the Quiet Dark —
01 / Philosophy Section

左右均等のスプリットスクリーン構成。

左に静止画のクローズアップビジュアル、右にブランドの考え方を語るテキストブロックを配置した定番のスプリットスクリーンの解説です。

左側の画像はスクロール量に応じてクリッピングマスクが徐々に広がる演出を想定した構成です。

Learn More
02 / Roadmap Section

背景に大きなシルエット画像を薄く敷き、左側の単線タイムラインで進行を示す構成の解説です。

PHASE 01

丸アイコン付きノードの解説01

輪郭線のみの丸いノードに小さなアイコンを重ね、進行段階を示すタイムラインの起点を表します。

PHASE 02

丸アイコン付きノードの解説02

縦線に沿って等間隔にノードを配置し、各段階の見出しと説明文をセットで並べる構成です。

PHASE 03

丸アイコン付きノードの解説03

スクロール位置に応じて縦線の色がアクセントカラーへ変化していく進行表現の解説です。

03 / Services Section

縦長比率で統一した3カラムのグリッドカード構成の解説です。

アイコン先頭配置のカード01

アイコンをカード上部に固定し、下部に見出しと説明文を積み重ねる縦長カードの解説です。

アイコン先頭配置のカード02

ホバー時に枠線の色が変化し、カード全体がわずかに浮き上がるマイクロインタラクションです。

アイコン先頭配置のカード03

細い罫線のみでカードを区切り、装飾を抑えたシャープな質感を演出する構成です。

04 / FAQ Section

開閉状態でプラス/マイナスアイコンが切り替わるアコーディオンの解説です。

閉じた状態のアコーディオン項目01

クリックするとこの領域がなめらかに展開し、回答テキストが表示されます。

開いた状態のアコーディオン項目02

開いた状態ではマイナスアイコンが表示され、回答領域の高さが自動計算されて展開します。

閉じた状態のアコーディオン項目03

見出しにカーソルを重ねると下線がアクセントカラーへ変化するホバー表現の解説です。

05 / Conversion Section

枠線のみのミニマルな入力フォームを縦に積んだクロージングCTAの解説です。

フォーカス時に下線がアクセントカラーへ変化し、柔らかな光のにじみが加わる入力欄の演出です。

Inquire