# DESIGN.md — Hacoa（ハコア）

> Hacoa（https://www.hacoa.com/）のデザイン仕様書。
> 福井・越前の木地職人集団「山口工芸」が 2001 年に立ち上げた、**木製デザイン雑貨のブランド**。木製キーボード・時計・iPhone ケースなど、無垢材を削り出したプロダクトを自社でデザインから製造まで一貫して手がける。
> **写真が主役で、UI はほぼ何もしない**。全画面の木の写真にスクリムを敷き、その上に白文字と枠だけのピルを置く。彩度を持つ要素はアンバーのリンク 1 色しかない。
> **本文の `line-height` が 2.4**（15px に対し 36px）。日本語サイトとしても相当に広い部類で、これが余白の多さを作っている。CSS 中の `line-height` 宣言でも `2`（58 回）・`2.4`（41 回）が上位を占める。
> **見出しに 2 種類の書体を使い分ける**。ブランドを語るヒーロー見出しだけ**明朝**（`--tcd-font-type2`）、セクション見出しと本文は**ゴシック**（`--tcd-font-type1`）。同じ H2 タグで書体が変わるので、タグではなく役割で判断する。
> WordPress ＋ TCD 系テーマ。フォントは `--tcd-font-type1〜3` の 3 系統＋ロゴ用の 4 変数だけで管理されており、**色のトークンは存在しない**（すべて実装に直書き）。
> 実サイトの computed style 実測（2026-08-28 取得。トップ ＋ 商品開発ページ `/products/`）＋ 読み込まれる CSS 923KB の直接集計に基づく。

---

## 1. Visual Theme & Atmosphere

- **デザイン方針**: **写真に語らせ、UI は消す**。ファーストビューは 100vh の木製プロダクトの俯瞰写真で、ナビゲーションは透明のまま重なる。ボタンは面を持たず、白 1px の枠だけで置かれる
- **Hacoa について**: 越前漆器の木地師の技術を、現代のプロダクト（キーボード、名刺入れ、時計、ノート PC スタンド）に転用したブランド。**「素材＝無垢材」が最大の視覚資産**なので、サイトはその写真を邪魔しない方向に全振りしている
- **密度**: **低い**。コンテンツ幅は 850px（1440px ビューポート）に絞られ、本文の行間は 2.4。1 画面に入る情報量は同カテゴリの EC より明確に少ない
- **キーワード**: 全画面写真、黒スクリム、白の枠線ピル、`line-height: 2.4`、明朝の見出し、アンバー 1 色
- **特徴**:
  - **セクションの境目が「写真の切り替わり」**。区切り線ではなく、全幅の写真ブロックを縦に積んで場面転換する。写真の上には必ず `rgba(0,0,0,.3)` 〜 `.5` のスクリムが入り、白文字のコントラストを確保している
  - **CTA は 3 種類しかない**。①写真の上の**白枠ピル**、②白地の上の**黒枠ピル**、③黒塗りのピル。塗りボタンは白地のセクションにしか置かない
  - **`letter-spacing` をほとんど触らない**。CSS 中の宣言は **4 個だけ**で、実際に効いているのはグローバルナビの `.03em` のみ。見出しも本文も `normal`
  - **`font-feature-settings` の宣言が 1 つも無い**（＝ `palt` を使わない）。約物のアキは詰めない前提
  - **radius が統一されていない**。CTA は pill（`9999px` / `60px` / `30px`）、小さな UI 部品は `3〜5px`、アイコンは `50%`。**pill と角丸を混ぜる**のがこのサイトの流儀で、統一しようとすると印象が変わる
  - **⚠️ `uniqueBackgrounds` の 1 位 `#c49a51`（61 回）はブランド色ではない**。Popup Maker プラグインの**閉じるボタン（0×0px で不可視）** 61 個。CSS 全文を検索しても `c49a51` は **0 回**（インラインスタイル）で、画面上のどこにも出てこない。同じく `box-shadow` の上位 2 件（61 回ずつ）も同じ非表示ポップアップ由来なので、色・影を拾うときは必ず除外する

---

## 2. Color Palette & Roles

