THE CALM BEFORE RENEWAL

満ちるために、削ぎ落とす。
静寂の極みに宿る、真の知性。

中央揃えではなく左寄せで組んだ、フルスクリーンビジュアル×テキストの定番構成の解説です。背景画像は右側に重心を置き、左のテキストと衝突しないよう配置しています。

Discover Veyra

SCROLL DOWN

THE BALSAMIC PHILOSOPHY

全幅ワイドビジュアルを中心に据えたセクションの解説です。

削ぎ落とされたノイズ

左を空白のまま残し、右だけにテキストブロックを置く非対称レイアウトの解説です。余白そのものを構成要素として扱っています。

「余白」こそが最大のコンテンツである。

01 / SILENCE PRINCIPLE

左右均等スプリットの解説01

左パネルはベースの背景色のまま、右パネルとの明度差だけで境界を作るミニマルな分割構成です。

02 / RECONSTRUCTION

左右均等スプリットの解説02

右パネルはわずかに明るいサーフェスカラーとし、左右で異なる階層であることを視覚的に示します。

THE FOUR PHASES OF BALSAMIC

2×2グリッドカードの解説01

デスクトップで2列2行、モバイルで1列に変化するグリッド構成です。

HTML5, CSS Variables

2×2グリッドカードの解説02

各カードは同一フォーマットで、番号・アイコン・見出し・本文・補足の順に構成しています。

Tailwind, Pure JavaScript

2×2グリッドカードの解説03

細い罫線1本でセルを区切り、装飾を最小限に抑えています。

Next.js, Headless CMS

2×2グリッドカードの解説04

補足テキストを小さく添えることで、情報の階層を明確にしています。

WebGL, Cloud Acceleration

STEPS OF TRANSITION

左側のカードを画面に固定（sticky）し、右側のタイムラインだけがスクロールする定番のピン留めレイアウトの解説です。

STEP 01 / OBSERVATION

観察フェーズ。現在稼働している資産・課題・ブランド構造のすべてを洗い出す段階の解説です。

STEP 02 / EXCLUSION

排除フェーズ。不要な設計・最適化を妨げる要素を引き去る段階の解説です。

STEP 03 / THE BLANK CANVAS

空白フェーズ。ノイズの消えた状態で新設計をデプロイする段階の解説です。

STEP 04 / EMERGENCE

発芽フェーズ。次のサイクルへの予兆を感じ、最終テストを完了する段階の解説です。

FAQ

枠線なしで罫線のみ区切ったアコーディオンの解説です。

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

クリック時にプラスアイコンが45度回転し、回答領域がなめらかに展開します。

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

各行は下線のみで区切り、装飾を抑えています。

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

最後の項目も同じ余白・書式で統一しています。

満ちるために、削ぎ落とす。静寂の極みに宿る、真の知性。