UGOKKO うごっこ

日本給孩子的「兒童健康運動教室」UGOKKO（うごっこ）的網站（日文）。第一屏是一大片水藍（#4BC3E5）：最上面撐滿寬度的白色圓體大字「GO! UGOKKO!」，下面兩個跳起來的小孩，周圍飛著粉紅、黃、紫、綠、橘的毛絨角色（有大眼睛的字母形狀）；左邊一行白色的「動かせ、きみのカラダとミライ。」，右邊一排白字的導覽。右邊一直固定著三個直式、圓角的彩色分頁（會員頁面、體驗申請、聯絡我們）和一顆白色的「MENU」。

往下還是水藍底：角色從畫面左邊探出頭來，右邊是白色的圓體標題「ミライの日本を支える、ちいさな背中の健康づくり。」和說明；照片的上下緣是波浪形；「PICK UP CONTENTS」一排圓弧形的白卡片；然後換成米白底（#F5F4EF），一座插畫的「UGOKKO WORLD」島，三張超大圓角的服務卡片（LABO、GYM、DINING），新聞、常見問題、體驗談、交通資訊。

整體是給孩子和家長的可愛風格：大面積的水藍和米白，配粉紅、橘、黃、綠、紫五個角色色；字是圓體（Zen Maru Gothic）和圓圓的英文（Fredoka）；所有東西都很圓，卡片圓角 20px 到 220px，邊緣用波浪。

• Canvas（#4BC3E5）：主要的水藍底，第一屏和前半段。#00AAE2 是比較深的藍，用在少數標題字。

• Cream（#F5F4EF）：後半段和頁尾的米白底。

• Surface（#FFFFFF）：卡片、按鈕的白；水藍底上的字也是白色。

• Text（#333333）：白卡片和米白底上的深灰字。

• Primary（#F55B96）：粉紅。卡片上的圓形箭頭、右邊的「會員頁面」分頁、「Q.」、GYM 的標題。

• 角色色：Orange（#FB9B00，DINING、交通資訊卡）、Green（#2BB063，聯絡我們分頁）、Purple（#6367B0，睡眠、體驗申請分頁）、Yellow（#FFCF19，LABO）；每一種服務、每一個分頁各有一個顏色。

• Border（#CDC4C5）、Text muted（#848484）、Neutral（#AEAAAF、#222222）：新聞的分隔線、日期、次要文字。

日文標題用 Zen Maru Gothic（圓體），英文用 Fredoka（圓圓的英文字），內文用 Noto Sans JP；三套都在 Google Fonts。

• 第一屏「GO! UGOKKO!」是撐滿寬度的白色圓體英文大字（圖片）。

• 段落的英文名（NEWS、FAQ）73～99px 的 Fredoka／600。

• 主要的標語 58px／700 的圓體、行高約 1.8；小標語 34px、字距 2px。

• 服務卡片的標語 26px／700，各用那個服務的顏色。

• 按鈕的字 21px／700 圓體；「無料体験・見学」26px／700。

• 新聞標題 20px／600；內文 16px、行高 32px（2 倍）。

• 導覽 15px／600。

• 內容寬度約 1244px；卡片列常常超出畫面兩邊，可以左右滑。

• 右邊固定三個直式的彩色分頁和一顆「MENU」，不管捲到哪裡都在。

• 段落之間：照片的上下緣是波浪形，水藍和米白的交界也是曲線。

• 角色常常從畫面邊緣探出頭，或散落在標題旁邊。

• 服務卡片三張橫排，中間那張最大，兩邊露一半。

• 新聞：左邊直排的大字「NEWS」，右邊三張小卡和一列一則的列表。

Responsive

• 375px 寬時，「GO! UGOKKO!」改成兩行、撐滿寬度，兩個小孩和角色在中間；右邊的彩色分頁縮小、照樣固定；最下面多一條「體驗申請」「聯絡我們」的按鈕列。

沒有陰影。層次靠角色和照片疊在色塊上、波浪形的邊緣，和水藍、米白兩種底色的交替。

• 什麼都圓：主要按鈕是膠囊、箭頭是正圓、PICK UP 卡片是 60px 圓角、服務卡片是 220px 的超大圓角（幾乎是圓頂的拱形）、資訊卡 20px、常見問題 50px。

• 照片和段落的邊緣用波浪。

• 角色是圓滾滾、有大眼睛的字母形狀。

• 主要按鈕：白底、#333333 的圓體字 21px／700，膠囊形，高 70px，右邊一個粉紅的圓形箭頭（もっと見る VIEW MORE）。

• 圓形箭頭：#F55B96 粉紅底、白色箭頭的正圓，放在卡片的右下角。

• 右側分頁：直式、兩端圓弧的彩色長條（粉紅、紫、綠），白色的直排字，固定在畫面右邊。

• 服務卡片：白底、上方 220px 的大圓拱，上面一個角色、服務的字樣、彩色的小標籤、彩色的標語、說明和圓形箭頭。

• PICK UP 卡片：白底、60px 圓角的方形，照片和角色、英文大字（EXPERIENCE、EVENTS、STAFF、RECIPE BOOK）。

• 資訊卡：整張是角色色（橘、粉紅），20px 圓角，白字的大標和英文小字（交通アクセス ACCESS）。

• 常見問題：白底、50px 圓角的長條，左邊粉紅的「Q.」，右邊問題。

• 要用水藍和米白當大面積的底，粉紅、橘、黃、綠、紫只當角色和分類的顏色，一種服務一個顏色。

• 字要用圓體（Zen Maru Gothic）和圓圓的英文（Fredoka），行高拉開。

• 所有東西都做圓：膠囊按鈕、超大圓角的卡片、波浪的邊緣。

• 讓角色從邊緣探出頭、散落在版面上，增加玩的感覺。

• 不要用直角、細線、陰影和深色的大色塊；這是給孩子的網站。