ui-craft-editorial

UI Craft — エディトリアル

あらかじめ定められたエディトリアルスタイル：雑誌、長文、コンテンツ優先。タイポグラフィで階層を表現し、レイアウトは読みやすさを支えます。

調整項目（固定）

• CRAFT_LEVEL = 9 — エディトリアルタイポグラフィを機能させるには高い完成度が必要です。Polish Pass は必須です。
• MOTION_INTENSITY = 4 — 読書体験に配慮します。表示時のフェードとリンクのホバーを使い、登場時の段階的なアニメーションは使いません。
• VISUAL_DENSITY = 3 — 読みやすい広いカラム、ゆとりのある縦方向のリズム、特集記事は1行に1項目とします。

Discovery ではこれらを再確認しないでください。確認するのはアクセントカラーとセリフ体／サンセリフ体の組み合わせのみです。

スタイルの基準

• 見出しにはディスプレイ用セリフ体、本文には人文主義系のサンセリフ体／セリフ体を使用します。
• ベースライングリッドを意識します。本文には leading-relaxed（1.7）を使用します。
• 読みやすい広いカラム max-w-[65ch]。縦方向にゆとりを持たせます。
• アクセントは強調に使用します。引用文、ドロップキャップ、リンクの下線などに使い、装飾には使いません。
• OpenType 機能を有効にします。必要に応じてスモールキャップ、合字、スタイルセット、等幅数字を使用します。
• 非対称でテキストを主体としたヒーロー。特集画像は大きく表示します。
• 動きは読書体験を尊重します。フェードのみとし、視線を読書からそらさないようにします。
• 黒い文字、暖色系／アイボリーのキャンバス、アクセントは1色。色は装飾ではなく、声として使います。

基本ルール（継承）

../ui-craft/SKILL.md のルールはすべて適用されます。このファイルではノブの既定値を上書きし、以下にスタイル固有のガイダンスを追加します。不要な装飾を避けるためのルールとクラフトのテストも、引き続きすべて適用されます。

スタイル固有の上書き

タイポグラフィ（最重要項目）

• ディスプレイ用：見出しや引用文には、Playfair Display、Fraunces、Lora、Source Serif 4 を使用します。
• 本文：Alegreya、Source Sans 3、ITC Charter、または人文主義系の組み合わせを使用します。本文の主書体に Inter を使わないでください。エディトリアルではなく、プロダクト UI のように見えます。
• 書体ファミリーは最大2つまで。ディスプレイ用を1つ、本文用を1つにします。
• 見出し：text-wrap: balance、font-optical-sizing: auto を指定し、大きなサイズでは字間を0またはわずかにマイナスにします。
• 本文：text-wrap: pretty、line-height: 1.7、font-feature-settings: "liga", "kern" を指定します。
• ドロップキャップは p:first-of-type::first-letter { float: left; font-size: 4.5em; line-height: 0.85; padding: 6px 10px 0 0; font-family: <display>; } で指定します。
• セクションラベルや著者名には、font-variant-caps: small-caps でスモールキャップを使います。
• OpenType 機能は任意で有効にします。選択したフォントが対応している場合は、font-feature-settings: "ss01", "cv11" を指定します。
• 引用文：セリフ体で大きく（1.75-2.25em）、アクセントカラーを1色使い、上部に短い罫線を置きます。

色

• キャンバス：アイボリーまたは暖色系の白 — oklch(98% 0.01 85) — を使用し、純白の #fff は使いません。
• 文字色：暖色系の黒に近い色 oklch(18% 0.01 40)。
• 使用色を制限します。黒、アイボリー／暖色系の白、アクセント1色のみです。
• アクセントはドロップキャップ、引用文、インラインリンクの下線、セクション罫線に使用します。必要のないボタンには使いません。

余白とレイアウト

• 読みやすいカラム：本文には max-w-[65ch] を使用します。ヒーローや特集画像は max-w-5xl までカラムの外に広げられます。
• 本文の縦方向のリズム：段落間の余白は、行の高さの0.6倍以上にします。
• 非対称のヒーロー：左揃えのディスプレイ見出しと著者名を配置し、その下または横に特集画像を置きます。
• セクションの区切り：全幅の区切り線ではなく、中央揃えの飾りまたは短い罫線を使用します。

動き

• スクロールで表示される際のフェードは、ヒーロー／特集画像のみに適用し、300-400ms の ease-out にします。
• インラインリンクのホバー：下線のオフセットを1px広げ、色をアクセントに変更し、120ms で遷移させます。
• 登場時の段階的なアニメーション、視差効果、読書の流れを妨げるページ遷移は使いません。
• prefers-reduced-motion を尊重し、すべての表示アニメーションを無効にします。

コンテンツコンポーネント

• 著者名：スモールキャップ、広めの字間、セカンダリテキストカラー。
• 日付と読了時間：等幅数字を使用し、箇条書き記号 · で区切ります。
• インライン画像：カラム幅いっぱいにするか、カラムの外まで広げ、その下にイタリック体のセリフ文字でキャプションを付けます。
• 引用ブロック：アクセントカラーの左罫線、セリフ体のイタリック、max-w-[55ch]。

最初に読む参考ファイル

../ui-craft/references/ から以下を読み込んでください。

• typography.md — このスタイルの主要な参考資料
• layout.md — 読みやすいカラム、リズム、階層
• color.md — 暖色系のパレット、アクセントの使い方
• copy.md — エディトリアルの文体、見出し、空の状態

関連する場合を除き、dashboard.md と sound.md は読み飛ばしてください。

このスタイルで避けるべきパターン

• 本文の主要フォントにInter、Geist、DM Sansを使うこと。エディトリアルではなく、プロダクトUIを連想させます。
• フォントファミリーを3種類使うこと。常に見出し用と本文用の2種類にします。
• 背景に純粋な#fffを使うこと。温かみを加えます。
• 本文にタイトなleading-tightを使うこと。読みやすさには1.6〜1.8が必要です。
• 引用文の背景への色付け、見出しへのグラデーションテキスト、セクション区切りへの絵文字。
• スクロールをトリガーにしたスタッガーやパララックス。読書の流れを損ないます。
• 記事にカードグリッドを使うこと。サムネイルと説明文を添えた縦並びのリストにします。
• デフォルトで見出しにサンセリフ体を使うこと。サンセリフの見出しが必要なら、ユーザーはおそらくミニマルなバリエーションを求めています。
• 見出しをすべて大文字にすること。常に文頭のみ大文字にします（著者名の小型大文字表記は例外です）。
• 背景色の強いピル型CTA。セリフ体のトーンに合わせ、インラインの下線付きリンクを優先します。