MANERUBETA
みこと保育園｜遊びこそ豊かな学びのWebサイトプレビュー

DESIGN REFERENCE

みこと保育園｜遊びこそ豊かな学び

コーポレートサイト保育園公式サイトやさしいカラフル写真中心余白曲線・円形非対称レイアウトレスポンシブゴシック体

クリーム色の余白に、色とりどりの円弧と子どもたちの写真を組み合わせた保育園サイト。大小の写真をずらした配置と、画面幅に合わせて組み替わる構成が特徴。

オリジナルサイトを見る
ジャンル
教育・保育
元の業種
保育・幼児教育
デザイン分析日
2026/9/13

design.md

ダウンロード

みこと保育園 — Style Reference

Candid nursery photographs framed by colorful curved bands on a spacious cream canvas.

Website / Original URL: mikotohoikuen.net Final URL: mikotohoikuen.net Theme: light, with a warm cream background and green, teal, coral, and ochre accents; no alternative theme was evidenced. Inspected evidence: September 13, 2026, 02:43:46.723 JST — September 12, 2026, 17:43:46.723 UTC. Viewports: desktop 1440 × 1000 CSS px; mobile 390 × 844 CSS px. Scope: the current nursery homepage, including its opening composition, notices, admissions introduction, four photographic navigation tiles, daily-photo rail, and footer. Three desktop captures, two mobile captures, and rendered DOM/computed-style records were supplied. Linked pages and an opened mobile menu were not inspected.

The site presents a working nursery through children, daily routines, and its physical environment. Its distinctive graphic vocabulary is a broad curved band: repeated around the logo and hero photograph, reduced to a horizontal ribbon above the footer, and separated into four corner accents around the contact panel. These repetitions connect the page without surrounding every section with a box.

Most of the canvas stays pale and open. Green identifies navigation and archive actions; teal, coral, and ochre give individual photographs and decorative elements their character. Japanese sans-serif text remains compact and carefully spaced. The most prominent words in the opening composition are illustrated lettering, so their appearance cannot be reproduced by copying the computed font size of their containing heading.

This is a multipage nursery website. Admissions information, everyday photographs, public notices, recruitment, contact details, and document downloads all have meaningful places in its hierarchy.

How to Read This Reference

  • Measured means a value recorded in the supplied rendered DOM or computed styles. Dimensions are rounded to two decimal places for readability.
  • Calculated means arithmetic based on those measurements or recorded custom properties.
  • Estimated means a visual approximation from the original-page screenshots. Estimated colors were not obtained through pixel sampling.
  • Recommended means an implementation choice for a new project. It does not establish how the original website was built.
  • Token names introduced here are descriptive aliases. The source properties --glid and --bgh retain their recorded spellings.
  • DOM geometry does not establish visibility. Mobile navigation links have measurable boxes in the record, but the supplied mobile screenshots show the closed navigation state.
  • The supplied evidence is the entire inspection basis. No additional browsing, file access, or interaction testing was performed for this reference.

Tokens — Colors

Default Palette

Name Value Suggested token Role and evidence
Warm Paper #fffbf5 --color-paper Measured body background at both viewports; the dominant page canvas
Soft Cream approximately #fff2e1 --color-cream Estimated warmer field in the contact panel and lower photo section
Main Ink #333333 --color-ink Measured body, introductory copy, and contact text
Link Ink #3a4851 --color-link Measured article titles, feature links, footer navigation, and entrance-map link
Muted Ink #666666 --color-muted Measured secondary footer links and copyright
Nursery Green #26ad6b --color-green Measured primary navigation and archive-button fill; also present on a related-site button
Clear Teal #1499ba --color-teal Measured related-site button fill; visually corresponds to the teal decorative family
Warm Coral #dc7759 --color-coral Measured related-site button fill; use as a reusable coral token, without assuming every artwork pixel is identical
Ochre approximately #e69c22 --color-ochre Estimated from the hero segments, annual-events badge, and footer decoration
Reversed White #ffffff --color-white Measured text on filled buttons and circular category labels

Green has a stronger navigational role than the other accents. The desktop navigation is green and underlined; both archive links use green fills. Category photography distributes coral, teal, green, and ochre across four separate entry points.

The pale hero pattern consists of large overlapping curved shapes with very little tonal separation. Its exact fills, opacity, and compositing method are not included in the record. Preserve the low contrast and generous scale when approximating it.

WordPress preset variables appear in the supplied data, including gradients and shadows. Their presence does not demonstrate use in the visible design. The screenshots do not establish a gradient-button or card-shadow system.

Tokens — Typography

Japanese Sans-Serif — Interface and Body

  • Measured family: 'Zen Kaku Gothic New', sans-serif.
  • Measured weights: 500 for introductory and contact paragraphs, 600 for most navigation and links, and 700 for section headings and category labels.
  • Body tracking: 0.9px at 18px desktop size and 0.7px at 14px mobile size, equivalent to 0.05em in these cases.
  • Heading tracking: commonly 0.08em, including 24px headings with 1.92px tracking and 18px category labels with 1.44px tracking.
  • Character: clear, friendly, moderately weighty Japanese typography with enough tracking to avoid a crowded institutional appearance.

The computed font stack is evidence of the declared family; font-file URLs and successful rendering of every individual glyph were not separately recorded.

Brand and Hero Lettering

The header identity, footer identity, and hero slogan appear as artwork inside headings with empty extracted text. Their visible proportions are therefore more informative than the inherited heading typography.

The visible hero copy is “あそびこそ 豊かな学び”. On desktop it occupies two vertical columns to the right of the central image. On mobile it becomes two horizontal lines near the bottom of the first screen. Individual characters alternate among the accent colors.

