Solv フレームドフィンテックランディングページ — 再構築スキル

1. デザイン哲学

ページを、端から端までのコーポレートサイトではなく、ソフトに丸みを帯びた「ブラウザレスキャンバス」の中に配置された洗練されたプロダクトデモとして構築します。コントラストは、以下の3つのシステムが連携することで生まれます。

エディトリアルな抑制: 大きめのグロテスクな見出し、短いコピー、十分な余白、少数の色。
プロダクトの触感: ピル型コントロール、インセットされたミニインターフェース、ライブ数値、スライダー、アコーディオン、ダッシュボード断片。
ソフトな映画的な動き: コンテンツは跳ねたり飛んだりしません。イーズアウトカーブで、ブラー、低透明度、控えめな上下移動から解像され、その後静止します。

ページは、静止時には落ち着いて、インタラクション時には反応良く感じられるべきです。動きは階層化のためのツールであり、装飾ではありません。

2. 直接観察されたもの vs 推測されたもの

直接観察されたもの

2272×1440、60fps、22.38秒のデスクトップキャプチャ。
固定された写真の森林背景が、丸みを帯びたページシェルを囲んでいる。
白、オリーブ、アシッドライム、淡いブルー、淡いラベンダー、グレー、写真のサーフェス。
ブラー＋フェード＋垂直移動を伴うヒーローのロード振り付け。
ページシェルの右端にある細いライム色のスクロールサムを備えた、スムーズな垂直スクロール。
ブラーのクリアリング、透明度、短い上方向の動きを使用するセクションリビール。
水平ロゴレール。
四角いレンジサムとリアルタイムの資金調達見積もりを備えたライブ計算機。
開いた回答をアニメーション高さとプラス/マイナスアイコンで入れ替えるアコーディオン。
引用コピーとページネーションドットを備えたお客様の声画像。
3つの記事カード、中央揃えのCTAセクション、ダークなインセットフッター。
明らかなスクロールジャッキングや固定された水平シーケンスはなし。

信頼性の高い推測

Framer Motion、GSAP ScrollTrigger、または同様の交差検出駆動のリビールシステム。
Lenisのようなスムーズスクロールレイヤー、または非常にスムーズなトラックパッド/ブラウザのスクロール。
ロゴレール用の複製CSSマーキー。
単一のモダングロテスクファミリー。おそらくSuisse/Neue Haas/Aeonikの近辺。正確なフォントIDはキャプチャだけからは復元できません。
タブレット/モバイルの動作は示されていません。以下のレスポンシブルールは、デスクトップの品質を維持するために設計された実装要件です。

3. ビジュアルシステム

3.1 カラートークン

これらの値はキャプチャからサンプリングまたは視覚的に再構築されたものです。これらを標準の実装パレットとして使用します。

:root {
  /* Core */
  --ink: #273000;          /* サンプリングされたダークオリーブ; FAQ/フッター/テキスト */
  --ink-strong: #1f2700;   /* 高コントラストコントロール用のより深いオリーブ */
  --acid: #ddff5a;         /* サンプリングされた計算機/アクセントライム */
  --acid-soft: #efffb0;    /* CTAグロー / 微妙にハイライトされたフィールド */
  --paper: #ffffff;
  --paper-warm: #fbfbf7;

  /* Supporting cards */
  --sky: #cfe7e9;          /* サンプリングされた淡いブルー */
  --lavender: #d9def8;     /* サンプリングされた淡いラベンダー */
  --mist: #efeee9;         /* チップ、ロゴステートメントピル */
  --line: rgba(39, 48, 0, 0.14);
  --line-on-dark: rgba(221, 255, 90, 0.16);

  /* Text */
  --text-primary: #273000;
  --text-secondary: #74756d;
  --text-on-dark: #ddff5a;
  --white-muted: rgba(255, 255, 255, 0.72);

  /* Hero glass */
  --glass-dark: rgba(48, 43, 39, 0.48);
  --glass-light: rgba(255, 255, 255, 0.82);
  --hero-scrim: linear-gradient(
    180deg,
    rgba(20, 24, 10, 0) 42%,
    rgba(20, 24, 10, 0.24) 68%,
    rgba(20, 24, 10, 0.72) 100%
  );
}

