retro-print

retro-print

ひとつのアイデンティティ：ドラムから刷り上がったばかりのリソグラフポスター — まっすぐな印刷、ありのままの見当ずれ。

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

• 紙：#F4EDDE（温かみのある印刷用紙）。代替パネル：#EBE2CF（やや色が沈んだ紙）。
• インク：#21201C（印刷用の黒）。
• インク — 最大でも2色のみ：リソレッド #E4572E とリソブルー #355E8C。要件で1色だけ必要なら赤を使います。2色なら赤＋青です。3色目は決して使いません。
• グラデーション禁止、アンチエイリアスのかかったような影禁止（box-shadow のぼかしは禁止）、純白の背景禁止、ブラウザー内のスクリーンショット禁止。

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

• ディスプレイ： ウェイトがひとつの、コンデンス体／ポスター向け書体（Anton、Archivo Narrow 800、またはシステムで最も太い書体）。大文字、clamp(2.8rem, 8vw, 7rem)、行間は詰めて 0.95〜1.0。編集記事のささやきではなく、ポスターの存在感を出します。
• 本文： 静かなセリフ体（Newsreader、Georgia）、16〜18px、行高 1.6〜1.7 — 雄弁なディスプレイとの印刷上のコントラストをつけます。
• ラベル／メタデータ： モノスペースの大文字（IBM Plex Mono）、letter-spacing: 0.1em、10〜12px、インク色または赤。
• シグネチャー： 見当ずれのオフセット — ディスプレイテキストに text-shadow: 2px 2px 0 var(--riso-red)（または青）を適用します。見出し2〜3個までに適用し、本文には決して使いません。ページごとにオフセットの方向はひとつだけです。

3. テクスチャとディテール（クラフト感が魅力を生みます）

• ハーフトーン： repeating-radial-gradient（8〜12px グリッド上に radial-gradient(var(--ink) 1.2px, transparent 1.3px)）でドットのフィールドを作り、ページあたり約2パネルまでにします。反転（インクのフィールドに紙色のドット）も1つとして数えます。
• 粗いエッジ： 要素をビューポートの端にぴったり配置してもかまいません。セクションの区切りには、フルブリードのインク色の罫線を使えます — 印刷の塗り足しであり、ウェブの余白ではありません。
• スタンプ： 丸またはピル形の中にモノスペースの大文字を置き、インク色の破線枠を付け、1〜3°回転させます。ページあたり最大2つ（例：ナビゲーションに1つ、クレジットに1つ）。スタンプは常に破線です。
• ハーフトーン数字： 赤の大きなディスプレイ数字（01、02）に青のオフセットを付けます。
• 絵文字は禁止。線画アイコンは禁止 — タイポグラフィのマーカー（✳、→、◆）か、ドットグリッドで描いたマークのみ使えます。

4. 構成（固定）

• ポスターグリッド： 非対称のカラム（5/7 または 4/8）。ビューポートごとに巨大な要素をひとつ置き、カードの代わりに罫線（インク色、1〜2px）で区切ります。
• ヒーロー： キッカースタンプ → 巨大なディスプレイ見出し（オフセットを適用） → 右寄せした 4/12 幅のセリフ体本文ブロック → その下に2行のモノスペースの奥付（「SKITTIE VOL. 02 — PRINTED IN FIVE COLORS」）。
• 特長： 番号付きの印刷インデックス — 細い罫線で区切った行に、大きな数字＋セリフ体の名称＋本文の説明を配置します。
• 価格設定： 3つのポスターカード — 紙／インクのフィールド（紙の種類）／紙＋赤。インク色の2px枠、角は直角にします。インクのカードを目立たせます。
• 写真（ある場合）：2色調にします — グレースケール → sepia → インク色に近づくよう hue-rotate、コントラストは 1.15、インク色の1.5px枠を付けます。可能なら薄いノイズで粒状感を加えます。

5. モーション（ほとんどなし — 印刷物は動きません）

• 出現アニメーションはひとつだけ：セクションが紙の着地のように、200ms でパッと上昇（6px）しながら表示されます。
• ホバー：リンクの色を100msで赤に切り替えます。漂わず、転がらず、視差もありません — 物理的な印刷物のように見せます。
• QRコードやアーカイブに関する冗談はコピーには使えますが、モーションには使えません。

6. チェックリスト（該当したらページは不合格）

• 使用するインク色が2色より多い（赤＋青が上限）。
• グラデーションまたはぼかした影がある。
• 純白の背景がある。
• 絵文字がある。
• ディスプレイ書体が大文字ではない、または約2.8remより小さい。
• 本文がサンセリフ体で組まれている。
• テクスチャがどこにもない（ハーフトーン、見当ずれ、スタンプがない）— これがアイデンティティです。
• 見当ずれのオフセットが本文に適用されている。