> 地は `#ffffff`。`pageBackground.resolved` は `ua-default-canvas`（html / body ともに塗り指定なし ＝ CSS 仕様上のキャンバス既定色）。
> **下層ページで `viewportTopByArea` が `rgb(0,0,0)` を返すが、これはページ背景ではない**。`/products/` の上部が全幅のヒーロー写真＋黒スクリムだからで、コンテンツ領域は白のまま。

### Brand（ブランド）

- **Hacoa Amber** (`#dd9933`, rgb 221,153,51): **唯一の彩度を持つ色**。ニュース一覧のリンク（実測 30 個）、Instagram セクションの H3 見出し。**CSS 全文には 0 回**しか現れず、テーマカスタマイザーからインライン注入されている ＝ **変数を探しても見つからないので computed style を採用すること**
- **Bark Brown** (`#352f26`, rgb 53,47,38): **ヘッダー右端の外部リンクボタン**（オンラインストア／直営店／リクルート）の面。CSS 出現 **13 回**。木の樹皮に寄せた暗褐色
- **Warm Gray** (`#a39b8d`, rgb 163,155,141): **フッターのナビゲーションボタン**（企業情報／SDGs／Hacoa の歩み）の面。CSS 出現 **10 回**。無垢材の白木に寄せた温かみのあるグレー

### Neutral / Surface

| 役割 | 色 | 用途 | CSS 出現 |
|------|-----|------|---------|
| ページ地 | `#ffffff` | 全ページ共通 | `#fff` 350 回 |
| ダーク面 | `#333333` | 「さらに読み込む」ボタン、フッター見出しの帯 | **24 回** |
| ダーク面（濃） | `#222222` | Global Site バナー | 17 回 |
| 淡い面 | `#fafafa` | カードの地 | 20 回 |
| 罫線 | `#dddddd` / `#cccccc` | ニュース一覧の区切り、テーブル罫 | 181 / 44 回 |
| 入力欄の枠 | `#c1c1c1` | textarea | — |

### Text

| 役割 | 色 | 用途 |
|------|-----|------|
| 本文 | **`#000000`** | `body` の既定色。グレーに逃がさず真っ黒を使う |
| 見出し（小） | **`#2d2d2d`** | h4 / h5。CSS 出現 7 回 |
| 見出し（中） | **`#333333`** | 白地セクションの H2（22px / 600） |
| 写真の上 | **`#ffffff`** | ヒーロー・セクション見出し・リード文 |
| 写真の上（補助） | **`#cccccc`** | 下層ページのリード文 |
| リンク | **`#dd9933`** | 本文中のリンク・強調 |

### Scrim（写真の上に敷く暗幕）

```css
/* 標準のスクリム */
background: rgba(0, 0, 0, 0.3);

/* 濃いスクリム（ヘッダー直下・見出しが重なる領域） */
background: rgba(0, 0, 0, 0.5);

/* 上から下へわずかに濃くする */
background: linear-gradient(rgba(12, 12, 12, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
```

`rgba(0,0,0,.7)` は CSS 出現 15 回でモーダル背景に使う。

### ⚠️ ブランド色として拾ってはいけない色

| 色 | 出現 | 正体 |
|----|------|------|
| `#c49a51` | `uniqueBackgrounds` **61 回で 1 位** | **Popup Maker の閉じるボタン**。実寸 0×0px で不可視。CSS には 0 回 |
| `#408bd1` (rgb 64,139,209) | `interactive` 2 件 | **Instagram 埋め込みウィジェットの「フォロー」ボタン**。Meta 側の色 |
| `#ed2c00` / `#ee4056` / `#ffb53c` | CSS 8〜12 回 | テーマ（TCD）の既定パレット。**画面上には出てこない** |

---

## 3. Typography Rules

### 3.1 和文フォント

Web フォントは読み込まず、**OS のフォントに任せる**。

- **ゴシック体（既定）**: **ヒラギノ角ゴシック（Hiragino Sans）** → **游ゴシック Medium** → **メイリオ**
- **明朝体（ヒーロー見出し専用）**: **游明朝** → **ヒラギノ明朝 Pro**
- **教科書体（`--tcd-font-type3`。トップでは未使用）**: **游教科書体** → **UD デジタル 教科書体 N**
- **ロゴ用**: **Noto Sans JP**（`--tcd-font-type-logo`。ロゴ画像のフォールバックのみ）

### 3.2 欧文フォント

