01 / Colors
Color Palette

黒・白・黄の三色だけ

ブランド色は 新潮イエロー #ffed1b ひとつ。面と文字は黒と白、区切りは #cbcbcb の罫線と #efefef の淡い面で作る。黄色が 2 つあるのは実装の実態で、購入ボタンだけ淡い #fdec54 を使う。

新潮イエロー
#ffed1b
★可視 19 要素 / CSS 24 回。バッジ・帯・見出しの下線
Cart Yellow
#fdec54
書誌ページの「ネットで購入」専用(CSS 4 回)
Black
#000000
★本文(可視 198 要素)かつ塗り面(可視 10 要素)
Muted
#9b9b9b
発売日・「もっと見る」(可視 43 要素 / CSS 109 回)
Border
#cbcbcb
★最多の罫線色。CSS 全文で 88 回
Surface
#efefef
判型チップ・面(可視 37 要素)
Surface Light
#f5f5f5
検索フォームの面
Link
#008bbe
カード内のリンク・アイコン(可視 4 要素 / CSS 8 回)

本文は純黒 #000000。「日本語本文に純黒は避ける」定石とは逆で、これが目録らしい硬さを作っている。#333333 に置き換えないこと。

Typography

本文ゴシック、惹句だけ明朝

游ゴシック体 261 要素に対し、游明朝は 35 要素。明朝を使うのは「本の言葉」(キャッチコピー)とフッターの見出しだけ。フッターには Type Project の TP明朝 StdN High B を Web フォントで配信している。

101112 12.81416 182224 2632
Catch Copy ★游明朝 / 32px / 700
lh 1.50 / ls normal
寒いぞぉー、うまいぞぉー。抱腹絶倒の南極越冬日記。
Book Title游ゴシック体 / 26px / 700
lh 1.23 / ls normal
面白南極料理人
Article Heading游ゴシック体 / 24px / 700
lh 1.25
想像するおいしさ その自由な世界
Footer HeadingTP明朝 StdN High B / 22px
lh 1.50(代替: Shippori Mincho)
新潮社について
Author / Price游ゴシック体 / 18px
lh 1.56 / 400・700
西村淳/著 781円(税込)
Sub Heading游ゴシック体 / 18px / 700
lh 1.78
書評
Body ★游ゴシック体 / 16px / 400
lh 2.13 / ls normal
ウイルスさえも生存が許されない地の果て、南極ドーム基地。そこに送りこまれた八人の男たちの、おかしくもたくましい日々を、料理担当の著者が記録した抱腹絶倒の食エッセイ。
List Item游ゴシック体 / 14px
lh 1.57
ジャンル:文学・評論 > エッセー・ノンフィクション
Date游ゴシック体 / 14px
lh 1.43 / color #9b9b9b
2026/09/01
Spec Table游ゴシック体 / 12.8px
lh 1.50 / 400・700
読み仮名 オモシロナンキョクリョウリニン
Chip游ゴシック体 / 12px
lh 2.13
文庫 電子書籍あり
Badge ★游ゴシック体 / 10px / 700
lh 1.0 / ls 0.158em
新刊 最新号

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 通りで書き分けている。このチェーンを短縮しないこと。

03 / Book Detail
Book

書誌ページ:書影 + 500px カラム

惹句は游明朝 32px。書名以下の情報はすべてゴシックで、line-height は本文 2.13・表 1.5 と切り替える。

寒いぞぉー、うまいぞぉー。
抱腹絶倒の南極越冬日記。

面白南極料理人
ネットで購入
文庫電子書籍あり映画化テレビ化

面白南極料理人

西村淳/著

781円(税込)

発売日:2004/09/29

ウイルスさえも生存が許されない地の果て、南極ドーム基地。平均気温マイナス五十四度、標高三八〇〇メートル、酸素は平地の六割。そこに送りこまれた八人の男たちの、おかしくもたくましい日々を、料理担当の著者が記録した抱腹絶倒の食エッセイ。

書誌情報

読み仮名オモシロナンキョクリョウリニン
シリーズ名新潮文庫
発行形態文庫、電子書籍
判型新潮文庫
頁数269ページ
もっと見る
News

タブとカード

選択中のタブだけ黒の塗り。カードは 1px solid #cbcbcb の枠で、角丸も影も使わない。

ニュース一覧
05 / Buttons
Buttons

角丸ゼロ。太い黒枠の購入ボタン

主要 CTA は #fdec54 の面に 2px の黒枠。セカンダリは白地に 1px の黒枠、三番手は #cbcbcb の枠にグレーの文字。

ネットで購入 新刊一覧 登録 もっと見る 新刊 文庫 映画化

border-radius はサイト全体で 0px。例外は書誌ページのカートアイコン(100%)だけ。4px や 8px の角丸を足さないこと。

Forms

入力欄は #f5f5f5 の面・高さ 50px

枠線を持たず、背景の淡いグレーだけで入力欄を表す。角丸なし。

全角でご入力ください
黒のアウトラインが付く
ご意見・ご感想をご入力ください
複数ある場合は代表的なものをお選びください
07 / Elevation
Elevation

影はサイト全体で 1 要素だけ

カード・ボタン・チップはすべてフラット。区別は罫線 #cbcbcb と面 #efefef で行う。

Level 0
none — 既定。カード・ボタン・チップはすべて影なし
Level 1
0 0 20px rgba(0, 0, 0, 0.15) (実測 1 要素)
Layout

コンテナ 1060px / 本文 700px / 書誌 500px

書誌ページは「書影(左)/情報 500px(右)」の 2 カラム。書評やプロフィールは 700px に絞る。

--container: 1060px(実測 19 要素で最多)
1000px(フォーム幅)
--column: 700px(書評・プロフィール)
--detail: 500px(書誌ブロック)
既定
0px
カートアイコン
100%

ブレークポイントは 720px(SP)/ 1080px(PC)。実サイトは /common_v2/css/ と /common_v2/sp/css/ で CSS ファイル自体を出し分けている。