# DESIGN.md — 旅の帖面 / tabi-scrap > **使い方**: このファイルをプロジェクトに置き、AIに > 「DESIGN.md に従って◯◯のサイトを作って」と指示してください。 > ライセンス: 商用利用可・改変可・クレジット不要（AIっぽくないデザイン見本帳 / サードパーティートラスト） ## 1. コンセプト 旅人が宿帳に貼り込んだ切符・スタンプ・地図の切れ端。時間の積もった帳面の質感を、 **几帳面な人が組んだ静かなコラージュ**で表す。切り貼りは乱雑ではなく、几帳面に 角をそろえて貼られている。動かない。帳面は静止している。 **キーワード**: 帳面 / 貼り込み / 土色 / 几帳面 / 静止 **この見た目が向く場面**: 宿・旅館・ゲストハウス・喫茶・工芸店など、時間の積み重ねと 実直さを語りたい小規模事業者 ## 2. タイポグラフィ - 和文見出し: Zen Old Mincho / ウェイト 600 - 和文本文: Zen Old Mincho / ウェイト 400 / サイズ 16px / 行間 1.9 / 字間 0.03em - 欧文・数字（切符番号・日付・料金）: IBM Plex Mono / ウェイト 400・500。 和文本文中に地の文として混植しない。**必ず「切符の様式」として独立した小片 （宿札の番号、日付印、料金の数字部分）にのみ使う** - 見出しスケール: h1（帳面題箋）30px・縦書き（§9のコード例と同値。他のサイズにしない） / h2（節見出し）26px / h3（紙片内見出し）18px / キャプション 12.5px - 特記: **手書き風フォントは使用しない（排他・禁止）**。「手の気配」は書体でなく 紙片の**わずかな回転・重なり・目打ち線**で出す。見出しは字間 +0.06em でゆったり組み、 帳面らしい落ち着きを保つ ## 3. カラー（earth・7色固定） | 役割 | 値 | 使用比率の目安 | |---|---|---| | 藁半紙（地・帳面の紙） | #f3ecd6 | 60% | | 藁半紙・節替え | #ece2c3 | — | | 茶墨（本文・見出し） | #43392e | 30% | | 茶墨弱（キャプション・フッター文字） | #6b5e4d | — | | 土（罫線・タグ枠・アイコンなど非テキスト専用） | #8a6f52 | 6% | | 土の文字色（帖タグ等、文字に土系を使う場合は必ずこちら） | #6e5638 | 2% | | 錆浅葱（節区切り線・切り抜き枠など非テキスト専用） | #5f7d78 | — | | 錆浅葱の文字色（経路番号等、文字に錆浅葱系を使う場合は必ずこちら） | #46615c | — | | 消印の朱（スタンプ・点使い限定） | #b8452c | 2%以下 | ※朱（--color-stamp）を文字色（点強調）に使ってよいのは **--color-bg（#f3ecd6）上のみ** （実測4.53:1でAA適合）。**--color-bg-alt（#ece2c3）上では実測4.14:1でAA未達のため、 bg-altが背景になる節・要素の内部では朱を文字色に使わない**。朱の点強調を持つ紙片・枠 （宿札・カレンダー枠等）は、節背景がどちらでも影響を受けないよう、当該紙片自身に `background: var(--color-bg)` を明示すること（.ticket-edge が既にこの実装をしている） - 配色ルール（排他・この構成以外を追加しない）: **`--color-soil` / `--color-asagi` は 罫線・枠線・アイコンなど非テキスト要素専用**（実測 3.97:1 / 3.79:1＝非文字要素の WCAG基準3:1は満たすが、本文サイズの文字色としての4.5:1には届かないため）。 **文字色として土・錆浅葱の色みを使いたい場合は、サイズや太さに関わらず必ず `--color-soil-text`(#6e5638・地に対し5.83:1) / `--color-asagi-text`(#46615c・地に対し5.69:1) を使う**（「18px以上かつ600ウェイト以上なら装飾色のまま文字に使ってよい」という サイズ依存の例外運用はしない。過去にこの例外運用で `.section-no` 12px に `--color-soil` を直接使ってしまいAA未達になった反省から、文字用途は常に専用トークンに分離する）。 朱は実測4.53:1で小文字でも規定を満たすが、面積は「スタンプ・点」用途に限定する （見出し全体やボタン全面には使わない）。`--color-line` は罫線専用（地に対し1.6:1のため 文字色には一切使わない） - 土・錆浅葱を**背景の塗り**として使う場合、その上に置く文字は必ず藁半紙地に置いた 別片（インセット）にする。段落本文を土/錆浅葱の面の上に直接置かない - 固定9色の値そのもの以外に、それらへ opacity や rgba() のアルファ値を適用した 派生色を文字色として新たに作らない（背景が変わる業種転換時にAA基準を割り込む リスクがあるため）。半透明表現が必要な場合も、文字要素には適用禁止とし、 文字色は必ず表内の9色のいずれかをそのまま使うこと。特に、地に対して4.5:1 ぎりぎりの派生色を作らないこと。既存の `--color-soil-text`（5.83:1）・ `--color-asagi-text`（5.69:1）のような十分な安全マージンを持つ専用トークンの 追加が必要な場合のみ、新たなCSS変数として定義しこの表に追記する運用にする ## 4. レイアウト・余白（collage） - コンテンツ最大幅: 1040px（帳面の見開き幅）/ 品書き・帖面本文は 720px の狭い版面 - **紙片コラージュの型**: 部屋紹介＝「宿札」風の短冊（縦長、目打ち線の上辺、 切符番号を左上にIBM Plex Monoで配置）。地図・周辺案内＝「切り抜き」風の枠 （四隅にトンボ状のL字罫線を配置した枠、錆浅葱の細罫。矩形の角を切り欠くのではなく、 矩形の外周はそのままに四隅へL字マークを重ねる。実装は§9参照）。旅の記録＝「貼った便箋」（横長矩形、 角にテープ跡、右上に消印スタンプ） - **回転は -1.5deg 〜 1.5deg まで（排他・厳守）**。0度に近い微差の集合で「几帳面に 貼った」印象を作る。zine-collage のような ±5度超の大胆な回転・入り乱れた重なりは禁止 - **重なりは各節につき1〜2箇所まで**（テープが紙片の角に少しかかる程度）。 紙片同士を雑然と何枚も折り重ねない。整列を基本とし、コラージュは「わずかな崩し」に留める - セクション間余白: 96px 基準 / 要素間は 8px の倍数 - ヒーローの構成: **中央寄せの特大見出し＋ボタン2つを作らない。** 帳面の表紙を模した 型（§5参照）。ボタンはヒーローに置かない。予約導線はナビと末尾の「予約と行き方」節に限定する ## 5. コンポーネントの質感 - **節見出しの帖タグ（eyebrow に代わる装置）**: 各節の見出し直上に、検印風の 紙片・切符などコンポーネント個別の番号ラベルも和文（漢字略称＋番号。例:「宿-01」「便-03」）を 基本とし、英字表記（TICKET No.01 等）にしない。英字は§9の定めるブランド副題等の限定用途のみ 角枠タグ「帖ノ壱／帖ノ弐／帖ノ参／帖ノ四」を置く。**英字ラベル（"01 — ROOMS" の ような番号+ラテン英字の直訳）は使わない（排他）**。土の文字色（`--color-soil-text`） で1px角枠＋和文の通し呼称のみを組む。この帖面固有の呼び方（帖ノ壱〜四）を使うことで、 最近傍パターン letterpress-sincerity の `.sec-num`(番号)+`.sec-en`(英字ラベルを 右寄せで併記) という「番号+ラテン語彙」の型から意匠面で明確に離す - ヘッダー・ナビゲーション: 藁半紙地・茶墨文字・下線なし。ナビはホバーで ホバーで朱の下線が現れる変化は、宿札状のリンク片（ボタン代替リンク）にも同様に `transition: border-color 0.15s ease;` を明示適用する（ナビだけに書いてリンク片で 書き漏らさない） **朱の下線のみ**が現れる（色替え不要、下線1本、0.15sで十分。他の装飾は付けない） - 角丸: 0px（全紙片・全要素直角）/ 影: 使わない。奥行きはテープ跡の色面と 紙片の重なりの前後関係（z-index 1段のみ）で出す - **切符の目打ち線（ticket-edge）**: 宿札の上辺に破線状の穴を模した縁を作る。 実装は §9 参照（CSSグラデーション関数は使わず、地色の円を描いたSVGデータURIを `background-repeat: repeat-x` でタイル化して「ミシン目」を表現する） - **消印スタンプ**: 円形・二重の枠線・朱色・わずかにかすれた質感（SVG feTurbulence を displacement に使い縁を欠けさせる）。旅の帖面の各便箋につき1個のみ、右上に配置 - **セロテープ跡**: 半透明にしない。`--color-tape: #e4cd94` の**不透明な色面**を 矩形（幅 46px 高さ 20px 目安）で紙片の角に重ね、わずかに回転させる - ボタン: **原則使わない。** 誘導はすべて下線付きテキストリンクか、宿札・切符状の リンク片（枠線＋角の目打ち＋ホバーで朱下線）で行う - カード的要素（宿札・便箋・切り抜き枠）: 罫線1px（土 or 錆浅葱）＋わずかな回転。 角丸なし。影なし - フォーム要素: 使う場合は藁半紙地・1px 土罫線・角丸0・フォーカス時に罫線が朱に変わる - 画像の扱い: **写真は使用しない（排他）**。図版はすべて自作インラインSVGの線画 （灯台マーク、自転車アイコン、経路図など）で統一。線幅 1.5px、色は茶墨 or 土 or 錆浅葱のみ - アクセント色の適用範囲: 朱は「①消印スタンプ ②ホバー時の下線 ③料金・切符番号の 1文字程度の点強調」の3用途に限定。面（背景）に朱を使わない ## 6. モーション - 量: **static（一切動かさない）**。帳面は静止している。スクロール連動アニメ・ フェードイン・パララックス・カウントアップは使わない - 許される唯一の動き: リンク／ナビのホバー時に**朱の下線が現れる**変化のみ （0.15s ease、下線の出現のみ。色替え・拡大・影は付けない） - 使わない動き: opacity/translateのスクロール出現、数字カウントアップ、 カルーセル、マーキー、パララックス、ホバーでのtranslateY・拡大・影増し ## 7. 写真・イラスト・図版 - 写真は一切使用しない（排他・slop罠回避の核）。すべて自作インラインSVGの線画で統一 （灯台マーク、自転車、経路図の点線ルート、スタンプ、封筒の折り目線） - 地図は写実的な地図画像を使わず、**typographic な経路図**（番号つきの直線ルートと 分数表記）を切り抜き枠の中に組む ## 8. 禁止事項（must not） - 手書き風フォント（Klee One / うずらフォント等の手書き系）を一切使用しない （排他。手の気配は紙片の回転・重なり・目打ち線でのみ表現する） - 回転角を ±1.5deg を超えて使わない（zine-collage 系の大胆な回転・入り乱れた 重なりと混同しない。本作は土色の静かな貼り込み帳） - 紙片の重なりを各節2箇所を超えて多用しない（雑然とした散らかしにしない。 帳面は几帳面な人が貼ったもの） - 写真（実写・ストック風含む）を一切使用しない - `--color-soil` / `--color-asagi`（装飾トークン）を文字色として直接使わない （§3参照。罫線・枠線・アイコン用途に限定。文字に使う場合は必ず `--color-soil-text` / `--color-asagi-text` を使う）。`--color-line` も文字色に使わない （罫線専用）。朱を面（背景）として塗らない - 節見出しの装置に英字ラベル（"01 — ROOMS" 等、和文見出しの直訳を添えるだけのラテン語） を使わない（§5参照。帖ノ壱〜四のような帖面固有の和文の通し呼称を使う） - 中央寄せの定型ヒーロー（特大見出し＋サブコピー＋ボタン2つ）を作らない。 ヒーローに予約ボタンを置かない - Inter / Roboto / Arial / システムフォントのデフォルト依存をしない （Zen Old Mincho / IBM Plex Mono の指定に従う） - 絵文字をアイコンとして使わない（線幅を統一した自作インラインSVGのみ） - グラデーション・box-shadow のぼかし・backdrop-filter を使わない （奥行きはテープ色面と紙片の重なりのみで表現する）（目打ち線もrepeating-radial-gradient等の CSSグラデーション関数ではなく、SVG円のタイル画像で実装すること。slop-scanは repeating-radial-gradientも含め全てのgradient関数を検出対象とする） - セロテープ跡を半透明（rgba＋blur等）で表現しない。不透明な色面で表現する ## 9. 実装ノート ```css /* tokens.css — この変数セットをそのまま使うこと */ :root { --color-bg: #f3ecd6; --color-bg-alt: #ece2c3; --color-ink: #43392e; --color-ink-weak: #6b5e4d; --color-soil: #8a6f52; /* 罫線・枠・アイコンなど非テキスト専用 */ --color-soil-text: #6e5638; /* 文字に土系を使う場合は必ずこちら */ --color-asagi: #5f7d78; /* 罫線・枠など非テキスト専用 */ --color-asagi-text: #46615c; /* 文字に錆浅葱系を使う場合は必ずこちら */ --color-stamp: #b8452c; --color-tape: #e4cd94; --color-line: #cabb9a; /* 罫線専用。文字色には使わない */ --font-heading: "Zen Old Mincho"; --font-body: "Zen Old Mincho"; --font-mono: "IBM Plex Mono"; --space-unit: 8px; --radius: 0; --max-width: 1040px; --tilt-max: 1.5deg; } ``` - フォント読み込み: `https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap` - **回転クラス（-1.5deg〜1.5deg厳守。この6値以外を追加しない）**: ```css .tilt-a { transform: rotate(-1.5deg); } .tilt-b { transform: rotate(-0.8deg); } .tilt-c { transform: rotate(-0.3deg); } .tilt-d { transform: rotate(0.4deg); } .tilt-e { transform: rotate(0.9deg); } .tilt-f { transform: rotate(1.5deg); } ``` - **切符の目打ち線（ticket-edge）**: 上辺にミシン目を作る。**CSSグラデーション関数 （repeating-radial-gradient 等）は一切使わない（§8参照）**。地色の円を `data:image/svg+xml` のインラインSVGとして1個描き、`background-repeat: repeat-x` でタイル化してミシン目を表現する: ```css .ticket-edge { position: relative; border: 1px solid var(--color-soil); background: var(--color-bg); } .ticket-edge::before { content: ""; position: absolute; top: -5px; left: 0; right: 0; height: 10px; /* ミシン目の穴を地色の円タイルで表現（gradient関数は使わず、SVGの円をタイル化） */ background-image: url('data:image/svg+xml;utf8,'); background-repeat: repeat-x; background-size: 12px 10px; background-position: 6px 0; } ``` ※ SVG内の `fill` は `--color-bg`(#f3ecd6) 相当の地色を16進カラーコードで直書きする （data URI内でCSS変数は参照できないため）。地色トークンを変更した場合はこの `fill` 値も同時に更新すること。 - **地図・周辺案内の切り抜き枠（area-frame）**: §4の「切り抜き風の枠」は矩形の角を くり抜くのではなく、四隅すべてに幅16px・線幅相当2pxのL字型トンボ風マークを 重ねて配置する。色は `var(--color-asagi)` のみ（罫線・枠専用トークン。文字には使わない）。 HTML側は矩形要素の中に `.corner.c-tl` / `.c-tr` / `.c-bl` / `.c-br` を1個ずつ配置する: ```css .area-frame { position: relative; border: 1px solid var(--color-asagi); padding: 40px 32px; } /* 切り抜き枠の四隅マーク（トンボ風のL字。写真コーナーの代替として自作） */ .area-frame .corner { position: absolute; width: 16px; height: 16px; } .area-frame .corner::before, .area-frame .corner::after { content: ""; position: absolute; background: var(--color-asagi); } .area-frame .corner::before { width: 16px; height: 2px; } .area-frame .corner::after { width: 2px; height: 16px; } .c-tl { top: -1px; left: -1px; } .c-tl::before { top: 0; left: 0; } .c-tl::after { top: 0; left: 0; } .c-tr { top: -1px; right: -1px; } .c-tr::before { top: 0; right: 0; } .c-tr::after { top: 0; right: 0; } .c-bl { bottom: -1px; left: -1px; } .c-bl::before { bottom: 0; left: 0; } .c-bl::after { bottom: 0; left: 0; } .c-br { bottom: -1px; right: -1px; } .c-br::before { bottom: 0; right: 0; } .c-br::after { bottom: 0; right: 0; } ``` ```html
``` - **消印スタンプ（自作SVG。かすれは feTurbulence の displacement で表現。写真・既製素材不使用）**: ```html ``` ```css .postmark { color: var(--color-stamp); } ``` 色は `var(--color-stamp)` のみ。1紙片につき1個。面積が大きくならないよう 56〜72px に収める。 - **セロテープ跡（不透明色面。半透明にしない）**: ```css .tape { position: absolute; width: 46px; height: 20px; background: var(--color-tape); /* 不透明。rgba/blurを使わない */ transform: rotate(-4deg); } ``` - **帳面題箋（ヒーローの縦書き見出し）**: 必ず `

` でマークアップする （divやpで実装しない。ページ内のh1はこの題箋1箇所のみ）: ```html

灯台屋旅の帖面 — 尾道

``` ```css .cover-title { writing-mode: vertical-rl; font-family: var(--font-heading), serif; font-weight: 600; font-size: 30px; /* §2の見出しスケールと同値。40pxや32pxにしない */ letter-spacing: 0.24em; color: var(--color-bg); border: 1px solid var(--color-bg); padding: 30px 12px; } ``` - 数値（切符番号・日付・料金）は `font-family: var(--font-mono), monospace;` を明示し、 和文本文の `var(--font-body)` と混植しない（切符片・スタンプ・料金表記のみに限定） - 藁半紙のノイズは `feTurbulence baseFrequency 0.7前後 / opacity 0.045前後 / mix-blend-mode: multiply` を body::after に敷き、他パターン（letterpress-sincerity・kissa-melancholy）と 周波数を変えて識別できるようにする