Use supplied brand artwork where available. If adapting the idea to a different identity, create appropriate lettering for that project and provide an accessible text equivalent. The existing artwork's production format and text alternatives were not included in the evidence.

Type Scale

Values below describe measured text, except where explicitly identified as artwork.

Role Desktop size / line height Mobile size / line height Weight Tracking
Body and ordinary links 18px / 28.8px 14px / 22.4px 600 0.9px / 0.7px
Introductory paragraph 18px / 40px 14px / 30px 500 0.9px / 0.7px
Admissions heading 24px / 36px 16px / 24px 700 1.92px / 1.28px
Daily-photo section heading 24px / 36px 18px / 27px 700 1.92px / 1.44px
Primary navigation 20px / 20px 20px / 20px, DOM only 600 0.9px / 0.7px
Notice title 18px / 28.8px 16px / 25.6px 600 0.9px / 0.7px
Circular feature label 18px / 27px 11px / 16.5px 700 1.44px / 0.88px
Photo-entry title 17px / 25.5px 14px / 21px 700 1.36px / 1.12px
Secondary footer link 16px / 25.6px 12px / 19.2px 600 0.9px / 0.7px
Contact paragraph 17px / 29.75px 14px / 24.5px 500 0.85px / 0.7px
Related-site button 13px / 13px 11px / 11px 600 0.9px / 0.7px
Copyright 13px / 13px 11px / 11px 500 0.65px / 0.55px

The recorded HTML root font size is 10px. The root's Times family does not describe the visible body typography, which overrides it. The Quick Start uses explicit pixel tokens and does not require a 10px root.

Tokens — Spacing & Shapes

Responsive Unit

The source exposes:

--glid: 4.34vw;
--bgh: calc((100vh + 240px) * 3.34);

At 1440px wide, --glid calculates to 62.496px. Several desktop dimensions align with this value: the footer's horizontal padding is 2 × --glid, and its vertical padding is 2.5 × --glid.

At 390px wide, the same property calculates to 16.926px, but the mobile layout also uses other proportions. For example, measured content gutters are approximately 6vw, or 23.4px. Do not scale the entire desktop arrangement using one unit.

The application of --bgh is not established by the supplied element records. It is not evidence of a document-height rule or a particular scrolling effect.

Spacing Scale

Use Desktop Mobile Evidence
Initial brand inset 60px from top and left 25.34px from top and left Measured
Initial navigation right clearance 55px Closed-state icon roughly 25px from right Desktop measured; mobile estimated
Desktop utility-circle gap 25px Not visible in the closed state Measured desktop geometry
Main photo-mosaic width 999.92px 343.22px Calculated from measured tile edges
Desktop gap between paired photos approximately 125px Portrait-column gap 20.59px Calculated
Mobile photo-row gap — 19.5px Calculated
Intro heading-to-paragraph gap 40px 15.59px Calculated from bounding boxes
Feature badge offset 20px outside image edges 8px inside left and bottom edges Calculated
Footer horizontal padding 124.99px 23.4px Measured
Footer top padding 156.24px 70.2px Measured
Footer bottom padding 156.24px 46.8px Measured declaration; positioned content also affects composition

Border Radius and Decorative Geometry

Element Treatment Evidence
Archive and related-site buttons 5px radius Measured
Utility links 50%, 120 × 120px circles Measured
Feature labels 50%; 120px desktop, 65px mobile Measured
Feature photographs Rounded outer corners, approximately 20px on desktop Screenshot estimate; the anchor itself reports 0px radius
Photo CTA recess Rounded cutout integrated into the lower-right image edge Visually observed; exact mask geometry unavailable
Hero frame Twelve broad curved segments in a circular, scalloped arrangement Visually observed
Footer contact panel Rounded cream rectangle with detached colored quarter-arcs Visually observed; exact radii unavailable
Footer separator Repeating alternating curved bands Visually observed

Do not infer image geometry from the anchor's computed border-radius: 0px. The clipping can belong to a descendant, mask, or artwork that was not separately measured.

Layout Measurements

Element Desktop 1440 × 1000 Mobile 390 × 844
Document height 4486px 3666px
Initial brand heading box 120 × 195.09px at (60, 60) 68 × 110.55px at (25.34, 25.34)
Hero decorative frame Approximately 866 × 864px Approximately 350 × 350px
Hero slogan artwork box 136.5 × 331.64px at (1213.5, 578.36) 211.77 × 95.27px at (89.13, 717.55)
Admissions paragraph 487.48 × 160px 212.41 × 180px
Landscape feature tile 531.20 × 353.78px 343.22 × 228.58px
Portrait feature tile 343.72 × 516.09px 161.31 × 242.20px
Photo-rail item width 312.47px 273px, exactly 70% of viewport width
Photo archive button 160 × 46.78px 160 × 36.38px
Footer identity artwork 334 × 76.34px 240 × 54.86px
Contact paragraph width 462.45px 280.84px
Related-site button 143.36 × 33.78px 89.86 × 39.59px

Hero-frame dimensions are screenshot estimates; the other entries come from DOM geometry. Landscape and portrait tiles are approximately 3:2 and 2:3, respectively.

Components

Peripheral Header and Brand

Role: persistent identity and access to the main site sections.

The desktop opening has no conventional full-width colored navigation bar. A tall logo sits at the upper left, and five right-aligned green links sit at the upper right: “ホーム”, “園について”, “園生活・行事”, “日々の写真”, and “採用情報”. Each link has an underline and a separate line of space around it.

The first desktop link starts at y = 55px; subsequent links advance by 44px. Their measured boxes are 26px high, including 6px bottom padding, with 20px text.

