返回首頁

森林葬的服務網站,安靜自然的綠:淺灰綠、淡橄欖、米黃的底配深綠的字,按鈕是像土的赭色膠囊。標題用 Shippori Mincho 明體、字距拉得很開、錯開排,內文用 Zen Kaku Gothic、行高拉開;照片是柔焦的森林、土和手。卡片 6~10px 小圓角,畫面下方浮著白色的按鈕列,沒有陰影。

取得 DESIGN.md
造訪網址怎麼使用

循環葬 RETURN TO NATURE

循環葬 RETURN TO NATURE 的網站截圖(桌機)

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

循環葬 RETURN TO NATURE 的網站截圖(手機)

概覽 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

  • 要用淺灰綠、淡橄欖、米黃當底,深綠當字;不要用純黑和純白的大色塊。

  • 按鈕用赭色的膠囊,像土的顏色,跟綠色互補。

  • 標題用明體、字距拉開、錯開排;內文行高拉開,讀起來慢。

  • 照片用森林、土、手這些自然的近照,柔焦、不要太飽和。

  • 不要加陰影和鮮豔的顏色。