SORANO HOTEL

東京にあって、
東京にないホテル

SORANO HOTEL は、東京立川に誕生した新発想のホテルです。
コンセプトは、心にも体にも健やかであること「ウェルビーイング」。

SORANO HOTEL
01 / Colors

実装されているのは3色だけ

トークンには金・茶・ベージュ・赤・橙まで並んでいるが、DOM を 1 周して数えると描画されるのは #1a1a1a(832 要素)・#ffffff(206)・#5988c6(4)だけ。 面色も #274875(9)と #5988c6(21)に限られる。 紺は「押せるもの」、水色は「分類」——役割がはっきり分かれている。

Dark(本文)
#1a1a1a / --color-dark
★可視 832 要素。純黒 #000 は使わない
Dark Blue(CTA)
#274875 / --color-dark-blue
★面色 9 要素。すべての塗りボタン。hover は #1f3a5e
Blue(カテゴリ)
#5988c6 / --color-blue
★面色 21 要素。ニュースの分類バッジ専用
Background
#f9f8f6 / --color-bg-primary
★ページ背景(根拠 body)。純白ではない生成り
Gray
#eeebe7 / --color-bg-gray
面、白ボタンの hover
Light Gray
#f4f2ef / --color-bg-light-gray
セクションの下地
BG Dark Blue
#30517b / --color-bg-dark-blue
ヘッダー・濃紺の帯
BG Dark
#171513 / --color-bg-dark
フッター
Gold
#a89469 / --color-gold
宣言のみ。可視 0 要素。配色に持ち込まない
Beige
#d1c3bc / --color-beige
宣言のみ。可視 0 要素
Brown
#332727 / --color-brown
宣言のみ。可視 0 要素
Sorano Blue
#88ade2 / --color-sorano-bllue
宣言のみ。可視 0 要素(変数名の綴りも実サイトのまま)

宣言 ≠ 実装。CSS 変数の一覧を見て金や茶を配色に足すと、実サイトと別物になる。 使ってよいのは上段の8色だけ。

明朝で組み、0.1em 空け、palt で詰める

可視テキスト 292 要素のうち 194 要素が明朝(Noto Serif JP)。ゴシックは 18 要素しかなく、ナビ・ラベル・日付など「読ませない文字」に限られる。 字間は 0.1em を body に 1 回だけ書いて 1.4px として 736 要素に継承させ、ヒーロー見出しだけ 0.3em まで開く。 font-feature-settings: "palt" は可視 1046 要素中 1045 要素——実質グローバル。

Hero / h1
32px · 350 · 1.5
letter-spacing 0.3em
明朝
東京にあって、東京にないホテル
Heading xl
40px · 350 · 1.7
letter-spacing 0.1em
明朝
滞在そのものが Well-being 体験
Heading 2xl / 欧文
44px · 500 · 1.2
letter-spacing 0.06em
Cardo
SORANO NEWS
Heading md
24px · 500 · 1.7
letter-spacing 0.1em
明朝
都心からわずか30分、大きな空と豊かな緑
Heading sm
20px · 350 · 1.6
letter-spacing 0.1em
明朝
ジム・プールプログラム
Body
14px · 350 · 2.0
letter-spacing 0.1em
明朝
ゆったりとした広さは心地よく、豊かな緑に癒される。一つ一つの選択や判断に、一貫したウェルビーイングへのこだわりがあります。
Body / long
14px · 350 · 2.2
長文はさらに開く
慌ただしい日常から離れ、心身ともに心地よい寛ぎの時間を。フィジカル面での健やかさだけでなく、心の充足まで含めて滞在を設計しています。
Caption
12px · 350 · 1.8
明朝
オールデイダイニング/朝食 7:00 - 10:30
Sans(補助)
13px · 350 · 1.8
Inter + Noto Sans JP
ナビゲーション・ラベル・日付だけがゴシック
font-weight: 350 — ★既定(可視 199 要素)
心にも体にも健やかであること
font-weight: 500 — 強調(90 要素)
心にも体にも健やかであること
font-weight: 700 — ★実サイトに 0 要素。使わない
心にも体にも健やかであること
letter-spacing: 0.3em — ヒーロー見出しだけ
東京にあって、東京にないホテル
letter-spacing: 0.1em — 和文の既定(本文・見出し)
東京にあって、東京にないホテル
letter-spacing: 0.06em — 欧文見出し(Cardo)
SORANO HOTEL TACHIKAWA

0.3em を本文に広げないこと。ヒーローの 1 見出しだけに使う値で、長文に当てると読めなくなる。 また font-weight: 350 を 400 に丸めないこと——このサイトの「薄さ」はこの非整数ウェイトから来ている。

03 / Rooms & News

角丸ゼロ・影ゼロで組む

border-radius: 0 が可視 1008 要素、box-shadow: none が 1043 要素。 丸いのは円形の装飾(100%)35 個だけ。写真とカードは矩形のまま並べる。

STANDARD
スタンダード(52㎡)
全室 52㎡ 以上。大きな窓から昭和記念公園の緑を望む。
SKY KING
スカイキング パークビュー(1-2名)
最上階からの眺望と、水平線のように広がる空。
SUITE
スイート(96㎡)
インフィニティプールに続く、ひと続きの滞在。
2026.09.16 インフォメーション ホテル休館日のご案内
2026.09.04 お知らせ 【室数限定】3泊以上でお得に泊まろう!
2026.08.28 お知らせ Published Rate(公示価格)について

塗りは紺 1 色、角丸は 0

塗りボタンはすべて #274875。フッターの導線だけ rgba(0,0,0,.12) の細枠アウトライン。 固定の予約ボタンは和文 14px / 0.05em と 欧文 Cardo 10px / 0.1em の2段組になっている。

インフォメーション お知らせ プレスリリース
05 / Forms

入力欄も矩形のまま

既定・フォーカス・エラーの3状態。角丸は付けず、枠は rgba(0,0,0,.25)。

ご宿泊代表者さまのお名前をご記入ください
電話番号の形式が正しくありません

影を1つも使わない

可視 1046 要素のうち 1043 要素が box-shadow: none。残る3つは値が透明のものと、外部チャットウィジェット由来のもの。

階層は細い罫線(rgba(0,0,0,.12) / .06 / .25)、面(#f9f8f6 / #eeebe7 / #f4f2ef)、 そして100〜220px の余白で表す。カードやボタンに影を足すと、このサイトの静けさが失われる。
07 / Layout

1860px の全幅と、rem = 10px の余白

コンテナは 1860px(実測 14 箇所)、左右の余白は 6.25vw。 html { font-size: 10px } なので、--space-section-lg: 22rem は 220px を意味する。

0.8rem
8
1.2rem
12
1.6rem
16
2.4rem
24
3.6rem
36
4.8rem
48
6.4rem
64
8rem
80
9.6rem
96
12rem
120

ブレークポイントは max-width 方式。(max-width: 767px) が 499 箇所、(max-width: 1024px) が 493 箇所。 ホバー効果は (hover: hover) and (pointer: fine) で囲み、アニメーションは not (prefers-reduced-motion) で囲む。