The left brand and right navigation remain at the screen edges in the scrolled desktop captures. They appear smaller there: the logo is approximately 84px wide and navigation text approximately 14px. Those scrolled values are visual estimates; the trigger and final computed styles were not supplied.

At 390px, the opening logo is 68px wide and the visible navigation control is a small three-line icon in coral, ochre, and teal. The icon persists in the footer capture while the opening logo is no longer visible. An opened menu was not captured.

Circular Access and Contact Links

Role: direct routes to practical visitor information.

Two green circles appear in the lower-left area of the desktop opening. Each is 120 × 120px; their left positions are 50px and 195px, and their bottom clearance is 50px. A small white map or telephone symbol sits above a white 14px label.

“アクセス” links to /about/#access, and “お問い合わせ” links to /about/#contact. The telephone symbol does not establish a direct call action: the recorded contact link points to a page anchor.

The mobile DOM contains the same 120px circles, but they are absent from the supplied closed-state screenshot. Their visible placement in an opened menu remains unverified.

Hero Photograph and Segmented Frame

Role: establish the nursery's character through a child's attention and activity.

The composition has three principal layers: a very pale oversized background pattern, a central photograph within a scalloped opening, and a ring of twelve broad colored segments. Teal, coral, and ochre repeat around the frame. Green appears in the surrounding identity and slogan rather than as a fourth hero-ring segment color.

On desktop the ring is approximately 866px across, centered near the middle of the viewport. The vertical slogan occupies the lower-right area, leaving the upper-right navigation clear. On mobile the image is approximately 350px across, from about x = 20px to x = 370px, beginning near y = 231px. The two-line slogan sits below it near y = 718px.

The supplied desktop opening shows the photograph at very low visibility, while the mobile opening shows a clear photograph of a child in a red fleece and green cap with other children behind. The record does not establish why these visibility states differ. A fade or changing media state is possible, but its mechanism and timing are unverified. A new implementation should give the photograph a fully visible resting state.

Notices

Role: expose current institutional updates without competing with the photographic identity.

The rendered homepage contains two notice entries, each with a category, date, and linked title, followed by “お知らせ一覧へ”. The supplied entries concern published childcare-worker model wages and financial information.

Desktop title links are 18px; the archive button is a green rounded rectangle approximately 168.31 × 42px, with 12px 18px padding. On mobile, titles occupy approximately 343px of available width at 16px, and the archive button is centered at 160 × 38px.

The records establish the content and link geometry. Complete notice-row styling is not visible in the attached crops, so avoid inventing separators, category-pill fills, or hover effects.

Admissions Introduction

Role: explain the nursery's approach before visitors choose a detailed topic.

The heading “入園を検討中の方へ” precedes a short paragraph about attentive care and encouraging children's own awareness and initiative. The paragraph is notably narrow: 487.48px on desktop and 212.41px on mobile.

The generous line height is essential to the tone. Desktop copy uses 18px / 40px, and mobile uses 14px / 30px. The result is four measured desktop lines and six mobile lines. This section creates a quiet reading pause between announcements and the image navigation.

Photographic Navigation Mosaic

Role: make four nursery topics understandable through images.

Each tile is one linked unit containing a photograph, a circular heading, and the detail label “詳しくはこちら” with a small colored triangular arrow. The desktop screenshot shows the detail label occupying a paper-colored recess at the photograph's lower-right edge.

Topic Photograph visible in the desktop capture Shape Badge color Destination
“保育目標” Child in a pink cap exploring grass Landscape Coral /about/#purpose
“園舎紹介” Warm timber corridor with displays and doorways Portrait Teal /about/#architecture
“園の一日” Child eating a meal indoors Portrait Green /days/
“年間行事” Child examining plants outdoors Landscape Ochre /days/#event

Desktop layout is deliberately uneven. The first landscape photo sits left and aligns its bottom with the taller architecture image at right. The second row starts with the portrait daily-routine image at left and the landscape events image at right, aligned at their tops. The approximately 125px gap remains consistent between the image groups.

Badges are 120px circles that protrude 20px beyond the upper outer corner. Left-column badges attach to the upper left; right-column badges attach to the upper right. The circle remains a category heading within the tile rather than a separate nested action.

The mobile DOM establishes a different arrangement: the landscape purpose image spans both columns; architecture and daily routine form a pair of portrait images; the landscape events image spans both columns below. Badges shrink to 65px and move inside the bottom-left corner with an 8px inset. The mobile middle section was not supplied as a screenshot, so the precise mobile CTA recess treatment is unverified.

Daily-Photo Rail

Role: connect visitors with recent nursery activity.

A centered “日々の写真” heading introduces a horizontal sequence of linked entries, followed by the centered green “写真一覧へ” button. Entry titles and dates sit below their image areas.

Measured cards are 312.47px wide on desktop and 273px on mobile. Consecutive card origins are approximately 374.95px apart on desktop and 292.5px apart on mobile, giving calculated gaps of 62.48px and 19.5px.

The DOM repeats four unique entries three times and places entries beyond both viewport edges. This supports a repeated horizontal rail structure. It does not prove autoplay, drag support, snapping, speed, or control availability. The supplied footer crop shows only the lower portion of this section, so full photo-card image compositions are not available for visual analysis.

Archive Button

Role: provide a clear route from a homepage preview to a full index.

Use a compact green rectangle with white semibold text and a 5px radius. The photo archive button maintains a 160px width at both viewports while its font size changes from 18px to 14px. Its measured height changes from 46.78px to 36.38px.

The treatment is flat. No shadow or substantial border is visible. The consistent green fill connects these buttons to the primary navigation and utility circles.

Curved Footer Separator

Role: end the photo section and reconnect it to the brand motif.

