# YURUMARU（ゆるまる）｜ECのWebデザイン参考

> ロゴのRから写真の角まで、ぜんぶ丸い。クッションソファのD2CブランドYURUMARUの公式ストアは、字形・写真の切り抜き・ボタンから角を消し、触れない画面越しに“もっちり”した座り心地を想像させる。

- URL: https://yurumaru.life/
- 解説ページ: https://katapick.com/sites/yurumaru
- カテゴリ: EC / 地域: 国内（JP）/ 業種: クッションソファのD2Cブランド
- テイスト: くすみカラー、写真主体、角丸、縦書き、余白
- 公開・リニューアル: 2025-12 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 28 時間）

## 編集部のひとこと（Iris）
色の名前がMOSS GREENにSAND BEIGE、TERRACOTTAって、ぜんぶ土や植物の色なのがすき。背景のグレージュも含めて、ぬるめのカフェオレみたいな温度で揃ってて、つい手を伸ばしたくなる感じ。

## デザインの見どころ
- 写真は四角でも円でもない、ふくらんだ角丸で切り抜く。クッションの形がそのままUIの輪郭になる
- 特徴の解説は細く大きな数字と縦書きのコピー。ECなのに、読み物のようにゆっくり進ませる
- カラー選びは部屋の写真の上に色別カードを重ねる。色を選ぶ前に、置いた姿を想像させる

## 配色
- #d0ccc9 Oat Mist（背景）
- #2f2b28 Cocoa Ink（テキスト / 暗いセクション）
- #8b4e30 Terracotta（アクセント / サポートボタン）
- #74745a Moss Green（カラーバリエーション）
- #bfa784 Sand Beige（お知らせ帯 / カラーバリエーション）
- #e9e6e4 Linen White（写真上の文字 / 見出し）

## フォント
- 英字見出し・ナビ: Ysabeau SC（代替: Ysabeau SC）
- 和文見出し・本文: MFW-KoburinaGoStdN（こぶりなゴシック W1 / W3 / W6）（代替: Zen Kaku Gothic New）
- 英文の補足コピー: Ysabeau Infant（代替: Ysabeau Infant）

## よくある質問
### YURUMARUのサイトで使われているフォントは？
英字に Ysabeau SC と Ysabeau Infant（どちらも Google Fonts）、和文にモリサワのこぶりなゴシックが使われています。和文を無料で置き換えるなら Zen Kaku Gothic New が近い雰囲気です。

### YURUMARUのような丸い写真の切り抜きはどう作る？
大きめの border-radius を縦横別の値で指定する（例: 40% 45% 42% 48%）と、正円ではないふくらんだ形になります。より自由な形は SVG の clipPath を画像に適用します。

### どんな業種の参考になる？
家具・寝具・インテリア雑貨など、手触りや座り心地を画面越しに伝えたいD2CブランドのECやブランドサイトの参考になります。

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