Brief
商品を売るのではなく、素材の背景を知りたい読者が、工程と時間を自分の速度で理解できる記事を作る。
選んだ方向
山桜を題材に、4節の本文、3図版、5参考文献、目次と脚注の往復を組み合わせた。
なぜ
型録に不足していたのは、既存LPを別の色で見せることではなく、文章中心の読み進みを設計する証拠だった。
成果物
読み物本体、現在節に追従する目次、出典付き図版、参考文献、次に読む順序リスト。
WHY / READING
記事そのものを、
成果物にする。
h1からCTAへ送るのではなく、来歴→工程→時間変化→素材選択という理解の順序を本文に埋め込んだ。
節
4つのh2が、読者が今いる場所と次の論点を示す。
4 sections図版
写真を使わず、木目・時間・選択軸を模式図と標本で示す。
3 figures脚注
公開資料と架空の自主制作記録を区別し、本文と往復する。
5 refs連載
実装済み1件と、これから2件を順序リストでつなぐ。
nextVALIDATION / NAVIGATION
読んでいる箇所を、
失わない。
スクロールスパイは進捗メーターではなく、長文の現在地を示す目次として実装する。
目次
4つの節アンカーをdesktopのsticky目次とmobileのdetailsへ同期。
現在節
viewport中央より上にあるh2のうち最も下の1つだけをcurrentにする。
脚注
番号→参考文献→本文へ戻る。5件のIDを1対1で管理。
補足
図版のdetailsは追加説明だけ。説明1文と出典1行は常時表示。
TRANSFER / SERIAL
転用の勘所
食品
生産地、仕込み、季節変化を章立てし、加工の背景を読む。
伝えるクラフト
素材、道具、工程、手入れを本文と図版でたどる。
探す工房
公開資料と内製記録を出典ラベルで分け、信頼の範囲を示す。
記録印刷
画面の目次を消しても、本文と根拠が紙に残る。
printMETA / SELF-MADE
制作メタ
種別
自主制作モック / 検証済み試作
題材
山桜という素材 —— 淡い赤みが飴色に変わるまで。
技法
本文と参考文献の往復、IntersectionObserver、inline SVG、CSS print。
制約
CMSなし、APIなし、画像なし。ref-1以外は架空の自主制作記録。