狭い部屋でも圧迫感なし。ホワイト&ベージュ系ソファ特集

2026/06/23

/* ================================================================ CLAS × ソファ特集「狭い部屋でも圧迫感なし。」— 記事ページ LP CSS ▼ 管理画面「商品一覧のCSS」欄に貼り付けてください ※ 差し色チェア CSS が入っている場合は【末尾に追記】してください prefix: .sof- Last build: 2026-06-23 カラーテーマ: アイボリー × ウォームサンド ─ ホワイト・ベージュ系ソファに合わせ、ページ全体を淡く温かみのあるアイボリートーンでまとめる。差し色チェアページ（.sas-）とは別系統。 ================================================================ */ /* ---------------------------------------------------------------- CLAS 既存ページ側要素の強制非表示（差し色チェアページと同様） ---------------------------------------------------------------- */ [class*="ProductIntroduction__section"] picture { display: none !important; } [class*="ProductIntroduction__title"], [class*="ProductIntroduction__button"], [class*="ProductIntroduction__description"], [class*="ProductListPage__stripeBackground"], [class*="SearchCondition"], [class*="CategoryList"], [class*="CategorySection"], [class*="CategoryBanner"], [class*="CategorySelector"], [class*="CategoryNavigation"], [class*="CategoryTree"], [class*="ViewedItem"], [class*="CheckedItem"], [class*="RecentItem"], [class*="WatchedItem"], [class*="BrowsedItem"] { display: none !important; } /* ---------------------------------------------------------------- CLAS グローバル h2/h3 装飾（下線・ボーダー）を LP 内でリセット ---------------------------------------------------------------- */ .sof-root h1, .sof-root h2, .sof-root h3 { border: none !important; border-bottom: none !important; padding-bottom: 0 !important; padding-left: 0 !important; margin-bottom: 0 !important; } .sof-root h1::before, .sof-root h1::after, .sof-root h2::before, .sof-root h2::after, .sof-root h3::before, .sof-root h3::after { display: none !important; content: none !important; } /* ---------------------------------------------------------------- 変数 / ベーステーマ: アイボリー × ウォームサンド ─ ホワイト・ベージュ系ソファが主役。ページの枠組みはごく淡く、ソファそのものの質感と白さを引き立てる設計。 ---------------------------------------------------------------- */ .sof-root { --sof-deep: #1C1815; /* ウォームブラック（見出し・フレーム） */ --sof-mid: #5A4E46; /* ウォームダークグレー */ --sof-accent: #A4917E; /* ウォームサンド（アクセント） */ --sof-light: #F5F1EB; /* アイボリー（セクション背景） */ --sof-pale: #FAF8F5; /* 極淡アイボリー（カード背景） */ --sof-text: #1A1A18; --sof-sub: #4A4540; --sof-muted: #80786E; --sof-border: #E5DDD5; /* ウォームサンドボーダー */ --sof-white: #FFFFFF; --sof-shadow: 0 2px 16px rgba(28,24,21,.07); font-family: futura-pt, arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; color: var(--sof-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.8; font-weight: 400; letter-spacing: calc(1em * 3 / 100); } .sof-root *, .sof-root *::before, .sof-root *::after { box-sizing: border-box; margin: 0; padding: 0; } .sof-root img { max-width: 100%; display: block; } .sof-root a { color: inherit; text-decoration: none; } .sof-root ul { list-style: none; } .sof-root p { margin: 0; } /* ---------------------------------------------------------------- アスペクト比ヘルパー ---------------------------------------------------------------- */ .sof-aspect { position: relative; overflow: hidden; } .sof-aspect img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .sof-aspect--4x5 { aspect-ratio: 4 / 5; } .sof-aspect--4x3 { aspect-ratio: 4 / 3; } .sof-aspect--16x9 { aspect-ratio: 16 / 9; } /* ライフスタイル写真（ピラー・コンセプト）は上端基準 */ .sof-pillar__media img, .sof-concept__visual img { object-position: center top !important; } .sof-img--center { object-position: center center !important; } .sof-img--top { object-position: center 20% !important; } /* ---------------------------------------------------------------- 共通: Eyebrow / H2 / Lead ---------------------------------------------------------------- */ .sof-eyebrow { display: block; font-size: 11px; font-weight: 500; letter-spacing: calc(1em * 28 / 100); text-transform: uppercase; color: var(--sof-accent) !important; margin-bottom: 12px; } .sof-h2 { font-size: clamp(20px, 2.8vw, 28px); font-weight: 200; color: var(--sof-deep) !important; line-height: 1.7; letter-spacing: calc(1em * 10 / 100); margin-bottom: 18px; } .sof-h2--center { text-align: center; } .sof-lead { font-size: 13px; font-weight: 300; line-height: 2.1; color: var(--sof-sub); letter-spacing: calc(1em * 4 / 100); text-align: center !important; max-width: 700px; margin-left: auto; margin-right: auto; } /* ---------------------------------------------------------------- Framing Band ---------------------------------------------------------------- */ .sof-root .sof-framing { background: #1C1815 !important; color: #d8d0c8 !important; text-align: center !important; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; padding: 10px 24px; font-weight: 500; } .sof-root .sof-framing * { color: #d8d0c8 !important; } .sof-root .sof-framing strong { color: #ffffff !important; font-weight: 700; } /* ---------------------------------------------------------------- Hero fallback 色: #D8D2CA（ソファ商品写真の白背景に近い淡グレー） ---------------------------------------------------------------- */ .sof-root .sof-hero { position: relative !important; overflow: hidden !important; background: #D8D2CA; min-height: 520px; padding: 0 !important; margin: 0 !important; } .sof-root .sof-hero .sof-hero__img-pc, .sof-root .sof-hero .sof-hero__img-sp { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; z-index: 0; } .sof-root .sof-hero .sof-hero__img-sp { display: none !important; } @media (max-width: 767px) { .sof-root .sof-hero { min-height: 0; aspect-ratio: 4 / 5; } .sof-root .sof-hero .sof-hero__img-pc { display: none !important; } .sof-root .sof-hero .sof-hero__img-sp { display: block !important; object-position: center center !important; } } /* グラデーション遮幕 */ .sof-root .sof-hero .sof-hero__grad { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 55% !important; z-index: 1 !important; pointer-events: none !important; display: block !important; object-fit: fill !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* テキストオーバーレイ */ .sof-root .sof-hero .sof-hero__overlay { position: absolute !important; left: 0; right: 0; bottom: 6%; z-index: 2; padding: 0 48px; text-align: center; } .sof-root .sof-hero .sof-hero__caption { color: #ffffff !important; font-size: clamp(13px, 1.6vw, 17px); line-height: 1.85; font-weight: 500; letter-spacing: .04em; text-shadow: 0 1px 8px rgba(0,0,0,.6), 0 2px 20px rgba(0,0,0,.4); max-width: 760px; margin: 0 auto; } .sof-root .sof-hero .sof-hero__anchor { display: inline-block; margin-top: 18px; color: rgba(255,255,255,.9) !important; font-size: 12px; letter-spacing: .12em; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 2px; text-decoration: none !important; } @media (max-width: 767px) { .sof-root .sof-hero .sof-hero__overlay { bottom: 10%; padding: 0 20px; } .sof-root .sof-hero .sof-hero__caption { font-size: 13px; } } /* ---------------------------------------------------------------- Intro Section ---------------------------------------------------------------- */ .sof-root .sof-intro-section { padding: 64px 40px; background: var(--sof-white); text-align: center !important; } .sof-root .sof-intro-section .sof-intro-lead { font-size: 15px; line-height: 2.0; color: var(--sof-sub); max-width: 680px; margin: 16px auto 0; text-align: center !important; } @media (max-width: 600px) { .sof-root .sof-intro-section { padding: 48px 20px; } } /* ---------------------------------------------------------------- Quick Thumbs ---------------------------------------------------------------- */ .sof-thumbs { padding: 24px 40px; background: var(--sof-white); display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--sof-border); border-bottom: 1px solid var(--sof-border); } .sof-thumb { display: block; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; border: 2px solid var(--sof-border); flex-shrink: 0; transition: border-color .2s, transform .2s; } .sof-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .sof-thumb:hover { border-color: var(--sof-accent); transform: scale(1.08); } @media (max-width: 600px) { .sof-thumbs { padding: 16px 20px; gap: 8px; } .sof-thumb { width: 48px; height: 48px; } } /* ---------------------------------------------------------------- Concept Section ---------------------------------------------------------------- */ .sof-concept { padding: 88px 40px; background: var(--sof-light); } .sof-concept__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; max-width: 1100px; margin: 0 auto; align-items: center; } .sof-concept__copy p { font-size: 13px; font-weight: 300; line-height: 2.1; letter-spacing: calc(1em * 4 / 100); color: var(--sof-sub); margin-top: 16px; } @media (max-width: 760px) { .sof-concept { padding: 60px 20px; } .sof-concept__grid { grid-template-columns: 1fr; gap: 36px; } .sof-concept__visual { order: -1; } } /* ---------------------------------------------------------------- Pillars（3つのルール） ---------------------------------------------------------------- */ .sof-pillars { background: var(--sof-white); } .sof-pillar { padding: 80px 40px; border-top: 1px solid var(--sof-border); } .sof-pillar__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 1100px; margin: 0 auto; align-items: center; } .sof-pillar--reverse .sof-pillar__grid { direction: rtl; } .sof-pillar--reverse .sof-pillar__text, .sof-pillar--reverse .sof-pillar__media { direction: ltr; } .sof-pillar__num { font-family: futura-pt, arial, "Noto Sans JP", sans-serif; font-size: 72px; font-weight: 200; color: #E2DAD2 !important; line-height: 1; letter-spacing: calc(1em * 4 / 100); display: block; margin-bottom: 12px; } .sof-pillar__eyebrow { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 36 / 100); text-transform: uppercase; color: var(--sof-accent) !important; display: block; margin-bottom: 12px; } .sof-pillar__title { font-size: clamp(18px, 2.2vw, 24px); font-weight: 200; color: var(--sof-deep) !important; line-height: 1.7; letter-spacing: calc(1em * 10 / 100); margin-bottom: 18px; } .sof-pillar__body { font-size: 13px; font-weight: 300; line-height: 2.1; letter-spacing: calc(1em * 4 / 100); color: var(--sof-sub); max-width: 560px; } @media (max-width: 760px) { .sof-pillar { padding: 56px 20px; } .sof-pillar__grid { grid-template-columns: 1fr; gap: 32px; direction: ltr; } .sof-pillar--reverse .sof-pillar__grid { direction: ltr; } } /* ---------------------------------------------------------------- Items Section ---------------------------------------------------------------- */ .sof-root .sof-items-section { padding: 88px 40px; background: var(--sof-light); } .sof-root .sof-items-section .sof-items-head { text-align: center !important; margin-bottom: 52px; } .sof-root .sof-items-section .sof-lead { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } .sof-item-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1060px; margin: 0 auto; } @media (max-width: 860px) { .sof-item-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .sof-item-grid { grid-template-columns: 1fr; max-width: 400px; } .sof-root .sof-items-section { padding: 60px 20px; } } /* Item Card */ .sof-item-card { display: block; background: var(--sof-white); border: 1px solid var(--sof-border); border-radius: 2px; overflow: hidden; text-decoration: none !important; color: inherit; transition: box-shadow .25s, transform .25s; } .sof-item-card:hover { box-shadow: 0 8px 28px rgba(28,24,21,.10); transform: translateY(-3px); } .sof-item-card__media { overflow: hidden; } .sof-item-card .sof-aspect img { object-position: center center !important; } .sof-item-card__body { padding: 18px 20px 22px; } .sof-item-card__num { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 28 / 100); color: var(--sof-accent) !important; display: block; margin-bottom: 6px; } .sof-item-card__brand { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 18 / 100); color: var(--sof-deep) !important; text-transform: uppercase; display: block; margin-bottom: 4px; } .sof-item-card__name { font-size: 13px; font-weight: 300; color: var(--sof-text) !important; line-height: 1.7; letter-spacing: calc(1em * 6 / 100); display: block; margin-bottom: 8px; } /* ---- 月額価格バッジ ---- */ .sof-item-card__price { display: inline-block; font-size: 13px; font-weight: 500; color: var(--sof-deep) !important; letter-spacing: calc(1em * 2 / 100); margin-bottom: 12px; padding: 3px 10px; background: var(--sof-light) !important; border: 1px solid var(--sof-border); border-radius: 2px; } .sof-item-card__features { display: flex; flex-direction: column; gap: 6px; } .sof-item-card__features li { font-size: 11px; font-weight: 300; line-height: 1.8; letter-spacing: calc(1em * 4 / 100); color: var(--sof-sub); padding-left: 14px; position: relative; } .sof-item-card__features li::before { content: '—'; position: absolute; left: 0; color: var(--sof-accent); font-size: 11px; top: 1px; } /* ---------------------------------------------------------------- Related Nav ---------------------------------------------------------------- */ .sof-related { padding: 72px 40px; background: var(--sof-white); } .sof-related__head { text-align: center; margin-bottom: 40px; } .sof-related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1060px; margin: 0 auto; } @media (max-width: 860px) { .sof-related__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .sof-related__grid { grid-template-columns: 1fr; max-width: 400px; } .sof-related { padding: 56px 20px; } } .sof-related__card { display: block; border: 1px solid var(--sof-border); border-radius: 2px; overflow: hidden; text-decoration: none !important; color: inherit; background: var(--sof-white); transition: box-shadow .22s, transform .22s, border-color .22s; } .sof-related__card:hover { box-shadow: var(--sof-shadow); transform: translateY(-3px); border-color: var(--sof-accent); } .sof-related__card-img { overflow: hidden; background: var(--sof-light); } .sof-related__card-img img { transition: transform .35s; } .sof-related__card:hover .sof-related__card-img img { transform: scale(1.04); } .sof-related__card-content { padding: 16px 18px 18px; } .sof-related__card-tag { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 28 / 100); text-transform: uppercase; color: var(--sof-accent) !important; display: block; margin-bottom: 8px; } .sof-related__card-title { font-size: 13px; font-weight: 300; color: var(--sof-deep) !important; line-height: 1.7; letter-spacing: calc(1em * 6 / 100); margin-bottom: 6px; } .sof-related__card-desc { font-size: 11px; font-weight: 300; line-height: 1.9; letter-spacing: calc(1em * 4 / 100); color: var(--sof-sub); margin-bottom: 12px; } .sof-related__card-arrow { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 20 / 100); color: var(--sof-accent) !important; } /* ---------------------------------------------------------------- Core Message — ウォームブラック背景 ---------------------------------------------------------------- */ .sof-root .sof-core-msg-section { padding: 88px 40px; background: #1C1815 !important; } .sof-root .sof-core-msg-section .sof-core-msg { max-width: 760px; margin: 0 auto; text-align: center !important; } .sof-root .sof-core-msg-section .sof-core-msg * { color: #d8d0c8 !important; } .sof-root .sof-core-msg-section .sof-core-msg .sof-core-msg__eyebrow { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 32 / 100); text-transform: uppercase; color: rgba(216,208,200,.5) !important; display: block; margin-bottom: 16px; } .sof-root .sof-core-msg-section .sof-core-msg .sof-core-msg__head { font-size: clamp(18px, 2.5vw, 26px); font-weight: 200; color: #F5F0EB !important; margin-bottom: 20px; line-height: 2.0; letter-spacing: calc(1em * 14 / 100); } .sof-root .sof-core-msg-section .sof-core-msg .sof-core-msg__body { font-size: 12px; font-weight: 300; line-height: 2.1; letter-spacing: calc(1em * 4 / 100); color: #d8d0c8 !important; max-width: 620px; margin: 0 auto; } @media (max-width: 600px) { .sof-root .sof-core-msg-section { padding: 64px 20px; } } /* ---------------------------------------------------------------- 記事ページデフォルトタイトル・日付非表示（CMS が自動挿入する <section> タイトルと <p class="datetime"> を隠す） ---------------------------------------------------------------- */ .article_detail > section:first-child { display: none !important; } p.datetime { display: none !important; }

CLAS-curated × ソファ特集 / 狭い部屋でも圧迫感なし

「白」と「低さ」で、部屋は広くなる。インテリアのプロが厳選した、圧迫感ゼロのソファ 10選。

圧迫感ゼロのソファ 10選を見る ↓

Curated by CLAS

「置いても狭くならない」ソファを、月額で。
ホワイト・ベージュ系 × 低座設計 10選

ソファを置いたら部屋が狭くなった——そんな失敗、実は「色」と「高さ」の選び方で防げます。膨張色のホワイト・アイボリー・ベージュ系は壁に馴染んで圧迫感ゼロ。さらにローバックや低座設計なら、天井が高く感じられ開放感もアップ。CLASが厳選した10点、まずは月額で自分の部屋に迎えてみませんか。

Concept

「白」と「低さ」で、
広さをつくる。

ソファを選ぶとき、何を基準にしますか。サイズ、座り心地、デザイン——でもじつは、「色」と「高さ」こそが部屋の広さ印象を大きく左右します。

膨張色であるホワイト・アイボリー・ベージュ系は壁の色と一体化し、視覚的な圧迫感をゼロに近づけます。そこにローバックや低座設計を組み合わせると、天井が高く感じられ、部屋全体に開放感が生まれます。CLASなら月額で迎えて、自分の部屋で実際に試してから決められます。

01 Expand with Color

膨張色で壁と馴染ませる。
一体感が部屋を広く見せる

ホワイトやアイボリー系は「膨張色」と呼ばれ、壁の色と一体化してお部屋を広く見せてくれます。ソファが壁に溶け込むことで、同じ面積でも視覚的な圧迫感がぐっと下がります。「白は汚れが心配」と感じる方も、CLASのサブスクなら気軽にトライできます。

02 Low Profile Design

「低さ」を味方につける。
天井が高く感じられる

背もたれの低いローバックタイプやフロアソファなら、家具と天井の間に余白が生まれ、天井が高く感じられて開放感アップ。今回ご紹介するソファはすべて低座設計ラインナップ。座ったときも視線が低くなり、部屋全体がより広々と見えます。

03 Legs & Floor Space

「脚付き」で床を見せる。
同じサイズでも軽やかに

脚があるデザインなら床面積が見えるため、同じサイズのソファでも軽やかな印象に。フロアが見えることでスペースが視覚的に広がり、掃除もしやすくなります。さらに後から購入も可能なので、試してみてから判断できます◎

Curated Looks

狭い部屋でも圧迫感なし。
ホワイト・ベージュ系 × 低座設計 10選

CLASが厳選した、「置いても広く見える」ソファ10点。ホワイト・アイボリー・ベージュ系カラー × 低座設計のアイテムをそろえました。

NO.1 MIYATAKE ブークレソファ Albi（アルビー）3P ¥7,150/月〜

ループ状のブークレ生地が温かみと高級感を同時に実現。白壁に溶け込むアイボリートーン
ゆったりした3人掛けでも圧迫感を感じさせないローシルエット

NO.2 MIYATAKE ブークレソファ Albi（アルビー）オットマン ¥3,520/月〜

縦ステッチのテクスチャーがシンプルでスタイリッシュ。ソファ+オットマンで統一感のあるコーディネートに
オットマンを組み合わせればゆったりくつろぎスタイルに。2Way使いで空間に馴染む

NO.3 azumaya ボリュームローバックソファ 2P ¥3,190/月〜

フロアタイプで天井との距離が生まれ、狭い部屋でも開放的な印象に
コンパクトな横幅でワンルームにも自然に馴染む。圧迫感ゼロの低座設計

NO.4 azumaya ワンルームフロアソファ 1P ¥6,600/月〜

有機的な曲線フォルムが「曲線がおしゃれすぎ」と話題。置くだけで絵になる存在感
2人掛けでも軽やかなシルエット。ニュートラルな空間のアクセントに

NO.5 MIYATAKE リビングソファ Meissa（メイサ） 2P ¥4,400/月〜

背もたれを倒せばベッドにもなる多機能仕様。3人掛けのゆとりと実用性を両立
スッキリした横顔で、大型でも圧迫感を感じさせない低座設計

NO.6 azumaya ビーンソファ 2P ¥6,050/月〜

チェアとシェーズロングが一体化した、くつろぎ専用フォルム。みんな大好きモフモフ素材
nora.ブランドの人気シリーズ。寝落ちしたくなるふわふわ感で、帰宅後の時間を豊かに

NO.7 nora. nora. プラリネソファ 1人掛け ¥3,850/月〜

シャープな縦リブテクスチャーが空間に品格を添える。低座設計だから圧迫感ゼロ
3Pもあるよ！すっきりした輪郭でダイニングリビング兼用にも対応

NO.8 nora. nora. プラリネソファシェーズ ¥1,650/月〜

AlbiシリーズのオットマンをNO.1と合わせると、統一感のある上質なリビングが完成
単体でもスツールやサイドテーブル代わりに。サイズ違いの組み合わせも◎

NO.9 azumaya ステッチソファ＆オットマン ¥8,250/月〜

アイランドソファとしても使えるほどの存在感。それでも背が低いから圧迫感ゼロ
大きめのクッションとどっしりした座面で、リラックス感は10選中最大級

NO.10 MIYATAKE 3Pソファベッド Atria（アトリア） ¥2,970/月〜

3P・オットマンとサイズ違いで組み合わせても◎ Albiシリーズでリビングを統一
一人掛けなら配置の自由度も高く、模様替えや間取り変更にも対応しやすい

CLAS Core Message

ソファは、試してから決めていい。

大きな家具だからこそ、失敗したくない。でも、実際に置いてみないと部屋に合うかどうか分からない——そのジレンマを解決するのがCLASです。月額で迎えて、自分の部屋で試して、気に入ったらそのまま。「もう少し大きいほうがよかった」「やっぱりベージュより白が好き」そんな発見も、CLASなら次のステップにつなげられます。試してよければ、あとから購入も可能です◎

ブークレソファ Albi（アルビー） 3P ホワイト汚損補償無し配送0円プラン

狭い部屋でも圧迫感なし。ホワイト&ベージュ系ソファ特集

「置いても狭くならない」ソファを、月額で。ホワイト・ベージュ系 × 低座設計 10選

「白」と「低さ」で、広さをつくる。

膨張色で壁と馴染ませる。一体感が部屋を広く見せる

「低さ」を味方につける。天井が高く感じられる

「脚付き」で床を見せる。同じサイズでも軽やかに

狭い部屋でも圧迫感なし。ホワイト・ベージュ系 × 低座設計 10選

もっと暮らしを探す