Elva

1. 01

   ヘッダー

   左に角丸の枠で囲んだ「elva」ロゴ、右に半透明のピル型ボタン「Try Yourself」。左下に制作会社のクレジットバッジを固定表示。

2. 02

   ヒーロー

   黒地にぼかした巨大な英文コピーを敷き、中央にスマホのモックアップ。画面の中に人物の映像と「Meet Elva. A filmmaking crew in your phone.」を映す。

3. 03

   ステートメント

   「Every video holds a feeling. But it gets lost…」など、動画が埋もれる悩みからElvaの解決までを大きな英文で1文ずつ見せる。

4. 04

   使い方

   「Upload your videos and photos.」「Describe what you want」「Elva syncs your moments to music」「Pick a story.」の流れで手順を示す。

5. 05

   撮影機能

   Pose Mirror、Real-time Guidance、Flow Arcs、Lighting Spot、Scene Sense を、見出しと短い説明で順に紹介する。

6. 06

   クロージング

   「Just shoot.」で始まる締めのコピーと、「Get the Elva app」のアプリ入手導線。

7. 07

   フッター

   問い合わせ・プレス・採用などの連絡先メールアドレスと SNS アイコン。

• スタックに Three.js と WebGL があり、ぼかしと色のにじみを持つ背景の文字はシェーダーで描かれていると思われる。CSS の filter: blur と、色違いの text-shadow をずらす方法でも近づけられる
• スマホのモックアップを固定したまま、スクロールに合わせて見出しや説明が入れ替わる構成と思われる。position: sticky とスクロール進捗に応じたクロスフェードで再現可能
• 「Try Yourself」は backdrop-filter: blur を使った半透明のピル。右端の小さな丸が状態表示のアクセントになっている

スクロールのコマ撮り200–400ms

検出された技術:Three.jsWebGL

• 01背景は #131313 の黒にし、巨大な英文を強くぼかして“読ませない文字”をテクスチャとして使う
• 02主役はスマホのモックアップ1つに絞り、見出しは画面の中に白で重ねる
• 03書体はグロテスク系1書体だけにし、ウェイトとサイズの差で階層を作る
• 04ナビは置かず、CTAは右上の1つに絞る

1---
2title: "Elva デザイン分析書"
3source: https://elvalabs.ai/
4katapick: https://katapick.com/sites/elva
5category: LP
6region: 海外 (US)
7tags: [ダーク, 大胆なタイポ, スクロール演出, 3D/WebGL, ミニマル]
8launched: 2026-06
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12generator: Katapick
13---
14 
15# Elva — デザイン分析書
16 
17> 背景の巨大コピーを、わざとぼかして読ませない。動画編集AIアプリElvaのLPは、黒地にピンぼけの英文を敷き、中央のスマホ画面に「Meet Elva.」を映して、機能説明より先に撮影の空気を手渡してくる。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22