開発eurekapu-nuxt4

やったこと

eurekapu-nuxt4 の cashflow-statement/reference ページを4箇所いじった。トップの空白を280pxから90pxへ削り、右コンテンツに見出しを移し、31トピックを「基礎知識→株主資本→運転資本→借入金→固定資産→法人税」の企業ライフサイクル順へ組み替え、最後に7セクションの境界を画面に明示した。簿記3級ノートのフェーズ表示と並べたとき、右ペインの読み口が同じテンポで揃うところまで詰めた。

背景

実務リファレンスを開いた瞬間、ツールバーが画面の下半分まで押し下げられていた。280pxの余白がスクロールを誘発し、31トピックが意図のない五十音順で並んでいた。トピックを上から眺めても「いま何の話か」が掴めない。サイドバー内に長いグレーの説明文が居座って、ナビ列が重く沈んでいた。同じVueプロジェクトの簿記3級ノートはフェーズ表示が効いていて、開いた瞬間に章立てが目に飛び込む。リファレンスもあの読み口に合わせる。

実装の流れ

1. トップエリアを280px→90pxへ圧縮

ツールバー上部の余白を削り、ツールバー自体もコンパクト型に詰めた。検索ボックスとフィルタを横一列に並べ、高さを抑える。

<div class="ref-toolbar">
  <input v-model="query" class="search-input" placeholder="検索" />
  <select v-model="filter" class="filter-select">...</select>
</div>

.ref-toolbar {
  padding: 8px 12px;       /* 24px から削った */
  gap: 8px;
  display: flex;
  align-items: center;
}

狭い画面では flex-wrap: wrap で2段組に逃がす。タブレット幅で検索ボックスが潰れる事故を、書き直しの途中で2回踏んだ。

2. 右コンテンツに topic-header を新設

サイドバーに居たグレーの説明文を右ペインへ移し、タイトル＋説明をひとつのヘッダにまとめた。左ナビは見出しだけのシンプルな列に戻す。

<div class="topic-header">
  <h2>{{ topic.title }}</h2>
  <p class="topic-desc">{{ topic.description }}</p>
</div>

ナビ側からテキストが消えると、トピックを目で追う速度が変わった。31項目のリストが「目次」として機能し始める。

3. 31トピックを企業ライフサイクル順に並び替え

意図を持って順序を組み直した。会社が生まれて死ぬまでのお金の流れに沿わせる。

  1. 基礎知識（CFの読み方）
  2. 株主資本（出資→配当）
  3. 運転資本（売掛・買掛・棚卸）
  4. 借入金（調達→返済）
  5. 固定資産（投資→減価償却）
  6. 法人税（納付）
  7. その他（注記・例外論点）

並び替え後、トピック数とslugの突合をスクリプトで回した。31件のslugリストを Set で重複検出し、漏れと重複がゼロであることを確認する。

const slugs = topics.map(t => t.slug)
const dup = slugs.filter((s, i) => slugs.indexOf(s) !== i)
console.assert(dup.length === 0, `重複: ${dup}`)
console.assert(slugs.length === 31, `件数違反: ${slugs.length}`)

4. 7セクションに区切ってフェーズ感を出す

簿記3級ノートのフェーズ表示と並べる。型に section フィールドを足し、ナビ側のテンプレートをセクション見出し付きへ書き換えた。

type Topic = {
  slug: string
  title: string
  description: string
  section: SectionKey   // 追加
}

<div class="nav-col">
  <template v-for="sec in sections" :key="sec.key">
    <div class="section-header">{{ sec.label }}</div>
    <NuxtLink
      v-for="t in topicsBySection[sec.key]"
      :key="t.slug"
      :to="`#${t.slug}`"
    >
      {{ t.title }}
    </NuxtLink>
  </template>
</div>

nav-col を display: block に切り替えた。Miller列の display: flex のままだと、セクション見出しがトピックと同じ行に押し込まれて潰れる。セクション内側はトピックを2カラムで保持し、密度を維持した。

レスポンシブと検索結果の収まり

ツールバーは狭い画面で段組に落ち、検索ボックスの横にフィルタが回り込む。検索結果の表示時、結果カードの max-width がコンテンツ列と揃っているかを画面で確認した。最初は結果カードが画面端まで伸びてヘッダの幅と食い違っていた。max-width: var(--content-width) を当てて揃える。

動作確認

Chrome DevTools MCP で localhost:3000/cashflow-statement/reference を開き、トップエリアの高さをDevtoolsの定規で実測した。280pxから90pxまで縮んでいる。31トピックがライフサイクル順に並び、7つのセクション見出しが一定間隔で挟まる。検索で「減価償却」と打つと結果カードがコンテンツ幅で揃った。

agent-browser ではなく Chrome DevTools MCP を使ったのは、レイアウトのpx計測とCSSのライブ書き換えをDevtoolsで往復したかったため。

学びメモ

  • 280pxの余白は「ツールバーが下に沈む」のではなく「ファーストビューが空白で埋まる」事故として効いていた。90pxに削った瞬間、トピックリストが画面に乗ってきた
  • サイドバーから説明文を右ペインに移したら、ナビ列が「目次」として読めるようになった。テキストの居場所をひとつ動かすだけで列の役割が変わる
  • 五十音順のリストを企業ライフサイクル順に組み替えたら、リスト全体が「会社のストーリー」に化けた。順序は単なる並び替えではなく、文脈を生む装置になる
  • セクション見出しをナビに挟む構造変更で、flex を block に切り替える必要が出た。Miller Columnのレイアウト原則を一段崩して、セクション内側だけ2カラムに戻す折衷で着地

次にやること

  • セクション見出しをスティッキーにして、スクロール中も現在地が画面に残るようにする
  • トピック数が増えた時のために、セクション折りたたみのトグルを追加
  • ライフサイクル順の意図を、ヘルプモーダルで読者にも伝える文案を書く