Landscape Products (ランドスケーププロダクツ) DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。

対象サイト: https://landscape-products.net/ Landscape Products（BAGN Inc.）は、家具・プロダクトデザイン、インテリアデザイン、ショップ（Playmountain 等）、コーヒーカルチャーを手がける東京のデザインスタジオ。 純黒 #000000 のフルブリード画像ステージを主役に、明るい #f1f1f0 の UI パネルへ黒テキストを小さく静かに組む、ギャラリーのように寡黙なレイアウト。 実測はブランドサイト トップ（フルスクリーン スライドショー）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 画面全体を占める純黒 #000000 の画像ステージ（フルスクリーンのスライドショー）を主役に据え、その周囲・下部に明るい #f1f1f0 の UI パネルを敷いて情報を静かに置く。写真が語り、UI は極小のグロテスク体テキストとリンクだけに徹する。装飾・面塗り・影を持たない
• 密度: 低密度。文字は 11〜16px 基調と全体に小さく、広い余白と行間（≒1.8）でゆったり配置する。面で埋めず、余白と写真で領域を分ける
• キーワード: ギャラリー / イメージフォワード / 黒のステージ / 寡黙 / ニュートラル グロテスク
• 形状言語: CTA は面塗りボタンを持たず、テキストリンク（＋必要に応じて 1px の細罫アンダーライン）が基本。角丸はほぼゼロ（border-radius: 0 基調）。丸みや影で飾らず、写真と余白で構成する
• 書体の性格: ニュートラルなグロテスク（カスタム "CBold" / "CRegular"）をウェイト 500 で通し、欧文ラベルや数字には Inter を併用する。字間はごくわずか（≒0.01em）。太らせず、大きくせず、小さく静かに置くのがこのブランドの流儀

2. Color Palette & Roles

Base（下地）

