Septentrionのトップページは3つのタブ（Septentrion／カピバランド／その他）を横スクロールで切り替える構成にしていましたが、改めて見返すと「箱は用意したけど中身がついてきていない」状態になっていました。
この記事では、実際に何を変えたのかをBefore/After形式で記録していきます。（反省記録です）
変更前の状態
洗い出した「スカスカ」の内訳はこの3つでした。
- GOODSセクションが3タブとも空 — 「作成中」「準備中」のプレースホルダーのみで、実質コンテンツがゼロの状態でタブを切り替えるたびに出てきていた。
- 「Septentrion」タブが独自コンテンツを持たない — NEWS・PRODUCTSともに、カピバランド／その他の内容を寄せ集めて表示しているだけで、タブとしての存在意義が薄かった。
- CHARACTERSも実質1体分しか中身がない — バランドにだけ紹介文があり、他タブは空欄または「準備中」表示。
実際に公開しているプロダクトは「進撃のカピバランド」と「BalloonBalloonStars」の2つのみ。3タブ×4セクションという2次元スクロールの箱に対して、今のコンテンツ量は明らかに見合っていませんでした。
今は「Septentrion」タブを親として、他タブの情報を集約したカードを作る、という大げさな作りになっています。GOODSもいずれ展開したくて準備していたのですが、まだ中身が存在しないので泣く泣く削除します（隠すだけなので、いつか復活させます）。
小カード・中カード・大カードでバランスよく配置しようと考えていたのですが、思いのほか難しかったです。
変更後の状態
3タブすべてからGOODSセクションを削除しました。PRODUCTSからCHARACTERSへの流れがすっきりつながり、空欄の箱で間延びしていた印象がなくなりました。
CSSの配色定義とJSのセクション順は、コードコメントとして残したまま消しています。中身ができたらfront-page.phpに該当セクションを戻すだけで復活する仕組みです。
次の変更：タブの廃止と絞り込みへの置き換え
続けて、「カピバランド」「その他」の横スクロールタブ自体をやめることにしました。シリーズ構成そのものは残したいので、PRODUCTSとCHARACTERSの見出し横に「すべて／カピバランド」の絞り込みボタンを置く形に変えます（今のところ「その他」の絞り込みは不要と判断し、「すべて」に含める形にしています）。
実装を進めていて気づいたのですが、フロントページ以外の共通ヘッダーにも同じ「カピバランド」「その他」タブがあり、フロントページの旧パネル構造（#capyvar-topなど）にリンクしていました。共通ナビである以上、中途半端にリンクだけ直すより筋が通らないと判断し、共通ヘッダーごと全廃止しました。呼び出していた6ファイル（ブログ記事・404・アーカイブ・トップブログ一覧・プロダクトページ2種）から呼び出しを削除し、テンプレートファイル自体も削除。関連する死んだCSSも一緒に掃除しています。
おまけの不具合：画面幅に比例して際限なく拡大する問題
絞り込みボタンを試してもらっている最中に、別の問題を教えてもらいました。画面を横に広げるほど、ヒーロー画像やカードがどんどん巨大化してしまうというものです。
原因はCSSの.sep-wrapに設定していたmax-width: 2560pxでした。ウルトラワイド対策のつもりで入れていた値でしたが、2560pxは実質「無制限」に近く、ヒーロー画像もカードもwidth: 100%で比例拡大する作りだったため、広い画面ほど際限なく巨大化していました。一般的なコンテンツ幅の上限として1400pxに変更し、広い画面では左右に余白ができる形に直しました。
ヒーロー画像自体も、5つの大きな星と光の筋だけを取り除き、「i」の点の星はそのまま残す形で差し替えました。ヒーロー画像は700×200から700×115まで小さくなり、ヘッダーがだいぶコンパクトになりました。
カードサイズも整理：小・中・大 → お知らせ用／コンテンツ用の2種類
最後に、カードのサイズ体系を見直しました。これまで「小カード・中カード・大カード」でバランスを取ろうとしていましたが、難しいと感じていた部分です。思い切って2パターンに統合しました：お知らせ用カードと、コンテンツ用カード（PRODUCTS・CHARACTERS共通）です。コンテンツ用カードはPC/タブレットで横3個、スマホでは今まで通り横2個並ぶようにしています。
SPサイト側の崩れも見つかりました
PC側のバッジはみ出しを直した後、開発者ツールの375px幅シミュレーションでは問題なさそうに見えていましたが、実機のスマホで見てもらうと、カードの文字サイズがデスクトップのまま縮んでおらず崩れていました。ブラウザ版を直すとSP側の見た目が崩れるのはよくあることなので、想定内の手戻りとして次で対応しました。
スマホ版NEWSカードの高さ調整
NEWSカードをスマホ幅で1列（横いっぱい）表示に変えたところ、今度は縦に長くなりすぎてスクロールしないと2記事目が見えない状態になりました。お知らせ一覧は「ざっと見て動きがわかればいい」くらいの軽さが欲しかったので、高さを2/3くらいに詰めて、カードの中に2記事分くらい見える大きさに調整しました。
.sep-card--news {
grid-column: span 12;
aspect-ratio: auto;
height: 150px; /* 220px から調整 */
}デプロイ後、実機相当の幅で確認して、カード内に2記事分がちょうど収まる高さになっていることを確認しました。
キャラクター紹介文を3行クランプ＋「…詳細」モーダルに
CHARACTERSカードの紹介文は、キャラクターによっては説明が長くなりがちで、カードの縦幅をむやみに広げてしまう問題がありました。そこで紹介文を3行までのクランプ表示にして、3行目の末尾に「…詳細」を添え、タップすると全文（画像つき）をモーダルで表示するようにしました。
「…詳細」をタップすると、タイトル・画像・全文を表示するモーダルが開きます。カードと同じ「タイトル→画像→本文」の順に統一しました。