カラー使用ルール

ページ表面の約65～75%に --paper を使用します。
1つの大きなセクションとフッターには --ink を使用し、すべてのカードに使用しないでください。
--acid は、プライマリコールトゥアクション、計算機、FAQのタイポグラフィ、カスタムスクロールサム、小さなステータスチップに予約します。
小さなコンポーネントで淡いサポートカラーを2色以上使用しないでください。カードは、白、青、ラベンダー、ライム、オリーブ、または写真のいずれかであり、マルチカラーグラデーションではありません。
テキストとコントロールに純粋な黒を使用しないでください。オリーブブラックは、オリジナルの特徴の重要な部分です。
シェルの背後にある森林写真は、ページシェルが常に支配的になるように、十分にくすんだままにしておく必要があります。必要に応じて、微妙なシアン/クリームのウォッシュを追加します。

3.2 タイポグラフィ

書体

キャプチャは、コンパクトな間隔とソフトなジオメトリを備えたニュートラルなネオグロテスクを使用しています。以下のスタックを使用します。

font-family: "Suisse Intl", "Neue Haas Grotesk Text", "Inter", "Helvetica Neue", Arial, sans-serif;

オープンソース実装の場合は、見出しに Inter Tight、本文に Inter を使用します。セリフ体またはモノスペースのセカンダリファミリーを導入しないでください。

ウェイトシステム

見出し: 400–500。大きなタイプは太くありません。
セクション見出し: 400–500。
本文: 400。
本文内の強調: 600。
ボタン/ナビ: 500–600。
大きな数値表示: 500。

デスクトップタイプスケール

:root {
  --fs-hero: clamp(3.75rem, 4.35vw, 5.15rem);       /* ~60–82px */
  --fs-section-xl: clamp(3rem, 3.4vw, 4.25rem);    /* ~48–68px */
  --fs-section: clamp(2.5rem, 2.8vw, 3.65rem);     /* ~40–58px */
  --fs-card-title: clamp(2rem, 2.2vw, 3rem);       /* ~32–48px */
  --fs-quote: clamp(1.75rem, 2vw, 2.75rem);        /* ~28–44px */
  --fs-body-lg: 1.25rem;                           /* 20px */
  --fs-body: 1rem;                                 /* 16px */
  --fs-small: 0.875rem;                            /* 14px */
}

行間とトラッキング

ヒーロー/大見出し: line-height: 0.96–1.02, letter-spacing: -0.045em。
セクション見出し: line-height: 0.98–1.05, letter-spacing: -0.04em。
カードタイトル: line-height: 1.0–1.08, letter-spacing: -0.035em。
本文: line-height: 1.42–1.55, letter-spacing: -0.01em。
ボタン/ナビ: line-height: 1, letter-spacing: -0.01em。
大きな通貨値: letter-spacing: -0.055em; 表形式数字を使用します。

.numeric {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.055em;
}

行長ルール

ヒーロー本文: 42–54文字。
セクション本文: 48–64文字。
FAQの回答: 62–76文字。
表示見出しが14～18語以上、またはモバイルで3行を超えないようにします。

3.3 スペーシングとグリッドリズム

4pxベースを使用し、ほとんどの表示スペーシングは8の倍数にします。

:root {
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */
}

デスクトップシェル測定値

2272×1440のキャプチャより:

ページシェル幅: 約 90vw。
水平外側マージン: 約 5vw。
上部/下部の表示外側マージン: 約 3–3.5vh。
シェルの角丸: 28–32px。
内部セクションパディング: 左右 56–64px。
大きな垂直セクションパディング: 96–144px。
主要カード間のギャップ: 20–28px。
細いセパレーター: 12～16%の不透明度で 1px。

グリッド

シェル内で12カラムグリッドを使用します。

.section-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 1.4vw, 1.75rem);
}

構成比率:

