新卒NISAメモのメディア実装

この記事はCodex製です。

##依頼内容と課題

/media/shinsotsu-nisa を起点に、会社員1〜3年目向けの新NISAメディアを新規に立ち上げる依頼だった。

課題は、既存の ro1.dev/entry の口語に寄せた記事本文を大量に用意しつつ、WordPress系メディアらしい一覧、記事詳細、右サイドバー、パンくず、SNSシェア、関連記事、前後記事、OGP、RSS、sitemapを一つのデータソースから崩れにくく出すことだった。

##アプローチ

記事データを src/lib/media/shinsotsu-nisa に集約し、10個の読者状況と10個の検索意図を掛け合わせて、重複しない100本の記事を生成する構成にした。

各記事は著者を roi に固定し、本文は生活費、給与明細、少額積立、制度確認、失敗回避の順で構造化した。投資助言ではなく、金融庁などの一次情報を確認しながら生活を壊さない初動を決める読み物として設計した。

OGP画像は sharp で記事ごとに生成し、一覧サムネイル、記事冒頭、OGP画像で同じパスを使う。RSSとsitemapは記事データから動的に生成するため、新規記事をデータに追加すれば自動で反映される。

##アウトプット

/media/shinsotsu-nisa のトップ、100本の記事詳細、プライバシーポリシー、免責事項、/media/shinsotsu-nisa/sitemap.xml、/media/shinsotsu-nisa/rss.xml を追加した。

検証では validate:shinsotsu-nisa-media により、記事数100本、slug/title/descriptionの重複なし、全記事3000文字以上、著者 roi、関連記事導線、サムネイルパスを確認した。typecheck と git diff --check も通した。

Next build の型検証フェーズがローカルで停止したため、prebuild で tsc を明示実行し、Next build 側の重複した型検証をスキップする構成へ変更した。これは tsc 成功を前提にしたビルド環境対策であり、型エラーを無視してよいという意味ではない。

初回のCloudflare deployでは、記事ページをNextのpagesとして載せたためWorkerがfree planの3MiB上限を超えた。そこで新卒NISAメディアは静的HTML、RSS、sitemapを public/media/shinsotsu-nisa に生成する方式へ切り替えた。URLはrewriteで /media/shinsotsu-nisa と /media/shinsotsu-nisa/<slug> のまま維持する。

##参照した一次情報

Markdownで読む

次に読む

この記事を共有

Xで共有Facebookで共有はてなブックマーク