E-commerceOverseas / FRPicked 2026.09.26

Decathlon Yestalgia

ECのWebデザイン参考 — スポーツ用品・アパレル

出典: decathlonyestalgia.com

Editor's note — 編集部の視点

80年代のノリを、ページ中で全力で浴びられるEC。

DecathlonのカプセルコレクションECサイト「Yestalgia」は、黒いずらし影のメンフィス風モチーフと縦長の太字で、80年代の空気をページの隅々まで行き渡らせる。

LeoMotion & Direction

「PLONGEZ AU COEUR DE…」の大見出しに、傾いた写真がドンと乗って文字を隠す瞬間、鳥肌！ライブで照明が客席をバッと照らすみたいな、ちょっと乱暴な演出がたまらない！

1稲妻や円弧に付けた黒いずらし影を、ボタンにまで適用。装飾とUIが同じ時代の文法で話し出す
2幅を詰めたRoboto Flexの太字を縦長に組む。ポスターのような見出しが、章ごとの見せ場をつくる
3商品一覧は3列の写真と名前・価格・カラーの丸だけ。賑やかな演出の後、買う場面だけは平熱に戻す

Color

Decathlon Yestalgiaの配色

Typography

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

見出し（幅を狭めた太字）・本文・UI

Aa あア

使用: Roboto Flex
代替: Roboto Flex

Roboto Flex を使わない場合の見出し代替

Aa あア

使用: Roboto Condensed
代替: Roboto Condensed

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

本文The quick brown fox — 参考を型にする24px · 1 · 535
ボタンKatapick 型14px · 0.85 · 535

Structure

ページ構成（上から順）

01
固定ヘッダー
中央にDecathlonのロゴ、左に「MENU」、右に言語切替「FR」と「BOUTIQUE」。ボタンはすべて黄緑の地に黒い縁と黒いずらし影を付けている。
02
ヒーロー映像
明るいグレーの背景中央に縦長の映像フレームを置き、周囲に稲妻・円弧・円のモチーフを散らす。スクロールでフレームが横幅いっぱいに広がる。
03
コンセプト見出し
ライラックの方眼背景に「À VOS CÔTÉS」などの縦長の太字見出しを中央に大きく置く。
04
ブランドの歴史
ピンクの背景に「DEPUIS 197…」の見出しと、ヤシの木・夕日・ラジカセを持つ人物のイラスト、「76」のロゴを重ねる。
05
年代への導入
「PLONGEZ AU COEUR DE / LA DÉCENNIE LA PLUS VIBRANTE QUI SOIT」を大きく中央に組み、傾けた写真を重ねて見出しの一部を隠す。
06
コレクション
モデル着用写真とアイテム写真を3〜4列のグリッドで並べ、各商品に名前・価格・カラーの丸を付ける。
07
アーティスト紹介
コラボアーティストを「SALUT, JE SUIS…」の縦長見出しで紹介し、オレンジの円と写真を右に配置する。フルページキャプチャは9000pxで切れており、以降の内容は確認できない（抽出データの見出しはh1のみ）。

Interaction

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

ヒーローの映像フレームが画面幅まで広がる演出は、ピン留めしたセクション内で clip-path や scale をスクロール進捗に連動させる方法で再現できる（GSAP ScrollTrigger の scrub など）
抽出データに WebGL があり、写真やイラストの切り替え・歪みなどにシェーダー表現が使われている可能性がある（静止画からは断定できない）
Lenis による慣性スクロールで、ピン留めの多い長いページでも動きを滑らかにしている
モチーフ類はスクロールに合わせて異なる速度で動くパララックスと思われる。各要素に data 属性で速度を持たせ translateY を個別に計算する

スクロールのコマ撮りLenis · 200–2000ms

Decathlon Yestalgiaをスクロールしたときのフレーム1 — 01

Decathlon Yestalgiaをスクロールしたときのフレーム2 — 02

Decathlon Yestalgiaをスクロールしたときのフレーム3 — 03

Decathlon Yestalgiaをスクロールしたときのフレーム4 — 04

Decathlon Yestalgiaをスクロールしたときのフレーム5 — 05

Decathlon Yestalgiaをスクロールしたときのフレーム6 — 06

検出された技術:LenisSwiperWordPressGoogle FontsWebGL

Reproduce

再現するときのポイント

01見出しは Roboto Flex の wdth 軸を狭めた太字で縦長に組み、大文字だけで画面幅いっぱいに置く
02ボタンやモチーフに黒い縁と右下へのずらし影（box-shadow: 4px 4px 0 #000 など）を付けてレトロなステッカー感を出す
03背景はライラック・ピンク・明るいグレーの3色をセクションごとに切り替え、黄緑とオレンジはモチーフとボタンに限定する
04商品グリッドは装飾を抑え、写真と小さな商品情報だけにして世界観パートと役割を分ける

再現MDに含まれるもの

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

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

decathlon-yestalgia.katapick.md

1---
2title: "Decathlon Yestalgia 再現用デザイン仕様書"
3source: https://decathlonyestalgia.com/
4katapick: https://katapick.com/sites/decathlon-yestalgia
5category: EC
6region: 海外 (FR)
7tags: [レトロ, ビビッド, 大胆なタイポ, スクロール演出, 映像主体, グリッド]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 36
13generator: Katapick
14---
15 
16# Decathlon Yestalgia — 再現用デザイン仕様書
17 
18> 80年代のノリを、ページ中で全力で浴びられるEC。DecathlonのカプセルコレクションECサイト「Yestalgia」は、黒いずらし影のメンフィス風モチーフと縦長の太字で、80年代の空気をページの隅々まで行き渡らせる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22