ヒーローコンテンツ: 左6～7カラム; フローティングダッシュボードカード: 右3カラム。
製品概要: コピー5カラム; ビジュアルモジュール6～7カラム。
機能トリオ: 約3 / 3 / 4.5カラム、写真カードが最も幅広。
計算機: 5.5 / 5.5カラム、中央に余裕のあるギャップ。
FAQ: 5 / 7カラム。
記事: 等しい4カラムカード。
フッター: ブランドブロック4カラム; ナビゲーション/連絡先/ロケーション/言語が残りを埋めます。

3.4 角丸の慣例

:root {
  --radius-shell: 2rem;      /* 32px */
  --radius-section: 1.5rem;  /* 24px */
  --radius-card: 1.25rem;    /* 20px */
  --radius-ui: 1rem;         /* 16px */
  --radius-chip: 999px;
}

ルール:

外側のページシェル: 28–32px。
大きなメディアとセクションカード: 20–24px。
ミニダッシュボードカード: 14–18px。
ボタン、タグ、セグメント化ナビ、ステートメントチップ: 完全なピル形状。
多数の任意の角丸を混在させないでください。これらの5つの値のみを使用します。

3.5 シャドウとエレベーション

オリジナルは、明白なシャドウよりもコントラストとブラーに依存しています。

:root {
  --shadow-shell: 0 24px 70px rgba(26, 34, 12, 0.18);
  --shadow-float: 0 18px 50px rgba(25, 31, 8, 0.18);
  --shadow-ui: 0 8px 24px rgba(25, 31, 8, 0.10);
}

ページシェルは1つの大きくソフトなシャドウを取得します。
フローティングヒーローダッシュボードは中程度のソフトシャドウを取得します。
ほとんどの機能カードにはシャドウがありません。境界線または色の分離を使用します。
シャープな黒のシャドウや複数の積み重ねられたシャドウは絶対に使用しないでください。

4. レイアウトアーキテクチャ

4.1 グローバルキャンバス

丸みを帯びたコンテンツシェルがスクロールしている間、森林の背景は固定されたままです。

html {
  background: #b9d9d8;
}

body {
  margin: 0;
  color: var(--text-primary);
  background:
    linear-gradient(90deg, rgba(174, 219, 224, 0.34), rgba(250, 249, 218, 0.34)),
    url('/images/forest-background.avif') center / cover fixed;
}

.page-shell {
  width: min(90vw, 132rem);
  margin: 3.25vh auto;
  border-radius: var(--radius-shell);
  overflow: clip;
  background: var(--paper);
  box-shadow: var(--shadow-shell);
  position: relative;
}

シェルの周りに太い境界線を配置しないでください。背景に対するコントラストで十分です。

4.2 セクション順序

ヒーロー / ナビゲーション
お客様の声ステートメントチップ + ループロゴレール
製品概要 — 左に見出し/コピー、右に2つのプロダクトストーリーカード
グロースキャピタル機能トリオ
透明性のある手数料計算機
FAQアコーディオン
お客様の声メディア/カルーセル
最新記事
ファイナンスエキスパートCTA
ダークインセットフッター

4.3 ヒーロー構成

高さ: デスクトップで min(92svh, 82rem); 最小760px。
シェル内の縁なし画像。
トップナビは画像の上にフロートします。
コピーは左下に固定されます。
プロダクト/ダッシュボードカードは右下に固定されます。
読みやすさのためにダークな下部スクリムと、写真の上に非常に微妙なウォームオーバーレイを追加します。

.hero {
  min-height: min(92svh, 82rem);
  position: relative;
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
  z-index: -1;
}

4.4 ナビゲーション

デスクトップは3つの独立したクラスターで構成されます:

左: 3つのリンクを含む半透明のダークピル。
中央: 白いロゴ。
右: ダークな半透明のアカウントピルと、個別の円形メニューボタン。

backdrop-filter: blur(14px) と半透明のサーフェスを使用します。ナビの高さは58～64pxに保ちます。

幅900px未満の場合:

左のリンクピルを非表示にします。
中央揃えのロゴを維持します。
1つのプライマリアクションとメニューアイコンを維持します。
ロゴが、不均等なサイドコントロールによって数学的にシフトされることなく、光学的に中央に保たれるようにします。

