1 ページから、サイトへ
もともとは 1 ページだけのサイトでした。アプリを並べて、連絡先を置いて終わり。作ったものが増えるにつれて、そこに収まらなくなりました。
作品ごとに書くべきことの量が違い、書きたいことも溜まっていく。ページを足せる構造に組み替えるところから始めています。
コンテンツを型で持つ
制作実績は TypeScript の配列として持っています。この配列から、一覧・詳細ページ・トップの抜粋・sitemap・構造化データ・OGP 画像がすべて生成されます。
作品を 1 つ足すときに触るのはデータファイルだけで、ルーティングは generateStaticParams が拾い、メタデータは generateMetadata が作ります。「ページは作ったが sitemap に載せ忘れた」「OGP が前の作品のままだった」という類の抜けが、そもそも起きない形にしています。
手で 5 ページ書くのと大差ない、と思うかもしれません。差が出るのは 6 個目を足すときではなく、全ページに共通の変更を入れるときです。パンくずを足す、構造化データの語彙を変える、カードの見せ方を変える。データ駆動にしてあれば 1 箇所で済みます。
見た目を語彙にする
配色や字送りは、各ページのインラインスタイルに散らばっていました。ページが 1 枚のうちは成立しますが、増えた瞬間に見た目が割れます。
色・罫・影・版面をトークンとして 1 ファイルに集約し、全ページがそれを参照する形にしました。配色を変えたいときに触るのは 1 箇所です。
計測されることを前提にする
受託の入口になるサイトなので、検索から入ってくる導線を落とさないようにしています。ページごとのメタデータと OGP、パンくず、構造化データを、コンテンツから機械的に生成しています。
書体も外部 CSS からの読み込みをやめ、ビルド時にセルフホストへ倒しました。フォントの解決を待って描画が止まるのを避けるためです。