せきがはら人間村

日本岐阜縣關原的「せきがはら人間村」（一家機械製造商從 1980 年代後半開始整理的戶外園區，有生活美術館、未來食堂、cafe mirai）的網站，日文。第一屏左邊一張很大、5px 圓角的照片：草地上散放的石雕、遠山，上面直排的白色明體大字「生活と、アートと、風景。」；右邊一欄三張直式的小照片（生活美術館、未來食堂、cafe mirai），各有一個白色的小圖示和名稱；右上角一顆黑色的膠囊「MENU」。

往下是白底：「NEWS」用 Cormorant Garamond 的大寫英文，旁邊細框膠囊的分類標籤，右邊三張新聞的照片；「ABOUT」右對齊的英文大字、直排的明體標語「ここにしかない景色とアートと食体験で豊かな時間を」和說明；一段滿版、柔焦的自然影片（樹葉、蝴蝶），中間一顆白色的膠囊「動画を見る」；三個設施各佔一整段：黑白的人物照片當背景，中間一張白色的卡片（彩色照片、說明、黑色按鈕），右上或左上直排的設施名稱；「FACILITY GUIDE」的四格照片。

整體是安靜、有溫度的自然與藝術：白底、近黑字，日文全用明體（直排很多），英文用細的襯線字；彩色只來自草地、樹和天空的照片；按鈕是黑底白字的小長條，右邊一個 ▶。

• Canvas（#FFFFFF）：白底，也是設施段落裡的卡片。

• Text／Primary（#1A1A1A）：近黑的字、黑色的按鈕和「MENU」。

• Inverse（#000000）：黑色的底和照片的暗部。

• Text muted（#808080）、Neutral（#4D4D4D）：日期、目前所在的導覽項目這類灰字。

• Border（#E5E5E5）：分類標籤的細框。

• 照片帶出草地的綠、天空的藍和石頭的灰；設施段落的背景照片是黑白的。

日文用源ノ明朝（Source Han Serif JP，Google Fonts 的 Noto Serif JP 是同一套），英文用 Cormorant Garamond（Google Fonts）。

• 「NEWS」「ACCESS」這種英文段落名 49～59px／500 的 Cormorant Garamond，字距收得很緊（-5%）。

• 第一屏和設施名稱的直排明體 31.7px／400、字距 2.2px，白字壓在照片上。

• 新聞標題 17.8px／600；內文 13.85px、行高 23.75px。

• 按鈕 12.9px／600；日期 11.9px；標籤 10px／600。

• 頁面左右各留約 5px 的窄邊，照片和段落幾乎滿版、5px 圓角，段落之間留很大的白。

• 第一屏：左邊一張大照片（約四分之三寬），右邊一欄三張小照片。

• 新聞、ABOUT：英文大字在一邊，照片在另一邊，直排的明體標語放在中間。

• 設施段落：滿版的黑白照片當背景，中間一張白卡片，直排的設施名稱貼在一角。

• 右上角固定一顆黑色的「MENU」。

Responsive

• 375px 寬時，第一屏是一張直式的大照片，直排的「生活と、アートと、風景。」在左下；下面一排三格的小照片；右上角「MENU」。

沒有陰影。層次靠白卡片疊在黑白照片上、照片和白底的交替，和柔焦的影片。

• 照片、卡片、按鈕都是約 5px 的小圓角；少數小元件 2.5px。

• 「MENU」、分類標籤、「動画を見る」是膠囊。

• 按鈕右邊一個 ▶，用細線和按鈕本體分開。

• 主要按鈕：#1A1A1A 黑底、白字 12.9px／600，5px 圓角，高 54px，左右很寬（約 74px），右邊一個用細線隔開的白色 ▶（一覧へ、詳細へ）。

• 影片按鈕：白底黑字的膠囊，高 64px，左邊一個黑色圓形的 ▶（動画を見る）。

• MENU：黑底白字 10px 的小膠囊，高 24px。

• 分類標籤：透明底、1px 淡灰框的膠囊，10px／600（お知らせ、生活美術館…）。

• 設施卡片：白底、5px 圓角、10px 內距，彩色照片、兩行說明、黑色的「詳細へ」，疊在黑白的背景照片上。

• 新聞：照片在上，日期、分類標籤、瀏覽數一行，下面 17.8px 的標題。

• 要讓自然和藝術的照片當主角；介面只用白、近黑、灰。

• 日文用明體，多用直排；英文用細的襯線大寫字、字距收緊。

• 照片和卡片用小圓角，按鈕是黑底小長條加 ▶。

• 段落之間留大量的白，不要擠。

• 不要加陰影和亮色；需要對比時把背景照片轉成黑白。