彩度のあるものは写真だけ。UI は #190e0a と白で組む。トップの body 背景だけ #1c0b06 という別値だが、肉眼では区別できない。下層ページの地色は白。
CSS Custom Properties は 0 個。設計トークンは存在しない。トップは heroCover: true(span.TopKeyVisual__bg が #190e0a で 1440×900 を覆う)だが、下層ページの地色は白。トップの背景色をサイト全体の背景として写さないこと。
和文は Morisawa Fonts Web 配信の 本明朝 Pro Medium(MFW-RoHMinchoPro-Md)。可視 75 要素(トップ)/ 91 要素(下層)。ゴシックが出るのはボタンのラベルだけ(15 / 7 要素)。
font-feature-settings は 1 要素も使っていない(実測 0 件)。明朝で palt を効かせると括弧や句読点が詰まりすぎて間が消える。字間 .03em の浅さと「詰めない」がセットになっている。palt を足さないこと。
letter-spacing: .03em は body に 1 回だけ。computed は 0.48px で、サイズの違う要素すべてが 0.48px(可視 63 / 69 要素)=絶対値の継承。12px 以下の要素だけ .02em(0.24px)を自分で宣言している。
@font-face が font-weight: 1 1000 を宣言している。400 でも 700 でも同じファイルが返り、合成太字も起きない。太さを変えたいなら MFW-RoHMinchoStd-Bd を読み込んでファミリーを切り替える(実サイトは宣言のみで unloaded)。
実サイトの font-family には 3 つの引っかかりがある。① Roboto, Yu Gotich, sans-serif というタイプミス(正しくは "Yu Gothic")。② 游ゴシックの Medium を Regular より後ろに置いており、Windows で細く出る。③ "Noto Sans JP" をスタック先頭に書いているが @font-face もフォント要求も無い。いずれも真似しないこと。
本文が全部明朝なので、ボタンのラベルが明朝だと押せるように見えないという判断。border-radius: 3px はサイト唯一の角丸で、ボタン 13 要素だけに付く。
実サイトの Menu 開閉 閉じる はブラウザ既定のまま(background: #efefef / border: 2px outset)。CSS を当て忘れている。実装時は必ずリセットすること。
box-shadow はサイト全体で 0 種。カードは #f1f1f1 の面と写真だけ。角丸も付けない。
京都の街と庭を望む 161 室。数寄屋の設えと現代の快適さを重ねた空間。
長い歴史と美しい自然の中で豊かな食文化が育まれた京都。
山紫水明の都、京都。当ホテルの敷地に湧く天然温泉。
th は 12px、td は 16px。背景色も縦罫も使わず、サイズ差だけで見出しと値を分ける。
| ホテル名称 |
|---|
| HOTEL THE MITSUI KYOTO(ホテル ザ 三井 京都) |
| 開業 |
| 2020年11月3日 |
| 所在地 |
| 京都市中京区油小路通二条下る二条油小路町284 |
三井家が 1703 年より 250 年以上にわたり伝えてきた地に建つホテル。梶井宮門をくぐり、庭園を抜けた先に客室がある。見出しは左 384px に固定し、本文は 792px を取る。
コンテナは 1240px、本文だけのページでは 996px に絞る。gap は 24px(カード)と 0 26px(2 カラム)の 2 値だけ。
予約パネルの select は #363636 の面に白文字で、角丸なし。テキスト入力は実測できなかったので、ボタンに合わせて radius 3px / 1px solid #190e0a を推奨する。
主ブレークポイントは max-width: 768px(実測 522 回)。1440 / 1200 / 834 / 375px のいずれでも body は 16px / 28.8px / 0.48px で変わらない。縮むのは見出しとレイアウトだけ。
(min-width: 1025px) and (max-width: 768px) のように常に false になる組み合わせが 2 件ある(ビルド時のネスト崩れ)。写さないこと。