A full-width ribbon of alternating curved segments crosses the page above the footer. Teal and ochre upward arches alternate with coral downward curves. The pattern continues through the viewport edges instead of being centered as a short ornament.

The desktop ribbon appears approximately 20px high, with individual motifs spaced about 72px apart. The mobile version appears approximately 16px high with about 54px between corresponding motif starts. These are visual estimates, not recorded asset dimensions.

Footer Navigation and Identity

Role: provide a comprehensive site map and a reassuring closing identity.

The footer returns to the main paper background. A horizontal brand lockup precedes two navigation columns. On desktop the lockup is 334px wide, and the content starts approximately 125px from the left edge. On mobile it becomes a centered 240px lockup.

The left navigation column contains “園について” and six secondary links. The second column contains “園生活・行事”, “日々の写真”, “採用情報”, and “各種書類ダウンロード”. Primary links have small colored triangular markers; secondary links use muted gray and greater indentation.

Two navigation columns remain on mobile, each approximately 171.61px wide. The footer does not collapse every link into one long column.

Contact Panel and Related-Site Links

Role: collect location and contact information in a distinct but quiet surface.

The desktop panel sits to the right of the footer navigation. It is approximately 562px wide and 250px high in the screenshot. On mobile it moves below the two navigation columns and is approximately 343px wide and 250px high.

A pale cream rounded rectangle supports four detached corner arcs: coral at top left, teal at top right, green at bottom left, and ochre at bottom right. Estimated outer arc boxes are approximately 44px on desktop and 32px on mobile.

Inside, the postal address precedes telephone, fax, and email information. On desktop, telephone and fax share a line; mobile gives them separate lines and moves the postal code to its own line. The underlined “入口はこちら” link points to an entrance-map PDF. Its contents were not inspected.

Three related-site buttons stay side by side at both viewports. Their fills are green, teal, and coral. The first label, “瓜連認定こども園”, wraps to two lines on mobile, producing approximately 40px-tall buttons. These links establish related destinations, without establishing the nursery's legal operating organization.

The copyright sits near the lower-left corner on desktop and is centered on mobile.

Tokens — Motion & Interaction

Element or treatment Recorded evidence What can be concluded
Ordinary links and buttons 0.4s ease-in-out transition A transition is declared; changed properties and end states were not captured
Header, brand heading, hero slogan container 0.6s ease-in-out transition These containers have a longer transition declaration
Circular feature headings 0.6s cubic-bezier(0.68, -0.6, 0.32, 2) The timing curve permits anticipation and overshoot; the affected property and trigger are unverified
Scrolled desktop header Smaller brand and navigation visible in later captures A compact scrolled presentation is visually supported; its threshold is unknown
Hero photograph Faint desktop capture and clear mobile capture Different visible states exist; fade, slideshow, and loading mechanisms remain unverified
Photo rail Repeated entries and offscreen horizontal positions Repeated rail geometry is supported; autoplay and user controls are unverified
Mobile menu Three-line control visible; menu links recorded in DOM Closed-state appearance is supported; opening, closing, and focus behavior were not exercised

Several sampled elements report animation: none. This is not proof that descendants, pseudo-elements, images, or JavaScript-driven media are static. Likewise, a computed transition value of all alone does not provide an animation duration.

For an adaptation, preserve the short, gentle timing and reserve the overshooting curve for small decorative responses. A specific hover scale, slide interval, or scroll animation would be a new implementation choice.

Surfaces

Layer Appearance Purpose
Main canvas Warm Paper #fffbf5 Unifies content and generous negative space
Hero background Very pale overlapping curved forms Adds a playful atmosphere without reducing text prominence
Photographic content Natural-color images with shaped edges Carries the nursery's everyday experience
Category marker Solid colored circle with white text Gives each photographic destination a recognizable label
Archive action Flat green rectangle with 5px radius Makes index navigation easy to identify
Photo-section field Slightly warmer cream, estimated Separates recent activity from the surrounding page
Contact surface Pale cream rounded rectangle with detached arcs Groups practical information at the end of the page

Depth comes from overlapping shapes, image clipping, and the position of circular labels. There is no visually established general-purpose shadow elevation system.

Imagery

Photography is candid, bright, and close to the child's point of view. The observed images emphasize attention and participation: looking upward, exploring grass, eating, examining plants, and inhabiting a timber-lined nursery. Clothing and hats provide natural color that works alongside the graphic palette.

Use natural skin tones, soft daylight, visible context, and crops that preserve faces and hands. The architectural portrait provides a useful change of subject and emphasizes the warmth of the building. A set made entirely of tightly cropped faces would lose this variety.

The graphic layer remains clean and flat: the identity, circular frame, category circles, triangular arrows, three-line menu symbol, and corner arcs have no photographic texture. Their common curved vocabulary matters more than introducing additional illustrations.

For new content, use photographs with appropriate authorization and select separate focal positions for each crop. Keep the hero face comfortably inside the decorative boundary at both viewport sizes.

Observed Asset References

Asset or artwork Reference availability Implementation implication
Vertical header logo Visible; source filename not supplied Preserve its approximately 1:1.63 width-to-height relationship
Horizontal footer identity Visible; source filename not supplied Preserve its approximately 4.38:1 relationship
Hero photo and scalloped frame Visible; source filenames and clipping method not supplied Keep photographic content and decorative frame independently scalable
Multicolor hero slogan Visible; source filename not supplied Support its vertical desktop and horizontal mobile arrangements
Four feature photographs Subjects visible in the desktop middle capture; filenames not supplied Use approximately 3:2 landscape and 2:3 portrait crops
Footer curved ribbon and corner ornaments Visible; filenames not supplied SVG is a recommended implementation format, not a verified source format
Entrance map /wp/wp-content/themes/mikoto/images/pdf/map.pdf Recorded destination of “入口はこちら”; the document itself was not opened