- **サンセリフ**: **Arial**（**スタックの先頭**）
- **セリフ**: **Times New Roman** → Times（明朝スタックの先頭）
- **等幅**: 指定なし

### 3.3 font-family 指定

**欧文優先のスタック**。和文フォント内の欧文グリフより Arial / Times を先に当てる方針。

```css
/* --tcd-font-type1 : 本文・セクション見出し・ナビ（サイトの既定） */
font-family: Arial, "Hiragino Sans", "Yu Gothic Medium", "Meiryo", sans-serif;

/* --tcd-font-type2 : ヒーロー見出し（ブランドを語る大見出し） */
font-family: "Times New Roman", Times, "Yu Mincho", "游明朝", "游明朝体",
             "Hiragino Mincho Pro", serif;

/* --tcd-font-type3 : 教科書体（引用・詩的なコピー用に用意されている） */
font-family: Palatino, "Yu Kyokasho", "游教科書体", "UD デジタル 教科書体 N",
             "游明朝", "游明朝体", "Hiragino Mincho Pro", "Meiryo", serif;

/* --tcd-font-type-logo */
font-family: "Noto Sans JP", sans-serif;
```

**フォールバックの考え方**:
- **欧文を先頭に置く**ので、`Hacoa` `Haco - air` などのブランド名は Arial の字形で出る
- 和文は **ヒラギノ → 游ゴシック Medium → メイリオ** の順。Windows で游ゴシックの Regular が細く出る問題は **Medium を明示**して回避している
- **明朝スタックには ProN が入っていない**（`Hiragino Mincho Pro`）。約物の字形が ProN と異なる点に注意

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

| 役割 | サイズ | ウェイト | line-height | 書体 | 色 |
|------|-------|---------|------------|------|-----|
| **ヒーロー見出し** | 36px | **600** | 50.4px (**1.4**) | **明朝** (type2) | `#ffffff` |
| セクション見出し（H1） | 40px | 400 | 56px (1.4) | ゴシック | `#000000` |
| セクション見出し（写真上・H2） | 34px | 400 | 51px (1.5) | ゴシック | `#ffffff` |
| 中見出し（H2） | 22px | 600 | 33px (1.5) | ゴシック | `#333333` |
| フッター見出し（H2） | 18px | **450** | 18px (1.0) | ゴシック | `#ffffff` |
| 小見出し（H3・アクセント） | 16px | 600 | 20.8px (1.3) | ゴシック | `#dd9933` |
| 小見出し（H4 / H5） | 16px | **700** | normal | ゴシック | `#2d2d2d` |
| **本文** | **15px** | 400 | **36px (2.4)** | ゴシック | `#000000` |
| 本文（写真の上） | 16px | 400 | 32px (**2.0**) | ゴシック | `#ffffff` |
| グローバルナビ | 14px | 400 | 70px | ゴシック | `#ffffff` |
| ドロワー内リンク | 14px | 400 | 22.4px (1.6) | ゴシック | `#ffffff` |
| キャプション | 13px | 400 | 19.5px (1.5) | Arial | `#ffffff` |
| フッターナビ | 12px | 400 | 60px | ゴシック | `#ffffff` |
| コピーライト | 10px | 400 | 16px (1.6) | ゴシック | `#ffffff` |

**`font-weight: 450` に注意**。フッター見出しだけが 450 で、Semibold（600）より軽く Regular（400）より重い。可変フォントではなく **游ゴシック / ヒラギノの合成太字**が当たるので、環境によって見え方が変わりうる。

### 3.5 行間・字間

**行間（CSS 宣言の実出現）**

| 値 | 出現 | 用途 |
|----|------|------|
| `2` | **58 回** | 汎用の本文 |
| `1.5` | 53 回 | 見出し・カードのタイトル |
| **`2.4`** | **41 回** | **記事本文（15px → 36px）**。このサイトの標準 |
| `1.4` | 38 回 | 大見出し |
| `1.6` | 30 回 | ドロワー内のリンク |
| `1.2` | 16 回 | 数字・英字のみの行 |

- **日本語本文は 2.0〜2.4 を使う**。1.8 以下に詰めると Hacoa の余白感が失われる
- **見出しは 1.4〜1.5**。大きい文字ほど比率を下げる

**字間**

