BrandJapanPicked 2026.09.26

せきがはら人間村

ブランドのWebデザイン参考 — 複合文化施設（美術館・食堂・カフェ）

出典: sekigaharaningenmura.jp

Editor's note — 編集部の視点

開いた瞬間、美術館・食堂・カフェが選べる。

関ケ原の複合文化施設せきがはら人間村のサイトは、彫刻の並ぶ芝生の写真に縦書きの明朝コピーを添え、右列の施設カードで“何ができる場所か”をFVのうちに見せ切る。

LunaType & Whitespace

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

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

Color

せきがはら人間村の配色

Typography

使用フォントと無料の代替

和文見出し・本文・縦書きコピー

Aa あア

使用: 源ノ明朝（Source Han Serif JP）
代替: Noto Serif JP

英字見出し（NEWS / ABOUT など）

Aa あア

使用: Cormorant Garamond
代替: Cormorant Garamond

実測タイプスケール1440px幅 · 2026-09-26 計測

見出しKatapick 型14px · 1.36 · 600
本文The quick brown fox — 参考を型にする14px · 1.71 · 400
ボタンKatapick 型10px · 1.2 · 600

Structure

ページ構成（上から順）

01
ヒーロー
角丸の大きな写真の左下に縦書き「生活と、アートと、風景。」と英訳を添え、上部にロゴ・日付・天気と気温。右列に生活美術館 / 未来食堂 / cafe mirai の写真カードを縦に積む。SPでは3枚を写真の下に横並び。
02
NEWS（お知らせ）
英字見出し NEWS とカテゴリタグ、写真付きの記事カード3枚、一覧へボタン。下に INSTAGRAM の投稿カードを並べる。
03
ABOUT（せきがはら人間村とは）
左に写真、中央に縦書きの「ここにしかない景色とアートと食体験で豊かな時間を」、右に英字見出しと成り立ちの説明文、詳細へボタン。
04
MOVIE
全幅の新緑の映像に縦書き「あるく、はばたく、めぐる。」を重ね、中央に「動画を見る」ボタン。
05
施設紹介
生活美術館・未来食堂・cafe mirai を1つずつ、モノクロの全幅写真に縦書きの施設名を置き、中央にカラー写真と説明の白いカードを重ねる。
06
FACILITY GUIDE（ご利用案内）
縦書きのコピーとアクセス・営業時間・ガイドツアー・Q&A のリンク、右に施設写真の4枚グリッド。
07
FOUNDATION（財団について）
写真と縦書きのコピー、英字見出し FOUNDATION で運営財団を紹介する。
08
フッター
ページ末尾のフッターで締める。

Interaction

アニメーション・インタラクション

右上の MENU ボタンはスクロール中も固定表示され、どのセクションからでもメニューを開ける
キャプチャでは施設紹介の縦書き見出しが重なって写っており、GSAP ScrollTrigger で写真を pin しながら見出しを送る演出と思われる
ヘッダーの天気と気温は、天気APIから取得した値を表示していると思われる
FV の写真は季節の風景を切り替えるスライドショーと思われる。縦書きコピーは writing-mode: vertical-rl で組める

スクロールのコマ撮り100–100000ms

検出された技術:GSAPAdobe Fonts

Reproduce

再現するときのポイント

01FV は写真:カード列をおよそ3:1に分け、施設への入口をファーストビューに入れる
02コピーは writing-mode: vertical-rl の明朝で組み、英訳を小さく同じ向きに添える
03英字見出しは Cormorant Garamond を細く大きく使い、和文の明朝と並べてトーンを揃える
04施設紹介は背景写真に filter: grayscale(1) をかけ、中央のカードの写真だけカラーで見せる

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全8セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

sekigaharaningenmura.katapick.md

1---
2title: "せきがはら人間村 再現用デザイン仕様書"
3source: https://sekigaharaningenmura.jp/
4katapick: https://katapick.com/sites/sekigaharaningenmura
5category: ブランド
6region: 国内 (JP)
7tags: [縦書き, セリフ体, 写真主体, ライト, 余白, 固定ナビ]
8launched: 2025-12
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 26
13generator: Katapick
14---
15 
16# せきがはら人間村 — 再現用デザイン仕様書
17 
18> 開いた瞬間、美術館・食堂・カフェが選べる。関ケ原の複合文化施設せきがはら人間村のサイトは、彫刻の並ぶ芝生の写真に縦書きの明朝コピーを添え、右列の施設カードで“何ができる場所か”をFVのうちに見せ切る。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22