DESIGN.md Templates

Appearance

ニュース/メディア設計ガイド -- "Paper of Record" ​

ニュースメディアのUIデザインは、数百年の新聞デザインの伝統を受け継ぐ領域だ。読みやすさは装飾よりも重要であり、タイポグラフィの質が信頼性を左右する。華やかなアニメーションやグラデーションではなく、文字の美しさと情報構造の明快さで勝負する世界だ。

本記事では、ニューヨーク・タイムズと Medium という二つの偉大なメディアプラットフォームから着想を得た「Paper of Record」というデザインシステムを解説する。ニュースサイト、ブログ、オンラインマガジン、メディア系アプリなど、テキストコンテンツを主軸とするプロダクト全般に適用可能な実戦レベルのテンプレートだ。

核心となる設計思想

タイポグラフィが全てを語る。セリフ体の見出しは権威と格調を、サンセリフ体のUIテキストは機能性を担う。装飾を削ぎ落とし、文字そのものの力で情報を伝える。

1. デザイン哲学 -- 「記録の紙面」 ​

タイポグラフィファースト ​

このテンプレートの根底にある考え方は、「優れた新聞紙面」だ。

クリーンな白い背景は上質な紙、太い黒線はセクション区切り、セリフ体の見出しは記事の重みを伝える。UIの装飾は最小限に抑え、読者の視線を記事の文章に自然と導く。影はほぼ使わず、ボーダーラインと余白で構造を表現する。

ニュースサイトプレビュー ​

以下はこのテンプレートを適用したニューストップページの実例だ。セリフ見出し、カテゴリタグ、バイライン、太い黒線の全てが統合されている。

The Daily政治経済テクノロジー国際文化
購読する
LIVE国会審議：新たな経済対策法案の採決が本日午後に予定2分前更新
テクノロジー
AIが変える医療の未来：診断精度99%の衝撃
東京大学の研究チームが開発した新しいAI診断システムが、放射線科医を上回る精度で腫瘍を検出。医療現場への導入が加速する中、期待と課題が交錯する。
S
佐藤 一郎 ・ 2026年4月2日 ・ 8分で読めます
16:9 画像
経済
日銀、追加利上げを決定 — 市場は織り込み済み
10年ぶりの本格的な金融引き締めサイクルが始まる。住宅ローン金利への影響は...
田中 花子 ・ 5分で読めます
意見記事
コラムOPINION
リモートワークの終焉は幻想だ
オフィス回帰を強制する企業が増えているが、データは全く異なる現実を示している...
鈴木 太郎 ・ 7分で読めます
16:9 画像
国際
EU新環境規制、日本企業への影響を分析
2027年施行予定の炭素国境調整措置。輸出依存型の日本企業はどう対応すべきか...
山本 美咲 ・ 6分で読めます

2. カラーパレット ​

このテンプレートのカラーパレットは、ほぼモノクロームだ。白い背景に黒いテキスト、そして速報の赤。これだけで、ニュースメディアに必要な全ての表現が可能になる。

パレットストリップ ​

#1a1a1aprimary
#000000accent/link
#dc2626breaking
#7c3aedopinion
#e5e5e5border

3. コンポーネントプレビュー ​

ボタンバリエーション ​

ログイン
保存する
購読する
もっと見る

バッジ ​

BREAKINGLIVEOPINIONEXCLUSIVEPRNEWテクノロジーAI

タイポグラフィサンプル ​

見出しにはセリフ体が権威を与える
A
著者 太郎 ・ 2026年4月2日 ・ 5分で読めます
記事本文はセリフ体（Georgia）で、19pxのフォントサイズと1.80の行間を使用する。この組み合わせにより、長文を快適に読むことができる。行長は680pxに制限されており、目の移動距離を最適に保つ。
「優れたタイポグラフィとは、読者が文字の存在を忘れて内容に没入できる状態を作ることだ」

著者バイライン ​

S
佐藤 一郎
テクノロジー担当記者 ・ 東京
フォロー

4. 使用ガイドライン ​

適合するプロジェクト ​

  • ニュースサイト（NYT, 朝日新聞デジタル風）
  • ブログプラットフォーム（Medium風）
  • オンラインマガジン
  • 技術ブログ・テックメディア
  • 学術論文プラットフォーム
  • ドキュメンテーションサイト

適合しないプロジェクト ​

  • SNS・チャットアプリ（情報密度の方向性が異なる）
  • ゲーミングアプリ（視覚的インパクトが不足）
  • EC・ショッピング（商品ビジュアル重視ではない）
  • ダッシュボード（グラフ・チャートとの相性が悪い）

カスタマイズのポイント ​

  1. セリフフォント: Georgia 以外では Playfair Display, Merriweather, Noto Serif JP も好適
  2. ヘッダー下線: 3px の太い黒線がニュースメディアの象徴。ブランドカラーに変更可能
  3. 速報カラー: 赤 (#dc2626) は変更しないことを推奨（緊急性の普遍的シグナル）
  4. 本文幅: 680px がデフォルトだが、640-720px の範囲で調整可能

テンプレートファイル ​

完全な9セクションの DESIGN.md テンプレートは以下に格納されている:

/Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/templates/NEWS_MEDIA.md

Stitch への投入方法は NEWS_MEDIA.md 内の「Agent Prompt Guide」セクションを参照のこと。