デザインを実装に落とす

/design で見た目が決まったあと、実装に渡すまでにやったことの記録。 順番を間違えると作り直しになる箇所がいくつかあった。

先に決めておくと手戻りが減るもの

1. セクションの順番

見た目より先に決める。うちのトップページは最初、

ヒーロー → 作ったもの → WIKIと開発日記の2カラム → フッター

だったのを、

ヒーロー → WIKIと開発日記の2カラム → 作ったもの → フッター

に入れ替えた。ページを開いた時点で読み物が目に入るほうがいい、という判断だ。 これを見た目が固まったあとにやると、3案とも全部直すことになる。実際そうなった。

2. データの持ち方

デザインの段階では文字はベタ書きだが、実装では外から入る。 先に決めておくのは次の3つ。

• どこに置くか(うちは content/works/*.mdx と content/wiki/*.mdx)
• 必須項目は何か
• 空だったときに何を出すか

3つめを決め忘れると詰む。WIKIの記事が0本のとき、 左カラムに何も出さないと2カラムのバランスが崩れる。 「準備中」と出すことにした。ただしリンクにはしない。 存在しないページへ飛ばすと読者にも検索エンジンにも損になる。

3. 1行に収めたい文字がどこか

見出しを1行で見せると決めたので white-space: nowrap を当てた。 これはデスクトップ幅の話で、狭い画面では折り返させないと読めなくなる。

.hero h1 { font-size: 62px; white-space: nowrap; }

@media (max-width: 900px) {
  /* 1行に収まらない幅では折り返しを許す。詰まって読めないより良い。 */
  .hero h1 { font-size: 40px; white-space: normal; }
}

静的書き出しで踏んだ穴

Next.js を output: export で書き出している場合、 generateStaticParams() が空配列を返す動的ルートはビルドできない。

Error: Page "/wiki/[slug]" is missing "generateStaticParams()"
so it cannot be used with "output: export" config.

WIKIの記事が1本も無い状態で app/wiki/[slug]/page.tsx を置いたら、 これでビルドが止まった。関数は書いてあるのだが、返り値が空だと 「無い」と同じ扱いになる。

記事が揃うまでファイルの拡張子を変えて無効化しておき、 最初の1本を書いたら戻す、という運用にした。

一覧ページのほうは記事0本でも成立するように作ってあるので、 個別ページのルートだけ止めておけば穴は開かない。

旧デザインのトークンをどう捨てるか

CSSを全面的に書き換えると、古い変数名を参照しているページが取り残される。 うちは --slate-500 のようなインラインスタイルが /about に残っていた。

全ページを一度に書き直すと壊す範囲が広がるので、 古い変数名を新しい変数への別名として残した。

/* 旧デザインのトークン別名。ページ側を書き直すまでの互換。 */
:root {
  --slate-500: var(--ink-5);
  --slate-700: var(--ink-3);
  --slate-900: var(--ink);
}

見た目は新しい配色に寄り、ビルドも通る。 残っているページを直したら別名ごと消す。

消す前提のものは、消す条件をコメントに書いておかないと永久に残る。