広告掲載について採用情報メールマガジン会社概要お問い合わせ
01 / Colors
Color Palette

黒とグレーの目録に、ラベルだけ色を置く

UI はすべて黒・白・グレー。色を持つのは書影とラベルだけ。お知らせのラベルは 5 種類あるが面色は #ffffe2 1 つで、種類は文字で区別し、色では区別しない。

Black
#000000
★本文 156 要素。購入 CTA の面色(--main-color1/2)
Dark
#333333
カード内の書名 20 要素。「詳細検索」の面
Gray
#666666
書誌の項目名 8 要素。ラベルの 1px 枠
Muted
#999999
フッター見出し 5 要素。検索ボタンの面
Link Navy
#19448e
書誌ページのジャンルリンク 4 要素(--link-color)
Label Yellow
#ffffe2
★お知らせ 5 種類すべて(14 要素)
Label 新刊
#ff808e
書誌ページ 2 要素
Label 近刊
#ffa166
書誌ページ 2 要素
定期購読
#edf8e1
雑誌の導線(3 要素)
バックナンバー
#eaf6f8
雑誌の導線(3 要素)
Border
#cccccc
MORE / VIEW ALL の枠(--bordercolor)
Background
#f9f9f9
★ページ背景。根拠 viewportTopBySample (12/12)

