自動車・モビリティLPを表現する
ヒーローでの登場、走行性能、塗装の質感、先進性。車のLPをスクロール順に魅せる表現テクニック。
このページについて
- 「自動車LPの表現」とは：車という高関与商材を、LPの各セクションで段階的に魅せる表現群。第一印象（ヒーロー）から性能・質感・先進性へと訴求を積み上げる構成が定番。
- こんな時に使う：自動車メーカー・ディーラー・EV/モビリティスタートアップ・バイク・自転車ブランド・カーシェア/レンタカー。
- 関連タグ：⚡ 疾走感🌌 先進性（準備中）
- 構成の流れ：①ヒーロー（登場）→ ②走行性能 → ③ディテール → ④先進性
- AIへの伝え方のコツ：「かっこいい車のLP」では曖昧。LPのセクション単位で「ヒーローは塗装に光が流れる登場」「性能セクションは流れる背景で疾走感」など、場面と表現をセットで指示する。
表現の引き出し（LP構成順）
🎨 ヒーローでの登場
🏁 LPファーストビュー（最初の3秒で印象を決める主役）
📝 表現の語彙
日本語: 車の登場、ヒーロー、塗装の照り、ライトの点灯
英語: hero reveal, car entrance, paint sheen, headlight ignition
抽象キーワード: first-impression, presence, allure
💬 AIへの指示テンプレ
「暗いショールームに置かれた車が登場するヒーロー演出を作ってください。車はサイドビューのSVGで、ボディは多段グラデで曲面の回り込みを表現し、ボンネット〜ルーフの稜線に沿った細いスペキュラハイライトを入れてください（磨かれた塗装の照り）。ハイライトは常時ではなく『3秒流れて5秒静止』の間欠で。ヘッドライトをゆっくり明滅させ、床に車の映り込み（上下反転・低opacity・下へフェード）を落としてください。リムライトで背面輪郭を縁取ります。」
🎯 似合うシーン
車LPのファーストビュー全般・新車発表・高級車/EVブランド
🔧 実装手法
サイドビュー車の【A】立体造形（多段グラデ・稜線スペキュラ・リムライト・接地影）+ clipPath内の間欠スペキュラ流れ + ヘッドライト明滅 + 床の映り込み
📄 コード例を見る
html
<div class="car-stage">
<!-- 上からのスポット光と床の映り込みで「暗いショールーム」を作る -->
<div class="headbeam"></div>
<div class="car-scene">
<div class="car-shift"><!-- 登場アニメ（ロード時に1回だけ） -->
<!-- 車体：多段グラデで曲面の回り込み + 稜線スペキュラ + リムライト -->
<svg class="car-svg" viewBox="0 0 280 150" width="280" height="150">
<defs>
<linearGradient id="carBody" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#9fb6cf" />
<stop offset="22%" stop-color="#6f87a2" />
<stop offset="55%" stop-color="#46586e" />
<stop offset="100%" stop-color="#28323f" />
</linearGradient>
</defs>
<!-- 接地影 → 車体 → 窓 → 稜線スペキュラ（間欠で流れる）→ ホイール -->
<ellipse cx="140" cy="124" rx="128" ry="9" fill="rgba(0,0,0,0.45)" />
<path d="M14,98 L14,80 Q16,69 30,65 Q52,58 86,57 L198,57
Q236,58 252,67 Q266,73 266,84 L266,98 Z" fill="url(#carBody)" />
<path d="M82,57 Q98,35 124,32 L176,32 Q200,34 212,57 Z" fill="#15202c" />
<path d="M30,64 Q86,55 150,55 Q214,56 250,65"
stroke="rgba(255,255,255,0.55)" stroke-width="2" fill="none" />
<!-- 背面の輪郭に寒色のリムライト -->
<path d="M212,57 Q236,58 252,67 Q266,73 266,84 L266,96"
stroke="#7aa6cf" stroke-width="1.6" fill="none" opacity="0.7" />
<g clip-path="url(#bodyClip)">
<rect class="car-sheen" x="-40" y="30" width="46" height="40" fill="url(#sheen)" />
</g>
</svg>
<!-- 床への映り込み（上下反転・低opacity・下へフェード） -->
<svg class="car-reflection" viewBox="0 0 280 150" width="280" height="150"> ... </svg>
</div>
<!-- ヘッドライト点灯（周期7sでゆっくり明滅） -->
<div class="headlight"></div>
</div>
</div>css
.car-stage {
position: relative;
height: 180px;
border-radius: 8px;
overflow: hidden;
/* 上からのスポット光が当たる暗いショールーム */
background: radial-gradient(ellipse at 50% 30%, #2a3038 0%, #15191e 70%, #0a0c0f 100%);
}
.car-scene { position: absolute; left: 50%; bottom: 2px; margin-left: -140px; }
/* 登場：ふわっと（opacity 0→1 + translateX -12px→0、ease-out、1回のみ） */
.car-shift { animation: carEnter 1.2s ease-out both; }
@keyframes carEnter {
0% { transform: translateX(-12px); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
/* 稜線スペキュラ：8s = 流れ約3s + 静止5s。「磨かれた塗装に時々光が走る」 */
.car-sheen {
transform-box: fill-box;
mix-blend-mode: screen;
filter: blur(3px);
opacity: 0;
animation: sheenFlow 8s ease-in-out infinite;
}
@keyframes sheenFlow {
0% { transform: translateX(0) rotate(8deg); opacity: 0; }
6% { opacity: 0.9; }
38% { transform: translateX(300px) rotate(8deg); opacity: 0; }
100% { transform: translateX(300px) rotate(8deg); opacity: 0; }
}
/* 床の映り込み：上下反転・低opacity・下へフェード */
.car-reflection {
position: absolute; left: 0; top: 116px;
transform: scaleY(-1);
opacity: 0.18;
mask-image: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 65%);
}
/* ヘッドライト点灯（暗→明をゆっくり明滅） */
.headlight {
position: absolute; left: 18px; bottom: 70px;
width: 26px; height: 18px;
border-radius: 9999px;
background: radial-gradient(ellipse, rgba(255,247,214,0.95) 0%, rgba(255,214,120,0) 70%);
animation: headPulse 7s ease-in-out infinite;
}
/* ライトから前方への薄い光芒 */
.headbeam {
position: absolute; left: 0; bottom: 56px;
width: 110px; height: 70px;
background: linear-gradient(to left, rgba(255,240,200,0.22), rgba(255,240,200,0));
clip-path: polygon(100% 42%, 100% 58%, 0 100%, 0 0);
animation: headPulse 7s ease-in-out infinite;
}
@keyframes headPulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.car-shift, .car-sheen, .headlight, .headbeam { animation: none; }
.car-shift { opacity: 1; transform: none; }
}🎨 走行性能の訴求
🛣 スペック・走行性能セクション
📝 表現の語彙
日本語: 疾走、流れる背景、スピード、走行感
英語: driving dynamics, motion, speed, road rush
抽象キーワード: performance, momentum, thrill
💬 AIへの指示テンプレ
「車の走行性能を見せる演出を作ってください。重要: 車は中央に固定し、背景・路面を動かして走行を表現します（被写体固定・世界が動く）。遠景はゆっくり、路面のセンターライン白破線は高速（等速）で流し、速度の階層をつけてください。車輪を高速回転させ、車体を路面の凹凸でわずかに上下動、後方にスピードのトレイル（半透明流線）を流します。」
🎯 似合うシーン
車LPの性能・スペックセクション・スポーツカー・走行性能訴求
🔧 実装手法
被写体固定×背景多層流れ（遠景23s/中景7s/路面0.45s）+ 車輪回転（linear）・車体上下動 + スピードトレイル
📄 コード例を見る
tsx
// 背景・路面を動かし、車は中央に固定（被写体固定・世界が動く）。
// 速度の階層: 遠景ゆっくり / 中景 / 路面の白破線は高速（等速＝linear可）。
<div className="drive-stage">
<div className="far-layer" /> {/* 遠景: 横流れ 23s */}
<div className="mid-layer" /> {/* 中景: 横流れ 7s */}
<div className="road" />
<div className="road-dash" /> {/* 路面のセンターライン白破線（高速・等速） */}
{/* 後方へ流れるスピードのトレイル */}
<div className="trail t1" />
<div className="trail t2" />
<div className="trail t3" />
<div className="drive-car"> {/* 車体はわずかに上下動（路面の凹凸） */}
<svg viewBox="0 0 240 120" width={240} height={120}>
{/* 車体（簡易）＋ 高速回転するホイール2個 */}
<g className="wheel-spin wsf">{/* spokes */}</g>
<g className="wheel-spin wsr">{/* spokes */}</g>
</svg>
</div>
{windLines.map(...)} {/* 車体を擦過して後方へ流れる風のライン */}
</div>css
.drive-stage {
position: relative;
height: 180px;
border-radius: 8px;
overflow: hidden;
/* 夕方のハイウェイ */
background: linear-gradient(180deg, #1a2438 0%, #2d3e54 55%, #3a4a38 100%);
}
/* 遠景は遅く（パララックスで奥行き） */
.far-layer {
position: absolute; left: 0; bottom: 56px;
width: 200%; height: 50px;
background-repeat: repeat-x;
animation: scrollX 23s linear infinite;
}
.mid-layer {
position: absolute; left: 0; bottom: 48px;
width: 200%; height: 60px;
animation: scrollX 7s linear infinite;
}
@keyframes scrollX {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* 路面のセンターライン白破線：高速で流れる（等速＝linearが物理的に正しい） */
.road { position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
background: linear-gradient(180deg, #2a2a30 0%, #16161a 100%); }
.road-dash {
position: absolute; left: 0; right: 0; bottom: 24px; height: 6px;
background: repeating-linear-gradient(90deg,
rgba(255,240,210,0.85) 0 36px, rgba(255,240,210,0) 36px 96px);
filter: blur(0.5px);
animation: dashRun 0.45s linear infinite;
}
@keyframes dashRun {
0% { background-position-x: 0; }
100% { background-position-x: -96px; }
}
/* 車は固定。路面の凹凸でわずかに上下動 */
.drive-car { position: absolute; left: 50%; bottom: 30px; margin-left: -120px;
animation: carBob 0.9s ease-in-out infinite; }
@keyframes carBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-1.5px); }
}
/* ホイール回転（等速＝linear。物理的に正しい例外） */
.wheel-spin { transform-box: fill-box; transform-origin: 50% 50%;
animation: wheelSpin 0.4s linear infinite; }
@keyframes wheelSpin { to { transform: rotate(360deg); } }
/* 後方へ流れるスピードのトレイル（半透明流線、後方へフェード） */
.trail {
position: absolute; height: 3px; border-radius: 9999px;
background: linear-gradient(to left, rgba(255,255,255,0.35), rgba(255,255,255,0));
animation: trailRun 0.6s linear infinite;
}
.t1 { bottom: 64px; width: 120px; animation-duration: 0.5s; }
.t2 { bottom: 78px; width: 90px; animation-duration: 0.7s; }
.t3 { bottom: 54px; width: 70px; animation-duration: 0.4s; }
@keyframes trailRun {
0% { left: 60%; opacity: 0; }
20% { opacity: 0.8; }
100% { left: -30%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.far-layer, .mid-layer, .road-dash, .drive-car, .wheel-spin, .trail { animation: none; }
}🎨 ディテール訴求
🔍 素材・塗装・内装の質感セクション
📝 表現の語彙
日本語: 塗装の質感、メタリック、ヘアライン、クローズアップ
英語: paint texture, metallic finish, surface detail, close-up
抽象キーワード: craftsmanship, quality, refinement
💬 AIへの指示テンプレ
「車のメタリック塗装をクローズアップした質感演出を作ってください。重要: メタリック塗装の層構造を再現します — 深い色の円筒面（多段グラデで中央が明るい）、その上に微細な明るい粒子を50個以上散らし（数個だけ明滅）、さらに斜めの環境光ハイライトをmix-blend-mode: screenでゆっくり流してください（クリアコートの映り込み）。パネルの合わせ目を1本入れると実車感が出ます。」
🎯 似合うシーン
車LPの素材・塗装・内装クローズアップ・高級車のクラフトマンシップ訴求・カラーバリエーション紹介
🔧 実装手法
円筒面の多段グラデ + メタリック粒子の散布と部分明滅 + screen合成の環境光ハイライト + パネルライン
📄 コード例を見る
tsx
// メタリック塗装の層構造: ベース円筒面 + 粒子 + クリアコートの映り込み。
const grains = Array.from({ length: 60 }, (_, i) => {
const j1 = ((i * 7919) % 100) / 100;
const j2 = ((i * 104729) % 100) / 100;
return {
left: ((i * 37) % 100), // % 等間隔を避ける
top: ((i * 53) % 100),
size: +(0.8 + j1 * 1.6).toFixed(2),
opacity: +(0.1 + j2 * 0.3).toFixed(2),
flick: i % 9 === 0, // ごく一部だけ明滅
dur: +(3.7 + j1 * 4).toFixed(1), // 3.7〜7.7s
delay: +(-(j2 * 6)).toFixed(1),
};
});
<div className="paint-stage"> {/* 背景全体が緩やかな円筒面（中央が明るい） */}
{grains.map((g) => <div className="grain ..." />)} {/* メタリック粒子 */}
<div className="showroom-line sl1" /> {/* 照明の映り込み */}
<div className="showroom-line sl2" />
<div className="panel-seam" /> {/* パネルの合わせ目 */}
<div className="clearcoat" /> {/* 斜めの環境光（screen合成・ゆっくり横切る） */}
</div>css
.paint-stage {
position: relative;
height: 180px;
border-radius: 8px;
overflow: hidden;
/* 深い色の円筒面：斜め多段グラデで中央が明るい（面がこちらを向く） */
background: linear-gradient(115deg,
#1f3a5c 0%, #2d5080 30%, #3a6499 50%, #2d5080 70%, #1f3a5c 100%);
}
/* メタリック粒子（微細な明るい点）。一部だけ光の角度変化で明滅 */
.grain { position: absolute; border-radius: 9999px;
background: #dcefff; }
.grain-flick { animation: grainFlick 5s ease-in-out infinite; }
@keyframes grainFlick {
0%, 100% { opacity: 0.15; }
50% { opacity: 0.9; }
}
/* ショールーム照明の映り込み（横長の明部、わずかに湾曲） */
.showroom-line { position: absolute; left: -5%; width: 110%; height: 10px;
border-radius: 9999px; background: rgba(255,255,255,0.18); filter: blur(4px); }
.sl1 { top: 34px; transform: rotate(-2deg); }
.sl2 { top: 122px; height: 7px; opacity: 0.6; transform: rotate(1.5deg); }
/* パネルの合わせ目（細い暗線＋縁のハイライト）で実車感 */
.panel-seam { position: absolute; top: -10%; left: 64%; width: 2px; height: 120%;
background: #0f2038; transform: rotate(12deg);
box-shadow: 1.5px 0 0 rgba(255,255,255,0.18); }
/* クリアコートの映り込み：斜めの明るい帯がゆっくり横切る（screen合成） */
.clearcoat {
position: absolute; top: -20%; left: -30%;
width: 60px; height: 140%;
background: linear-gradient(to right,
rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
filter: blur(6px);
mix-blend-mode: screen;
transform: rotate(14deg);
animation: coatSweep 9s ease-in-out infinite;
}
@keyframes coatSweep {
0% { left: -30%; }
60% { left: 110%; }
100% { left: 110%; }
}
@media (prefers-reduced-motion: reduce) {
.grain-flick, .clearcoat { animation: none; }
}🎨 環境・先進性の訴求
⚡ EV・先進技術・環境性能セクション
📝 表現の語彙
日本語: EV、クリーン、先進性、エネルギーの流れ
英語: EV, clean energy, innovation, energy flow
抽象キーワード: future, purity, technology
💬 AIへの指示テンプレ
「EVの先進性・クリーンさを見せる演出を作ってください。背景は白〜淡青のクリーンな空間に薄いグリッド。車はアウトライン（線画）で描き、その輪郭と内部グリッドに沿って発光するエネルギーの流れを走らせてください。重要: 流れは先端が明るく後方へ尾を引いて減衰（stroke-dasharray+dashoffset）、複数本を別経路・別周期で。バッテリー位置に同心円のパルスを置き、クリーンエネルギーの光粒をゆっくり上昇させます。」
🎯 似合うシーン
EVブランド・モビリティスタートアップ・車LPの環境性能/先進技術セクション・自動運転訴求
🔧 実装手法
線画の車 + 輪郭を巡る発光ラインの走り&減衰（dashoffset、bright+dimでtail生成、5s/7s/11s）+ パルス光点 + 浮遊光粒
📄 コード例を見る
tsx
// 車はアウトライン（線画）。輪郭・内部グリッドを発光ラインが「走って減衰」。
// 先端が明るく後方へ尾を引く = bright(短)+dim(長)を同速で動かしtailを作る。
<div className="ev-stage">
<div className="ev-grid" /> {/* 薄いテックグリッド（静止） */}
<svg viewBox="0 0 260 120" width={260} height={120}>
{/* 線画の車（塗りは半透明の淡青） */}
<path className="ev-fill" d="..." />
<path className="ev-stroke" d="..." />
{/* 発光ライン：pathLength=100で正規化、dashoffsetで走らせる */}
<path className="run dim r-out" pathLength={100} d={outlineD} />
<path className="run bright r-out" pathLength={100} d={outlineD} />
{/* 内部グリッドも別経路・別周期（5s / 11s）で */}
</svg>
{/* バッテリー位置に同心円のパルス */}
<div className="ev-pulse p1" /><div className="ev-pulse p2" /><div className="ev-pulse p3" />
{motes.map(...)} {/* クリーンエネルギーの光粒がゆっくり上昇 */}
</div>css
.ev-stage {
position: relative;
height: 180px;
border-radius: 8px;
overflow: hidden;
/* 白〜淡青のクリーンな空気感 */
background: linear-gradient(160deg, #eaf4fb 0%, #d4e8f5 50%, #c0ddf0 100%);
}
.ev-grid { position: absolute; inset: 0; opacity: 0.15;
background-image:
linear-gradient(#a0c4e0 1px, transparent 1px),
linear-gradient(90deg, #a0c4e0 1px, transparent 1px);
background-size: 22px 22px; }
/* 発光ライン共通。glowは drop-shadow で外側に薄く同色 */
.run { fill: none; stroke-linecap: round; }
.bright { stroke: #aef0ff; stroke-width: 2.4;
filter: drop-shadow(0 0 4px #5ad0f0); }
.dim { stroke: #3ba0e0; stroke-width: 4; opacity: 0.5;
filter: drop-shadow(0 0 6px #3ba0e0); }
/* bright(8 92)とdim(32 68/+24)を同速で動かし、後方に尾を引かせる */
.bright { stroke-dasharray: 8 92; }
.dim { stroke-dasharray: 32 68; }
.r-out.bright { animation: runBright 7s ease-in-out infinite; }
.r-out.dim { animation: runDim 7s ease-in-out infinite; }
.r-g1.bright { animation: runBright 5s ease-in-out infinite; }
.r-g1.dim { animation: runDim 5s ease-in-out infinite; }
.r-g2.bright { animation: runBright 11s ease-in-out infinite; }
.r-g2.dim { animation: runDim 11s ease-in-out infinite; }
@keyframes runBright { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } }
@keyframes runDim { 0% { stroke-dashoffset: 124; } 100% { stroke-dashoffset: 24; } }
/* バッテリー位置のパルス（中心から同心円が広がって消える） */
.ev-pulse { position: absolute; left: 50%; top: 96px;
width: 14px; height: 14px; margin: -7px 0 0 -7px;
border-radius: 9999px; border: 2px solid rgba(58,160,224,0.7);
animation: evPulse 2.3s ease-out infinite; }
.p2 { animation-delay: -0.8s; }
.p3 { animation-delay: -1.5s; }
@keyframes evPulse {
0% { transform: scale(0.4); opacity: 0.9; }
100% { transform: scale(3.4); opacity: 0; }
}
/* クリーンエネルギーの光粒がゆっくり上昇 */
.ev-mote { position: absolute; border-radius: 9999px;
background: radial-gradient(circle, rgba(90,208,240,0.9) 0%, rgba(90,208,240,0) 70%);
opacity: 0; animation: moteFloat 7s ease-in-out infinite; }
@keyframes moteFloat {
0% { transform: translateY(8px); opacity: 0; }
20% { opacity: 0.8; }
100% { transform: translateY(-46px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.run, .ev-pulse, .ev-mote { animation: none; }
}疾走感の表現バリエーション（左右に動く・流れる風景・スピードライン・タイヤ回転）は「疾走感」タグでまとめて確認できます。
よくある質問
車のLPで一番こだわるべきセクションは？
ファーストビュー（ヒーロー）です。車は高関与商材で、第一印象が検討意欲を大きく左右します。塗装の照り・ヘッドライト・登場の動きに最もリソースを割く価値があります。逆に下層セクションは情報の見やすさ優先で、演出は控えめでよいでしょう。
車の画像（写真/3D）がある場合、これらの表現は使う？
使います。写真や3Dモデルを主役に、本ページの表現を「補助光」として重ねるのが効果的です。たとえばヒーロー写真の上にスペキュラの流れ、性能セクションで背景に流れる風景、EVセクションで車の周りに発光ライン、など。表現単体で完結させるより、実画像と組み合わせる方が説得力が高くなります。
走行演出で車を動かさず背景を動かすのはなぜ？
車を画面内で動かすと、すぐ画面外に出てしまい演出が続きません。背景・路面を動かして車を中央固定にすれば、無限に「走り続ける」表現ができます。さらに遠景を遅く・路面を速く流すと、速度の奥行き（パララックス）が生まれて実際の走行感に近づきます。
AIに車のLP演出を頼むコツは？
LPのセクション単位で指示するのが鍵です。「ヒーローは塗装に光が流れる登場、性能セクションは背景が流れる疾走感、EVセクションは発光ラインで先進性」のように、場面と表現をセットにします。本ページは4カードがそのままLP構成順なので、各カードのAIプロンプトを順に使えばLP全体が組めます。
Zenn