No image filenames, font-file URLs, or asset dimensions beyond the rendered evidence should be inferred from the website's directory structure.

Layout & Responsive Behavior

Desktop Composition

The opening occupies the first 1000px-tall viewport. Identity and navigation sit around a large central image rather than inside a horizontal header band. Utility circles occupy the lower-left region and the vertical slogan balances them on the right.

Below the opening, notices precede a narrow admissions introduction. The photo mosaic occupies approximately 1000px of width between x = 220px and x = 1220px. Its two landscape and two portrait images form alternating silhouettes, with generous open areas around them.

The daily-photo section expands horizontally beyond the content column. The footer then returns to a structured arrangement: identity above two navigation columns, with a contact panel on the right.

Mobile Composition

The 390px-wide opening retains deliberate empty space. The brand sits at the upper left, the menu icon at the upper right, the hero photograph around the vertical center, and the two-line slogan close to the bottom. Compressing these into a short banner would change the observed pacing.

Main content generally uses approximately 23.4px side gutters. The admissions paragraph remains much narrower than this general content width. The photo mosaic changes from a staggered desktop arrangement to three rows: landscape, paired portraits, landscape.

The daily-photo cards remain in a horizontal rail at 70vw. The footer retains two navigation columns, moves the contact panel below them, and centers the copyright. The three related-site buttons remain in one row.

Boundaries of the Responsive Evidence

Only 1440px and 390px widths were recorded. Exact breakpoints, tablet arrangements, short landscape behavior, and browser zoom behavior are unknown. The breakpoint and fluid formulas in the Quick Start are recommendations selected to reproduce the supplied proportions.

The document becomes shorter on mobile despite more text wrapping: 3666px versus 4486px. Smaller imagery, reduced gaps, and the reorganized mosaic explain why a simple desktop scaling strategy would be inaccurate.

Do’s and Don’ts

Do

  • Keep the warm paper canvas dominant and let photographs provide most of the visual detail.
  • Repeat the curved-band motif at several scales: identity, hero, separator, and contact corners.
  • Use green consistently for primary navigation and archive actions.
  • Preserve the mix of landscape and portrait nursery photography.
  • Keep desktop feature images staggered and apply the evidenced three-row mobile arrangement.
  • Maintain the narrow, spacious admissions paragraph.
  • Treat the hero slogan as a responsive composition with vertical and horizontal arrangements.
  • Use circular category headings and integrated detail-label recesses on desktop.
  • Retain two footer navigation columns and three related-site buttons on mobile.
  • Keep measured styles, screenshot estimates, and new behavior clearly distinguishable.

Don’t

  • Do not turn every photograph into an identical card with a detached title block.
  • Do not replace the segmented hero frame with a generic colored circle.
  • Do not introduce prominent shadows, glass effects, or glossy gradients.
  • Do not derive the visible logo or slogan size from their container's inherited font size.
  • Do not treat the faint desktop hero photograph as the required permanent appearance.
  • Do not assume that measured mobile menu links were visible in the supplied screenshot.
  • Do not infer autoplay, dragging, or carousel timing from repeated DOM entries alone.
  • Do not copy the WordPress preset palette as though it were the active visual palette.
  • Do not make a telephone-shaped icon call a number when the recorded action is a contact-page link.
  • Do not assign a legal operator or production team from unrelated footer destinations.

Recommended Implementation Additions

These are recommendations for a new implementation, not verified features of the original:

  • Give logo and slogan artwork meaningful accessible equivalents. Empty extracted heading text alone does not establish whether the current images have suitable alternatives.
  • Implement each feature tile as a single link. Keep the circular heading and detail label inside that link without nested interactive elements.
  • Use a real button for the mobile menu, with an accessible name, expanded state, keyboard operation, and appropriate focus handling. Preserve navigation access if enhancement scripts fail.
  • Test the small white-on-accent labels and green-on-cream links for contrast. If needed, introduce a separately tested darker action/text token while retaining the decorative palette.
  • Increase effective mobile touch areas around 11–14px labels without unnecessarily enlarging the visible artwork.
  • If the photo rail moves automatically, provide pause and keyboard-accessible navigation. Keep cloned slides out of the tab order and accessibility tree.
  • Respect reduced motion and ensure the hero photograph remains visible when animation is disabled or interrupted.
  • Use explicit image dimensions, responsive image sources, and stable crop containers. Prioritize the opening photograph and defer offscreen photo decoding where appropriate.
  • Identify the entrance-map link as a document link. Telephone and email links can be added deliberately if desired; their interactivity was not established by the supplied link list.

Agent Prompt Guide

Quick Color Reference

  • Main canvas: #fffbf5, measured.
  • Contact/photo-section cream: approximately #fff2e1, estimated.
  • Main text: #333333; links: #3a4851; secondary text: #666666.
  • Navigation and archive buttons: #26ad6b, measured.
  • Teal and coral anchors: #1499ba and #dc7759, measured on related-site buttons.
  • Ochre ornament: approximately #e69c22, estimated.
  • Filled-control labels: #ffffff, measured.

Overall Prompt

“Create a Japanese nursery homepage inspired by the observed structure of みこと保育園. Use a warm cream canvas, Zen Kaku Gothic New typography, natural documentary photographs, and broad curved bands in teal, coral, and ochre. Place a tall identity at the upper left and underlined green navigation at the upper right on desktop. Center a large scalloped photograph and place multicolor vertical slogan lettering to its right. Follow with notices, a narrow admissions introduction, and four linked photos arranged as alternating landscape and portrait images with overlapping circular category headings. Recompose the photos on mobile into a full-width landscape, two portrait images, and another full-width landscape. Finish with a horizontal photo rail, a curved decorative ribbon, two footer navigation columns, and a cream contact panel with four colored corner arcs. Keep surfaces flat, spacing generous, and practical information easy to find.”

