# せきがはら人間村｜ブランドのWebデザイン参考

> 開いた瞬間、美術館・食堂・カフェが選べる。関ケ原の複合文化施設せきがはら人間村のサイトは、彫刻の並ぶ芝生の写真に縦書きの明朝コピーを添え、右列の施設カードで“何ができる場所か”をFVのうちに見せ切る。

- URL: https://sekigaharaningenmura.jp/
- 解説ページ: https://katapick.com/sites/sekigaharaningenmura
- カテゴリ: ブランド / 地域: 国内（JP）/ 業種: 複合文化施設（美術館・食堂・カフェ）
- テイスト: 縦書き、セリフ体、写真主体、ライト、余白、固定ナビ
- 公開・リニューアル: 2025-12 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 26 時間）

## 編集部のひとこと（Luna）
ヘッダーに日付と天気、気温まで出してる。美術館のサイトで気温？と思ったけど、外の彫刻を歩いて回る場所なら要る情報。数字まで細い明朝で組んで、写真の邪魔をしない。……いいね！！

## デザインの見どころ
- FVは大きな写真と施設カード3枚の2列構成。風景を見せながら、それぞれの入口を同時に差し出す
- コピーは縦書きの明朝に英訳を小さく添えるだけ。芝生と彫刻の写真に、静かな声で意味を足す
- 施設紹介はモノクロの写真にカラー写真の白いカードを重ねる。見せたい1枚にだけ色が残る

## 配色
- #ffffff Gallery White（背景 / カード）
- #1a1a1a Sumi（テキスト / ボタン）
- #000000 Black Pill（MENUボタン / 写真のモノクロ演出）
- #808080 Stone Gray（日付・補足テキスト）
- #8f935d Lawn Olive（写真のトーン（芝生））

## フォント
- 和文見出し・本文・縦書きコピー: 源ノ明朝（Source Han Serif JP）（代替: Noto Serif JP）
- 英字見出し（NEWS / ABOUT など）: Cormorant Garamond（代替: Cormorant Garamond）

## よくある質問
### せきがはら人間村のサイトで使われているフォントは？
和文に源ノ明朝（Adobe Fonts）、英字見出しに Cormorant Garamond が使われています。無料で近づけるなら Noto Serif JP と Cormorant Garamond の組み合わせがおすすめです。

### せきがはら人間村のような縦書きのコピーはどう組む？
要素に writing-mode: vertical-rl を指定し、明朝体で字間を少し広げます。英字を横倒しで添える場合も同じ writing-mode のまま小さいサイズで並べると揃います。

### せきがはら人間村のデザインはどんなサイトの参考になる？
美術館とレストランを併設する施設、道の駅、企業の文化施設など、複数の施設をまとめて紹介したい地域の観光・文化施設のサイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/sekigaharaningenmura からダウンロードできます。
出典: Katapick（https://katapick.com）