# Decathlon Yestalgia｜ECのWebデザイン参考

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

- URL: https://decathlonyestalgia.com/
- 解説ページ: https://katapick.com/sites/decathlon-yestalgia
- カテゴリ: EC / 地域: 海外（FR）/ 業種: スポーツ用品・アパレル
- テイスト: レトロ、ビビッド、大胆なタイポ、スクロール演出、映像主体、グリッド
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 36 時間）

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

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

## 配色
- #e9dae6 Lilac Mist（背景）
- #eaa0cd Bubblegum Pink（セクション背景）
- #f4f4f4 Light Gray（ファーストビュー背景）
- #000000 Black（テキスト・ずらし影）
- #d7dd44 Acid Yellow（ボタン・稲妻モチーフ）
- #f3933d Sunset Orange（円・夕日のモチーフ（スクショから採色））

## フォント
- 見出し（幅を狭めた太字）・本文・UI: Roboto Flex（代替: Roboto Flex）
- Roboto Flex を使わない場合の見出し代替: Roboto Condensed（代替: Roboto Condensed）

## よくある質問
### Decathlon Yestalgiaのサイトで使われているフォントは？
抽出データでは Roboto Flex が見出しから本文まで使われています。可変フォントの幅の軸を狭めることで、縦長の太い見出しをつくっていると思われます。Google Fonts で無料で使えます。

### 80年代風のレトロなデザインを作るには？
稲妻や円弧などの幾何学モチーフに、細い線の散らし柄と黒いずらし影を付けるとメンフィス風の雰囲気になります。色はピンク・ライラック・黄緑・オレンジなど明るい色を組み合わせます。

### Decathlon Yestalgiaのデザインはどんな業種の参考になる？
アパレルやスポーツブランドの限定コレクション、周年企画、復刻商品など、世界観と商品一覧を1ページで見せたいキャンペーンECの参考になります。

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