# Sinc& Template 02 — DJ / Dancer / Model

**Be your own media.**  
[Sinc&](https://sinc-and.com) が配布する個人サイトテンプレートです。  
インフルエンサーやダンサー、モデルなど、**縦型メディア（Instagramリール・投稿）**を最大限に活かしたいクリエイター向け。

---

## このテンプレートの特徴

- **縦型（9:16）素材がそのまま使える** — Instagram リールをダウンロードしてimageフォルダに置くだけ
- **ダークテーマ/ライトテーマ切り替え** — クラブ・ステージの空気感に合わせたブラック × アクセントカラー


---

## 素材の置き方

### ▶ リール動画を使う（推奨）
Instagramアプリ or Web からリール動画をダウンロードして、`videos/` フォルダに置いてください。

```html
<!-- 動画の場合（.is-video クラスを付けるとプレイアイコン表示） -->
<div class="media-item is-video">
  <div class="media-inner">
    <video src="videos/reel01.mp4" muted loop playsinline></video>
  </div>
  ...
</div>
```

### 🖼 投稿画像を使う
```html
<!-- 画像の場合 -->
<div class="media-item">
  <div class="media-inner">
    <img src="images/post01.jpg" alt="...">
  </div>
  ...
</div>
```

**推奨サイズ：**
- リール・縦型画像：`1080 × 1920px`（9:16 比率）
- スクエア投稿をそのまま使うと上下がトリミングされます

---

## カスタマイズ変数

`index.html` の `:root` セクションを変更するだけでデザインが変わります：

```css
:root {
  --bg:      #0a0a0a;   /* 背景色 */
  --accent:  #e8ff00;   /* アクセントカラー ← ここが一番効果大 */
}
```

アクセントカラーの変更例：
- `#e8ff00` — イエロー（デフォルト）
- `#ff3c3c` — レッド
- `#00f5d4` — シアン
- `#ff6bff` — ピンク
- `#ffffff` — ホワイト（モノクロ統一）

---

## 変更箇所チェックリスト

- [ ] `<title>` — サイトタイトル
- [ ] `.nav-logo` — ロゴ名
- [ ] `.hero-label` — 肩書き（DJ / Tokyo など）
- [ ] `.hero-name` — アーティスト名
- [ ] `.hero-desc` — キャッチコピー
- [ ] `hero-reel video/img` — ヒーローの縦型メディア
- [ ] `.media-item` の `src` × 8枚 — メディアグリッド
- [ ] `.about-*` — プロフィール文・写真・スキル・実績数値
- [ ] `.link-item` の `href` — 各SNSリンク
- [ ] `contact-mail` の `href` — メールアドレス
- [ ] `footer` — 名前・年


---

## ライセンス

**商用利用可・改変自由・クレジット任意**  
`Made with Sinc&` のフッターリンクは削除しても構いません。

---

© Sinc& / https://sinc-and.com
