循環葬 RETURN TO NATURE

擷取 · 畫面版權屬於原網站 · https://returntonature.jp/

概覽 Overview
日本的森林葬「循環葬 RETURN TO NATURE」的網站(把骨灰埋進寺院的森林、不留墓碑),日文。第一屏是滿版、柔焦的森林影片,左上直排的白色小字「RETURN TO NATURE」,右上一條白色、4px 圓角的導覽(ホーム、森の所在地、お客さまの声…)和兩顆赭色的按鈕(見学予約、資料請求);左邊白色的明體大字「お墓を手放す、その先に 森に還る 循環葬」,字距拉得很開;右下一個深綠的活動橫幅(11/10 オンライン説明会)。
往下是淺灰綠(#EEF0E7)底:置中的深綠明體標題「受け継ぐお墓は必要でしょうか」錯開兩行,左邊一張森林裡的人像、右邊一段很疏的說明;淡橄欖綠底的得獎(Good Design、Wood Design);「負担を残さず自然に還る」的特點清單和一排淡綠的使用者心聲卡片;米黃(#FFFAEA)的段落;左邊淺綠面板、右邊滿高的森林照片的價值介紹;一整段暗綠的森林影片和三句白字。畫面最下面一直浮著白色的長條,放兩顆赭色的膠囊按鈕。
整體是安靜、自然的綠:淺灰綠、淡橄欖、米黃的底,深綠的字,赭色(像土)的按鈕;標題用 Shippori Mincho 明體、字距拉開,內文用 Zen Kaku Gothic;照片都是森林、土、手。
顏色 Colors
Canvas(#EEF0E7):淺灰綠,主要的底。
Text/Heading(#0C5900):深綠,標題和內文都用它,不用黑。
Primary(#B67628):赭色,像土。「見学予約」「資料請求」的按鈕;#A76D25 是同色系的字。
Forest(#0B4B01)、Forest deep(#005027):深綠的活動橫幅、輸入框。
Surface(#E5E9D4):淡橄欖綠的段落底和心聲卡片。
Cream(#FFFAEA):米黃的段落底。
Paper(#FFFFFF):導覽條、浮在下面的按鈕列、部分卡片。
Sage(#C1D0A3、#AAC3A2)、Border(#DAE3C8):淺綠的框線、輪播箭頭的框、清單前面的小圖示。
canvas
#EEF0E7
text
#0C5900
heading
#0C5900
primary
#B67628
on-primary
#FFFFFF
primary-text
#A76D25
forest
#0B4B01
forest-deep
#005027
surface
#E5E9D4
cream
#FFFAEA
paper
#FFFFFF
sage
#C1D0A3
sage-soft
#AAC3A2
border
#DAE3C8
mist
#EEF0E74D
字級 Typography
標題用 Shippori Mincho(Google Fonts 的明體),內文和按鈕用 Zen Kaku Gothic New(Google Fonts)。
第一屏的「森に還る 循環葬」52~56px/500 的明體,字距拉得非常開(約 30%),白字。
段落標題 44px/600、字距 8.8px,兩行錯開。
價值介紹的標題 36px/600、行高 57.6px、字距 5px,三行。
引用的大字 26px(Zen Kaku Gothic);心聲卡片 22px/600 的明體。
內文 16px/500、行高約 2 倍;按鈕 15.2px;導覽 14px/700 的明體。
display · Shippori Mincho · 52px
The quick brown fox 敏捷的狐狸
h2 · Shippori Mincho · 44px
The quick brown fox 敏捷的狐狸
h3 · Shippori Mincho · 36px
The quick brown fox 敏捷的狐狸
quote · Zen Kaku Gothic New · 26px
The quick brown fox 敏捷的狐狸
card-title · Shippori Mincho · 22px
The quick brown fox 敏捷的狐狸
body · Zen Kaku Gothic New · 16px
The quick brown fox 敏捷的狐狸
button · Zen Kaku Gothic New · 15.2px
The quick brown fox 敏捷的狐狸
nav · Shippori Mincho · 14px
The quick brown fox 敏捷的狐狸
版面 Layout
內容寬度約 1100px,標題常常錯開排、置中。
導覽是浮在右上角的白色細條,旁邊兩顆赭色按鈕。
畫面最下面一直浮著一條白色、上面圓角的按鈕列:兩顆赭色的膠囊和一行小字「見学は駅からの無料送迎をご用意」。
段落之間換底色(淺灰綠 → 淡橄欖 → 米黃),照片都有小圓角。
價值介紹:左邊淺綠面板(72px 內距)放文字和專家介紹,右邊滿高的照片。
心聲卡片橫向輪播,下面細框的左右箭頭和「1 — 5」。
Responsive
375px 寬時,頁首剩「RETURN TO NATURE」、見学予約、資料請求和選單;第一屏是直式的森林照片,「お墓を手放す、その先に 森に還る 循環葬」兩行;右下深綠的活動橫幅照樣在。
間距
space-14
14px
space-15
15px
space-16
16px
space-20
20px
space-24
24px
space-26
26px
space-30
30px
space-36
36px
space-40
40px
space-72
72px
層次 Elevation & Depth
沒有陰影。層次靠柔焦的森林影片、淺色面板疊在照片旁邊,和浮在下面的白色按鈕列。
形狀 Shapes
按鈕是膠囊(赭色),導覽的按鈕 6px、導覽條 4px。
卡片、照片 6~10px 的小圓角;價值面板 8px。
輪播箭頭是 4px 圓角的細框長方形。
圓角
radius-4
4px
radius-6
6px
radius-8
8px
radius-10
10px
full
9999px
元件 Components
主要按鈕:#B67628 赭色底、白字 15.2px,膠囊形,240×50,左邊一個白色圓形的電話或信封圖示(見学予約、資料請求)。
導覽條:白底、4px 圓角,深綠 14px/700 的明體連結;右邊兩顆赭色、6px 圓角的按鈕。
活動橫幅:#0B4B01 深綠、6px 圓角,淺色的大日期「11/10」和「オンライン説明会」,右邊一個小圖示。
心聲卡片:#E5E9D4 淡橄欖、10px 圓角,296×387,前面一個「“」,明體的引言,下面圓形的頭像和名字。
價值面板:淺灰綠、8px 圓角、72px 內距,小標(Value 01)、明體標題、內文。
新聞列:一則一列,下面一條細線,上下 14/26px。
- 按鈕
button-primary
- 背景
- #B67628
- 文字
- #FFFFFF
- 字級
- button · Zen Kaku Gothic New · 15.2px
- 圓角
- 9999px
- 內距
- 0px
- 框線
- 0px
- 陰影
- none
- 寬
- 240px
- 高
- 50px
- 連結文字
nav-bar
- 背景
- #FFFFFF
- 文字
- #0C5900
- 字級
- nav · Shippori Mincho · 14px
- 圓角
- 4px
- 內距
- 0px 16px
- 框線
- 0px
- 陰影
- none
- 高
- 34px
- 按鈕
nav-cta
- 背景
- #B67628
- 文字
- #FFFFFF
- 字級
- nav · Shippori Mincho · 14px
- 圓角
- 6px
- 內距
- 0px 16px
- 框線
- 0px
- 陰影
- none
- 高
- 42px
- 範例文字
event-banner
- 背景
- #0B4B01
- 文字
- #EEF0E7
- 字級
- card-title · Shippori Mincho · 22px
- 圓角
- 6px
- 內距
- 24px 30px 20px
- 框線
- 0px
- 陰影
- none
- 卡片標題一行內文
voice-card
- 背景
- #E5E9D4
- 文字
- #0C5900
- 字級
- card-title · Shippori Mincho · 22px
- 圓角
- 10px
- 內距
- 36px 30px 40px
- 框線
- 0px
- 陰影
- none
- 寬
- 296px
- 卡片標題一行內文
value-panel
- 背景
- #EEF0E7
- 文字
- #0C5900
- 字級
- h3 · Shippori Mincho · 36px
- 圓角
- 8px
- 內距
- 72px
- 框線
- 0px
- 陰影
- none
slider-arrow
- 背景
- transparent
- 文字
- #0C5900
- 字級
- body · Zen Kaku Gothic New · 16px
- 圓角
- 4px
- 內距
- 0px
- 框線
- 1px #C1D0A3
- 陰影
- none
- 寬
- 64px
- 高
- 30px
- 卡片標題一行內文
news-row
- 背景
- transparent
- 文字
- #0C5900
- 字級
- body · Zen Kaku Gothic New · 16px
- 圓角
- 0px
- 內距
- 14px 0px 26px
- 框線
- 0px
- 陰影
- none
該做和不該做 Do's and Don'ts
要用淺灰綠、淡橄欖、米黃當底,深綠當字;不要用純黑和純白的大色塊。
按鈕用赭色的膠囊,像土的顏色,跟綠色互補。
標題用明體、字距拉開、錯開排;內文行高拉開,讀起來慢。
照片用森林、土、手這些自然的近照,柔焦、不要太飽和。
不要加陰影和鮮豔的顏色。