記事の形式ごとに1本ずつ、代表を並べました
左が PC（幅1500）、右がスマホ（幅390）の上のほうの画面。クリックで実物が開きます。直したいところは「型A の h2 の空きを狭く」のように、型とページの場所で伝えてもらえば、全記事にまとめて効きます。
- トップは参考サイトの実測値：3列 270／可変／270、箱の間 10px、見出し 17px＋頭文字 30px、日付帯 13px・高さ 45px、要約 14px/1.9、READ MORE 上下 30px、ページ送り 35px角。
- 記事ページも実測値：文字 12.8px/19.2px、看板 1200×680、h1 19.2px、Xボタン、商品の枠、足元の帯。
- 本文（ここだけ読みやすさ優先）：14px/1.9、文の幅 800px、画像は 1000px まで。h2 16px＋下線、h3 14px＋左線。目次は h2 が4つ以上のとき。広告は看板の下・3つ目の h2 の前・本文の下。
- 図：横長 1000px／縦長 640px → 8px → キャプション → 38px 空き。カード：1枚 300px 左寄せ、2枚 300px×2、3枚以上 180px 並べ。写真 800×450、アプリ画面 300×533。表：見出し行 #3d3d3d、縞、1000px まで、はみ出しは横スクロール。
- サムネ 1200×680：①関連カードを扇に ②なければ最初の図解を上寄せ ③なければカテゴリ色のタイル。猫は右下（カードの文章欄に重ねる・絵には重ねない）。★は「カード評価まとめ」だけ。左の履歴は同じ画像を 150×35 に切る。
目次：トップ 型A 型B 型C 型D 型D-2 型E 型F 型G 型H-1 型H-2 型I
トップ
3列（左 270／中央 可変／右 270）。左＝案内→「最近の記事」の画像つき履歴、右＝記事タイプごとの一覧→広告。記事の箱は 10px おき、見出し 17px（頭文字 30px）、日付帯 45px。
揉むポイント- 3列の幅と箱の間隔が参考（山を崩せ）と同じに見えるか
- 左：案内3つ→最近の記事（150×35 の画像＋1行）の順と間隔
- 右：タイプごとの箱の順番・1行の短い題名（No.つき）で足りるか・長さ
- 記事の箱：見出し→日付帯→サムネ→要約→READ MORE の縦のリズム
- サムネの構図（カード扇／図解／タイル）と猫の位置
→ 画像多め版（型A）を開く（本文の途中。「仮」の画像は差し替え予定の場所）
型A 解説（長文＋表＋図解）
ルール解説の基本形。結論→本文→表→図→Q&A→出典。
揉むポイント- 本文 14px・幅 800px で読みやすいか（12.8px に戻すか）
- h2 の線と上の空きの量
- 表の縞・見出し行の色、列の幅
- 縦長の図解を 640px 幅で出す決まりでよいか
- 目次（h2 が4つ以上）の置き場所と2列組み
- 記事中広告（3つ目の h2 の前）の位置
→ 画像多め版（型B）を開く（本文の途中。「仮」の画像は差し替え予定の場所）
型B 番号つきリスト（10のこと）
「1〜10」の見出しが続く形。1項目ごとの長さがそろう。
揉むポイント- 番号見出しのリズム（h2 の間隔）
- 1項目の中の箇条書きの字下げ
- 図解1枚の入り方
→ 画像多め版（型C）を開く（本文の途中。「仮」の画像は差し替え予定の場所）
型C 戦略（研究メモ＋図解3枚）
ラボの考えを書く記事。図解と「ラボの研究メモ」の枠が多い。
揉むポイント- 図→キャプション 8px→2行空きのリズム
- 研究メモの枠（色つきの線）が本文からちゃんと分かれるか
- 図解が続くところの圧迫感
→ 画像多め版（型D）を開く（本文の途中。「仮」の画像は差し替え予定の場所）
型D カード評価（カード画像＋能力の引用）
### カード名 → カード画像（300px 左寄せ）→ 文面 → 能力の引用 → 解説。
揉むポイント- カード画像 300px に文がまわり込む見え方
- 能力の引用の枠（濃いグレー）
- ### の左の線で区切りが分かるか
- 4枚ぶんのリズム・長さ（3万字）
→ 画像多め版（型D-2）を開く（本文の途中。「仮」の画像は差し替え予定の場所）
→ 画像多め版（型E）を開く（本文の途中。「仮」の画像は差し替え予定の場所）
型E 商品レビュー（写真＋仕様表＋購入）
写真（撮影前は枠）→仕様の表→計算→良い点／気になる点→どこで買える。
揉むポイント- 写真枠 800×450 の大きさ
- 購入リンクの枠（affbox）と公式ストアの行
- 仕様表の読みやすさ
→ 画像多め版（型F）を開く（本文の途中。「仮」の画像は差し替え予定の場所）
型F 時期もの（月報）
月ごとの数字と出来事。短い段落が多い。
揉むポイント- 数字の見せ方（表でよいか、太字でよいか）
- 日付の書き方（2026/10/27(Tue) 形式）
- 記事の短さに対する広告の数
→ 画像多め版（型G）を開く（本文の途中。「仮」の画像は差し替え予定の場所）
型G 速報
3行でわかる→公式の発表（出典の表）→内容→研究メモ→まだ分かっていないこと→更新履歴。
揉むポイント- 「3行でわかる」が最初に目に入るか
- 出典の表のリンク列の見え方（白の下線）
- 「まだ分かっていないこと」と更新履歴の置き場所
- サムネ：カードも図もないのでカテゴリのタイル（速報の色）
→ 画像多め版（型H-1）を開く（本文の途中。「仮」の画像は差し替え予定の場所）
→ 画像多め版（型H-2）を開く（本文の途中。「仮」の画像は差し替え予定の場所）
→ 画像多め版（型I）を開く（本文の途中。「仮」の画像は差し替え予定の場所）
