HERO SECTION

大文字タイポグラフィ×フルスクリーン背景。

ブラッシュドメタル調の背景ビジュアルを全画面に敷き、幾何学的な大文字タイポグラフィを中央に配置したヒーロー領域の解説です。1文字ずつ時間差で表示されるスタッガーアニメーションを想定しています。

DISCOVER TECHNICAL SPEC
SCROLL
Overview Section

左右分割のスプリットスクリーン構成。

左にマテリアルのクローズアップ画像、右にブランド哲学の解説文を配置したスプリットスクリーンの解説です。スクロールに応じて左右が互い違いの速度で動き、文章は1文字ずつ不透明度が変化しながら現れます。

Technology Section

3カードのグリッド構成。

アイコン付きカード構成01

上部にアイコン、中央にタイトルと説明文を配置した縦積みカードの解説です。

View Document

アイコン付きカード構成02

ホバー時にカードが浮き上がり枠線が発光するマイクロインタラクションの解説です。

View Document

アイコン付きカード構成03

3列均等のグリッドで反復させ、複数の要素を並列に比較しやすくした構成です。

View Document
Process Section

水平3ステップの接続フロー。

Step 01

角丸アイコンを横一列の発光ラインで接続したフローの解説です。

Step 02

中間ステップを挟むことで工程の順序を明快に示します。

Step 03

3分割の均等配置で一連の流れとして読ませる構成です。

Analytics Section

3種類の指標を組み合わせたカード構成。

カウントアップ数値のカード構成の解説です。
+280%
横棒グラフによる比較カード構成の解説です。
項目A
項目B
項目C
円形進捗ゲージのカード構成の解説です。
4,800h
FAQ Section

アイコン付きFAQ / Accordion。

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

質問アイコンを左に、開閉アイコンを右に配置したアコーディオンの解説です。開いた状態は矢印が回転して上向きになります。

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

クローズ状態では矢印が下向きのままで、クリックすると本文がスライドして展開します。

Contact