● アクセスオークラらしさ (03) 3582-0111
The OkuraTOKYO

和をもって世界をもてなす。

二つのしつらえとおもてなしによる、和やかなひととき

01 / Colors
COLOR PALETTE

金茶ひとつと、館ごとの地色

金は 3 つあるが役割が違う。明るい地の上の文字は #886d44、面は #dcb374、暗い写真の上の文字は #f6d197。明度で使い分けているので取り違えないこと。

ブランド金茶(文字)
--brand-primary
#886d44
★可視 68 要素。リンク・補助ラベル
CTA 金(面)
--color-head-book
#dcb374
★塗り面 15 要素。予約系 CTA はすべてこの色
ゴールド(暗所の文字)
--color-gold
#f6d197
写真の上に置く見出し(可視 6 要素)
Background(温白)
--color-bg
#fbfaf6
★ページ背景。html に指定、可視 14 要素
Surface Alt
--color-bg-alt
#f7f4ee
予約タブの非選択(可視 4 要素)
Category
--color-bg-category
#eeebe4
カテゴリ面
Prestige(焦茶)
--color-bg-prestige
#2e1d1d
★プレステージタワーの地色(可視 2 要素)
Heritage(クリーム)
--color-bg-heritage
#f2e7d6
★ヘリテージウイングの地色(下層で可視 7 要素)
Dark Surface
(会員プログラム)
#333333
会員プログラムボタン・上部ナビ
Member
--color-table-member
#a15c1e
会員等級
Loyal
--color-table-loyal
#64a53b
会員等級
Exclusive
--color-table-exclusive
#636596
会員等級

館ごとの地色

オークラ プレステージタワー

至福の眺望とおもてなしがもたらす心身の解放

詳細を見る →

オークラ ヘリテージウイング

オークラが都心にしつらえたプライベートの別邸

詳細を見る →
TYPOGRAPHY

明朝が主、ゴシックが従

ヒラギノ明朝が可視 197 要素、Noto Sans JP が 185 要素。h1〜h3 はすべて明朝で、ボタンとフォームがゴシック。ウェイトは実質 400 の一本(可視 391 要素中 370 要素)で、階層はサイズと字間だけで作る。

131416 17.61819.2 2425.628 3638
H1 ★ヒラギノ明朝 / 38px / 400
lh 1.25(47.5px) / ls normal
1281px 未満は 28px
二つのしつらえとおもてなしによる、和やかなひととき
H2ヒラギノ明朝 / 36px / 400
lh 1.25
和をもって世界をもてなす。
H2 館名 ★ヒラギノ明朝 / 24px / 400
lh 1.25 / ls 2.4px
オークラ ヘリテージウイング
H3 プラン名ヒラギノ明朝 / 28px / 400
lh 1.25
オークラだけの体験
Room Titleヒラギノ明朝 / 25.6px / 400
lh 1.2
ヘリテージウイングスイート
Leadヒラギノ明朝 / 19.2px / 400
lh 1.24 / 可視 24 要素
世界をもてなすために、日本らしい格式とモダンな快適さを、ひとつの場所に。
NavNoto Sans JP / 18px / 400
lh 1.0 / 可視 65 要素
オークラ プレステージ オークラ ヘリテージ レストラン&バー
Body ★Noto Sans JP / 16px / 400
lh 1.7(27.2px) / ls normal
可視 142 要素で最多
スチームサウナやジェットバスといった現代の贅沢を備えた浴室と、日本の美意識を受け継いだしつらえ。都心にありながら静けさに満ちた時間を、ご滞在のあいだずっとお過ごしいただけます。
Sub TextNoto Sans JP / 17.6px / 400
lh 1.25
プライベートガーデンやゆったりと浸かれる浴槽など
Label ★Noto Sans JP / 14px / 400
lh 1.25 / ls 1.4px
可視 11 要素
[宿泊者限定] [季節のプラン]
TableNoto Sans JP / 14.4px / 400
lh 1.7(24.48px)
日 月 火 水 木 金 土
CaptionNoto Sans JP / 13px / 400
lh 1.1 / 可視 41 要素
全 249 室 スイート 6 室 371 m²
Vertical ★ヒラギノ明朝 / 17px / 400
lh 1.55(26.35px) / ls normal
1500px 以上で 20px
本物の上質
日本の美意識とモダニズム

