ブランド色は 新潮イエロー #ffed1b ひとつ。面と文字は黒と白、区切りは #cbcbcb の罫線と #efefef の淡い面で作る。黄色が 2 つあるのは実装の実態で、購入ボタンだけ淡い #fdec54 を使う。
本文は純黒 #000000。「日本語本文に純黒は避ける」定石とは逆で、これが目録らしい硬さを作っている。#333333 に置き換えないこと。
游ゴシック体 261 要素に対し、游明朝は 35 要素。明朝を使うのは「本の言葉」(キャッチコピー)とフッターの見出しだけ。フッターには Type Project の TP明朝 StdN High B を Web フォントで配信している。
letter-spacing は normal が既定(実測 272 要素)。字間を空けるのは黄色バッジの 0.158em だけ。游ゴシックの素の字送りを信じる設計なので、本文に字間を足すと印象が変わる。
font-feature-settings: "palt" は 1 要素も使っていない(実測 0 件)。括弧の多い書名(『村上春樹WORKS』)でも詰めない。palt を足さないこと。
游ゴシックの Windows 対策:素の YuGothic は Light にマッピングされて細くなる。実サイトは "Yu Gothic M" / "游ゴシック Medium" / "Yu Gothic Medium" を並べ、さらにヒラギノを ProN W3 → ProN → Pro の 6 通りで書き分けている。このチェーンを短縮しないこと。
惹句は游明朝 32px。書名以下の情報はすべてゴシックで、line-height は本文 2.13・表 1.5 と切り替える。
寒いぞぉー、うまいぞぉー。
抱腹絶倒の南極越冬日記。
選択中のタブだけ黒の塗り。カードは 1px solid #cbcbcb の枠で、角丸も影も使わない。
主要 CTA は #fdec54 の面に 2px の黒枠。セカンダリは白地に 1px の黒枠、三番手は #cbcbcb の枠にグレーの文字。
border-radius はサイト全体で 0px。例外は書誌ページのカートアイコン(100%)だけ。4px や 8px の角丸を足さないこと。
枠線を持たず、背景の淡いグレーだけで入力欄を表す。角丸なし。
カード・ボタン・チップはすべてフラット。区別は罫線 #cbcbcb と面 #efefef で行う。
書誌ページは「書影(左)/情報 500px(右)」の 2 カラム。書評やプロフィールは 700px に絞る。
ブレークポイントは 720px(SP)/ 1080px(PC)。実サイトは /common_v2/css/ と /common_v2/sp/css/ で CSS ファイル自体を出し分けている。