Example Component Prompts

  1. Hero: “Compose a full-height cream nursery opening with pale oversized curved background shapes. Frame a candid child photograph with twelve broad teal, coral, and ochre segments. Use vertical multicolor slogan lettering at the lower right on desktop and two horizontal lines below the image on mobile. Preserve a clearly visible photo as the resting state.”
  2. Feature mosaic: “Create four linked nursery photographs: landscape outdoor exploration, portrait timber corridor, portrait mealtime, and landscape gardening. Use 120px colored circular headings outside the upper corners on desktop, approximately 125px gaps, and small detail labels cut into the image edges. On mobile use landscape / paired portraits / landscape, with 65px badges inset at the lower left.”
  3. Admissions introduction: “Set a compact Japanese heading above a narrow paragraph in dark gray on warm paper. Use 18px text with 40px line height on desktop and 14px with 30px line height on mobile. Center the text column while keeping paragraph text left aligned.”
  4. Contact panel: “Design a pale cream rounded contact panel with detached coral, teal, green, and ochre quarter-arcs at its corners. Place the postal address, entrance-map link, telephone, fax, and email above three flat related-site buttons. Keep the buttons side by side on mobile and allow the longest label to wrap.”
  5. Photo rail: “Present recent nursery photo entries in a horizontal rail with dark-gray titles, smaller dates, and a centered green archive button. Use roughly 312px cards at a 1440px viewport and 70vw cards on a 390px phone. Treat autoplay, dragging, and controls as explicit product decisions.”

Quick Start

CSS Custom Properties

The following CSS is a recommended adaptation. It preserves the measured palette, text metrics, feature proportions, and mobile rearrangement while using a conventional root font size. The 800px breakpoint, hero-sizing formulas, photo radii, and cream/ochre values are implementation choices or estimates.

Component anatomy: each .feature-card is one anchor containing an image, an .feature-badge heading, and a .feature-more span. .hero-art should contain supplied frame artwork and a clipped photograph, preferably composed as an inline SVG. .hero-copy contains two phrase wrappers with individually colored character spans. This CSS does not synthesize the official logo or exact scalloped path. Font loading, mobile-menu behavior, and any moving photo rail require separate implementation.

:root {
  /* Measured colors */
  --color-paper: #fffbf5;
  --color-ink: #333333;
  --color-link: #3a4851;
  --color-muted: #666666;
  --color-green: #26ad6b;
  --color-teal: #1499ba;
  --color-coral: #dc7759;
  --color-white: #ffffff;

  /* Screenshot estimates */
  --color-cream: #fff2e1;
  --color-ochre: #e69c22;

  --font-site: 'Zen Kaku Gothic New', sans-serif;
  --text-body: 18px;
  --text-section: 24px;
  --text-feature: 18px;
  --text-contact: 17px;
  --tracking-body: 0.05em;
  --tracking-heading: 0.08em;
  --leading-body: 1.6;

  /* Source-derived desktop unit */
  --g: 4.34vw;
  --content-width: min(calc(16 * var(--g)), 1120px);
  --feature-row-gap: calc(2 * var(--g));
  --badge-size: 120px;
  --radius-button: 5px;
  --radius-photo: 20px;

  /* Measured transition timing; applied properties are recommendations */
  --motion-link: 400ms ease-in-out;
  --motion-layout: 600ms ease-in-out;
  --motion-badge: 600ms cubic-bezier(0.68, -0.6, 0.32, 2);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-site);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-link);
  text-underline-offset: 0.25em;
}

button {
  font: inherit;
}

h2,
h3 {
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
}

:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 5px;
}

.site-brand {
  position: fixed;
  z-index: 20;
  top: 60px;
  left: 60px;
  width: 120px;
}

.site-nav {
  position: fixed;
  z-index: 20;
  top: 55px;
  right: 55px;
  display: grid;
  justify-items: end;
  gap: 18px;
}

.site-nav a {
  padding-bottom: 6px;
  color: var(--color-green);
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0.9px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.menu-toggle {
  display: none;
}

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: clip;
}

.hero-art {
  width: min(60vw, 86.5svh);
  aspect-ratio: 1;
  margin: 0;
}

.hero-art > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Approximate text fallback; supplied lettering is preferred. */
.hero-copy {
  position: absolute;
  right: 6.25vw;
  bottom: 9svh;
  display: flex;
  flex-direction: row-reverse;
  gap: 14px;
  margin: 0;
  font-size: 56px;
  line-height: 1.18;
}

.hero-copy > span {
  writing-mode: vertical-rl;
}

.ink-green { color: var(--color-green); }
.ink-teal { color: var(--color-teal); }
.ink-coral { color: var(--color-coral); }
.ink-ochre { color: var(--color-ochre); }

.quick-links {
  position: absolute;
  left: 50px;
  bottom: 50px;
  display: flex;
  gap: 25px;
}

.quick-link {
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 50%;
  color: var(--color-white);
  background: var(--color-green);
  font-size: 14px;
  text-decoration: none;
}

.admissions-copy {
  width: min(33.85vw, 520px);
  margin-inline: auto;
}

.admissions-copy h2 {
  margin: 0 0 40px;
  font-size: var(--text-section);
  line-height: 1.5;
}

.admissions-copy p {
  margin: 0;
  font-weight: 500;
  line-height: 40px;
}