字間は px で焼いてある。em ではない。見出しの実測値は 32px → 3.2px / 24px → 2.4px(可視 37 要素で最多)/ 16px → 1.6px / 14px → 1.4px。意図はサイズの 0.1 倍なので、新規実装では 0.1em に読み替えてよい。CSS 内には .1rem(1.6px)や .0875rem(1.4px)の宣言も混在しており、同じ値に 3 通りの書き方がある。

font-feature-settings を 1 要素も使っていない(CSS 全文 0 件)。palt で詰めず、letter-spacing で空ける方向に使うのがこのサイトの構え。palt を足すと空けた字間と打ち消し合う。

明朝のフォールバックが欧文セリフだけ。実サイトの --font-serif は hiragino-mincho-pron, Georgia, Cambria, "Times New Roman", "Droid Serif", Times, serif で、和文の保険(游明朝・ヒラギノ明朝のローカル名)が入っていない。Adobe Fonts の取得に失敗すると和文は OS の serif 既定に落ちる。新規実装では和文の明朝を挟むこと。

アクセシビリティ用の書体切り替えを持っている。ヘッダー左のアイコンから html[class^="a11y--font-"] を付けて B612 / Atkinson Hyperlegible / Luciole / Sylexiad Sans / Andika / OpenDyslexic / Eido に差し替える。document.fonts でこれらが unloaded なのは既定状態では読まれないからで、「Web フォント未使用」ではない。

03 / Components
COMPONENTS

角丸ゼロ、影もほぼ無し

border-radius の実装は 50%(カルーセルの矢印・可視 41 要素)と 0 だけ。CTA も入力欄もカードもすべて直角。予約系 CTA は例外なく #dcb374 の面に黒文字。

詳細を見る → →

下パディングが上より 0.5〜2px 大きい。ヘッダー CTA は 22px 30px 24px、本文内は 12.5px 30px 13.5px、小は 10px 20px 10.5px。和文のベースライン位置を考慮した視覚中央合わせで、意図的な非対称。

予約タブ / フィルタチップ

カレンダーから選択できます
最長 14 泊まで
1 名様以上をご指定ください

客室カード

ヘリテージルーム
スチームサウナやジェットバスといった現代の贅沢を
全 68 室 55 m²
ヘリテージウイングスイート
スイートのための特別なアートや、くつろぎのサウナ
全 6 室 110 m²
プレジデンシャルスイート
プライベートガーデンやゆったりと浸かれる浴槽など
全 1 室 371 m²
LAYOUT

1320px と、霞ませる影

影は 0 0 40px rgb(0 0 0 / .25) の 1 種が主役。オフセットを持たせず、浮かせるというより霞ませる使い方で、予約ドロップダウンと会員メニューにだけ付く。カード・ボタン・入力欄には影を付けない。

Level 0
none — サイトのほぼすべて
Level 2 ★
0 0 40px rgb(0 0 0 / .25)
Level 2′
0 0 40px rgb(0 0 0 / .15)

Container

--container / 1320px ★標準
--article / 1140px
--read / 800px
--card / 340px(トップ 44 要素)

Header Height

--header-fulls / 250px(全画面ヒーロー時)
--header-normal / 140px(通常)
--header-scrolled / 70px(スクロール後。半分に縮む)
0 ★ CTA・タブ・カード・入力欄のすべて
50% — カルーセルの矢印のみ

ブレークポイントを em で書いている。min-width: 48em(768px・105 回)/ 63.75em(1020px・157 回で最多)/ 78.75em(1260px・51 回)/ 85em(1360px・75 回)/ 93.75em(1500px)。px に直すときは 16 倍すること。

html も body も 4 幅(1440 / 1200 / 834 / 375px)すべてで 16px 固定。流体ルートではない。変わるのは見出しだけで、h1 は 1281px 以上で 38px、未満で 28px(line-height はどちらも 1.25)。縦組みラベルは 1500px 以上で 17px → 20px に拡大する。1 幅だけ測ってサイズを決めないこと。