# デザイン方針: エディトリアル（Editorial / Magazine）

## 1. デザインコンセプト
「読ませるための構造」。タイポグラフィの階層と段組で、長い文章を美しく読ませる。装飾ではなく組版の精度で個性を出す。

## 2. デザインキーワード
組版 / 対比 / 段組 / 大見出し / 読み物

## 3. カラーパレット
- 背景 #FBFAF7: 紙白
- サーフェス #FFFFFF: カード（ほぼ使わない）
- 本文 #111111: インク
- 補足 #6B6B6B: キャプション・日付
- ボーダー #111111: 罫線。太さ1px/3pxの2種
- アクセント #C8102E: 朱。ドロップキャップ・リンク下線・カテゴリ

## 4. タイポグラフィ
- 見出し: 高コントラストのセリフ（Playfair Display / Noto Serif JP）。巨大（64〜96px）、ウェイト700、字間-0.03em
- 本文フォント: セリフ（Source Serif / Noto Serif JP）17〜18px。UIラベルのみサンセリフ
- 数字: オールドスタイル数字。ページ番号・日付は小さな大文字と組む
- ウェイト: 400 / 700。イタリックを引用に
- サイズ階層: 12 / 14 / 17 / 24 / 40 / 72px
- 行間: 本文1.8、見出し1.05、リード文1.5
- 字間: 見出しは詰める（-0.03em）、小さな大文字ラベルは+0.15em
- 和欧混植: 日本語は明朝、英字はセリフ。縦書きを部分的に使ってもよい

## 5. レイアウトルール
- スペーシングは行送り基準（本文の行間=1単位）
- 本文の行長は全角35〜40字（約640px）で固定
- 12カラムグリッドで、写真は本文幅をはみ出す（全幅・8/12など）
- 情報密度はテキスト主体で標準
- 角丸は0
- 太い罫線（3px）で記事の頭、細い罫線（1px）で区切り
- ドロップキャップ・引用の張り出し・キャプションの脇組

## 6. UIコンポーネントルール
- ボタン: 角丸0、黒の塗り+白文字、または下線のみのテキストボタン。Hoverで朱に
- カード: ボーダー・影なし。写真+カテゴリ（小さな大文字）+見出し+日付の縦積み。区切りは1px罫線
- 入力フォーム: 下線のみ。Focusで下線が朱に。ニュースレター登録が主用途
- モーダル: 全画面の白。閉じるは右上に「Close ×」テキスト
- タブ: 小さな大文字テキスト。選択は朱の下線
- ナビゲーション: 上部にロゴ中央・両脇にメニュー。細い罫線で挟む
- リスト: 番号は大きなセリフ、区切りは1px罫線
- バッジ: 小さな大文字+朱文字。背景なし
- アイコン: 極力使わない。使うなら極細線画
- トースト: 黒の帯にセリフの白文字。上部全幅
- 空状態: 大きなセリフの一文
- ローディング: 細い罫線が伸びる

## 7. 装飾ルール
- 罫線（1px / 3px）とタイポグラフィのみ
- 写真は大きく、キャプションを必ず添える
- ドロップキャップ・プルクォート（引用の抜き出し）を装飾として使う
- グラデーション・影・角丸・イラストは使わない

## 8. アニメーションルール
- duration 300〜500ms、easing は ease-out
- Hover は下線・色の変化のみ
- 写真はスクロールでゆっくりフェードイン
- 見出しは1行ずつフェード（控えめに）
- prefers-reduced-motion では静止

## 9. デザイン原則
- 行長・行間・字間の精度が全て
- 写真とテキストの大きさの対比を作る
- 装飾は罫線とタイポグラフィまで
- 読み終わるまで邪魔しない（固定バナー禁止）
- 見出しは短く大きく、リードは長く小さく

## 10. NGデザイン
- カード型のグリッド一覧（ブログテンプレ感）
- 角丸・影・グラデーション
- サンセリフだけの構成
- 本文の行長が長すぎる（80字超）
- スクロールを妨げる固定要素

## 11. 参考になるサービス・デザインスタイル
- The New York Times
- Kinfolk
- Bloomberg Businessweek
- Medium（初期）
- ほぼ日刊イトイ新聞

## 12. 一言で表現すると
画面の上の、よく組まれた紙面。

## サンプルUI
```html
<article class="ui">
  <span class="badge">Culture</span>
  <h3>余白は、沈黙ではない。</h3>
  <p class="lead">組版の精度が読み心地を決める。ページの上で文字がどう呼吸するかを、もう一度考える。</p>
  <p class="meta">2026.08.29 — 文・編集部</p>
  <label class="field"><span>Newsletter</span><input type="email" placeholder="you@example.com"></label>
  <div class="actions">
    <button class="btn primary">Subscribe</button>
    <button class="btn ghost">Read more</button>
  </div>
</article>
```
```css
.ui {
  width: 320px; padding: 20px 0; font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; color: #111;
  border-top: 3px solid #111; border-bottom: 1px solid #111;
}
.badge { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: #c8102e; font-family: Inter, sans-serif; font-weight: 600; }
h3 { margin: 10px 0 12px; font-size: 32px; font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
.lead { margin: 0 0 12px; font-size: 15px; line-height: 1.8; }
.lead::first-letter { font-size: 2.2em; float: left; line-height: 1; margin: 4px 6px 0 0; color: #c8102e; }
.meta { margin: 0 0 20px; font-size: 12px; color: #6b6b6b; font-family: Inter, sans-serif; letter-spacing: .05em; }
.field { display: block; margin-bottom: 16px; }
.field span { display: block; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; font-family: Inter, sans-serif; margin-bottom: 4px; }
.field input {
  width: 100%; box-sizing: border-box; padding: 8px 0; font-size: 15px; font-family: inherit;
  background: transparent; border: 0; border-bottom: 1px solid #111; outline: none; transition: border-color .3s ease-out;
}
.field input:focus { border-bottom-color: #c8102e; }
.actions { display: flex; gap: 16px; align-items: center; }
.btn { font-family: Inter, sans-serif; font-size: 13px; letter-spacing: .05em; cursor: pointer; border-radius: 0; transition: background-color .3s, color .3s; }
.btn.primary { padding: 10px 18px; background: #111; color: #fff; border: 1px solid #111; }
.btn.primary:hover { background: #c8102e; border-color: #c8102e; }
.btn.ghost { padding: 0; background: none; border: 0; color: #111; text-decoration: underline; text-underline-offset: 4px; }
.btn.ghost:hover { color: #c8102e; }
```