• Stage Black (#000000): ヒーローのフルスクリーン画像スライドが乗る純黒のステージ（実測 div::before.bg_slide_wrap、上部 viewport の支配色＝面積 7.29M px）。画像を引き立てる暗い舞台であり、CSS 変数 --wp--preset--color--black: #000000 に一致
• Panel Light (#f1f1f0): メニュー・コンテンツ パネルの下地（rgb(241,241,240)）。body の実測背景で、上部 viewport サンプル 12 点すべてがこの色。ごくわずかに緑みを帯びた明るいオフホワイト
• Ink Black (#000000): 明るいパネル上の見出し・本文・罫・リンクの基調色。純黒
• White (#ffffff): 黒ステージ・写真の上に乗るテキスト色。純白

Text（文字色）

• Text on Light (#000000): 明るいパネル上のテキスト。純黒
• Text on Dark (#ffffff): 黒ステージ・画像上のテキスト。純白

色に関する設計思想

• 基調は「純黒の画像ステージ #000000」「明るいパネル #f1f1f0」「純黒 or 純白のテキスト」の実質2〜3色。彩色はほぼ写真に委ねる
• 未装飾のリンクがデフォルト青 rgb(0,0,238) として一部で計測されるが、これはブランドカラーではない。ブランドのリンクは黒 #000000。青は無視すること
• ブランドの世界観は「色」ではなく「黒のステージ・大判写真・余白・極小のグロテスク体」で作る。色数を絞ることでギャラリーのような静けさを保つ

3. Typography Rules

3.1 和文フォント

• ゴシック体: カスタム グロテスク "CBold" / "CRegular"（→ 代替は Noto Sans JP）を基本に、-apple-system（ヒラギノ角ゴ ProN）→ 游ゴシック → メイリオへフォールバック
• 明朝体: 使用しない

3.2 欧文フォント

• サンセリフ（本文・見出し・ラベル）: カスタム グロテスク "CBold" / "CRegular"（ニュートラルなネオグロテスク。実測ウェイト 500）。加えて欧文ラベル・数字に Inter を併用する
• セリフ / 等幅: 使用しない

代替フォントの注記: "CBold" / "CRegular" はライセンスされたカスタム グロテスクで、ローカル・preview.html では表示できない。

• "CBold" / "CRegular"（Latin）→ Inter（ニュートラルなグロテスクで印象が近い。Google Fonts で読み込み可）
• 和文 → Noto Sans JP（Google Fonts で直接読み込める）
• 実サイトの実測 font-family（フォールバックチェーン全体）: CBold, Inter, MFW-PFutoGoB101Pr6N-Medium, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", 游ゴシック, YuGothic, "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif

3.3 font-family 指定

css/* 本文・UI（和文） */
font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;

/* 欧文ラベル・数字 */
font-family: "CBold", "Inter", "Helvetica Neue", Arial, sans-serif;

フォールバックの考え方:

• 実サイトは欧文カスタム体 → Inter → 和文 → OS フォントの順で単一チェーンにまとめている
• preview では和文 UI を Noto Sans JP、欧文ラベルを Inter に分けて指定する
• 見出し・本文・ラベルともウェイトは 500 で統一。階層はサイズと余白で作り、太さでは作らない

3.4 文字サイズ・ウェイト階層

3.5 行間・字間

• 本文・見出しの行間 (line-height): 1.8（16px 本文で 28.8px）。日本語の可読性と静けさのため広めに取る
• キャプション／フッターの行間: 1.8（11px で 19.8px）
• 欧文ナビ／大型ディスプレイの行間: 1.0（サイズ＝行高で詰める）
• 字間 (letter-spacing): 0.16px（16px で ≒0.01em）。全体にごくわずかだけ開く。ナビラベル（14px）は normal
• BAUM のような大きなトラッキング（0.08em）は使わない。ほぼ字間なしの均一なグロテスクが特徴

ガイドライン:

• 文字は 11〜16px と全体に小さく、line-height: 1.8 を確保して読ませる
• ウェイトは 500 に統一し、サイズと余白で階層を作る（太字で強調しない）
• 字間は 0.01em ほどのごく僅か。開きすぎない・詰めすぎない

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;
word-break: normal;

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

cssfont-feature-settings: normal;  /* palt は使わない */

• 実測では font-feature-settings: normal。palt は使わず、字間は letter-spacing（≒0.01em）で微調整する
• カスタム グロテスクを素の字幅で置くことで、均一で寡黙な印象を保つ

3.8 縦書き

該当なし（横書きのみ）。

4. Component Stylings

面塗りボタンを持たず、テキストリンク基調。装飾・影・強い角丸を避ける（border-radius: 0 基調）。

Buttons / Links（CTA）

実サイトでは面塗りの CTA ボタンは計測されず、CTA はテキストリンク／ナビ スタイル。

Text Link（基本）

• Background: transparent
• Text: #000000（明るいパネル上）/ #ffffff（黒ステージ・画像上）
• Border: なし、または hover 時に 1px の細罫アンダーライン
• Font: 14–16px / weight 500 / letter-spacing ≒0.01em（14px は normal）
• 例: 「Product Design」「Interior Design」「Shop」

Outline（補助・任意）

• Background: transparent
• Text: #000000
• Border: 1px solid #000000
• Border Radius: 0px
• Padding: 10px 20px
• Font: 14px / weight 500
• 面塗りを避けたい本ブランドで、どうしても囲みが必要な場合のみ

Inputs

• Background: #ffffff（または #f1f1f0 のまま）
• Border: 1px solid #000000（細い黒罫、または下線）
• Border (focus): 1px solid #000000（罫を維持し、下線を濃くする）
• Border Radius: 0px
• Padding: 12px 14px
• Font Size: 14–16px

Cards

• Background: #f1f1f0（パネルのまま）または #ffffff
• Border: なし（写真＋テキストのみ）、または 1px solid #000000 の細罫
• Border Radius: 0px
• Shadow: なし（フラット）
• プロジェクトカードは大判写真＋カテゴリ名（Product Design / Interior Design / Shop）＋短いキャプションの最小構成。角ゼロで端正に

5. Layout Principles

Spacing Philosophy

黒のフルブリード画像ステージを主役に据え、その下・周囲に明るい #f1f1f0 のパネルで情報をゆったり置く。要素は面や罫で囲まず、広い余白で分ける。密度は上げない。

Spacing Scale（推定）

Container

• Max Width: 1280px（ヒーロー／画像ステージはフルブリード＝画面全幅）
• Padding (horizontal): 24–40px

Grid

• Columns: 12（プロジェクト一覧は 2〜3 カラム）
• Gutter: 24–40px
• 大判写真をゆったり配置し、キャプションは短く小さく添える

6. Depth & Elevation

• 影はほぼ使わない。奥行きは「黒のステージ」「大判写真」「余白」で表現する

7. Do's and Don'ts

Do（推奨）

• ヒーロー／メインビジュアルは純黒 #000000 のフルブリード画像ステージにする（写真が主役）
• UI パネルは明るい #f1f1f0、その上のテキストは純黒 #000000。黒ステージ・画像上のテキストは純白 #ffffff
• 文字は 11〜16px と小さく、ウェイト 500 で統一し、line-height 1.8 を確保する
• 字間はごくわずか（≒0.01em）。均一なグロテスク体（CBold → Inter / 和文 Noto Sans JP）で組む
• CTA はテキストリンク基調。面塗りボタン・角丸・影を避ける（border-radius: 0）
• ナビ・カテゴリは「Product Design」「Interior Design」「Shop」のように短い欧文ラベルで

Don't（禁止）

• 未装飾リンクのデフォルト青 rgb(0,0,238) をブランドカラーとして扱わない（ブランドのリンクは黒）
• 彩度の高い面塗り・原色を使わない（彩りは写真に委ねる）
• 文字を太字（700 等）で強調しない・大きくしない（500・小サイズ・余白で階層を作る）
• 角丸・強い影・面塗りボタンを足さない（フラット・角ゼロ・テキストリンク基調）
• 和文フォント1つだけを指定しない（必ずフォールバックチェーンを書く）
• 黒ステージと明るいパネルのコントラストが生む静けさを、装飾で壊さない

8. Responsive Behavior

Breakpoints（推定）

タッチターゲット

• 最小サイズ: 44px × 44px

フォントサイズの調整

• 本文は 16px 基調だが、モバイルでも 11px 未満に落とさず line-height 1.8 を保つ
• 大型ディスプレイ欧文（54.72px）はモバイルで 32〜40px に縮小。ウェイト 500 は維持する

9. Agent Prompt Guide

クイックリファレンス

Stage(黒ステージ):  #000000（フルブリード画像）
Panel(明パネル):    #f1f1f0
Ink / 罫 / リンク:  #000000
Text on Dark:       #ffffff
Font(JP):     "Noto Sans JP", system-ui, -apple-system, sans-serif
Font(EN):     "CBold", "Inter", "Helvetica Neue", Arial, sans-serif（→ Inter 代替）
Weight:       500（全体で統一）
Body Size:    11–16px
Line Height:  1.8（本文・見出し）
字間:         ≒0.01em（14px ナビは normal）
palt:         off / font-feature-settings: normal
Radius:       0（全要素）
CTA:          テキストリンク基調（面塗りボタンなし）
Card:         radius 0 / shadow なし / 写真＋短いキャプション
無視する色:   デフォルト青 rgb(0,0,238)（ブランド色ではない）

プロンプト例

Landscape Products のデザインシステムに従って、家具・プロダクトデザイン スタジオのプロジェクト一覧を作成してください。
- ヒーローは純黒 #000000 のフルブリード画像ステージ、テキストは白 #ffffff
- コンテンツ／メニュー パネルは明るい #f1f1f0、その上のテキストは黒 #000000
- フォント（和文）: "Noto Sans JP", system-ui, -apple-system, sans-serif
- フォント（欧文ラベル）: "CBold"（→ Inter 代替）, "Inter", "Helvetica Neue", Arial, sans-serif
- 文字は 11〜16px・ウェイト 500 で統一、line-height 1.8、字間 ≒0.01em
- すべての面・入力欄は border-radius: 0、影なし
- CTA はテキストリンク基調（面塗りボタンは使わない）
- プロジェクトカードは大判写真＋カテゴリ名（Product Design / Interior Design / Shop）＋短いキャプション
- 未装飾リンクのデフォルト青は使わない。リンクは黒

Web ライセンスフォントが使えない環境での代替指針

• 欧文 CBold / CRegular → Inter（ニュートラルなグロテスク）
• 和文 → Noto Sans JP（Google Fonts で直接利用可）
• 代替でも「純黒のフルブリード画像ステージ・明るい #f1f1f0 パネル・極小で均一なウェイト 500 のグロテスク体・広い余白・テキストリンク基調」を守れば世界観は再現できる