— v3 · Reading-first

Medium / note / Substack の
読みやすさを基準に、
少しだけ新しい風を入れる。

前回までの design-forward 路線は 逃げ だった。スマホでリーディングモードを使わずにスッと読めて、つい誰かにシェアしたくなる軽さが先。デザインは内容に従う。3 案とも同じ ep1 を載せた、声の違いだけ見比べてほしい。

TECH · 24-WEEK SERIES · 1/24
技師さんの craft が、
本当に試される時代へ
医療機器メーカーが、医療労働力を売り始めた。装置の話ではなく業態が変わった話。
CASE A · MEDIUM CLEAN

Medium のあのまま

余白と sans-serif で、ストレスなく読み終わる。

Medium の reading 体験をそのまま土台に。Inter + Noto Sans JP、白背景、深いブルー 1 色のアクセント。記事に 1 行の余分も置かない。新規読者が一番すんなり入れるし、SNS シェアの摩擦が一番低い。

  • 白 × 深ブルー、装飾は罫と頭文字のみ
  • Clap 142 / Comment / Share の 3 ボタン
  • 記事末に Subscribe カード 1 枚
  • Discussion + locked teaser (Inner Circle)
Open Case A
LifeLink Insights
TECH & MEDICINE · 24-WEEK SERIES
技師さんの craft が、
本当に試される時代へ
医療機器メーカーが、医療労働力を売り始めた。装置の話ではなく業態が変わった話。
CASE B · SUBSTACK WARMTH

Substack の温度

著者の顔と声が前に出る。Newsletter feel。

クリーム背景 + Lora の見出しで、紙の手紙 1 通を受け取った感じ。著者の役職と肩書きが byline で前に出る。記事中盤に Subscribe ブロックが 1 度だけ顔を出す Substack 流。Like / Restack / Comment / Share の 4 ボタン。

  • クリーム + 琥珀色アクセント、Lora 見出し
  • Publication header + subscriber 数表示
  • 記事中盤に inline Subscribe ブロック
  • Discussion 欄にロール表示 (技師長 / Investor)
Open Case B
001 / 024TECH
技師さんの craft が、
本当に試される時代へ
医療機器メーカーが、医療労働力を売り始めた。装置の話ではなく、業態が変わった話。
— 出典 9 件、本文中の数字注 + 末尾一覧
CASE C · JP EDITORIAL

日本語に最適化した静けさ

note の手軽さ × 雑誌の脚注。日本語が一番きれいに出る。

Noto Serif JP の見出し + Noto Sans JP の本文 + 行送り 2.0。出典は本文中の数字注 + 末尾一覧方式 (Medium / note / Substack ではほぼ見ない)。スキ + Comment + Share の 3 ボタン。長期で「読む価値のある書き手」のポジションを取りに行く。

  • 白 + 深緑アクセント、Noto Serif JP 見出し
  • セクション「01 / 02 / 03」エディトリアル番号
  • 脚注番号 + 末尾出典リスト ("fresh wind")
  • スキ + Comment + Share の 3 ボタン
Open Case C

3 案共通仕様

3 案とも同じ technical stack で実装する (実装フェーズで決まる)。違うのは reader 体験のトーンだけ。

Stack: Next.js 15 · Cloudflare Pages · Auth.js v5 · D1 + Drizzle · R2 · Stripe · Discord webhook · TipTap admin · Pagefind · Resend

Pricing v1: Reader 無料 / Inner Circle $10/月 or $102/年 ($8.5/月) / Premium 後置

Discord: 無料層 = #welcome / #reading-room / #public-questions。Inner Circle = #inner-circle-lounge / #early-access / #office-hours-RSVP / #archive-deep。Stripe webhook で role 自動付与。

仕事依頼: 個人 first / Gloversal corporate は escalation。両 CTA は記事下に 1 度だけ。

連載格納: /series/<slug>/<n>/ · TipTap admin Playground で Yoshi 手入力可。