二つのしつらえとおもてなしによる、和やかなひととき
金は 3 つあるが役割が違う。明るい地の上の文字は #886d44、面は #dcb374、暗い写真の上の文字は #f6d197。明度で使い分けているので取り違えないこと。
ヒラギノ明朝が可視 197 要素、Noto Sans JP が 185 要素。h1〜h3 はすべて明朝で、ボタンとフォームがゴシック。ウェイトは実質 400 の一本(可視 391 要素中 370 要素)で、階層はサイズと字間だけで作る。
字間は 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 フォント未使用」ではない。
border-radius の実装は 50%(カルーセルの矢印・可視 41 要素)と 0 だけ。CTA も入力欄もカードもすべて直角。予約系 CTA は例外なく #dcb374 の面に黒文字。
下パディングが上より 0.5〜2px 大きい。ヘッダー CTA は 22px 30px 24px、本文内は 12.5px 30px 13.5px、小は 10px 20px 10.5px。和文のベースライン位置を考慮した視覚中央合わせで、意図的な非対称。
影は 0 0 40px rgb(0 0 0 / .25) の 1 種が主役。オフセットを持たせず、浮かせるというより霞ませる使い方で、予約ドロップダウンと会員メニューにだけ付く。カード・ボタン・入力欄には影を付けない。
ブレークポイントを 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 幅だけ測ってサイズを決めないこと。