YURUMARU（ゆるまる）

1. 01

   お知らせ帯・ヘッダー

   最上部にベージュのお知らせ帯、その下に中央寄せのテキストナビ（HOME / PRODUCT / BRAND STORY / REVIEW / FAQ / CART）。SPでは MENU と CART に集約。

2. 02

   ヒーロー

   クッションに体を預ける人物の写真に、画面幅いっぱいのロゴ「YURUMARU」、和文コピー、英文、「商品を詳しくみる」ボタン。下端にカラー別のクッションが並ぶ。

3. 03

   カラーラインナップ

   MOSS GREEN / SAND BEIGE / COOL GRAY などのクッション画像に、色名と価格を添えて横に並べる。

4. 04

   BRAND STORY

   字間を大きく開けた「NEW PLACE TO RELAX」の英字と、縦に散らした角丸の写真、和文のブランドストーリー。

5. 05

   PRODUCT

   「この上ないもっちり感で…あたらしいクッションソファ」の見出しのあと、01〜03の大きな細い数字と縦書きのコピーで特徴を1つずつ解説する。

6. 06

   ご利用の流れ

   ご注文 → 圧縮配送 → 自宅でもっちり の3ステップを、アーチ形のカードと矢印の線でつなぐ。

7. 07

   COLOR

   大きな角丸で切り抜いた部屋の写真の上に、色ごとのカードを横に並べ、ドットで色を切り替える。

8. 08

   OWNER'S VOICE・動画・フッター

   購入者の声、動画、ブランドストーリーの一文とフッターで締める。

• Lenis による慣性スクロール。散らした角丸写真が異なる速さで動くパララックスと思われる。data 属性で速度を持たせ、スクロール量に掛けて translateY すると再現可能
• PRODUCT の見出しが字形の途中の状態で写っており、文字が1文字ずつ形を変えながら現れるアニメーションと思われる。SVGマスクや clip-path のアニメーションで近づけられる
• COLOR はドットで色を選ぶカルーセル。中央のカードを大きく見せる設定のスライダーで再現可能
• 右下に「サポート」の丸いボタンを固定表示し、どこからでも問い合わせられる

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

検出された技術:LenisShopifyGoogle Fonts

• 01画像は border-radius を大きめに取るか、SVG の clip-path でふくらんだ角丸にして、角を見せない
• 02背景は純白ではなく #d0ccc9 のようなグレージュにし、写真上の文字も真っ白ではなく #e9e6e4 程度に抑える
• 03英字は Ysabeau SC の大文字を字間広めに、和文はこぶりなゴシック系の細いウェイトでやわらかく組む
• 04特徴の解説は大きな細い数字＋縦書き（writing-mode: vertical-rl）にして、ECでも読み物のテンポにする

1---
2title: "YURUMARU（ゆるまる） 再現用デザイン仕様書"
3source: https://yurumaru.life/
4katapick: https://katapick.com/sites/yurumaru
5category: EC
6region: 国内 (JP)
7tags: [くすみカラー, 写真主体, 角丸, 縦書き, 余白]
8launched: 2025-12
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 28
13generator: Katapick
14---
15 
16# YURUMARU（ゆるまる） — 再現用デザイン仕様書
17 
18> ロゴのRから写真の角まで、ぜんぶ丸い。クッションソファのD2CブランドYURUMARUの公式ストアは、字形・写真の切り抜き・ボタンから角を消し、触れない画面越しに“もっちり”した座り心地を想像させる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22