ホームの「特集」の枠を外し、サムネイルを上に全幅で置く (#3241)

[ma91n]

Fixes #3241

何を

ホームの「特集」（旬の2枚）だけが囲みを持つパネルとして残っていた。枠（border 1px）と内側の余白（18px）を外し、そのぶんサムネイルを大きくした。器は #2790 の5つから**一覧カードの頭（card-thumb。幅100%・1200/630）**を選び、2列のカードの上に全幅で置く（.series-panels-boxed → .series-panels-stacked）。

2案を描いて比べた

どちらも枠を外した上で、サムネの器を 5 つの中から選ぶ。実際の / を 375 / 768 / 1280 で描いて測った（旬の2枚は「データエンジニアリング」連載と「フューチャーのガイドライン」）。

	現状（88×59・枠あり）	案A: 2列・サムネ上・1200/630	案B: 1列×2行・200×135 左
1280px 絵の寸法	88×59	386×202	200×135
768px 絵の寸法	88×59	324×170	200×135
375px 絵の寸法	88×59	351×184	200×135（文字列 139px）
説明文の行数 1280 / 768 / 375	3・2 / 4・2 / 4・2	2・1 / 3・2 / 2・2	2・1 / 2・1 / 6・4
節の高さ 1280 / 768 / 375	221 / 238 / 415	381 / 365 / 722	345 / 345 / 450
隣の枠の絵（1280）	ランキング 72×48・新着 257×135	同	同

隣の枠との空き（ランキング → 見出し 55px、節 → 新着の見出し 78px）はどちらの案でも変わらない。

案A にした理由

• 絵の大きさで隣と区別できるのは案A だけ。 1280px で特集の絵は 386×202、新着の頭は 257×135、ランキングは 72×48。案B の 200×135 は新着（257×135）より小さく、「強調のために選んだ2枚」の絵が並の一覧より小さくなる
• 案B は新着の続きに見える。 1280 / 768 では［200×135 のサムネ｜文字］が本文列の左端 x=82 から並び、その直下の新着の1件も［257×135 のサムネ｜文字］で同じ左端。見出し以外に切れ目が無い。案A の2列グリッドはランキング（行）とも新着（1列）とも違うリズムになる
• 狭い画面で案B は成立しない。 375px では文字の列が 139px しか残らず、説明文が 6 行 / 4 行、題も 2 行に折り返す。576px 未満で縦積みに切り替える追加の規則が要る。案A はそのまま新着の頭と同じ 351×184 で積み、説明文は 2 行 / 2 行
• 1200/630 が特集に来る絵の比に合う。 ガイドラインのロゴ 898×374（2.40）は 88×59 でも 200×135 でも左右が切れて「uture Architectu」と読めていた。HTTF のロゴ 640×280（2.29）も同じ。連載の索引記事のサムネ 133 本の比は中央値 1.66 で、3:2（1.5）より OGP（1.90）に近い

引き換えに、375px では節が 415px → 722px に伸びる（絵 184px × 2）。1枚の絵はすぐ下の新着の頭と同じ寸法なので、読者が下で見る形と揃う、と判断した。

変更

• themes/future/css-src/theme-styles.styl: .series-panels-boxed（枠・padding 18px・height: 100%・ガター 24px）を消し、.series-panels-stacked（flex-direction: column、サムネ幅100%・aspect-ratio: 1200/630、縦のガター 48px）にした
  • 縦のガターも 48px にしたのは、縦積みでは縦の隣も「上の文字 ↔ 下のサムネ」で、挟まる中の空き（12px）が横と同じになるため（特設ページコンテンツのパネルをやめてフラットに #3152 の「外の空きは中の空きの4倍」をそのまま縦に当てた）。横帯のグリッド（/series/ 等）は 24px のまま
  • 空き枠（.panel-thumb-empty）も同じ器。アドベントカレンダー・Tech Cast の回は絵が無いので全幅の空き枠が出る（行間を3段に、間隔を4の倍数に固定し、スタイルガイドに状態を足す #2864 の「場所だけ空けておく」のまま）
• themes/future/layout/_partial/archive.ejs: section の class を series-panels-stacked に。コメント更新
• themes/future/layout/_partial/panel-card.ejs: 冒頭コメントの「囲みも呼び出し側が持つ」を「向きも呼び出し側が持つ」に
• themes/future/layout/gallery.ejs: 見本「強調したパネル」→「特集のパネル」。本物の partial を呼ぶ形のまま、説明文と包みの class を更新
• source/specials/styleguide/index.md: 「影は持たない」の該当文を「枠線を持つのはリンクプレビューだけ」に。特集は間隔とサムネイルの大きさで区別する、を1文足した
• CLAUDE.md: 特設ページコンテンツのパネルをやめてフラットに #3152 の節を「パネルは囲みを持たない」に書き換え、特集の器と採らなかった案の理由を足した

series-panels-boxed はリポジトリから消えた（grep で 0 件）。

確認したこと

• make css → node css_lint.mjs && node font_size_lint.mjs && node ui_partials_lint.mjs すべて通過（部品 62 件・見本あり 27 / 理由あり 35）
• textlint source/specials/styleguide/index.md 通過
• hexo s で / を 375 / 768 / 1280・ダーク（1280）で描いて目視。ダークでは透過 PNG のロゴの下に白が敷かれる（ダークモードで透過した画像の下に白を敷く #3194）のはそのまま
• hover / focus / 押せる範囲（playwright で実測）
  • 説明文の上にカーソル → 題に下線・画像 opacity: 0.7。elementFromPoint が返すのは題の <a>（stretched link 特集パネルの説明文をマウスオーバーしてもリンクが活性化しない #3189 が効いている）
  • 「連載一覧へ」の上 → 題の反応が止まり、当たるのは /series/ のリンク（カードの中の別行き先リンクに乗っている間はカードの hover 反応を止める #3164）
  • 題に focus-visible → hover と同じ下線・画像 0.7（キーボードで記事の入口に来たときに、カードと行の反応が出ない #3168）
  • 説明文をクリック → /articles/20260630a/ へ遷移

確認してほしい URL とポイント

• / の「特集」: 枠が無く、2枚の絵が新着の頭より大きく出ること。375px で2枚が縦に積み、間が 48px あること
• /specials/gallery/#sample-panel-card: 見本が同じ形（右の1枚は全幅の空き枠）
• /specials/styleguide/#影は持たない: 文言
• 比較用: /series/（横帯のパネル。こちらは変えていない）

範囲外

• アドベントカレンダー・Tech Cast のパネルに絵を用意するかは別の判断（いまは空き枠）
• サムネの元画像は幅 300px（連載の索引記事）なので、1280px では 386px に拡大される。新着の頭が 375px で 351px に拡大しているのと同じ性質で、ここでは触っていない

🤖 Generated with Claude Code