UI はすべて黒・白・グレー。色を持つのは書影とラベルだけ。お知らせのラベルは 5 種類あるが面色は #ffffe2 1 つで、種類は文字で区別し、色では区別しない。
宣言 ≠ 実装。--main-color-rgb は 31, 46, 102(= #1f2e66 の紺)で、--main-color1/2 の黒とは別物。名前から「同じ色の rgb 版」と推測してコピーすると紺が混ざる。--sub-color1(#c4d700) と --main-color3(#888888) も可視 0 要素。
欧文=DM Sans、和文=DNP 秀英角ゴシック金 Stdの和欧二層で、欧文が先頭(211/216 要素)。font-feature-settings: "palt" をグローバルに当てたうえで、letter-spacing: 0.9px を body に 1 回書いて継承させる。詰めてから空ける二段構え。
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) より大きい。サイズで読むこと。
カードは border-radius: 10px + 0 3px 6px rgba(0,0,0,0.16)。書影そのものは 5px。影はここにしか付けない。
面色 #ffffe2 + 1px solid #666666 + border-radius: 9px。ラベルだけ letter-spacing: normal で、本文の 0.9px を打ち消している。
購入 CTA は 黒の面・角丸 0。書誌の表は項目名 #666666、ジャンルのリンクだけ #19448e。
Disney Twisted Wonderland Ballpoint Pen Illustration Lesson
1,980円(税込)
| 著者 | 玄光社編集部 |
|---|---|
| ジャンル | 書籍・MOOK / イラスト・絵画・マンガ技法 |
| シリーズ | ボールペンイラストLesson |
| 判型 | B5変型判 |
| 発売日 | 2026年9月12日 |
『ツイステッドワンダーランド』の魅力的なキャラクターたちを、ボールペン1本で描けるようになるレッスンブック。線の引き方から丁寧に解説し、初めての方でも順を追って描き進められる構成にしました。
第1章 基本の線/第2章 顔のバランス/第3章 キャラクター別Lesson/第4章 背景と小物
枠は 1px solid #cccccc、文字は 13px。フォーカスは黒のアウトライン。
実サイトはフォーム要素の font-family が Arial のまま(font-family: inherit が当たっていない)。これは実サイトの欠陥なので、新規実装では必ず input, select, textarea, button { font-family: inherit; } を入れること。このプレビューは修正して書いてある。
Level 1 が実測 56 要素で、事実上この 1 種。不透明度 0.16 と下方向 3px は共通で、ぼかし半径だけ 6px → 20px と変える。
トップは 580px の列を 2 本(gap: 25px)並べたモザイク。書誌ページは書影 + 情報の 2 カラムで、説明は 680px に絞る。
ブレークポイントは (max-width: 768px) が 149〜201 回で最多。デスクトップファースト(max-width 優先)で、軸は 768px / 769px の 1 本。書誌ページだけ 900px / 901px の第 2 軸を持ち、そこで書影 + 情報の 2 カラムを解除する。
タッチターゲットは足りていない。購入 CTA は約 30px 高、定期購読 ラベルは約 27px 高、お知らせのラベルは約 19px 高で、いずれも 44px を下回る。モバイルでは高さを確保すること。