5 Minute Relief Patch｜Tuning Element

1. 01

   ヘッダー

   左にTUNING ELEMENTのロゴと「日本公式ブランドサイト」、右に7項目の英字ナビとメニューボタン。

2. 02

   ヒーロー

   クリーム色のぼかし背景と大きな角丸の枠に、パッチを貼った手の写真。「からだと日常に、ぴたっと、よりそう。」を字間広めに置き、下部に水色・ミント・黄色のカプセルを横一列に並べる。右下に「Buy Now!!」の購入カード。

3. 03

   イントロ

   円の中に商品パッケージを置き、「薄い。軽い。はがれにくい。」から始まる短い文章。背景にカプセルの列が続く。

4. 04

   Feature 01〜03

   画面を留めたまま特徴を1つずつ見せる。背景に「5 Minute Relief Patch」の英字が大きく流れ、Feature 02は「水濡れOK」「においなし」などの丸いバッジで示す。

5. 05

   ライフスタイル

   カプセル形に抜いた家族・高齢者・料理・サーフィンなどの写真が、中央の商品パッケージを囲む。

6. 06

   Product

   大きな円の中に商品パッケージを置き、商品情報の説明へ切り替える。

7. 07

   Guide・How to use

   基本編・応用編の貼り方ガイドと、01〜04の手順で使い方を説明する。

8. 08

   Q&A・Company・Contact

   よくある質問、会社情報、問い合わせで締める。

• Lenis の慣性スクロールと、画面を留めて中身を切り替えるピン留めセクションが続く（GSAP ScrollTrigger の pin で再現可能）
• 背景の英字「5 Minute Relief Patch」はスクロールに合わせて横に流れる
• ライフスタイルの写真は、ぼかし（filter: blur）から徐々にピントが合う演出と思われる
• 右下に閉じるボタン付きの「Buy Now!!」カードを固定表示し、購入導線を常に残す

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

検出された技術:LenisAdobe Fonts

• 01カプセルは border-radius: 999px の縦長要素に水色・ミント・黄色の縦グラデーションを入れ、高さと位置をずらして並べる
• 02背景は白ではなく #fef8ee のクリームにし、暖色のぼかしたグラデーションを重ねる
• 03コピーは細いゴシックで字間を大きく取り、白い帯の上に1行ずつ置く
• 04購入導線は右下の固定カードに集約し、ストーリーの流れを邪魔しない

1---
2title: "5 Minute Relief Patch｜Tuning Element 再現用デザイン仕様書"
3source: https://solve-net.com/tuningelement/5minutereliefpatch/
4katapick: https://katapick.com/sites/tuning-element-relief-patch
5category: LP
6region: 国内 (JP)
7tags: [スクロール演出, 余白, 角丸, 固定CTA, ロングページ, ライト]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 40
13generator: Katapick
14---
15 
16# 5 Minute Relief Patch｜Tuning Element — 再現用デザイン仕様書
17 
18> パッケージの色タブが、FVでそのまま波打ってる。貼る医療機器「5 Minute Relief Patch」の日本公式ブランドサイトは、パステルのカプセル形とクリーム色のぼかしで、医療機器を日用品の軽さで見せている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22