magazine-poster

マガジンポスターのスキル

日曜紙から切り取ったような、1ページのエディトリアルポスターを制作します。長文で、じっくり読ませる、タイポグラフィ主導のデザインです。

ワークフロー

1. 有効な DESIGN.md を読む（上に挿入されています）。DS の中から、見出しには最もウェイトの重いセリフ体トークン、本文の段組みには本文用セリフ体、セクションの小見出しと注釈にはタイプライター体／モノスペース体のトークンを選びます。
2. ブリーフからトピックを選ぶ。意見が明確に伝わる、本物らしい見出しを書きます。取り消し線を引いた単語（「デザイナー」「テンプレート探し」）と、重要な名詞に付けるイタリックのアクセント（「初稿」「ムード」「具体性」）をそれぞれひとつ含めます。
3. 次の順にレイアウトします。
   • 上部の罫線 — 細い黒のヘアラインと日付欄（左に「01 · A · あなたのラボ」、右に「DD · MMM · YYYY」）。軽めのタイプライター体。
   • 上部の小見出し — 「本日投稿」のような、モノスペース体のタグをひとつ。
   • 見出し — 大きなセリフ体で2〜3行。text-decoration: line-through; text-decoration-thickness: 2px を使って単語に取り消し線をひとつ引きます。アクセントカラーで単語をひとつイタリックにします。
   • デッキ — 見出しの約60％のサイズで、イタリックのセリフ体を使った1〜2文の小見出し。ダッシュの区切りと、アクセントカラーのコールアウト「— 効果的な方法」を含めます。
   • アクセントの罫線 — 短い横長のアクセントカラーのバー（約80px）。
   • 本文グリッド — 2×3（または3×2）のグリッドに番号付きセルを6つ配置します。各セルには以下を含めます。
     • 小見出し（01 · 素早く公開）はモノスペース体でアクセントカラー。
     • 太字のセリフ体による小見出し。
     • 本文用セリフ体による2〜3文の本文。
     • 注釈付きのコールアウトをひとつ。モノスペース体で組んだ、「このプロンプトを使う」という引用文を色付きの背景ブロックに配置します。
   • フッターバンド — 上部に罫線を引き、3つのセルにハンドル名／役割／日付を配置します。左側には、小さな「プロのヒント」のプレートと、締めくくりの一文を入れます。
4. 単一の HTML ドキュメントを作成します。
   • <!doctype html> から </html> までの HTML とし、CSS はインラインにします。
   • 背景にはクリーム色の紙のような色合い（#f3eee2 または DS のキャンバス）と、控えめな紙のノイズ（低い不透明度の radial-gradient のドット）を使います。
   • CSS Grid で本文を2列に配置し、ページの最小幅は1100pxにします。
   • ヘッダー、見出し、デッキ、各セル、フッターに data-od-id を設定します。
5. セルフチェックします。
   • タイポグラフィの階層が明確で、見出しがページの主役になっていること。
   • 取り消し線とイタリックのアクセントが、それぞれちょうど1回ずつ使われていること。
   • 本文に実際の意見が込められ、ダミーテキストになっていないこと。
   • 幅1280〜1440pxで意図したとおりに見えること。

出力仕様

<artifact> タグで囲んで出力します。

<artifact identifier="poster-slug" type="text/html" title="Poster Title">
<!doctype html>
<html>...</html>
</artifact>

アーティファクトの前に一文だけ記載し、その後には何も記載しません。