# DESIGN.md — 画廊の回遊 / gallery-kaiyu > **使い方**: このファイルをプロジェクトに置き、AIに > 「DESIGN.md に従って◯◯のサイトを作って」と指示してください。 > ライセンス: 商用利用可・改変可・クレジット不要（AIっぽくないデザイン見本帳 / サードパーティートラスト） ## 1. コンセプト 画廊の中を歩くように、横へ横へと進む体験。モノクロに統一した写真と明朝、 圧倒的な余白で、UIは展示室の壁に徹する。主役は常に作品（写真・図版）の連なりで、 サイトの構造は「順路」として設計する。縦スクロールは導入と実務情報だけに使い、 核となる展示は横スクロールのギャラリー動線に置く。 **キーワード**: 回遊 / モノクロ / 順路 / 図録 / 余白 **この見た目が向く場面**: ギャラリー・写真スタジオ・美術館・工芸作家のポートフォリオ・ 建築設計事務所の作品集 ## 2. タイポグラフィ - 和文見出し: Zen Old Mincho / ウェイト 500〜600（大見出しは 500、節見出し・強調語は 600） - 和文本文: Zen Old Mincho / ウェイト 400（このフォントに 300 は存在しないため、 軽さは字間・行間・余白で作る。ウェイトを 300 相当に見せかけて別フォントを混ぜない） - 欧文・数字: Cormorant Garamond（展覧会英題・作品の英題・年代・キャプション末尾の 出典表記に使う。**必ずイタリックで、英題やキャプションの装飾として使う**。 地の文の代替書体としては使わない。**Inter に置換しない**） - 見出しスケール: h1（展覧会名・縦書き） clamp(38px, 6vw, 60px) / h2（節見出し） clamp(26px, 3.6vw, 34px) / h3（作品名） 19px / 本文 16px / キャプション 12.5〜13px - 特記: 級数差だけでなく**字間と余白**で階層を作る。見出しは字間 0.3em 前後まで開く。 英字ラベル（節番号・作品英題）は字間 0.16〜0.3em。空虚な機械翻訳のeyebrowにしない （§8参照）。**縦書き（`writing-mode: vertical-rl`）を展覧会名・章タイトルに使う。** 一覧性が要る本文（作家紹介・利用案内・キャプション本文）は横書きのまま ## 3. カラー **monochrome。彩度のある色を1色も足さない。** | 役割 | 値 | 使用比率の目安 | |---|---|---| | 地（月白・ベース） | #f7f7f5 | 65% | | 地（節替え） | #efeeea | — | | 墨（見出し・強い要素） | #1f1e1c | 20% | | 薄墨（本文弱・キャプション・英字ラベル） | #686765 | 10% | | 罫線・境界 | #e3e2de | — | - 配色ルール: 純黒 #000000・純白 #ffffff を使わない。彩度を持つ色（青・朱・金など）を 一切追加しない。強調は「墨の濃さ」と「文字の大きさ・字間」でつける - **薄墨 `#686765` は `#f7f7f5` 地で 5.3:1、`#efeeea` 地で 4.9:1 のコントラストがあり、 13px 程度の小さなキャプション・ラベルでも AA (4.5:1) を満たす。** これより明るい 灰色（例: `#8e8c87` 系、3:1前後）をキャプションや英字ラベルの既定色にしない - 写真の上に文字を載せる場合は**不透明の帯**を敷く（§5・§9参照）。半透明の グラデーションスクリムやガラス風の`backdrop-filter`は使わない ## 4. レイアウト・余白 - コンテンツ最大幅: 1120px（本文カラムは 640px まで絞る） - **レイアウトの核は横スクロール・ギャラリー（`scroll-snap-type: x mandatory`）。** 1作品=1スナップ点。作品と作品の間は 88px 以上あける。縦スクロールは 「入口（ヒーロー）」「出品作家」「アーカイブ」「利用案内」の4節だけに使う - グリッドの性格: 縦スクロール部は中央寄せの1本道。横スクロール部は左右の 余白（10vw程度）を大きく取り、最初と最後の作品も画面中央でスナップさせる - セクション間余白: 上下 160〜170px 基準。**余白を埋めるための飾り線・ドット・ アイコンを足さない** - **ヒーローの構成（"展示室の入口"）**: 画面を左1/3・右2/3に分割し、右2/3に 現在の企画展のメイン写真を裁ち落としで置く。左1/3には縦書きで 「展覧会名（大）→ 英題イタリック（中）→ 会期（小）→ 回数ラベル（小）」を 右から左へ並べる（`flex-direction: row-reverse` で縦書きの列を自然な順序にする）。 **ボタンを置かない。** 誘導はスクロールという行為そのものに委ねる。 下部に小さな一筆線のスクロールキュー（自作、装飾のみ）を置いてよい。 「中央寄せ見出し＋サブコピー＋ボタン2つ」の定型を絶対に作らない ## 5. コンポーネントの質感 - ヘッダー・ナビゲーション: 初期は透明地・スクロールで地色に切り替わる （`backdrop-filter` は使わず不透明な `--color-bg` に切り替える）。ナビリンクは 既定で薄墨、ホバーで墨色に変わり**字間が広がる**（下線は使わない。 下線を使うテイストは別にあるため、ここでは字間の変化で差別化する） - 角丸: 0px（すべて直角）/ 影: 使わない（box-shadow 禁止）/ 境界線: 1px solid `--color-line` - ボタン: **原則使わない。** ヒーローに限らずサイト全体で主ボタン/副ボタンの 対を作らない。誘導はテキストリンクとスクロールに委ねる - 横スクロール・ギャラリーの1点（`.artwork`）: - 写真は**トリミングしない**（`object-fit: contain`）。額装のように、作品ごとの アスペクト比のまま高さをそろえて幅は可変にする（横長は横に大きく、縦長は 幅が狭く並ぶ＝実際の展示壁の掛け方に近い） - 写真の下に**常時表示のキャプション**（figcaption）を置く。図録の様式で 「作品番号 → 作品名（和文） → 英題（イタリック） → 作者・年代・技法・出典」の順 - 写真にマウスオーバー（またはフォーカス）すると、写真下端に**不透明の墨帯**が せり上がり、英題だけが浮かぶ（§9コード例参照）。半透明のグラデーションで にじませない - 進行インジケータ（「01 / 06」）はギャラリー節の間だけ画面に固定表示する - カード的要素: 「アイコン＋見出し＋説明」の角丸カードを**一切使わない**。 出品作家・アーカイブの一覧は罫線区切りの横並びリスト（グリッド）で組む - フォーム要素: 本テイストは問い合わせフォームを持たない （電話・メールのテキスト表記のみ）。フォームが必要な場合は下線1pxのみの 枠なしinputとし、角丸は使わない - 画像の扱い: 全写真に `grayscale(1) contrast(1.04)` を一律適用してトーンを統一する （§9）。角丸・影・枠線を使わない ## 6. モーション - 量: rich。ただし「動き＝リッチ」を安易な均一フェードで済ませない - 使う動き: - ヒーロー写真・縦書きテキストは初回のみフェード＋わずかな上昇（1.1〜1.4秒）。 **このトリガーは `window.addEventListener('load', …)` または単発の `setTimeout` のみで発火させ、`requestAnimationFrame` は使わない**（rAFは横スクロール・ ギャラリーのキャプション視差専用ですらなく、本テイストのどの用途にも使わない。 tools/slop-scan.py の「カウントアップ疑い」検知は rAF ＋ `.textContent`書き換え ＋ 数値操作 の組み合わせをまとめて拾うため、進行インジケータ「01 / 06」用の 正当な `.textContent` 書き換えがある本テイストでは、無関係な箇所で rAF を 使うだけでも誤検知の引き金になる） - 縦スクロールの各節は IntersectionObserver で登場。**見出しは長く遅く （1.1秒）、リード文はさらに遅れて（1s, delay 0.2s）、リスト項目は 0.7〜0.8秒**というように**役割ごとに速さを変える**。全要素を同じ0.6秒で フェードさせない - 横スクロール・ギャラリーは `scroll-snap` で進む。作品のキャプションは、 スクロール位置に応じてわずかに横方向へずれ、CSSの `transition` で 追いつく（§9）。**`requestAnimationFrame` は本テイストのどの用途にも 一切使わない**（連続ループはもちろん、ヒーロー初回フェードや進行 インジケータ更新のような単発トリガーとしても使わない）。初期表示・ 遅延発火はすべて `setTimeout` / `load`イベント / `IntersectionObserver` の組み合わせだけで実装する（実装をシンプルに保ち、スクロールイベント ごとの位置計算とCSS遷移だけで「少し遅れてついてくる」感触を作る） - 作品へのホバー/フォーカスで英題が不透明の帯とともにせり上がる（0.5秒） - ヘッダーはスクロールで透明→不透明に切り替わる（0.4秒） - 使わない動き: 自動カルーセル、数字のカウントアップ、マーキー、パララックスの 背景ブロブ、バウンス、拡大縮小のズーム演出、0.6秒一律の均一フェード - `prefers-reduced-motion: reduce` 時はすべての transition/animation を止め、 要素は最終状態で即表示する。横スクロールの `scroll-snap` 自体は動きの演出では なく構造なので維持してよい ## 7. 写真・イラスト・図版 - 写真がサイトの主役（`ornament: photo-dominant`）。5〜6点、CC0 / パブリックドメインのみを使用し、被写体は「静物・建築・風景・古典写真」など 単体で展示作品として成立するものに限る。**人物のクローズアップ・ポートレートは 避ける**（肖像の配慮。遠景に小さく人影が写り込む程度は可） - 全写真に同一のグレースケール・フィルタを適用し、トーンを統一する（§9）。 撮影年代・原版の色味が違っても、フィルタを通すことで「1つの展示」として 一貫させる - 写真はトリミングしない（`object-fit: contain`）。角丸・影・枠線を使わない。 Pinterest風のグリッドに敷き詰めない（§8参照） - キャプションは図録の様式（作品名・英題・作者/出典・年代・技法）で統一し、 SNS風の短い一言キャプションにしない ## 8. 禁止事項（must not） - Inter / Roboto / Arial / Noto Sans / Helvetica を使わない（明朝＝Zen Old Mincho で組む。欧文は Cormorant Garamond のイタリックのみ） - グラデーションを一切使わない（背景・文字・ボタンすべて）。box-shadow を使わない。 border-radius は常に 0 - 純黒 #000000・純白 #ffffff を使わない。彩度のある色（青・朱・金・緑など）を 1色も追加しない - 中央寄せの定型ヒーロー（見出し＋サブコピー＋ボタン2つ）を作らない。 ヒーローにボタンを置かない - **「ギャラリー風＝グリッドに写真を敷き詰める」に逃げない。** Pinterest型の マソンリーグリッド・正方形サムネイルの均一グリッドを作らない。 横スクロールの1本の順路（`scroll-snap-type: x`）以外のギャラリー表現を メイン展示に使わない - 写真に角丸をつけない。影をつけない。半透明グラデーションのスクリムで 文字を載せない（載せる場合は不透明の帯のみ、§5・§9） - 自動で流れるカルーセル・マーキー・タイプライター演出・数字のカウントアップを 使わない - 「アイコン＋見出し＋説明」の角丸カードを使わない（出品作家・アーカイブは 罫線区切りのリストで組む） - 絵文字をアイコンとして使わない（装飾に線画が必要な場合は自作インラインSVGのみ。 本テイストでは基本的にアイコンを使わず、文字と罫線と写真だけで構成する） - 全要素を同じ0.6秒の均一フェードで登場させない（§6の速度差を守る） - 人物のクローズアップ写真を展示作品として使わない - **`requestAnimationFrame` を一切使わない。** 本テイストの初期表示・遅延発火に 許可される手段は次の3つのみ（排他リスト。これ以外は使わない）： `window.addEventListener('load', …)` / 単発の `setTimeout` / `IntersectionObserver`。ヒーロー初回フェード・進行インジケータ更新・ キャプション視差のいずれも、この3手段の組み合わせだけで実装する （§6・§9のコード例が唯一の正解実装。rAFを使った代替実装を作らない） ## 9. 実装ノート ```css /* tokens.css — この変数セットをそのまま使うこと */ :root { --color-bg: #f7f7f5; --color-bg-alt: #efeeea; --color-ink: #1f1e1c; --color-text: #1f1e1c; --color-text-weak: #686765; /* #f7f7f5地で5.3:1・#efeeea地で4.9:1。AA余裕あり */ --color-line: #e3e2de; /* 変数には総称ファミリ(serif)を含めないこと。フォールバック連結が壊れる */ --font-heading: "Zen Old Mincho"; --font-body: "Zen Old Mincho"; --font-latin: "Cormorant Garamond"; --max-width: 1120px; --measure: 640px; --radius: 0; --photo-filter: grayscale(1) contrast(1.04); /* 全写真に一律適用するトーン統一フィルタ */ } ``` - フォント読み込み: `https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400;1,500&family=Zen+Old+Mincho:wght@400;500;600;700&display=swap` - 本文の font-family は `var(--font-latin), var(--font-body), serif` の順に指定する （英数字が自動で Cormorant になる） **写真のトーン統一（全写真に必ず適用）:** ```css .artwork-frame img, .hero-photo-wrap img { filter: var(--photo-filter); object-fit: contain; /* トリミングしない。cover でクロップしない */ } ``` **横スクロール・ギャラリーの骨格（1作品=1スナップ点。マソンリーグリッドにしない）:** ```html ``` ```css .gallery-track { display: flex; align-items: flex-end; gap: 88px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 24px 10vw 40px; } .artwork { flex: 0 0 auto; scroll-snap-align: center; display: flex; flex-direction: column; gap: 24px; } .artwork-frame { position: relative; display: inline-flex; height: min(60vh, 560px); overflow: hidden; } .artwork-frame img { height: 100%; width: auto; max-width: 74vw; } ``` **写真上に文字を載せる時は不透明の帯（半透明グラデーションのスクリムにしない）:** ```css .artwork-scrim { position: absolute; left: 0; right: 0; bottom: 0; background: var(--color-ink); /* 不透明。rgba()の半透明にしない */ padding: 16px 20px; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; } .artwork:hover .artwork-scrim, .artwork:focus-within .artwork-scrim { opacity: 1; transform: translateY(0); } .artwork-scrim-title { color: var(--color-bg); font-family: var(--font-latin), serif; font-style: italic; } /* var(--color-bg) on var(--color-ink) 地 = 15.5:1。写真の上でも常に高コントラストを確保する */ ``` **キャプションの視差（少し遅れてついてくる。連続rAFループではなくCSS transitionで実現）:** ```css .artwork-caption { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } ``` ```js // スクロールのたびに「作品中心 と 表示領域中心 の距離」からズレ量を算出し、 // transform を書き換えるだけ。あとはCSSのtransitionが遅れて追いつく動きを作る。 function updateCaptionDrift() { const trackRect = track.getBoundingClientRect(); const centerX = trackRect.left + trackRect.width / 2; artworks.forEach((art, i) => { const r = art.getBoundingClientRect(); const drift = Math.max(-18, Math.min(18, (centerX - (r.left + r.width / 2)) * 0.05)); captions[i].style.transform = `translateX(${drift.toFixed(1)}px)`; }); } track.addEventListener('scroll', updateCaptionDrift, { passive: true }); ``` **ヒーロー初回フェードの起動（`setTimeout`のみ。rAFは使わない）:** ```js // 唯一の正当な実装。requestAnimationFrame を含む他の起動方法（rAF単発呼び出し、 // rAFループでの監視、rAFによるクラス付与のタイミング調整など）は一切使わない。 window.addEventListener('load', function () { setTimeout(function () { heroTextInner.classList.add('is-visible'); heroPhotoWrap.classList.add('is-visible'); }, 60); }); ``` ```css .hero-text-inner, .hero-photo-wrap { opacity: 0; transform: translateY(16px); transition: opacity 1.3s ease, transform 1.3s ease; } .hero-text-inner.is-visible, .hero-photo-wrap.is-visible { opacity: 1; transform: translateY(0); } ``` **縦書きヒーロー（右から左へ列が並ぶ自然な順序にする）:** ```css .hero { display: flex; min-height: 100vh; } .hero-text { width: 33.333%; border-right: 1px solid var(--color-line); } .hero-text-inner { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 28px; } .hero-kanji, .hero-en, .hero-dates, .hero-no { writing-mode: vertical-rl; text-orientation: mixed; } .hero-photo-wrap { width: 66.666%; } .hero-photo-wrap img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); } ``` **節の登場（役割ごとに速さを変える。全要素同じ0.6秒にしない）:** ```css .eyebrow { transition: opacity 0.8s ease, transform 0.8s ease; } .section-head h2 { transition: opacity 1.1s ease 0.1s, transform 1.1s ease 0.1s; } .section-lead { transition: opacity 1s ease 0.2s, transform 1s ease 0.2s; } .archive-item, .artist-item { transition: opacity 0.7s ease, transform 0.7s ease; } /* リストは短め */ ``` - モバイル（768px以下を目安）: ヒーローは縦積みに変える（写真を上、縦書きテキストを下）。 横スクロール・ギャラリーはネイティブのタッチスワイプに任せ（`overflow-x: auto` の ままでよい）、進行インジケータ「01 / 06」を画面下中央に固定表示する - `prefers-reduced-motion: reduce` では全 transition/animation を `none` にし、 最終状態で表示する