- **原則 `normal`**。CSS 中の `letter-spacing` 宣言は **4 個だけ**
- 効いているのは **グローバルナビの `0.03em`**（14px → 0.42px）のみ
- **見出しにトラッキングを入れない**。明朝の大見出しも `normal`

### 3.6 禁則処理・改行ルール

- **リード文は 1 行ずつ手で改行している**。ヒーローの 6 行、セクション説明の 2 行は `<br>` で区切られており、ブラウザの自動折り返しに任せていない
- 意味のまとまりで折る（例:「木はさまざまな要素を含んだ完成した素材で」／「それぞれの香りや温かい感触があります」）
- コンテンツ幅 850px に対して本文 15px なので **1 行あたり約 56 字**。折り返しを許す場合もこの長さを超えさせない
- `word-break` / `overflow-wrap` の指定は無く、**ブラウザ既定の日本語禁則に任せる**

### 3.7 OpenType 機能

```css
/* 指定なし。CSS 全文に font-feature-settings の宣言が 0 個 */
```

- **`palt` を使わない**。「」（）、。 のアキは詰めない
- 数字も **プロポーショナル指定なし**（`tnum` / `pnum` いずれも未使用）。日付「2026/08/24」は Arial の既定字形で出る

### 3.8 縦書き

- **使用しない**。`writing-mode` の指定なし

---

## 4. Component Stylings

### Buttons

**① ゴーストピル（写真の上・最頻出）**

```css
background: transparent;
color: #ffffff;
border: 1px solid #ffffff;
border-radius: 60px;
font-size: 16px;
font-weight: 600;
padding: 0 20px;   /* 高さは line-height で作る */
```

写真セクションの「Hacoa の歩み」「商品開発」など、**サイトで最も多く出る CTA**。面を持たないので写真が透ける。

**② アウトラインピル（白地の上）**

```css
background: transparent;
color: #000000;
border: 2px solid #000000;      /* 枠が 2px になる点に注意 */
border-radius: 9999px;          /* 30px の実装も混在 */
font-size: 16px;
font-weight: 700;
padding: 10.672px 21.28px;
```

`#2d2d2d` を枠と文字に使うバリエーションもある。

**③ ソリッドピル（黒）**

```css
background: #000000;
color: #ffffff;
border: none;
border-radius: 9999px;          /* 30px の実装も混在 */
font-size: 16px;
font-weight: 700;
padding: 12.672px 23.328px;     /* ②より上下 2px 大きい＝枠の分を埋めている */
```

**④ 反転ピル（白面・黒枠）**

```css
background: #ffffff;
color: #000000;
border: 2px solid #000000;
border-radius: 30px;
font-size: 16px;
font-weight: 700;
padding: 10.672px 21.28px;
```

**⑤ フラットな矩形ボタン（一覧の「さらに読み込む」）**

```css
background: #333333;
color: #ffffff;
border-radius: 4px;
font-size: 13px;
font-weight: 400;
padding: 7px 14px;
```

**⑥ フッターのナビゲーションボタン**

```css
background: #a39b8d;
color: #ffffff;
border-radius: 0;               /* 角丸なし */
font-size: 14px;
font-weight: 400;
padding: 14px 20px 12px;        /* 下だけ 2px 小さい */
```

**⑦ ヘッダーの外部リンクボタン**

```css
background: #352f26;
color: #ffffff;
border-radius: 0;
font-size: 15px;
font-weight: 700;
```

### Inputs

**フォームは意図的に素の状態に近い。**

```css
/* テキストエリア（問い合わせ） */
background: #ffffff;
color: #000000;
border: 1px solid #c1c1c1;
border-radius: 0;
font-size: 15px;
```

- **`input[type=text]` は UA 既定のまま**（`2px inset`）。検索欄などはブラウザの見た目を上書きしていない
- **フォーカスリングの独自指定は無い**。ブラウザ既定のフォーカス表示に任せている
- 実装時は最低限 `border: 1px solid #c1c1c1` / `border-radius: 0` に揃えると、他の入力欄と印象が一致する

### Cards

```css
background: #fafafa;    /* または #ffffff */
border-radius: 0;       /* 画像カードは角丸なし */
box-shadow: none;       /* 影を持たない */
```

- **商品・記事カードは全幅の写真そのもの**。枠も影も角丸も付けず、写真の矩形をそのまま見せる
- タイトルは写真の上に白文字で乗せる（34px / 400 / `#fff`）

