# ずらすブランディング / Offset Studio

## 1. デザインの核
朱橙の巨大タイポグラフィと、展開すると配色が変わる実績リスト。ブランドの個性を行ごとに切り替えるスタジオサイト。
主役は画像や装飾の量ではなく、操作が内容の理解につながること。以下の規則を守り、別業種でも同じ視覚言語でトップページを設計する。

## 2. 情報構成
極太の宣言 → 展開する実績三件 → 考え方 → 大きな相談導線
デモは架空ブランド「OFF / SET 19」。ブランド名、コピー、実績は必ず移植先の内容に置き換える。説明のない装飾セクションは追加しない。

## 3. 色と書体
背景 #fc572e、主文字 #251712、強調 #fff6e9、罫線 #b53619。tokens.css を使う。明暗反転セクションにもこの関係を引き継ぐ。
本文は DM Sans + Noto Sans JP、メタ情報は IBM Plex Mono。表示用書体は下記のCSS仕様に従う。欧文と日本語を同じサイズに揃えず、それぞれの文字密度に合わせる。

## 4. レイアウトと固有の造形
次のスタイル仕様がこのパターンの輪郭を決める。クラス名は変えてよいが、比率・配置・タイポグラフィの役割は維持する。
```css
.offset-hero{padding:40px 5vw 60px}.offset-hero h1{font:800 clamp(85px,15vw,220px)/.76 'Barlow Condensed',sans-serif;letter-spacing:-.04em}.offset-hero h1>span:not(.period){padding-left:18vw;color:#fff6e9}.period{color:#fff6e9}.offset-caption{display:flex;justify-content:space-between;align-items:end;margin-top:40px}.offset-caption>p:first-child{font-size:22px}.projects{background:#251712;color:#fff6e9;padding:60px 5vw}.project{padding:0;border-color:#67534b}.project summary{display:grid;grid-template-columns:50px 1fr 180px 35px;align-items:center;gap:20px;padding:30px 0;list-style:none}.project summary::-webkit-details-marker{display:none}.project summary strong{font:600 clamp(28px,5vw,70px)/1 'Barlow Condensed',sans-serif}.project summary span{font:12px var(--font-mono)}.project summary b{font-size:30px;font-weight:400;transition:transform .3s}.project[open] summary b{transform:rotate(90deg)}.project-inside{display:grid;grid-template-columns:1.25fr 1fr;gap:6vw;padding:10px 0 40px;align-items:center}.project-inside>div:last-child h2{font-size:38px;line-height:1.35}.project-inside p{margin:25px 0}.project-poster{background:#c9b8ff;color:#36134b;padding:40px;font:700 clamp(40px,6vw,90px)/.95 var(--font-display);letter-spacing:-.07em;min-height:310px;display:flex;flex-direction:column;justify-content:center;overflow-wrap:anywhere}.project-poster em{font:italic 1em 'Instrument Serif',serif;letter-spacing:-.02em}.project-poster small{font:11px var(--font-mono);margin-top:35px;letter-spacing:.1em}.project-poster.green{background:#b7ef9b;color:#193b28}.project-poster.yellow{background:#f6e34a;color:#3d3210}.about-offset{padding:70px 5vw;display:grid;grid-template-columns:1fr 1.5fr 1.5fr;gap:25px}.about-offset h2{font-size:48px;line-height:1.3}.end h2{font:800 clamp(60px,10vw,140px)/.85 'Barlow Condensed',sans-serif}@media(max-width:700px){.offset-caption{display:block}.offset-caption .mono{margin-top:25px}.project summary{grid-template-columns:25px 1fr 25px;gap:10px}.project summary span:nth-child(3){display:none}.project-inside{grid-template-columns:1fr}.project-poster{min-height:260px}.project-inside>div:last-child h2{font-size:30px}.about-offset{grid-template-columns:1fr}.about-offset h2{font-size:38px}}
```
このCSSはスタイルの設計値。移植先の意味に沿ってセレクターを対応させ、架空の内容そのものを再利用しない。

## 5. インタラクション
detailsの展開で実績の配色と編集レイアウトを露出。単一展開アコーディオンと回転インジケーター。
- 操作前から内容を読める初期状態を用意する。JSが動かなくてもナビゲーションと本文を保持する。
- hoverのみでしか使えない機能は作らない。button、range、details等のネイティブ要素を使い、タッチとキーボードを同等に扱う。
- 選択状態は aria-pressed、結果更新は必要な箇所だけ aria-live で伝える。
- 動作低減設定では自動アニメーションを止め、状態変更は即時または静止画で返す。
- デモ用のCTAは実在する予約・購入として扱わない。移植時に実サービスへ接続する。

## 6. モバイル
700px以下では複雑な分割を一列にする。横回遊の見本だけは意図的な横スクロールを残す。ページ全体には横はみ出しを作らない。見出しはclampで縮小し、本文は16pxを維持する。操作対象は原則44px以上を確保する。

## 7. 禁止事項
- 背景をベージュや茶色に置き換え、全セクションを同じ温度に寄せない。
- 汎用の角丸カード3列へ構成を置き換えない。
- 意味のない紫青グラデーション、絵文字アイコン、架空の顧客ロゴを追加しない。
- すべてをフェードインさせて初期表示を隠さない。
- 参考サイトの画像・ロゴ・コピー・有料プロンプトは流用しない。

## 8. 再現の確認
背景・表示書体・主要な配置比率・固有の操作が保持されていること。別業種への移植では、操作対象をその業種で意味のある内容へ翻訳する。独立セッションによる再現検証は未実施で、検証済みの記録を偽って記載しない。


## ヘッダーロゴ（2026-09-15追加）

ブランド表示には新規生成した `assets/logo.webp` を使う。画像生成指示と表示条件は `LOGO.md` に記録。デモは画像を埋め込み、altにブランド名を残している。従来の本文用フォントによるロゴ表記は、この画像仕様に置き換える。別ブランドへ応用する場合はブランド専用に生成し直す。