editorial-minimal

editorial-minimal

意見の明確な、ひとつのアイデンティティ。このパックが有効な間、ページ全体がひとつの言葉で語ります。ウェブサイトの形をした、印刷された新聞です。

1. カラーパレット（固定）

• 背景の紙色：#F5F1EA（温かみのあるオフホワイト）。暗いバリエーション：#EFEAE1。
• インク：#1A1A18（温かみのある、ほぼ黒）。セカンダリーインク：#6B675E。
• アクセント：バーミリオン #E34A2B（または #C73E1D のような濃い赤）。1ページにつき1色。
• 極細罫線：rgba(26, 26, 24, 0.14)。
• ほかの色は使いません。グラデーションは一切使いません。ダークモードのセクションは設けません。

2. タイポグラフィ（固定）

• ディスプレイ： 個性のあるセリフ体を使います。Fraunces、Newsreader、またはしっかりしたシステムセリフ体（Georgia、Charter）が候補です。サイズは clamp(2.8rem, 7vw, 6.5rem)、行間は詰めて（0.98～1.08）、ウェイトは標準にします。サイズで存在感を出します。
• ラベル／メタデータ： 等幅フォント（IBM Plex Mono、SF Mono、ui-monospace）またはスモールキャップを使います。大文字、字間 0.10–0.15em、11～13pxにします。
• 本文： すっきりしたグロテスク体、または16～18pxのセリフ体を使い、行の高さは1.6～1.7、最大幅は32～40emにします。
• 任意のエディトリアルな装飾：イタリック体のセリフ体による引用、ディスプレイサイズの大きなドロップキャップ（「01」など）。

3. 構成（固定）

• 非対称に分割したヒーロー： 7/12幅のカラムに大きな文字を配置し、右側に残る5/12幅には、番号とラベルを載せた細いインデックスカラムを置きます。
• 番号付きセクション： すべてのセクションは、番号（「01 — アプローチ」）と上部の極細罫線で始めます。ページが目次のように読める構成にします。
• あらゆる場所に極細罫線： カラム、行、フッターを1pxの罫線で区切ります。配置は正確にし、目に見えるグリッドの規律を保ちます。
• カードではなく行： 機能は、角丸のボックスを3つ並べるのではなく、罫線で区切った番号付きの行からなるエディトリアルなインデックスとして見せます。カードを使う場合は、角を直角にし、紙の上に紙を重ねたような色調のパネル（#EFEAE1）に、1pxのインク色の極細罫線を付けます。rounded-2xlは使わず、影を主役にしません。
• 余白：ヒーローのパディングは15vh以上、セクション間の間隔は96～160pxにします。

4. コンテンツの扱い

• 絵文字アイコンは使いません。 数字、タイポグラフィ記号（→、—、*）、または使う場合は描画したグリフをひとつだけ使います。
• 数値はエディトリアルに見せます。 極細罫線で区切った等幅書体の表に数値を配置します。アセットを一切使わずに、アートディレクションの行き届いた印象にします。
• ブラウザーの枠に入ったスクリーンショットは使いません。 プロダクトのビジュアルが必要な場合は、文字を載せた色調のパネルか、極細の枠線を付けた全面画像を使います。
• CTA： バーミリオンの塗りつぶした四角形のボタンをひとつと、すべて大文字のテキストのみのリンクをひとつ使います。同等のボタンをふたつ並べません。

5. モーション（ほぼなし）

• 入場アニメーションはひとつだけにします。スクロール時にコンテンツを400msかけてフェードさせながら8～12px上に移動し、ゆっくりしたイージングを使います。
• マイクロインタラクションはひとつだけにします。内部リンクは、ホバー時に背景サイズの仕組みを使って下線を表示します。ループ、パララックスの球体、浮遊するバッジは使いません。

6. チェックリスト（次の場合はページを不合格とする）

• 紙色／インク色／バーミリオン以外の色が使われている。
• 主要な面に6px以上の角丸がある。
• 見出しが約2.8rem未満、または幅が約22emを超えている。
• 本文のカラムが全幅になっている。
• 中央揃えの左右対称なヒーローになっている。
• UIに絵文字が表示されている。

---

迷ったときは、スイスの新聞ならどうするかを考えてください。