### Badges / Tags

- **面色を持つバッジは存在しない**。ニュース一覧はカテゴリバッジではなく **日付（`#000` / 15px）とタイトルの 2 カラム**で構成される

---

## 5. Layout Principles

### Container

| 用途 | 幅 |
|------|-----|
| **コンテンツ幅** | **850px**（1440px ビューポートで実測 21 要素） |
| 2 カラム分割 | **720px**（ビューポートの 50%。写真セクションの左右） |
| 写真セクション | **100%**（全幅・ブリード） |
| モーダル | 460px |

- **「850px の本文」と「全幅の写真」を交互に積む**のが基本構造
- 写真セクションは 2 分割（720px + 720px）にすることが多い

### Header

```css
height: 70px;           /* 固定 */
background: transparent;  /* ファーストビューでは透明、スクロールで塗る */
```

グローバルナビは 14px / `line-height: 70px` で、**行高そのものがヘッダーの高さ**になっている。

### Radius Scale

| 値 | CSS 出現 | 用途 |
|----|---------|------|
| `4px` | **32 回** | 小さな矩形ボタン・入力欄 |
| `5px` | 22 回 | カード内の小要素 |
| `3px` | 22 回 | タグ・ラベル |
| `40px` | 20 回 | 中サイズのピル |
| `100%` / `50%` | 12 / 10 回 | アイコン・アバター |
| `30px` | 4 回 | CTA ピル |
| `9999px` | 5 回 | CTA ピル（完全な pill） |

**pill（`9999px` / `60px` / `40px` / `30px`）と小角丸（`3〜5px`）を役割で使い分ける**。CTA は pill、UI 部品は小角丸。

---

## 6. Depth & Elevation

**影はほとんど使わない。** 立体感は「写真 ＋ スクリム」で作る。

| 用途 | 値 | CSS 出現 |
|------|-----|---------|
| 汎用の浮き | `0 0 10px 0 rgba(0, 0, 0, 0.15)` | 4 回 |
| ヘッダーの下辺 | `0 6px 6px -6px #cccccc` | 3 + 3 回 |
| カードの浮き | `1px 1px 3px 0 rgba(2, 2, 2, 0.23)` | 3 回 |
| 入力欄の内側 | `1px 1px 5px 0 rgba(0, 0, 0, 0.1) inset` | 2 回 |

- **カードにもボタンにも既定では影を付けない**
- **`rgba(2, 2, 2, ...)` という純黒より 2 だけ明るい黒**を使う（テーマ由来）
- **⚠️ ランタイムで最多の影 `rgba(2,2,2,.5) 0 10px 25px 4px`（61 回）は非表示ポップアップのもの**。実装の参考にしない

---

## 7. Do's and Don'ts

### Do（推奨）

- **本文の `line-height` は 2.0〜2.4 を使う**。Hacoa の余白感はこの行間で作られている
- **ブランドを語る大見出しは明朝**（`--tcd-font-type2`）、**セクション見出しと本文はゴシック**（`--tcd-font-type1`）に分ける
- **写真の上に文字を置くときは必ずスクリムを敷く**（`rgba(0,0,0,.3)`〜`.5`）。木の写真は明度がまだらなので、スクリムなしでは白文字が読めなくなる
- **CTA は pill にする**。写真の上なら白 1px の枠、白地なら黒 2px の枠か黒塗り
- **リード文は意味のまとまりで手動改行する**（`<br>`）
- **リンクとアクセントは `#dd9933` だけを使う**。彩度を持つ色を増やさない
- **セクション見出しに `letter-spacing` を入れない**（`normal` のまま）
- 和文フォントは **ヒラギノ → 游ゴシック Medium → メイリオ**。Windows 向けに **Medium を明示**する

### Don't（禁止）