.feature-grid {
  width: var(--content-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(32, minmax(0, 1fr));
  row-gap: var(--feature-row-gap);
}

.feature-card {
  position: relative;
  display: block;
  min-width: 0;
  text-decoration: none;
  --accent: var(--color-coral);
}

.feature-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-photo);
}

.feature-card.purpose {
  grid-column: 1 / span 17;
  grid-row: 1;
  align-self: end;
  aspect-ratio: 3 / 2;
}

.feature-card.architecture {
  grid-column: 22 / span 11;
  grid-row: 1;
  aspect-ratio: 2 / 3;
  --accent: var(--color-teal);
}

.feature-card.day {
  grid-column: 1 / span 11;
  grid-row: 2;
  aspect-ratio: 2 / 3;
  --accent: var(--color-green);
}

.feature-card.events {
  grid-column: 16 / span 17;
  grid-row: 2;
  align-self: start;
  aspect-ratio: 3 / 2;
  --accent: var(--color-ochre);
}

.feature-badge {
  position: absolute;
  z-index: 1;
  top: -20px;
  left: -20px;
  width: var(--badge-size);
  height: var(--badge-size);
  margin: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--color-white);
  background: var(--accent);
  font-size: var(--text-feature);
  line-height: 1.5;
  transition: transform var(--motion-badge);
}

.architecture .feature-badge,
.events .feature-badge {
  right: -20px;
  left: auto;
}

/* Simplified CTA recess; exact source clipping is not available. */
.feature-more {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 5px 0 25px;
  border-top-left-radius: 20px;
  background: var(--color-paper);
  font-size: 14px;
}

.feature-more::after {
  content: '';
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 9px solid var(--accent);
}

.archive-button {
  display: table;
  min-width: 160px;
  margin-inline: auto;
  padding: 0.8em 1em;
  border-radius: var(--radius-button);
  color: var(--color-white);
  background: var(--color-green);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: opacity var(--motion-link);
}

.photo-section {
  padding-block: 100px 150px;
  background: var(--color-cream);
}

.photo-section h2 {
  margin: 0 0 80px;
  font-size: 24px;
  text-align: center;
}

/* Native horizontal scrolling is a recommended fallback. */
.photo-rail {
  display: flex;
  gap: var(--g);
  overflow-x: auto;
  padding: 6px var(--g) 24px;
  margin-bottom: 40px;
}

.photo-entry {
  flex: 0 0 calc(5 * var(--g));
  min-width: 0;
  text-decoration: none;
}

.photo-entry h3 {
  margin: 16px 5% 8px;
  font-size: 17px;
  line-height: 1.5;
}

.site-footer {
  padding: calc(2.5 * var(--g)) calc(2 * var(--g));
}

.footer-brand {
  width: 334px;
  margin-bottom: 60px;
}

.footer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.125fr);
  gap: calc(2 * var(--g));
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.footer-nav a {
  display: block;
  padding-left: 25px;
  margin-bottom: 10px;
  text-decoration: none;
}

.footer-nav .secondary {
  color: var(--color-muted);
  font-size: 16px;
  margin-bottom: 3px;
}

.contact-card {
  position: relative;
  padding: 50px;
  border-radius: 32px;
  background: var(--color-cream);
}

.contact-card p {
  margin: 0 0 20px;
  font-size: var(--text-contact);
  font-weight: 500;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

/* Add four decorative spans with aria-hidden='true'. */
.contact-corner {
  position: absolute;
  width: 44px;
  height: 44px;
  border: 12px solid var(--corner-color);
  border-right: 0;
  border-bottom: 0;
  border-radius: 100% 0 0 0;
  pointer-events: none;
}

.corner-tl {
  top: -12px;
  left: -12px;
  --corner-color: var(--color-coral);
}

.corner-tr {
  top: -12px;
  right: -12px;
  transform: rotate(90deg);
  --corner-color: var(--color-teal);
}

.corner-br {
  right: -12px;
  bottom: -12px;
  transform: rotate(180deg);
  --corner-color: var(--color-ochre);
}

.corner-bl {
  bottom: -12px;
  left: -12px;
  transform: rotate(270deg);
  --corner-color: var(--color-green);
}

.related-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3%;
}

.related-links a {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 10px 4px;
  border-radius: var(--radius-button);
  color: var(--color-white);
  background: var(--color-green);
  font-size: 13px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}

.related-links a:nth-child(2) {
  background: var(--color-teal);
}

.related-links a:nth-child(3) {
  background: var(--color-coral);
}

.copyright {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 500;
}

/* New feedback treatment, not a verified source hover state. */
@media (hover: hover) {
  .feature-card:hover .feature-badge {
    transform: translateY(-4px);
  }

  .archive-button:hover {
    opacity: 0.85;
  }
}

