置くだけで、垢抜ける！差し色チェアの正解

2026/06/08

/* ================================================================ CLAS × 差し色チェア — Tag Page LP CSS ▼ 管理画面「商品一覧のCSS」欄に貼り付けてください prefix: .sas- Last build: 2026-06-08 カラーテーマ: ウォームニュートラル（シャコール×トープ）ヒーロー画像のライトグレー背景×多色チェアに合わせ、ページのクロム要素は落ち着いた中性色でまとめ、商品カラーを主役に引き立てる設計。 ================================================================ */ /* ---------------------------------------------------------------- CLAS 既存ページ側要素の強制非表示 CSS Modules がクラス名をプレフィックス書換するため属性セレクタ [class*="..."] で回避。 ---------------------------------------------------------------- */ [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 内でリセット ---------------------------------------------------------------- */ .sas-root h1, .sas-root h2, .sas-root h3 { border: none !important; border-bottom: none !important; padding-bottom: 0 !important; padding-left: 0 !important; margin-bottom: 0 !important; } .sas-root h1::before, .sas-root h1::after, .sas-root h2::before, .sas-root h2::after, .sas-root h3::before, .sas-root h3::after { display: none !important; content: none !important; } /* ---------------------------------------------------------------- 変数 / ベーステーマ: ウォームニュートラル ─ ヒーロー画像（ライトグレー背景 × 多色チェア）に合わせ、ページのクロム色を抑え、商品の色彩を主役にする ---------------------------------------------------------------- */ .sas-root { --sas-deep: #1C1816; /* ウォームブラック（フレーム・見出し） */ --sas-mid: #574640; /* ウォームダークグレー */ --sas-accent: #8A7060; /* ウォームトープ（アクセント） */ --sas-light: #F4F0EC; /* ウォームライトグレー（セクション背景） */ --sas-pale: #F9F7F5; /* 極淡ウォームホワイト（カード背景） */ --sas-text: #1A1A1A; --sas-sub: #4A4A4A; --sas-muted: #767676; --sas-border: #E2D9D2; /* ウォームベージュボーダー */ --sas-white: #FFFFFF; --sas-shadow: 0 2px 16px rgba(28,24,22,.08); font-family: futura-pt, arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; color: var(--sas-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.8; font-weight: 400; letter-spacing: calc(1em * 3 / 100); } .sas-root *, .sas-root *::before, .sas-root *::after { box-sizing: border-box; margin: 0; padding: 0; } .sas-root img { max-width: 100%; display: block; } .sas-root a { color: inherit; text-decoration: none; } .sas-root ul { list-style: none; } .sas-root p { margin: 0; } /* ---------------------------------------------------------------- アスペクト比ヘルパー ---------------------------------------------------------------- */ .sas-aspect { position: relative; overflow: hidden; } .sas-aspect img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .sas-aspect--4x5 { aspect-ratio: 4 / 5; } .sas-aspect--4x3 { aspect-ratio: 4 / 3; } .sas-aspect--16x9 { aspect-ratio: 16 / 9; } /* ライフスタイル写真（ピラー・コンセプト）は上端基準 */ .sas-pillar__media img, .sas-concept__visual img { object-position: center top !important; } .sas-img--center { object-position: center center !important; } .sas-img--top { object-position: center 20% !important; } /* ---------------------------------------------------------------- 共通: Eyebrow / H2 / Lead ---------------------------------------------------------------- */ .sas-eyebrow { display: block; font-size: 11px; font-weight: 500; letter-spacing: calc(1em * 28 / 100); text-transform: uppercase; color: var(--sas-accent) !important; margin-bottom: 12px; } .sas-h2 { font-size: clamp(20px, 2.8vw, 28px); font-weight: 200; color: var(--sas-deep) !important; line-height: 1.7; letter-spacing: calc(1em * 10 / 100); margin-bottom: 18px; } .sas-h2--center { text-align: center; } .sas-lead { font-size: 13px; font-weight: 300; line-height: 2.1; color: var(--sas-sub); letter-spacing: calc(1em * 4 / 100); text-align: center !important; max-width: 700px; margin-left: auto; margin-right: auto; } /* ---------------------------------------------------------------- Framing Band ウォームブラック背景 + ベージュ系テキスト ---------------------------------------------------------------- */ .sas-root .sas-framing { background: #1C1816 !important; color: #d8cec8 !important; text-align: center !important; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; padding: 10px 24px; font-weight: 500; } .sas-root .sas-framing * { color: #d8cec8 !important; } .sas-root .sas-framing strong { color: #ffffff !important; font-weight: 700; } /* ---------------------------------------------------------------- Hero — PC/SP を <img> 2枚直置き + CSS display で切替 background はヒーロー画像ロード前の fallback 色（ライトグレー系） ---------------------------------------------------------------- */ .sas-root .sas-hero { position: relative !important; overflow: hidden !important; background: #C8C4BE; /* ライトグレー fallback（ヒーロー画像の背景色に近似） */ min-height: 520px; padding: 0 !important; margin: 0 !important; } .sas-root .sas-hero .sas-hero__img-pc, .sas-root .sas-hero .sas-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; } /* SP画像: デフォルト非表示 */ .sas-root .sas-hero .sas-hero__img-sp { display: none !important; } /* SP切替 */ @media (max-width: 767px) { .sas-root .sas-hero { min-height: 0; aspect-ratio: 4 / 5; } .sas-root .sas-hero .sas-hero__img-pc { display: none !important; } .sas-root .sas-hero .sas-hero__img-sp { display: block !important; object-position: center center !important; } } /* 下部グラデーション遮幕 — img + SVG data URI 方式 src のビジュアルは background:transparent リセットの影響を受けない */ .sas-root .sas-hero .sas-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; } /* テキストオーバーレイ */ .sas-root .sas-hero .sas-hero__overlay { position: absolute !important; left: 0; right: 0; bottom: 6%; z-index: 2; /* グラデーション div(z:1)より前面 */ padding: 0 48px; text-align: center; } .sas-root .sas-hero .sas-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; } .sas-root .sas-hero .sas-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) { .sas-root .sas-hero .sas-hero__overlay { bottom: 10%; padding: 0 20px; } .sas-root .sas-hero .sas-hero__caption { font-size: 13px; } } /* ---------------------------------------------------------------- Quick Thumbs（サムネナビ） ---------------------------------------------------------------- */ .sas-thumbs { padding: 24px 40px; background: var(--sas-white); display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--sas-border); border-bottom: 1px solid var(--sas-border); } .sas-thumb { display: block; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; border: 2px solid var(--sas-border); flex-shrink: 0; transition: border-color .2s, transform .2s; } .sas-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .sas-thumb:hover { border-color: var(--sas-accent); transform: scale(1.08); } @media (max-width: 600px) { .sas-thumbs { padding: 16px 20px; gap: 8px; } .sas-thumb { width: 48px; height: 48px; } } /* ---------------------------------------------------------------- Categories Section ---------------------------------------------------------------- */ .sas-root .sas-categories-section { padding: 64px 40px; background: var(--sas-white); text-align: center !important; } .sas-root .sas-categories-section .sas-categories-lead { font-size: 15px; line-height: 2.0; color: var(--sas-sub); max-width: 680px; margin: 16px auto 0; text-align: center !important; } @media (max-width: 600px) { .sas-root .sas-categories-section { padding: 48px 20px; } } /* ---------------------------------------------------------------- Concept Section ---------------------------------------------------------------- */ .sas-concept { padding: 88px 40px; background: var(--sas-light); } .sas-concept__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; max-width: 1100px; margin: 0 auto; align-items: center; } .sas-concept__copy p { font-size: 13px; font-weight: 300; line-height: 2.1; letter-spacing: calc(1em * 4 / 100); color: var(--sas-sub); margin-top: 16px; } @media (max-width: 760px) { .sas-concept { padding: 60px 20px; } .sas-concept__grid { grid-template-columns: 1fr; gap: 36px; } .sas-concept__visual { order: -1; } } /* ---------------------------------------------------------------- Pillars ---------------------------------------------------------------- */ .sas-pillars { background: var(--sas-white); } .sas-pillar { padding: 80px 40px; border-top: 1px solid var(--sas-border); } .sas-pillar__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 1100px; margin: 0 auto; align-items: center; } .sas-pillar--reverse .sas-pillar__grid { direction: rtl; } .sas-pillar--reverse .sas-pillar__text, .sas-pillar--reverse .sas-pillar__media { direction: ltr; } .sas-pillar__num { font-family: futura-pt, arial, "Noto Sans JP", sans-serif; font-size: 72px; font-weight: 200; color: #DDD8D2 !important; /* 淡ウォームグレーの大番号 */ line-height: 1; letter-spacing: calc(1em * 4 / 100); display: block; margin-bottom: 12px; } .sas-pillar__eyebrow { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 36 / 100); text-transform: uppercase; color: var(--sas-accent) !important; display: block; margin-bottom: 12px; } .sas-pillar__title { font-size: clamp(18px, 2.2vw, 24px); font-weight: 200; color: var(--sas-deep) !important; line-height: 1.7; letter-spacing: calc(1em * 10 / 100); margin-bottom: 18px; } .sas-pillar__body { font-size: 13px; font-weight: 300; line-height: 2.1; letter-spacing: calc(1em * 4 / 100); color: var(--sas-sub); max-width: 560px; } @media (max-width: 760px) { .sas-pillar { padding: 56px 20px; } .sas-pillar__grid { grid-template-columns: 1fr; gap: 32px; direction: ltr; } .sas-pillar--reverse .sas-pillar__grid { direction: ltr; } } /* ---------------------------------------------------------------- Items Section ---------------------------------------------------------------- */ .sas-root .sas-items-section { padding: 88px 40px; background: var(--sas-light); } .sas-root .sas-items-section .sas-items-head { text-align: center !important; margin-bottom: 52px; } .sas-root .sas-items-section .sas-items-head .sas-lead, .sas-root .sas-items-section .sas-lead { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } .sas-item-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1060px; margin: 0 auto; } @media (max-width: 860px) { .sas-item-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .sas-item-grid { grid-template-columns: 1fr; max-width: 400px; } .sas-items-section { padding: 60px 20px; } } /* Item Card */ .sas-item-card { display: block; background: var(--sas-white); border: 1px solid var(--sas-border); border-radius: 2px; overflow: hidden; text-decoration: none !important; color: inherit; transition: box-shadow .25s, transform .25s; } .sas-item-card:hover { box-shadow: 0 8px 28px rgba(28,24,22,.10); transform: translateY(-3px); } .sas-item-card__media { overflow: hidden; } .sas-item-card .sas-aspect img { object-position: center center !important; } .sas-item-card__body { padding: 18px 20px 22px; } .sas-item-card__num { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 28 / 100); color: var(--sas-accent) !important; display: block; margin-bottom: 8px; } .sas-item-card__brand { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 18 / 100); color: var(--sas-deep) !important; text-transform: uppercase; display: block; margin-bottom: 4px; } .sas-item-card__name { font-size: 13px; font-weight: 300; color: var(--sas-text) !important; line-height: 1.7; letter-spacing: calc(1em * 6 / 100); display: block; margin-bottom: 12px; } .sas-item-card__features { display: flex; flex-direction: column; gap: 6px; } .sas-item-card__features li { font-size: 11px; font-weight: 300; line-height: 1.8; letter-spacing: calc(1em * 4 / 100); color: var(--sas-sub); padding-left: 14px; position: relative; } .sas-item-card__features li::before { content: '—'; position: absolute; left: 0; color: var(--sas-accent); font-size: 11px; top: 1px; } /* ---------------------------------------------------------------- Related Nav ---------------------------------------------------------------- */ .sas-related { padding: 72px 40px; background: var(--sas-white); } .sas-related__head { text-align: center; margin-bottom: 40px; } .sas-related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1060px; margin: 0 auto; } @media (max-width: 860px) { .sas-related__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .sas-related__grid { grid-template-columns: 1fr; max-width: 400px; } .sas-related { padding: 56px 20px; } } .sas-related__card { display: block; border: 1px solid var(--sas-border); border-radius: 2px; overflow: hidden; text-decoration: none !important; color: inherit; background: var(--sas-white); transition: box-shadow .22s, transform .22s, border-color .22s; } .sas-related__card:hover { box-shadow: var(--sas-shadow); transform: translateY(-3px); border-color: var(--sas-accent); } .sas-related__card-img { overflow: hidden; background: var(--sas-light); } .sas-related__card-img img { transition: transform .35s; } .sas-related__card:hover .sas-related__card-img img { transform: scale(1.04); } .sas-related__card-content { padding: 16px 18px 18px; } .sas-related__card-tag { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 28 / 100); text-transform: uppercase; color: var(--sas-accent) !important; display: block; margin-bottom: 8px; } .sas-related__card-title { font-size: 13px; font-weight: 300; color: var(--sas-deep) !important; line-height: 1.7; letter-spacing: calc(1em * 6 / 100); margin-bottom: 6px; } .sas-related__card-desc { font-size: 11px; font-weight: 300; line-height: 1.9; letter-spacing: calc(1em * 4 / 100); color: var(--sas-sub); margin-bottom: 12px; } .sas-related__card-arrow { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 20 / 100); color: var(--sas-accent) !important; } /* ---------------------------------------------------------------- Core Message — ウォームブラック背景、ベージュ系テキスト ---------------------------------------------------------------- */ .sas-root .sas-core-msg-section { padding: 88px 40px; background: #1C1816 !important; } .sas-root .sas-core-msg-section .sas-core-msg { max-width: 760px; margin: 0 auto; text-align: center !important; } .sas-root .sas-core-msg-section .sas-core-msg * { color: #d8cec8 !important; } .sas-root .sas-core-msg-section .sas-core-msg .sas-core-msg__eyebrow { font-size: 10px; font-weight: 500; letter-spacing: calc(1em * 32 / 100); text-transform: uppercase; color: rgba(216,206,200,.5) !important; display: block; margin-bottom: 16px; } .sas-root .sas-core-msg-section .sas-core-msg .sas-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); } .sas-root .sas-core-msg-section .sas-core-msg .sas-core-msg__body { font-size: 12px; font-weight: 300; line-height: 2.1; letter-spacing: calc(1em * 4 / 100); color: #d8cec8 !important; max-width: 620px; margin: 0 auto; } @media (max-width: 600px) { .sas-root .sas-core-msg-section { padding: 64px 20px; } }

CLAS-curated × 差し色チェア / 置くだけで垢抜ける特集

「置くだけで、垢抜ける」。インテリアのプロが厳選した、差し色チェア 9選。

差し色チェア 9選を見る ↓

Curated by CLAS

CLASで月額で迎えられる、差し色チェア — スツール・ダイニングチェア・デザインチェア

HAY・FRITZ HANSEN・Arnold Circus・マルニ60 × mina perhonenなど、色とフォルムにこだわった9点をCLASが厳選。「1点で部屋を垢抜けさせる」差し色として使いやすいチェア・スツールをそろえました。3点以上で月額10%OFFになる「おまとめ割」も対象です。

Concept

チェアを、差し色に使う

差し色は、小物だけのものじゃない。チェアやスツール1脚で、部屋のトーンはがらりと変わります。ベージュやグレーのニュートラルな空間に、1点だけ色を持ったチェアを置く。それだけで、「なんか垢抜けてる」という印象が生まれます。

大切なのは、好きな色を選ぶこと。CLASなら月額で迎えて、自分の部屋で実際に試してから、ずっと使うかどうかを決められます。「ずっと気になっていたあの色」も、「自分には派手すぎかな？と思っていたあのデザイン」も。

01 Tone Matching

トーンを合わせる、
それだけで失敗しない

淡い部屋にはくすみカラー。モダンな部屋にはビビッドな色を。部屋の雰囲気と差し色のトーンが合っていれば、どんなに個性的なデザインのチェアも空間に馴染みます。まずは壁や床、ラグの色を見て「くすみ系か、鮮やか系か」を判断してみましょう。

02 Form & Color

形を楽しむ。
オブジェのように置く

色のインパクトがある分、フォルムが綺麗なものを選ぶとオブジェのように映えます。Arnold Circus Stoolのような彫刻的なシルエット、セブンチェアのような洗練された曲線美。「使わないときも絵になる」チェアは、部屋のアート的存在になります。

03 Try Before You Commit

派手な色も、
期間限定で試せる

派手な色は飽きそうで不安——そんな人こそ、CLASで「期間限定」の差し色を楽しんでみてください。「ずっと気になっていたあの色」も、月額で迎えれば気軽に試せます。気に入ればそのまま、飽きたら手放して次の色へ。色選びに失敗のない暮らし方です。

Curated Looks

置くだけで垢抜ける、差し色チェア 9選

CLASが厳選した、差し色として使いやすい9アイテム。スツール・ダイニングチェア・スタッキングチェアまで、「この色だから選ぶ」一脚をそろえました。

NO.1 CLAS Original カラフルラウンドスツール W41×D41×H45.5cm

鮮やかな単色カラーが、ニュートラルな部屋に一点集中の差し色を生む
丸脚×丸座面のシンプルな造形は、どんなテイストの部屋にも馴染みやすい

NO.2 HAY REVOLT CHAIR 3.0 W45.5×D49.5×H81cm

スチールフレームと鮮やかなシートカラーの対比が、空間にリズムを生む
スタッキング可能で、複数並べたときの色の揃い感も美しい

NO.3 CLAS Original マカロンミニスツール W31×D31×H25.5cm

ふわふわのボア素材が優しい印象。小ぶりなサイズで置き場所を選ばない
2色の重なりが可愛らしく、インテリアのアクセントにぴったり

NO.4 Arnold Circus Stool L 幅38×奥行45.5×高さ45cm

彫刻的なシルエットは、置くだけでオブジェのような存在感を放つ
スタック可能。色違いで複数並べることで、空間にリズムが生まれる

NO.5 CLAS Original デザインスタッキングチェア W52×D54×H87(SH46)cm

流れるような曲線フォルムが、1脚置くだけで部屋の印象を一変させる
スタッキング対応で収納もスマート。カラー展開も豊富

NO.6 FRITZ HANSEN セブンチェア 1脚

アルネ・ヤコブセンが1955年に発表した北欧の名作。一脚置くだけで、部屋に「本物の佇まい」が生まれる
軽量かつスタッキング可能。どんな空間にも溶け込みながら、さりげなく存在感を放つ差し色チェア

NO.7 CLAS Original クリアダイニングチェア W46.5×D54.5×H81.5(SH45)cm

透明なクリアボディが空間の圧迫感をゼロに。どんな色の部屋にも溶け込む
Eamesシェルチェアをオマージュしたシルエットで、モダン感を軽やかに添える

マルニ60 スタッキングスツール mina perhonen dop-tambourine

NO.8 マルニ60 × mina perhonen スタッキングスツール dop-tambourine 幅37×奥行37×高さ45cm

天然木の脚とmina perhonenのテキスタイルが、温かみのある差し色をつくる
スタッキング可能で、使わないときも絵になる佇まい

NO.9 CLAS Original 収納可チェックスツール W32×D32×H41cm

チェック織りのテクスチャーが、色だけでなく素材感でも部屋にアクセントを加える
中が空洞になっており、収納としても使える実用的なスツール

CLAS Core Message

差し色は、試してから決める時代。

色は、店頭で1分触ったくらいでは分からない。自分の部屋の光の中に置いて、壁の色や家具との距離感を確かめて、初めて「合う・合わない」が分かる。だからこそCLASでは、月額で迎えて自分の暮らしで確かめるという選び方を提案しています。「ずっと気になっていたあの色」も。「自分には派手すぎかな？と思っていたあのデザイン」も。CLASなら、今日から暮らしに取り入れられます。