# Elva｜LPのWebデザイン参考

> 背景の巨大コピーを、わざとぼかして読ませない。動画編集AIアプリElvaのLPは、黒地にピンぼけの英文を敷き、中央のスマホ画面に「Meet Elva.」を映して、機能説明より先に撮影の空気を手渡してくる。

- URL: https://elvalabs.ai/
- 解説ページ: https://katapick.com/sites/elva
- カテゴリ: LP / 地域: 海外（US）/ 業種: AI動画編集アプリ
- テイスト: ダーク、大胆なタイポ、スクロール演出、3D/WebGL、ミニマル
- 公開・リニューアル: 2026-06 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 36 時間）

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

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

## 配色
- #131313 Screening Black（背景）
- #ffffff White（見出し / テキスト）
- #b3b3b3 Soft Gray（補足テキスト）
- #000000 Black（スマホの枠 / 影）
- #b8865f Skin Glow（映像の暖色）

## フォント
- 見出し・本文: Neue Haas Grotesk Display Pro（代替: Inter Tight）

## よくある質問
### ElvaのLPで使われているフォントは？
見出しから本文まで Neue Haas Grotesk Display Pro の1書体で組まれています。無料で近い雰囲気を出すなら Inter Tight や Inter がおすすめです。

### 背景の文字をぼかすような表現はどう作る？
CSS なら filter: blur() をかけた大きな文字に、赤や青の text-shadow をわずかにずらして重ねると、ピンぼけと色のにじみを表現できます。動きを付けるなら WebGL のシェーダーで描く方法もあります。

### どんな業種の参考になる？
AIアプリやカメラ・映像系のモバイルアプリ、クリエイター向けツールなど、アプリの体験そのものを見せたいプロダクトLPの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/elva からダウンロードできます。
出典: Katapick（https://katapick.com）