/* Recommended breakpoint; only the two supplied endpoints were measured. */
@media (max-width: 800px) {
  :root {
    --text-body: 14px;
    --text-section: 16px;
    --text-feature: 11px;
    --text-contact: 14px;
    --badge-size: 65px;
    --content-width: 88vw;
  }

  .site-brand {
    position: absolute;
    top: 6.5vw;
    left: 6.5vw;
    width: 68px;
  }

  /* Closed enhanced-menu state. Implement accessible opening separately. */
  .site-nav[data-collapsed='true'] {
    display: none;
  }

  .menu-toggle {
    position: fixed;
    z-index: 30;
    top: 14px;
    right: 14px;
    display: grid;
    place-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .menu-toggle span {
    width: 20px;
    height: 3px;
    background: var(--color-coral);
  }

  .menu-toggle span:nth-child(2) {
    background: var(--color-ochre);
  }

  .menu-toggle span:nth-child(3) {
    background: var(--color-teal);
  }

  .hero-art {
    width: 90vw;
    transform: translateY(-2svh);
  }

  .hero-copy {
    right: auto;
    left: 50%;
    bottom: 3.7svh;
    transform: translateX(-50%);
    display: grid;
    gap: 0;
    white-space: nowrap;
    font-size: 40px;
    line-height: 1.2;
  }

  .hero-copy > span {
    writing-mode: horizontal-tb;
  }

  .quick-links {
    display: none;
  }

  .admissions-copy {
    width: 54.46vw;
  }

  .admissions-copy h2 {
    margin-bottom: 15.6px;
  }

  .admissions-copy p {
    line-height: 30px;
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 6%;
    row-gap: 5vw;
  }

  .feature-card.purpose {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .feature-card.architecture {
    grid-column: 1;
    grid-row: 2;
  }

  .feature-card.day {
    grid-column: 2;
    grid-row: 2;
  }

  .feature-card.events {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .feature-card .feature-badge {
    top: auto;
    right: auto;
    bottom: 8px;
    left: 8px;
  }

  /* Recommended compact fallback; mobile recess appearance is unverified. */
  .feature-more {
    padding: 8px;
    gap: 4px;
    font-size: 10px;
  }

  .photo-section {
    padding-block: 70px 84px;
  }

  .photo-section h2 {
    margin-bottom: 31px;
    font-size: 18px;
  }

  .photo-rail {
    gap: 5vw;
    padding-inline: 6vw;
  }

  .photo-entry {
    flex-basis: 70vw;
  }

  .photo-entry h3 {
    font-size: 14px;
  }

  .site-footer {
    padding: 18vw 6vw 12vw;
  }

  .footer-brand {
    width: 240px;
    max-width: 100%;
    margin: 0 auto 12vw;
  }

  .footer-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 60px;
  }

  .footer-nav a {
    padding-left: 20px;
  }

  .footer-nav .secondary {
    padding-left: 25px;
    margin-bottom: 6px;
    font-size: 12px;
  }

  .contact-card {
    padding: 8vw;
    border-radius: 26px;
  }

  .contact-corner {
    width: 32px;
    height: 32px;
    border-width: 8px;
  }

  .corner-tl { top: -6px; left: -6px; }
  .corner-tr { top: -6px; right: -6px; }
  .corner-br { bottom: -6px; right: -6px; }
  .corner-bl { bottom: -6px; left: -6px; }

  .related-links {
    gap: 2%;
  }

  .related-links a {
    min-height: 40px;
    padding: 8px 1px;
    font-size: 11px;
  }

  .copyright {
    margin-top: 34px;
    font-size: 11px;
    text-align: center;
  }
}

/* Recommended reduced-motion support. */
@media (prefers-reduced-motion: reduce) {
  .feature-badge,
  .archive-button {
    transition: none;
  }

  .feature-card:hover .feature-badge {
    transform: none;
  }
}

For the curved separator, use an authorized original asset or a small repeating SVG designed for the new identity. Keep it decorative and out of the accessibility tree. The exact source ribbon, hero clipping, responsive slogan artwork, and compact desktop-header behavior are outside this CSS approximation.

Tailwind v4 Token Mapping

Optional aliases for a project that already uses Tailwind v4. This does not imply that the original site uses Tailwind. Define the custom properties above first.

@theme inline {
  --color-paper: #fffbf5;
  --color-cream: #fff2e1;
  --color-ink: #333333;
  --color-link: #3a4851;
  --color-muted: #666666;
  --color-green: #26ad6b;
  --color-teal: #1499ba;
  --color-coral: #dc7759;
  --color-ochre: #e69c22;

  --font-site: 'Zen Kaku Gothic New', sans-serif;
  --text-body: var(--text-body);
  --text-section: var(--text-section);
  --text-feature: var(--text-feature);
  --text-contact: var(--text-contact);

  --spacing-grid: var(--g);
  --spacing-feature-badge: var(--badge-size);
  --radius-button: 5px;
  --radius-photo: 20px;
}

When adding this mapping, rename the responsive base text properties to distinct names such as --site-text-body and reference those in the corresponding Tailwind aliases. This avoids a custom property referring to itself; the plain CSS Quick Start works independently of Tailwind.

Sources & Evidence

  • Original and final website: https://mikotohoikuen.net/. The supplied observation reports HTTP 200 and identical original/final URLs.
  • Capture timestamp: 2026-09-12T17:43:46.723Z, corresponding to September 13, 2026, 02:43:46.723 JST.
  • Desktop evidence: 1440 × 1000 CSS px; 4486px document height; supplied opening, photographic-navigation, and footer captures, plus rendered text, links, element rectangles, computed typography, colors, transitions, and custom properties.
  • Mobile evidence: 390 × 844 CSS px; 3666px document height; supplied opening and footer captures, plus corresponding rendered DOM measurements. The mobile middle-page arrangement is supported by DOM geometry rather than a supplied middle-page screenshot.
  • Recorded destinations: about, nursery life/events, photo archive, recruitment, notices, downloads, and entrance-map links. Their presence was inspected in the homepage evidence; their destination content was not opened.
  • Readiness limitations: the supplied collection waited for document load, relevant finite animations, sampled layout/text stability, and visible image decoding within stated time limits. Perpetual animations were paused during readiness checks and resumed afterward. These checks do not prove that every delayed or animated state was fully represented.
  • Interaction limitations: no opened mobile menu, deliberate hover, keyboard navigation, carousel dragging, playback controls, reduced-motion mode, or destination-page interaction was supplied. Transition declarations and repeated rail geometry are documented without asserting unobserved behavior.

This reference describes the current homepage represented by those captures and measurements. Asset formats, unrecorded breakpoints, exact decorative colors, and behavior beyond the supplied states remain explicitly limited.

← デザイン一覧に戻る