宣言 ≠ 実装。--main-color-rgb は 31, 46, 102(= #1f2e66 の紺)で、--main-color1/2 の黒とは別物。名前から「同じ色の rgb 版」と推測してコピーすると紺が混ざる。--sub-color1(#c4d700) と --main-color3(#888888) も可視 0 要素。

Typography

palt で詰めて、0.9px で空ける

欧文=DM Sans、和文=DNP 秀英角ゴシック金 Stdの和欧二層で、欧文が先頭(211/216 要素)。font-feature-settings: "palt" をグローバルに当てたうえで、letter-spacing: 0.9px を body に 1 回書いて継承させる。詰めてから空ける二段構え。

91112 131415 171820 242834 40
Section Display40px / 700
lh 1.30 / ls 0.9px
PICKUP
Section Heading34px / 600
lh 1.30 (44.2px)
新刊情報
Book Title(詳細)28px / 700
lh 1.30
ディズニー ツイステッドワンダーランド ボールペンイラストLesson
Sub Heading24px / 600
lh 1.30 (31.2px)
同じジャンルの本
Card Title ★20px / 700
lh 1.69(行間だけ広い)
オデュッセイア クリストファー・ノーランの映画制作
Nav(和文のみ)秀英角ゴ単独 / 17px / 600
lh 1.00
書籍・ムック 雑誌 WEBメディア 書店様へ
Body ★15px / 400
lh 1.30 (19.5px) / ls 0.9px
写真・映像・イラストの専門書をつくりつづけて、1925年の創業から一世紀。玄光社は「つくる人」のための出版社です。
Caption / List ★13px / 400
lh 1.30 (16.9px) — 最多 119 要素
広告掲載について 採用情報 メールマガジン 会社概要 お問い合わせ
Description13px / 400
lh 1.69 (21.97px)
『ツイステッドワンダーランド』の魅力的なキャラクターたちを、ボールペン1本で描けるようになるレッスンブック。線の引き方から丁寧に解説します。
Label13px / 600
lh 2.85 (37px)
定期購読 バックナンバー
Badge ★11px / 400
lh 1.73 / ls normal
イベント NEWS 重版 書店向け PR
Price / Tax18px / 700 + 11px / 400
lh 1.30
¥1,760 (税込)
More Link14px / 700
lh 2.71 / radius 18px
MORE VIEW ALL
Copyright9px / 400
lh 1.30
Copyright © 1999- GENKOSHA Co., Ltd. All Rights Reserved.

html { font-size: 10px }。ルートが 16px ではないので、rem の px 換算がすべて変わる(1.5rem = 15px、1.3rem = 13px)。16px 基準で換算しないこと。

letter-spacing は px 宣言・px 継承。15px の本文で 0.9px、13px のキャプションでも 0.9px のまま(em なら 0.78px になるはずが、そうなっていない)。em に読み替えないこと。body に 1 回書いて、子要素では再宣言しない。

line-height は body に絶対値 19.5px で入っている。15px に対して 1.30。子要素も 13→16.9 / 34→44.2 / 40→52 とすべて 1.30 倍で揃う。読ませる文(紹介文・カード書名)だけ 1.69 に開ける。

見出し階層はタグ名で判断しない。実サイトは h1 が 15px / weight 400(body と同じ)で、h3(40px) が h2(34px) より大きい。サイズで読むこと。

03 / Book Cards
Books

書影を紙として浮かせる

カードは border-radius: 10px + 0 3px 6px rgba(0,0,0,0.16)。書影そのものは 5px。影はここにしか付けない。

ディズニー
ツイステッドワンダーランド
ボールペンイラストLesson
ディズニー ツイステッドワンダーランド ボールペンイラストLesson
¥1,760
(税込)
【Amazon.co.jp 限定】
ゆるジャーナリング
【Amazon.co.jp 限定】ゆるジャーナリング
¥1,650
(税込)
オデュッセイア
クリストファー・ノーランの
映画制作
オデュッセイア クリストファー・ノーランの映画制作
¥1,870
(税込)
瑞花
YUE作品集
瑞花 YUE作品集
¥2,970
(税込)
VIEW ALL
News

ラベルは 5 種類とも同じ淡黄

面色 #ffffe2 + 1px solid #666666 + border-radius: 9px。ラベルだけ letter-spacing: normal で、本文の 0.9px を打ち消している。

2026.7.31イベント【9月19日開催】中山咲月バースデーイベント2026
2026.7.27重版『世界一かんたんで楽しい「貼る」ライフログ ジャーナル』重版出来
2026.7.17NEWS『ディズニー くまのプーさん かわいいぬりえ絵本』発売のお知らせ
2026.7.10書店向け秋の写真書フェア 什器のお申し込みについて
MORE
05 / Book Detail
Detail

書影 + 680px の説明カラム

購入 CTA は 黒の面・角丸 0。書誌の表は項目名 #666666、ジャンルのリンクだけ #19448e。

ディズニー
ツイステッドワンダーランド
ボールペンイラストLesson
ネット書店で購入する 店舗の在庫を確認
新刊 近刊

ディズニー ツイステッドワンダーランド ボールペンイラストLesson

Disney Twisted Wonderland Ballpoint Pen Illustration Lesson

1,980円(税込)

著者玄光社編集部
ジャンル書籍・MOOK / イラスト・絵画・マンガ技法
シリーズボールペンイラストLesson
判型B5変型判
発売日2026年9月12日
内容紹介

『ツイステッドワンダーランド』の魅力的なキャラクターたちを、ボールペン1本で描けるようになるレッスンブック。線の引き方から丁寧に解説し、初めての方でも順を追って描き進められる構成にしました。

目次

第1章 基本の線/第2章 顔のバランス/第3章 キャラクター別Lesson/第4章 背景と小物

Forms

入力欄は角丸 0・高さ 38px

枠は 1px solid #cccccc、文字は 13px。フォーカスは黒のアウトライン。

全角でご入力ください
黒のアウトラインが付く
お問い合わせ内容をご入力ください
複数ある場合は代表的なものをお選びください

実サイトはフォーム要素の font-family が Arial のまま(font-family: inherit が当たっていない)。これは実サイトの欠陥なので、新規実装では必ず input, select, textarea, button { font-family: inherit; } を入れること。このプレビューは修正して書いてある。

07 / Elevation
Elevation

影は書影カードだけ

Level 1 が実測 56 要素で、事実上この 1 種。不透明度 0.16 と下方向 3px は共通で、ぼかし半径だけ 6px → 20px と変える。

Level 0
none — ラベル・ボタン・ナビはすべてフラット
Level 1
0 3px 6px rgba(0,0,0,0.16) (実測 56 要素)
Level 2
0 3px 20px rgba(0,0,0,0.16) (書誌ページ 5 要素)
購入 CTA
0px
書影・詳細検索
5px(20 要素)
お知らせラベル
9px(14 要素)
書影カード
10px(40 要素で最多)
MORE / VIEW ALL
18px
Layout

コンテナ 1180px / グリッド 580px × 2

トップは 580px の列を 2 本(gap: 25px)並べたモザイク。書誌ページは書影 + 情報の 2 カラムで、説明は 680px に絞る。

--sitewidth: 1180px(実測 6 要素)
1020px
--column: 800px(本文カラム・4 要素)
680px(書誌の説明カラム)
--grid-col: 580px(書影グリッドの 1 列・31 要素で最多)

ブレークポイントは (max-width: 768px) が 149〜201 回で最多。デスクトップファースト(max-width 優先)で、軸は 768px / 769px の 1 本。書誌ページだけ 900px / 901px の第 2 軸を持ち、そこで書影 + 情報の 2 カラムを解除する。

タッチターゲットは足りていない。購入 CTA は約 30px 高、定期購読 ラベルは約 27px 高、お知らせのラベルは約 19px 高で、いずれも 44px を下回る。モバイルでは高さを確保すること。