4.5 ロゴレール

白いセクション。
ロゴの上の中央揃えのステートメントチップ。
複製されたコンテンツを含む水平にクリップされたレール内のロゴ。
ロゴサイズは、同一の生の幅に設定するのではなく、視覚的に正規化する必要があります。
選択されたマークにはグレースケール/オリーブ処理と低い不透明度を使用します。

4.6 製品概要

左側の大きな2行見出し。
その下に2つのピルボタン。
2つの短い段落; 各段落の最初の数語はセミボールド。
右側は、非対称性を生み出すために垂直にオフセットされた、異なる色の2つのカードを使用します。
ダークカードは淡いブルーのカードよりも細く/高く、ミニプロダクトUIを含みます。

4.7 グロース機能トリオ

セクション見出しは行の大部分にまたがり、右側に小さなアウトライン「もっと詳しく」ピルが配置されます。
3つのカード:
1. インセットされた白いUIを備えたソフトグリーンの写真/グラデーションカード。
2. 残高サマリーパネルを備えたラベンダーカード。
3. 大きな白い見出しと下部のコピーオーバーレイを備えた幅広の写真カード。
カードは高さと角丸を共有しますが、幅は共有しません。

4.8 計算機

白いセクションで、上下に大きな余白があります。
左: 見出し、2～3行の説明、ダークピルCTA。
右: アシッドライムのカードで、ヘッダー、区切り線、通貨値、レンジコントロール、区切り線、資金調達見積もりが含まれます。
計算機カードはほぼ正方形で、幅が650pxを超えないようにします。

4.9 FAQ

全幅のダークオリーブセクション。
左のカラム: ライム色のタイトルと概要。
右のカラム: 4つのアコーディオン行。
一度に1つの回答が開きます。
行の区切り線は非常に微妙です。
プラスは、アイコンコンテナ全体を回転させることなくマイナスに変わります。

4.10 お客様の声

FAQのすぐ下にある全幅の写真カード。
大きなポートレート/ビデオ静止画。
画像下部のぼやけた前景は、インターフェースのぼかしではなく、写真の一部です。
引用と帰属は、より暗い左下のグラデーションの上に配置されます。
右下に2つの小さなページネーションドット/ボタン。
記録には1つのスライドトランジションしか表示されていませんが、構造的にはカルーセルとして扱います。

4.11 記事

左側にタイトル、右側に小さな「すべて表示」アクションがある白いセクション。
3つの等しいカード。
各カードは、16:9またはやや縦長の画像と、暗い下部グラデーション、白い記事タイトルを使用します。
タイトルは短く、左下に固定されます。

4.12 CTA

高いセクションの中央揃えコンテンツ。
背景は上部の白から下部の非常に淡いライムに遷移します。
見出し: 2行、最大幅約520～620px。
小さなエキスパートアバタークラスターとダークプライマリピル。
上下に約120～180pxの余白を確保します。

4.13 フッター

CTA背景はフッターの背後に続きます。
フッター自体は、24～32pxの外側マージンを持つインセットダークオリーブの角丸長方形です。
ブランドは左上、ナビゲーションは右上、連絡先/ロケーション/言語は下のエリア、ソーシャルサークルは左下。
フッターは、従来の端から端までの法的フッターではなく、コンパクトなダッシュボードパネルのように感じられる必要があります。

5. レスポンシブ動作

キャプチャはレスポンシブ状態を示していません。意図を維持するために、以下を実装します。

5.1 ブレークポイント

// tailwind.config.ts
screens: {
  sm: '640px',
  md: '768px',
  lg: '1024px',
  xl: '1280px',
  '2xl': '1536px',
}

5.2 デスクトップ ≥ 1200px

90vwシェルとすべてのマルチカラム構成を維持します。
56～64pxの内部水平パディングを使用します。
ヒーローは最小760pxの高さを維持します。
12カラムグリッドのままです。

お気に入りのAIに質問する

ドキュメント

Solv フレームド フィンテック ランディング ページ — 再構築スキル