- **`#c49a51` をブランド色として使わない**。抽出データで最多（61 回）だが、正体は 0×0px の不可視ポップアップの閉じるボタンで、画面上には存在しない
- **`#408bd1` を使わない**。Instagram 埋め込みウィジェットの色であって Hacoa の色ではない
- **本文の行間を 1.8 以下にしない**。密度が上がった瞬間にブランドの印象が変わる
- **`palt` / `font-feature-settings` を足さない**。このサイトは約物のアキを詰めない設計
- **見出しにトラッキングを入れない**。効かせているのはグローバルナビの `0.03em` だけ
- **カードに影と角丸を足さない**。写真の矩形をそのまま見せる
- **明朝スタックに `Hiragino Mincho ProN` を混ぜない**（実装は `Pro`）。約物の字形が変わる
- **`--tcd-font-type1` の先頭 Arial を外さない**。欧文が和文フォントの欧文グリフに落ちるとブランド名の字形が変わる
- **radius を 1 種類に統一しない**。pill と小角丸の併存がこのサイトの流儀

---

## 8. Responsive Behavior

### Breakpoints

| 幅 | レイアウト |
|----|-----------|
| `> 1200px` | コンテンツ 850px 中央。写真セクションは 2 分割（各 50%） |
| `768〜1200px` | コンテンツは左右 40px パディングの流動幅 |
| `< 768px` | 1 カラム。グローバルナビはハンバーガーのドロワーへ |

### タッチターゲット

- ピル CTA は `padding: 10.672px 21.28px` ＋ 16px の文字で高さ約 44px。**モバイルでもそのまま 44px を確保できる**
- フッターナビ（12px / `line-height: 60px`）は行高で 60px の当たり判定を作っている

### フォントサイズの調整

- **本文 15px はモバイルでも下げない**。行間 2.4 を維持する
- ヒーロー見出しは 36px → 24〜28px、セクション見出しは 40px / 34px → 24px 程度に落とす
- ドロワー内のリンクは 14px / `line-height: 1.6` のまま

---

## 9. Agent Prompt Guide

### クイックリファレンス

```
ページ背景: #ffffff
本文:      15px / 400 / line-height 2.4 / #000000
           Arial, "Hiragino Sans", "Yu Gothic Medium", "Meiryo", sans-serif
ヒーロー見出し: 36px / 600 / line-height 1.4 / #ffffff / 明朝
           "Times New Roman", Times, "Yu Mincho", "游明朝", "Hiragino Mincho Pro", serif
セクション見出し: 40px（白地・#000）/ 34px（写真上・#fff）/ 400 / line-height 1.4〜1.5
アクセント:  #dd9933（リンク・強調。サイト唯一の彩度）
面色:       #352f26（ヘッダー外部リンク）/ #a39b8d（フッターナビ）/ #333333（汎用ボタン）
CTA:       ゴーストピル transparent / #fff 文字 / 1px solid #fff / radius 60px / 16px 600
           ソリッドピル #000 / #fff 文字 / radius 9999px / 16px 700 / padding 12.672px 23.328px
コンテンツ幅: 850px（写真セクションのみ全幅）
ヘッダー:   70px 固定・初期は透明
字間:       normal（グローバルナビのみ 0.03em）
palt:      使わない
影:        原則なし（必要なら 0 0 10px 0 rgba(0,0,0,.15)）
```

### プロンプト例

```
Hacoa（https://www.hacoa.com/）のデザインで、木製プロダクトのブランド紹介ページを作ってください。

- ページ背景は #ffffff
- 本文は Arial, "Hiragino Sans", "Yu Gothic Medium", "Meiryo", sans-serif の 15px / 400、
  line-height は 2.4（36px）
- ブランドを語るヒーローの大見出しだけ明朝
  （"Times New Roman", Times, "Yu Mincho", "游明朝", "Hiragino Mincho Pro", serif）の
  36px / 600 / line-height 1.4、白文字
- セクション見出しはゴシックの 40px / 400（白地）または 34px / 400（写真の上・白文字）
- 全幅の写真セクションと 850px のテキストセクションを交互に積む
- 写真の上には必ず rgba(0,0,0,.3) のスクリムを敷き、白文字を乗せる
- CTA は写真の上なら「transparent / 白文字 / 1px solid #fff / border-radius 60px /
  16px 700 / padding 0 20px」のゴーストピル、白地なら「#000 / 白文字 / border-radius 9999px /
  16px 700 / padding 12.672px 23.328px」のソリッドピル
- リンクとアクセントは #dd9933 のみ。ほかに彩度を持つ色は使わない
- letter-spacing は normal、font-feature-settings（palt）は指定しない
- カードに影・角丸を付けず、写真の矩形をそのまま見せる
- リード文は意味のまとまりで <br> を入れて手動改行する
```