Landing PageOverseas / USPicked 2026.09.26

Elva

LPのWebデザイン参考 — AI動画編集アプリ

出典: elvalabs.ai

Editor's note — 編集部の視点

背景の巨大コピーを、わざとぼかして読ませない。

動画編集AIアプリElvaのLPは、黒地にピンぼけの英文を敷き、中央のスマホ画面に「Meet Elva.」を映して、機能説明より先に撮影の空気を手渡してくる。

LeoMotion & Direction

スクロールすると、スマホの上で見出しが次々に入れ替わっていくっぽい！Pose MirrorからScene Senseまで機能名が映画のエンドロールみたいに流れてくるの、鳥肌！

1背景のコピーは読めないほどぼかし、色のにじみまで付ける。映像のピンぼけを文字で再現している
2ヒーローはスマホの画面そのもの。LPを見ることが、アプリを開く体験の予告になっている
3右上は半透明の「Try Yourself」だけ。ナビを削り、試してみる導線を1本に絞っている

Color

Elvaの配色

Typography

使用フォントと無料の代替

見出し・本文

Aa あア

使用: Neue Haas Grotesk Display Pro
代替: Inter Tight

実測タイプスケール1440px幅 · 2026-09-26 計測

見出しKatapick 型42px · 0.9 · 400
本文The quick brown fox — 参考を型にする16px · 1.1 · 400

Structure

ページ構成（上から順）

01
ヘッダー
左に角丸の枠で囲んだ「elva」ロゴ、右に半透明のピル型ボタン「Try Yourself」。左下に制作会社のクレジットバッジを固定表示。
02
ヒーロー
黒地にぼかした巨大な英文コピーを敷き、中央にスマホのモックアップ。画面の中に人物の映像と「Meet Elva. A filmmaking crew in your phone.」を映す。
03
ステートメント
「Every video holds a feeling. But it gets lost…」など、動画が埋もれる悩みからElvaの解決までを大きな英文で1文ずつ見せる。
04
使い方
「Upload your videos and photos.」「Describe what you want」「Elva syncs your moments to music」「Pick a story.」の流れで手順を示す。
05
撮影機能
Pose Mirror、Real-time Guidance、Flow Arcs、Lighting Spot、Scene Sense を、見出しと短い説明で順に紹介する。
06
クロージング
「Just shoot.」で始まる締めのコピーと、「Get the Elva app」のアプリ入手導線。
07
フッター
問い合わせ・プレス・採用などの連絡先メールアドレスと SNS アイコン。

Interaction

アニメーション・インタラクション

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

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

検出された技術:Three.jsWebGL

Reproduce

再現するときのポイント

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

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全7セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

elva.katapick.md

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-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 36
13generator: Katapick
14---
15 
16# Elva — 再現用デザイン仕様書
17 
18> 背景の巨大コピーを、わざとぼかして読ませない。動画編集AIアプリElvaのLPは、黒地にピンぼけの英文を敷き、中央のスマホ画面に「Meet Elva.」を映して、機能説明より先に撮影の空気を手渡してくる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22