MANERU

日本のWebデザインを、AIの制作リファレンスに。

中谷会計事務所｜和歌山県新宮市にある会計事務所のWebサイトプレビュー

DESIGN REFERENCE

中谷会計事務所｜和歌山県新宮市にある会計事務所

採用サイトコーポレートサイト税務・会計採用情報余白極細タイポグラフィ人物写真ブラウンレスポンシブ

白とブラウンを基調に、極細の英字見出し、温かみのある人物写真、段差のあるレイアウトを組み合わせた会計事務所の公式サイト。

オリジナルサイトを見る
ジャンル
ビジネス支援・コンサルティング
元の業種
会計事務所・税理士
デザイン分析日
2026/10/2

design.md

ダウンロード

Nakatani Tax Accounting Office — Style Reference

Fine brown lettering, generous white space, and warm human photography give an accounting practice an approachable editorial presence.

Website: nakatani-tac.jp Original URL: https://nakatani-tac.jp/ Final URL: https://nakatani-tac.jp/ Theme: predominantly white, with warm brown text and a dark footer; no theme selector was evidenced. Inspected: supplied browser observation recorded October 2, 2026, at 00:17:23 JST — October 1, 2026, at 15:17:23 UTC. Viewports: desktop 1440 × 1000 and mobile 390 × 844 CSS pixels. Scope: the current corporate homepage, including its service, office, recruitment, article, contact, and footer structures. Visual evidence covers the opening composition, an additional blank desktop state, and the footer/contact ending. Rendered DOM and computed styles provide measurements for the intervening sections. Linked pages, the expanded menu, and interactive controls were not independently exercised.

Nakatani Tax Accounting Office combines an unusually light English display face with restrained Japanese copy. The exact body color is a muted reddish brown, #523c3c, on white. Gray links, thin circular outlines, broad image corners, and a pale handwritten accent keep the interface quiet. The visible hero photograph introduces wood tones and people working together, giving the professional subject matter a personal setting.

This is a substantial corporate homepage with several browsing paths. Services establish the practice's offer; customer stories and office information support familiarity; recruitment has its own prominent sequence; articles and contact follow. Its character depends on generous vertical intervals, offset desktop compositions, and a contrast between very large thin headings and small explanatory text.

全文を表示閉じる

Nakatani Tax Accounting Office — Style Reference

Fine brown lettering, generous white space, and warm human photography give an accounting practice an approachable editorial presence.

Website: nakatani-tac.jp Original URL: https://nakatani-tac.jp/ Final URL: https://nakatani-tac.jp/ Theme: predominantly white, with warm brown text and a dark footer; no theme selector was evidenced. Inspected: supplied browser observation recorded October 2, 2026, at 00:17:23 JST — October 1, 2026, at 15:17:23 UTC. Viewports: desktop 1440 × 1000 and mobile 390 × 844 CSS pixels. Scope: the current corporate homepage, including its service, office, recruitment, article, contact, and footer structures. Visual evidence covers the opening composition, an additional blank desktop state, and the footer/contact ending. Rendered DOM and computed styles provide measurements for the intervening sections. Linked pages, the expanded menu, and interactive controls were not independently exercised.

Nakatani Tax Accounting Office combines an unusually light English display face with restrained Japanese copy. The exact body color is a muted reddish brown, #523c3c, on white. Gray links, thin circular outlines, broad image corners, and a pale handwritten accent keep the interface quiet. The visible hero photograph introduces wood tones and people working together, giving the professional subject matter a personal setting.

This is a substantial corporate homepage with several browsing paths. Services establish the practice's offer; customer stories and office information support familiarity; recruitment has its own prominent sequence; articles and contact follow. Its character depends on generous vertical intervals, offset desktop compositions, and a contrast between very large thin headings and small explanatory text.

How to Read This Reference

  • Measured means a value appears in the supplied computed-style or element-rectangle evidence. Measurements are CSS pixels unless stated otherwise.
  • Derived means arithmetic applied to those measurements, such as the 40px gap between desktop service columns.
  • Estimated means a visual approximation from an original-page capture. Estimated colors are not exact pixel samples.
  • Recommended means an implementation choice for reuse, not a verified feature of the original website.
  • Token names introduced here are descriptive aliases. Only explicitly identified source properties, such as --primary, were found in the supplied property inventory.
  • Element boxes and painted artwork are different evidence. A parent with border-radius: 0 can contain a rounded child or pseudo-element. Likewise, an H2 beginning at document y=0 does not mean its visible letters begin at the top of the screen.
  • Several captures are incomplete visually. One desktop image shows only the header; the mobile opening omits the hero photograph, handwritten word, and arrow glyph visible on desktop. Their cause is unverified. Do not reproduce these absences as intentional design decisions.

Tokens — Colors

Default Palette
Name Value Suggested token Evidence and role
White canvas #ffffff --color-canvas Measured body background; also the background of services, news, office, and recruitment section elements
Warm brown ink #523c3c --color-ink Measured body, navigation, hero heading, and service text color
Quiet gray #727171 --color-muted Measured link color; also the source --primary value
Footer secondary text #a5a5a5 --color-footer-muted Measured telephone, Instagram, and copyright color
Footer subordinate links #b5b5b5 --color-footer-link Measured desktop footer subnavigation color
Reversed text #ffffff --color-on-dark Measured footer primary links and text in customer-story and interview regions
Pale peach lettering Approximately #e8c9af --color-accent-estimate Estimated from the desktop handwritten each; decorative, not a general action fill
Warm charcoal Approximately #282622 --color-dark-estimate Estimated visible footer field; its painted background was not isolated in the sampled elements
Fine warm outline Approximately #aa9c98 --color-rule-estimate Estimated larger circular-control outline; individual border colors were not supplied

The distinction between brown content text and gray utility links matters. Using the source --primary: #727171 for every text element would lose the warmer appearance of the page.

The footer's sampled container reports a transparent background, while the screenshots clearly show a dark surface with subtle tonal texture. Its paint therefore cannot be assigned to that container from this evidence alone. The charcoal token above is an implementation approximation.

The property inventory includes many framework and publishing-system colors, gradients, and shadows. Their presence does not establish visible use. Bright blue, purple, orange, and preset gradients do not belong in this reference palette merely because they appear in that inventory.

Theme Behavior

The available evidence shows a light page and a dark ending, not alternate selectable themes. Customer-story and interview text is computed white, but their full backdrop appearance is not visible in the supplied section captures. Do not assume every reversed section uses the footer's exact charcoal.

Tokens — Typography

Outfit and Japanese Sans-Serif Fallbacks

The computed family stack begins with Outfit, followed by Japanese Gothic families and aliases including YuGothic, Yu Gothic Medium, Yu Gothic, Zen Kaku Gothic New, and Hiragino Kaku Gothic ProN, then Verdana, Meiryo, M+ 1p, and sans-serif.

Outfit is directly supported as the first declared family. The evidence does not include font-file requests or per-glyph font resolution, so the exact fallback used for every Japanese character is unverified.

The body uses weight 350, with display roles reaching down to 100. Preserve these light weights when the supplied font supports them. A default weight of 400 throughout, or a bold marketing headline, would change the hierarchy substantially.

English Display Lettering

The opening phrase is arranged as two large lines: Optimal Solution and For each Company. The main lettering is extremely thin and geometric. A pale, flowing handwritten each overlaps the typographic rhythm on desktop.

No font name or asset path was supplied for the handwritten word. Treat it as separately authored lettering whose implementation is unknown. An authorized vector or transparent graphic is a better reproduction strategy than inventing a script-font attribution.

Japanese Statement and Supporting Copy

The strengths statement, ともに考え、 / ともに進む。, is measured at 90px on desktop and 43px on mobile. Wide tracking gives these short lines a deliberate cadence. Its accompanying paragraph uses much smaller text with a 2.3 line-height ratio, leaving air between lines rather than relying on heavy type.

Service descriptions are smaller still: 13px at both inspected widths. This creates a strong distinction between browsing headings and detailed explanations.

Wordmark

The visible identity consists of widely spaced Japanese lettering with a tiny uppercase English line below. Its anchor measures 200px wide on desktop and 170px on mobile. The H1's computed 16px size and weight 600 are container-level evidence; they do not establish how the visible wordmark artwork was drawn.

Type Scale
Role Desktop size / line height Mobile size / line height Weight Additional evidence
Root 16px / 18.4px Same 400 Ordinary root sizing; no tiny-rem system
Body 16px / 28.8px Same 350 Normal tracking
Header links 15px / 27px Not displayed in the mobile header 350 16px horizontal padding per link
Hero H2 100px / 100px 42.9px / 42.9px 100 Computed parent display type
Strengths statement 90px / 117px 43px / 55.9px 300 Tracking 10px desktop, 5px mobile
Strengths paragraph 17px / 39.1px 14px / 32.2px 350 Line-height ratio 2.3
Bilingual section-heading parent 20.8px / 22.88px Same 700 Inner English/Japanese span styles were not individually sampled
Service title 20.8px / 24.96px Same 300 Separate from the section-heading parent
Service description 13px / 24.7px Same 350 Line-height ratio 1.9
Story and blog title 18px / 25.2px Same 300 Light rather than bold article titles
News title 15px / 21px Same 400 Compact information row
Recruitment introduction 14px / 25.2px Same 350 Two short lines in the recorded desktop layout
Interview heading 67px / 80.4px 57px / 68.4px 100 White text
Entry banner 110px / 198px 40px / 72px 100 Join Our Team?
Contact paragraph 14px / 25.2px Same 350 Narrower desktop text column
Footer primary links 16px / 20.8px Not visible 300 White
Footer subordinate links 15px / 20.8px Not visible 300 Gray
Telephone 14px / 25.2px Same 350 1.4px tracking
Copyright 14px / 20px Same 350 Gray

Nested-heading limitation: the computed 20.8px section-heading parent is not proof that a large English title such as Our Services is painted at 20.8px. Its parent contains separately styled children, and its measured overall height exceeds a single line. Preserve bilingual hierarchy without presenting an invented child font size as measured.

Tokens — Spacing & Shapes

Density: sparse page composition, compact supporting text, and large image or visual allocations.

Spacing system: the measured layout repeatedly uses 20, 30, 40, 60, 80, 100, and 120px intervals. These are observed dimensions, not evidence of a single declared spacing scale.

Spacing Scale
Use Desktop Mobile Status
Main content gutter 56px 20px Measured
Main content width 1328px 350px Measured
Header identity left inset 30px 20px Measured
Hero photograph side inset Approximately 40px Not visually established Desktop screenshot estimate
Header navigation link padding 16px each side Navigation absent Measured
Service column gap 40px Vertical gap 40px Derived from card rectangles
Service section top to header 120px 60px Derived
Strengths section top to statement 170px 80px Derived
Strengths heading to paragraph 60px 30px Derived
Service title to paragraph 16px 16px Derived
Office card trailing allocation 60px 0px Measured right padding
Mobile office-card separation — 35px Derived
Contact copy to CTA Side-by-side composition 46px vertically Derived
Mobile contact CTA to footer — 80px Derived
Border Radius
Element Value Evidence
Hero photograph upper corners Approximately 60px Desktop visual estimate
Hero scroll link 50% Measured on the anchor
Menu outline Circular appearance Visible; button itself reports radius 0, so the circle is painted elsewhere within its anatomy
Customer-story and blog image links 12px Measured
Story/blog navigation buttons 20px Measured, producing short capsules
Mobile contact outline Approximately 35px Visual estimate; sampled parent anchor reports radius 0
Service and office outer links 0px Measured outer elements; child-image radii remain unknown

Rounded geometry is concentrated in images and selected controls. It is not a universal card treatment.

Layout Measurements
Element Desktop 1440 × 1000 Mobile 390 × 844
Document height Approximately 13610px Approximately 10274px
Header box 1440 × 90px at y=5 390 × 65px at y=0
Menu button 51 × 51px at x=1359, y=23 44 × 44px at x=331, y=15
Hero section 1545px high Approximately 888.6px high
Hero heading layout box 1328 × 500px, x=56 350 × 337.6px, x=20
Scroll link 125 × 125px 75 × 75px
Service columns Three × 416px One × 350px; 340px inner text width
Story/blog image link 400 × 412px 300 × 309px
Office outer link 648px wide 332.5px wide
Recruitment directory row 1140 × 148.2px 350 × 121.2px
Interview link 500px wide 340px wide
Contact CTA 644 × 190px 350 × 110px
Footer 1110px high 562px high

These heights describe the captured layout state. They are useful for understanding scale, but are not all suitable as fixed heights in a new implementation.

Components

Persistent Header

Role: maintain the office identity and access to major site sections.

The desktop header places the wordmark at the far left, five Japanese navigation links toward the right, and a small outlined circular menu control at the far right. The links cover strengths, services, office information, recruitment, and contact. Their text is 15px, weight 350, with 16px horizontal link padding.

The header background is computed transparent. The top chrome remains visible in the supplied scrolled captures, including over the dark desktop footer and over contact copy on mobile. This supports a persistent-header interpretation; the exact positioning property and any scroll-dependent treatment were not supplied.

On mobile, the five-link navigation disappears. The 170px-wide wordmark and 44px menu control remain. The latter visibly contains two short horizontal strokes, not a heavy three-bar icon.

The button has the text label メニューを開閉する. A skip link, 本文までスキップする, targets #main-content and is recorded in a 1 × 1px offscreen box. Its focused appearance was not tested.

Unverified: menu opening, panel composition, closing behavior, focus management, and header color changes during scrolling.

Opening Hero

Role: express the practice's promise before introducing detailed services.

The desktop composition has substantial space between the header and visible headline. Letterforms begin around y=250 in the screenshot, even though the H2 layout box begins at y=0. The headline is left aligned at the main 56px gutter and uses two lines of 100px, weight-100 text.

The Japanese supporting line is それぞれの企業に合った最適な解決策を。. It sits below the large English display. Its individual computed type size was not included; approximately 18px on desktop is a visual estimate.

A broad photograph begins around y=545 with approximately 40px side margins. The image has generously rounded upper corners. In the current desktop capture, two people in white shirts are shown against a warm, bright office interior. The photograph continues below the screenshot edge, so its complete dimensions and crop cannot be measured from that image.

The handwritten each is pale peach, lighter than the headline and visually more expressive. It belongs inside the phrase, not in a badge or separate subtitle.

At 390px wide, the headline measures 42.9px and still follows the two-line structure. The screenshot reserves a gap between For and Company, but does not show the handwritten word or photograph. These missing elements are a capture limitation, not evidence that mobile intentionally removes them.

Role: provide a visual transition from the hero to the strengths section.

The link targets #strength. Its desktop box is 125px square at x=1171, y=482.5, overlapping the photograph's approximate upper boundary. It uses a thin circular outline and a fine downward arrow.

On mobile, the box becomes 75px square at x=295.5, y=345.1. Only the outline is visible in the supplied capture. Preserve the known destination; do not infer a particular scrolling duration or easing from its appearance.

The extracted link text is empty. Whether a separate accessible name exists was not established.

Strengths Statement

Role: introduce the office's relationship with business owners.

The large Japanese heading is followed by a more modest paragraph and a strengths-page link. On desktop, the heading begins at the main gutter, while the paragraph starts at x≈454.4 and occupies approximately 929.6px. That shift produces an asymmetric reading sequence rather than a centered text block.

On mobile, both heading and paragraph occupy the same 350px-wide column. The statement shrinks to 43px with 5px tracking; the paragraph becomes 14px with a 32.2px line height.

The rendered text also contains repeated decorative English words: Thinking, Together, and Forwording. Their repeated structure is evidenced, but their exact painted placement, size, and motion are not. Do not automatically reproduce extracted repetitions as ordinary accessible paragraph text.

Role: identify a content category and offer a route to its full index.

Services, news, office, recruitment, blog, and contact combine a Japanese label with an English title. The groups use flexible layout rather than a uniformly boxed heading component.

For services on desktop, the heading group begins at x=56 and the View more link begins at x≈539.3. The link has 200px of left padding and a 60px measured height. On mobile, it moves below the heading and aligns toward the right, with 110px left padding and the same 60px height.

This unusually long leading allocation is part of the spacious link composition. The sampled evidence does not isolate every line or arrow decoration inside it. A fine leading rule is a reasonable adaptation, but its exact geometry should not be claimed as measured.

Many link labels occur twice in the extracted text. This is compatible with layered text treatments, but their exact hover sequence was not observed. A new implementation should expose one accessible label.

Role: route visitors to three principal service areas.

Each service is one linked unit containing a leading visual allocation, a Japanese title, a paragraph, and a sequence number. The links target:

  • 税務・会計 → /services/#tax
  • 相続・贈与・譲渡所得 → /services/#inheritance
  • 設立・開業支援 → /services/#opening

Desktop cards occupy three 416px columns with 40px gaps. Their top positions are deliberately uneven: the second starts 200px below the first, and the third starts 100px below the first. Preserve this specific rhythm rather than staggering them in a simple descending staircase.

The outer links are transparent and have no measured corner radius. Titles use 20.8px, weight 300; descriptions use 13px with 24.7px line height. The title begins approximately 477.6px below the link's top on desktop and 360px below it on mobile. Those offsets establish a substantial leading visual region, but do not by themselves prove an image's exact height or aspect ratio.

At 390px wide, all three links stack in content order, separated by 40px. Each has 5px inner horizontal padding, producing a 340px text width inside the 350px outer link. The desktop vertical stagger is removed.

Customer-Story and Blog Modules

Role: present individual editorial entries with access to a larger collection.

Both modules share measurable anatomy: a section-heading area, two short capsule controls, an image link, a light article title, metadata, and a View all link.

On desktop, the left heading region is 332px wide. The first recorded image begins at x=448 and measures 400 × 412px with a 12px radius. Two controls sit near the lower part of the heading region; each is 80 × 30px, with a 15px gap.

On mobile, the heading moves above the content. The controls sit to its right and measure 60 × 25px with an 8px gap. The image is 300 × 309px, narrower than the 350px content column. This is not a full-width mobile card.

The customer-story module uses white text in the measured elements. The blog module uses brown and gray. Their full backgrounds and article imagery cannot be described reliably from the supplied screenshots.

The paired controls suggest collection navigation, but slide movement, item count, autoplay, looping, and drag behavior were not demonstrated. Only one entry's text is represented in each supplied visible-content record.

News Row

Role: display concise dated updates without making them compete with the larger visual sections.

The desktop news link begins at x=398, measures 986px wide, and is approximately 103px tall with 40px vertical padding. The title is 15px, weight 400. Its date and title occupy a horizontal composition.

On mobile, the row spans the 350px content width, with 25px vertical padding and an approximately 92px height. The date and title are arranged vertically. Preserve this change instead of compressing both into an overcrowded mobile line.

Only one dated announcement is included in the supplied content. Its publication date describes that item, not the inspection date or a verified date of the current design.

Role: connect visitors to the director's message, philosophy, office outline, and access information.

The desktop boxes reveal a horizontal sequence rather than four ordinary grid cards. Each outer link is 648px wide, including 60px right padding. Their x positions are 56, 704, 1352, and 2000px. The later links therefore extend beyond the inspected viewport.

Alternating items begin 70px lower. The inner available width is 588px. Labels pair Japanese text with English names such as Message, Philosophy, Outline, and Access.

On mobile, the sequence becomes four vertically stacked links, each 332.5px wide, centered inside the 350px content region. Their measured height is approximately 335.2px, with 35px between items.

The desktop arrangement suggests a horizontal presentation, but the mechanism used to reveal offscreen items was not tested. Do not state that it uses pinned scrolling, dragging, or a carousel as an observed fact.

Recruitment Directory and Interview

Role: give hiring information its own substantial browsing path.

The recruitment introduction combines a bilingual heading, a short two-line statement, and a View more link. Three directory rows lead to candidate information, numerical office information, and requirements.

On desktop, the rows begin at x=244 and span 1140px. Each has 30px vertical padding and a measured height near 148.2px. On mobile, they align with the main gutter and span 350px, with a height near 121.2px.

The interview heading is exceptionally light: 67px desktop and 57px mobile at weight 100, with white text. The linked interview unit is centered at 500px wide on desktop and becomes 340px wide on mobile.

A separate full-width entry link reads Join Our Team?. It uses 110px display text on desktop and 40px on mobile, with 150px vertical padding in both records. Its full painted backdrop is not included in the visual evidence.

Contact Section

Role: offer a broad invitation to ask questions or request advice.

The desktop section places a 644px paragraph column on the left and a 644 × 190px contact link on the right, separated by 40px. The paragraph is 14px with a 25.2px line height.

On mobile, the paragraph occupies the full 350px content column. A 350 × 110px outlined control follows after approximately 46px. Its visible contour has large rounded corners, estimated around 35px, and a fine gray border.

The mobile screenshot shows repeated Get In Touch text clipped at the control's side edges. The DOM also includes repeated Japanese contact labels. This establishes a repeated text-strip construction, but not its speed, direction, or hover-language behavior.

The full control links to /contact/. Implement one semantic link with a single accessible name, regardless of how many decorative text copies are used.

Role: close the page with identity, contact information, site navigation, and a social link.

The desktop footer is a tall warm-charcoal field with subtle visible texture. Its identity and contact details sit across the upper portion. Below, four navigation groups begin around x=76, 405.6, 735.2, and 1064.8. Primary links are white, 16px, weight 300; subordinate links are gray, 15px, weight 300.

The closing row places an underlined Instagram link at the left and copyright at the right. The visible identity and copyright independently support the operator name Nakatani Tax Accounting Office.

On mobile, the footer is 562px high. Its identity and address begin at a 40px left inset, followed by the telephone number. Instagram and copyright are centered farther down. The desktop navigation columns are not visible and are absent from the mobile rendered link list, although their text remains in the broader DOM extraction.

The telephone is a real tel: link. The social destination is present in the original-page link evidence. The supplied homepage does not establish production credits.

Tokens — Motion & Interaction

The evidence records computed transitions, not a complete playback trace. Many sampled nodes report animation: none; this does not exclude animations on descendants, pseudo-elements, or JavaScript-controlled properties.

Treatment Measured declaration or evidence Interpretation and limit
Header links Color and opacity, 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) Defined transition; final hover values not supplied
Strengths heading, service links, office links, interview heading Opacity and transform, 1s cubic-bezier(0.165, 0.84, 0.44, 1) Supports a reveal-oriented treatment; trigger and displacement unverified
Service paragraphs Color, 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) Defined color transition; endpoint unverified
Story/blog controls Background and border color, 0.7s cubic-bezier(0.19, 1, 0.22, 1) Slow, soft control feedback; activation not tested
News title Color, 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) Defined hover-compatible transition
Blog category link Color, 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) Small utility feedback
Footer navigation Color, 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) Shorter feedback than the main navigation
Contact text strip Repeated text and clipped edges Movement plausible, but duration and direction unknown
Duplicated link labels Repeated text nodes Layering evidenced; rollover animation unverified
Hero scroll link Destination #strength Anchor destination known; smooth-scroll behavior unknown

The supplied capture procedure waited for finite motion and sampled stability, temporarily pausing perpetual animations during readiness checks. It also traversed intermediate scroll positions. This improves capture readiness but does not prove every reveal or delayed resource completed.

Recommended motion approach: reuse the measured easing curves for subtle transitions, keep essential content visible before enhancement, and make any decorative text movement optional. Do not invent parallax, autoplay, a hero slideshow, or a menu transition on the basis of these still images.

Surfaces

Surface Appearance Evidence and reuse guidance
Main canvas Pure white Measured body background
Header Transparent over page content Computed background and top/footer captures
Hero media Warm photograph with broad upper corners Desktop screenshot; full image dimensions unknown
Service links Unboxed outer elements Transparent backgrounds and zero outer radius measured
Story/blog media Rounded image-link region 12px radius measured
Contact control White field, fine rounded outline Mobile screenshot; parent radius alone does not explain the contour
Footer Warm dark field with faint texture Visually established; exact paint source unknown
Reversed content regions White text Measured text; full backdrop not supplied

No general shadow-elevation system is visible in the supplied original-page captures. Do not import the default shadow presets from the property inventory into every component.

Imagery

The current desktop hero photograph shows people working in a bright office with warm wood and soft cream surfaces. The subjects are engaged with work rather than posing directly at the camera. This supports an approachable professional tone alongside the precise, thin lettering.

The photograph is large enough to continue below the initial viewport. Its upper corners soften a broad rectangular mass without turning it into a small floating card. Keep people and environmental context readable when adapting the crop.

Recommended art direction: natural workplace interactions, daylight, warm neutral interiors, restrained saturation, and believable working gestures. These are reuse recommendations based on the visible hero, not descriptions of unseen service or recruitment images.

The footer shows a subtle textured finish. Its source asset and compositing method are unknown. A flat charcoal fallback is preferable to introducing conspicuous noise or an unrelated gradient.

Observed Asset References

No image src, srcset, font-file URL, logo-file URL, or decorative-lettering path was included in the supplied evidence. Asset filenames must therefore remain unspecified.

Visual What is established What remains unknown
Header identity Japanese wordmark with small English line; anchor widths 200px and 170px File format, asset path, drawing method
Hero photograph Two working people in a warm office in the desktop capture Original file, full dimensions, alternate crops, any image-changing behavior
Handwritten each Pale peach lettering visible on desktop Font versus graphic, file path, entrance behavior
Scroll arrow Fine downward arrow inside a circular outline on desktop SVG, font glyph, or CSS implementation
Story/blog media regions 400 × 412px desktop and 300 × 309px mobile; 12px radius Actual image content and URLs
Footer texture Subtle dark texture visible at both widths Image, procedural texture, overlay, or other paint mechanism

Use authorized assets where available. CSS can reproduce layout and control geometry, but cannot recover the office photography or custom lettering from the measurements alone.

Layout & Responsive Behavior

The design uses several distinct responsive strategies rather than scaling the whole page uniformly.

Area Desktop observation Mobile observation
Header Wordmark, five links, circular menu Wordmark and circular menu only
Content gutter 56px 20px
Hero headline 100px, two-line composition 42.9px, two-line composition
Hero media and decoration Photograph, handwritten word, arrow visible Not fully rendered in the supplied capture
Strengths paragraph Offset to the right Full content width beneath heading
Services Three staggered columns Single vertical sequence
Story/blog heading Left-side heading/control region Heading and controls above the entry
Story/blog media 400px wide 300px wide
News Offset horizontal date/title row Full-width stacked date/title row
Office links Horizontal sequence extending offscreen Four centered vertical links
Recruitment rows Offset 1140px-wide region Main 350px column
Contact Two columns Paragraph above full-width CTA
Footer Four navigation groups and split closing row Address-led composition with centered closing links

The source property inventory names breakpoints at 375, 576, 768, 992, 1200, 1400, and 1600px. This does not identify which media query causes each component to change. Only the two supplied viewport states are verified.

At 390px, the measured hero size of 42.9px equals 11vw. That is a numerical relationship, not proof of the source formula. A reuse implementation may use an 11vw mobile rule, but should label it as an adaptation.

The desktop record contains approximately 1800px between the measured office section's bottom and recruitment section's start. A blank intermediate desktop capture is also supplied. These facts do not establish whether the gap is scroll infrastructure, unrendered media, delayed content, or another layout effect. Do not turn it into an intentional empty section without further evidence.

The desktop document is longer than the mobile document despite the mobile service and office stacks. Avoid inferring total page length from column count alone; the large desktop visual and spacing allocations materially affect it.

Do’s and Don’ts

Do
  • Use exact white and brown foundations: #ffffff and #523c3c.
  • Preserve gray utility text instead of making every label the same brown.
  • Use weight 100 for the principal English display roles when the font supports it.
  • Keep Japanese explanatory copy comfortably spaced, especially the strengths paragraph.
  • Distinguish the hero's broad image radius from the 12px editorial-media radius.
  • Retain the desktop service stagger: first at zero, second at +200px, third at +100px.
  • Stack services and office links in their existing content order on mobile.
  • Preserve the different desktop allocations for headings, stories, directory rows, and contact.
  • Treat the contact strip as one large link even when its visual text repeats.
  • Use the visible workplace photograph as the basis for warm, human art direction.
  • Separate measured parent styles from unmeasured child lettering and pseudo-element decoration.
Don’t
  • Don't turn this multi-section corporate homepage into a short campaign page with one repeated conversion action.
  • Don't replace the thin display typography with heavy headline weights.
  • Don't add bright brand fills based on unused framework palette variables.
  • Don't put every section inside a rounded, shadowed card.
  • Don't make all desktop service cards start on the same baseline.
  • Don't recreate missing mobile imagery or blank captures as deliberate empty design features.
  • Don't assume the footer color comes from the generic source --dark property.
  • Don't apply the bilingual heading parent's 20.8px size to every nested display span.
  • Don't claim autoplay, a hero carousel, pinned horizontal scrolling, or working menu behavior without observing it.
  • Don't expose repeated animation text as multiple accessible labels.
  • Don't invent image paths, handwriting fonts, or production credits.

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

  • Keep content visible by default. Apply entrance effects only after the relevant enhancement has initialized, so delayed scripts do not leave an empty page.
  • Ensure the persistent header remains legible over dark surfaces and does not visually collide with contact text. Verify this at actual scroll positions.
  • Give the scroll link an explicit accessible name and add aria-expanded and aria-controls to a functioning menu button.
  • Implement menu focus handling, Escape dismissal, and focus return when an expanded menu is provided.
  • Keep the small story/blog control graphics, but expand their interactive hit area to at least 44px in height.
  • Hide decorative repeated labels from assistive technology and provide one stable name for the contact link.
  • Offer a static contact-text treatment and disable entrance movement under reduced-motion preferences.
  • Make all office destinations keyboard reachable if adapting the desktop horizontal sequence.
  • Supply meaningful image alternatives and verify contrast for small gray text. The pale handwritten accent should not carry essential information alone.
  • If 13px service descriptions prove difficult to read for the intended audience, increase them to 14–15px as an explicit accessibility adaptation.

Agent Prompt Guide

Quick Color Reference
  • Canvas: measured #ffffff.
  • Main text: measured warm brown #523c3c.
  • Utility links: measured gray #727171.
  • Footer secondary text: measured #a5a5a5.
  • Footer subordinate links: measured #b5b5b5.
  • Handwritten accent: estimated pale peach #e8c9af.
  • Footer field: estimated warm charcoal #282622.
  • Primary action language: thin outlines, generous space, and restrained text rather than a saturated filled button.
Overall Prompt

“Create a Japanese accounting-office corporate homepage with a white canvas, warm brown text #523c3c, gray utility links, and extremely light Outfit display typography. Place a delicate wordmark at the left of a transparent persistent header, five Japanese navigation links toward the right, and a fine circular menu control at the edge. Build a two-line English hero with a separately authored pale handwritten accent, a short Japanese supporting line, and a broad warm workplace photograph with large rounded upper corners. Follow it with an oversized Japanese strengths statement, three staggered service links, editorial story and blog modules, office information, a substantial recruitment sequence, a wide outlined contact link, and a dark spacious footer. At mobile width, use 20px gutters and stack the service and office content. Keep essential content visible without requiring animation.”

Example Component Prompts
  1. Header and hero: “At a 1440px viewport, use a 200px-wide wordmark near a 30px left inset, 15px Japanese navigation, and a 51px circular menu control. Set the English hero at 100px and weight 100, aligned to a 56px text gutter. Use brown lettering, a pale handwritten each, and a warm photograph inset about 40px with approximately 60px upper corners. These photo values are visual approximations.”
  2. Services: “Create three transparent linked service compositions inside a 1328px content region: 416px columns, 40px gaps, and top offsets of 0, 200, and 100px. Give each a substantial visual area, a 20.8px light Japanese title, a 13px description at 1.9 line height, and a sequence number. Stack them with 40px gaps on mobile.”
  3. Editorial module: “Use a desktop heading region on the left and a 400 × 412px media link with 12px corners to the right. Add a light 18px title, restrained metadata, and two small capsule navigation controls. On a 390px phone, move the heading above and use a 300 × 309px media region. Do not enable autoplay unless separately required.”
  4. Office links: “Present four office destinations in a horizontal desktop sequence with 648px outer widths, 60px trailing allocation, and alternating 70px vertical offsets. For mobile, use centered 332.5px-wide links with 35px vertical gaps. Provide accessible overflow navigation as an implementation addition.”
  5. Contact and footer: “Place a 14px contact paragraph beside a 644 × 190px link on desktop. Stack them on mobile and make the outlined link 350 × 110px with approximately 35px corners. Use repeated visual text only as decoration. Finish with a warm-charcoal footer, white primary links, gray subordinate links, office details, and a restrained social/copyright row.”

Quick Start

CSS Custom Properties

The following CSS is a reusable approximation, not an extraction of the original stylesheet. It combines measured tokens with explicitly marked estimates and recommended responsive rules. The 992px adaptation breakpoint is chosen for this example; its use by each original component was not verified.

Load an authorized Outfit font with the required weights if available. The stack below shortens the original Japanese fallback aliases. Supply your own authorized logo, photography, and handwritten lettering. No source asset paths are implied.

Component structure: .hero-title contains two .hero-line elements; place an authorized inline graphic in .hero-each on the second line. Put the Japanese supporting copy in .hero-tagline, outside the display heading. Each .service-card is a single link containing media, title, copy, and number. Use a single accessible label for .contact-link, and mark its repeated .contact-track content decorative.

:root {
  /* Measured colors */
  --color-canvas: #ffffff;
  --color-ink: #523c3c;
  --color-muted: #727171;
  --color-footer-muted: #a5a5a5;
  --color-footer-link: #b5b5b5;
  --color-on-dark: #ffffff;

  /* Visual estimates, not sampled source declarations */
  --color-accent-estimate: #e8c9af;
  --color-dark-estimate: #282622;
  --color-rule-estimate: #aa9c98;
  --radius-hero-estimate: 60px;
  --radius-contact-estimate: 35px;

  /* Shortened adaptation of the measured family stack */
  --font-site: 'Outfit', YuGothic, 'Yu Gothic Medium',
    'Yu Gothic', 'Zen Kaku Gothic New',
    'Hiragino Kaku Gothic ProN', Verdana, Meiryo,
    'M+ 1p', sans-serif;

  --weight-display: 100;
  --weight-light: 300;
  --weight-body: 350;
  --text-body: 16px;
  --text-service: 13px;
  --text-service-title: 20.8px;
  --text-story-title: 18px;
  --leading-body: 1.8;
  --leading-service: 1.9;

  --gutter: 56px;
  --header-inset: 30px;
  --space-20: 20px;
  --space-30: 30px;
  --space-40: 40px;
  --space-60: 60px;
  --space-80: 80px;
  --space-100: 100px;
  --space-120: 120px;
  --radius-media: 12px;
  --radius-control: 20px;

  /* Measured transition families */
  --ease-main: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-copy: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-control: cubic-bezier(0.19, 1, 0.22, 1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-site);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
}

a {
  color: var(--color-muted);
}

button {
  font: inherit;
}

img,
svg {
  max-width: 100%;
}

.site-container {
  margin-inline: var(--gutter);
}

/* Fixed positioning is an adaptation of the persistent appearance. */
.site-header {
  position: fixed;
  z-index: 20;
  inset: 5px 0 auto;
  height: 90px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding-inline: var(--header-inset);
  background: transparent;
}

.site-brand {
  flex: 0 0 auto;
  width: 200px;
}

.site-brand img,
.site-brand svg {
  display: block;
  width: 100%;
  height: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.site-nav a {
  padding-inline: 16px;
  color: var(--color-ink);
  font-size: 15px;
  line-height: 27px;
  text-decoration: none;
  transition: color 400ms var(--ease-main),
    opacity 400ms var(--ease-main);
}

.menu-button {
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  gap: 3px;
  width: 51px;
  height: 51px;
  padding: 0;
  border: 1px solid var(--color-muted);
  border-radius: 50%;
  color: var(--color-ink);
  background: transparent;
  cursor: pointer;
}

.menu-button::before,
.menu-button::after {
  content: '';
  width: 14px;
  height: 1px;
  background: currentColor;
}

/* Visual spacing approximation; not the source hero's box model. */
.hero-copy {
  padding-top: 235px;
}

.hero-title {
  margin: 0;
  font-size: clamp(64px, 6.944vw, 100px);
  font-weight: var(--weight-display);
  line-height: 1;
}

.hero-line {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}

.hero-line + .hero-line {
  margin-top: 20px;
}

.hero-each {
  display: inline-flex;
  align-self: center;
  flex: 0 0 1.95em;
  width: 1.95em;
  margin-inline: 0.02em -0.2em;
  color: var(--color-accent-estimate);
}

.hero-each > svg,
.hero-each > img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-tagline {
  margin: 24px 0 0;
  font-size: 18px;
}

.hero-media {
  position: relative;
  margin: 40px 40px 0;
}

.hero-media > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-hero-estimate);
}

.scroll-link {
  position: absolute;
  top: 0;
  right: 7.65%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 125px;
  height: 125px;
  border: 1px solid var(--color-rule-estimate);
  border-radius: 50%;
  color: var(--color-muted);
  text-decoration: none;
}

/* An inline SVG arrow can use currentColor and a 1px stroke. */
.scroll-link svg {
  width: 24px;
  height: 32px;
}

.strength {
  padding-block: 170px 120px;
}

.strength-title {
  margin: 0;
  font-size: 90px;
  font-weight: var(--weight-light);
  line-height: 1.3;
  letter-spacing: 10px;
}

.strength-copy {
  width: 70%;
  margin: 60px 0 0 auto;
  font-size: 17px;
  line-height: 2.3;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  gap: 40px;
}

/* The English child size is an adaptation, not a measured value. */
.section-title {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.section-title-label {
  font-size: 20.8px;
  font-weight: 700;
  line-height: 1.1;
}

.section-title-en {
  margin-top: 10px;
  font-size: 64px;
  font-weight: 100;
  line-height: 1.1;
}

/* Leading rule is a recommended rendering of the measured allocation. */
.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 60px;
  padding-left: 200px;
  text-decoration: none;
}

.text-link::before {
  content: '';
  position: absolute;
  left: 0;
  width: 170px;
  height: 1px;
  background: currentColor;
}

.services {
  padding-block: 120px 140px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 40px;
  margin-top: 100px;
}

.service-card {
  display: flex;
  flex-direction: column;
  color: var(--color-ink);
  text-decoration: none;
}

.service-card:nth-child(2) {
  margin-top: 200px;
}

.service-card:nth-child(3) {
  margin-top: 100px;
}

/* Keep actual service media proportions content-specific. */
.service-media img {
  display: block;
  width: 100%;
  height: auto;
}

.service-title {
  margin: 24px 0 0;
  font-size: var(--text-service-title);
  font-weight: 300;
  line-height: 1.2;
}

.service-copy {
  margin: 16px 0 0;
  font-size: var(--text-service);
  line-height: var(--leading-service);
  transition: color 600ms var(--ease-copy);
}

.service-number {
  margin-top: 24px;
}

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

.story-card {
  width: 400px;
  max-width: 100%;
}

.story-media {
  display: block;
  aspect-ratio: 100 / 103;
  overflow: hidden;
  border-radius: var(--radius-media);
}

.story-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-title {
  margin: 16px 0 0;
  font-size: var(--text-story-title);
  font-weight: 300;
  line-height: 1.4;
}

/* Accessible horizontal overflow is a recommended implementation. */
.office-track {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x proximity;
}

.office-card {
  flex: 0 0 648px;
  padding-right: 60px;
  scroll-snap-align: start;
  text-decoration: none;
}

.office-card:nth-child(even) {
  margin-top: 70px;
}

.recruit-list {
  margin-left: 188px;
}

.recruit-row {
  display: flex;
  align-items: center;
  min-height: 148px;
  padding-block: 30px;
  text-decoration: none;
}

.contact-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 40px;
}

.contact-copy {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}

.contact-link {
  display: flex;
  align-items: center;
  height: 190px;
  overflow: hidden;
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-contact-estimate);
  text-decoration: none;
}

/* Static by default: no unverified marquee timing is assumed. */
.contact-track {
  display: flex;
  flex: 0 0 auto;
  gap: 24px;
  white-space: nowrap;
}

.site-footer {
  padding: 120px var(--gutter) 100px;
  color: var(--color-footer-muted);
  background: var(--color-dark-estimate);
}

.footer-directory {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  margin-top: 120px;
}

.footer-directory a {
  color: var(--color-footer-link);
  font-size: 15px;
  font-weight: 300;
  line-height: 20.8px;
  text-decoration: none;
  transition: color 200ms var(--ease-main);
}

.footer-directory .footer-primary {
  color: var(--color-on-dark);
  font-size: 16px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 160px;
}

.footer-bottom a {
  color: inherit;
  text-underline-offset: 4px;
}

.footer-copyright {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

/* Reveal-ready content remains visible without JavaScript. */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease-main),
    transform 1s var(--ease-main);
}

/* Recommended accessibility treatments */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

[id] {
  scroll-margin-top: 110px;
}

@media (max-width: 991px) {
  :root {
    --gutter: 20px;
    --header-inset: 20px;
  }

  .site-header {
    top: 0;
    height: 65px;
    padding-right: 15px;
  }

  .site-brand {
    width: 170px;
  }

  .site-nav {
    display: none;
  }

  .menu-button {
    width: 44px;
    height: 44px;
    margin-left: auto;
  }

  .hero-copy {
    padding-top: 200px;
  }

  .hero-title {
    font-size: clamp(30px, 11vw, 70px);
  }

  .hero-line + .hero-line {
    margin-top: 9px;
  }

  .hero-tagline {
    margin-top: 20px;
    font-size: 14px;
  }

  /* Retain media; its absence in the capture is not a design rule. */
  .hero-media {
    margin: 40px 20px 0;
  }

  .hero-media > img {
    border-radius: 30px;
  }

  .scroll-link {
    right: 0;
    width: 75px;
    height: 75px;
  }

  .strength {
    padding-block: 80px 60px;
  }

  .strength-title {
    font-size: clamp(34px, 11.026vw, 43px);
    letter-spacing: 5px;
  }

  .strength-copy {
    width: 100%;
    margin-top: 30px;
    font-size: 14px;
  }

  .section-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .section-title-en {
    font-size: 36px;
  }

  .text-link {
    align-self: flex-end;
    padding-left: 110px;
  }

  .text-link::before {
    width: 85px;
  }

  .services {
    padding-block: 60px 100px;
  }

  .service-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    margin-top: 40px;
  }

  .service-card {
    padding-inline: 5px;
  }

  .service-card:nth-child(n) {
    margin-top: 0;
  }

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

  .story-card {
    width: 300px;
  }

  .office-track {
    display: grid;
    gap: 35px;
    overflow: visible;
  }

  .office-card {
    width: 95%;
    margin-inline: auto;
    padding-right: 0;
  }

  .office-card:nth-child(even) {
    margin-top: 0;
  }

  .recruit-list {
    margin-left: 0;
  }

  .recruit-row {
    min-height: 121px;
  }

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

  .contact-link {
    height: 110px;
  }

  .site-footer {
    padding: 80px 40px 130px;
  }

  .footer-directory {
    display: none;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 30px;
    margin-top: 150px;
    text-align: center;
  }

  .footer-copyright {
    margin-inline: -20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .site-nav a,
  .service-copy,
  .footer-directory a {
    transition: none;
  }

  .contact-track {
    animation: none;
    transform: none;
  }

  .office-track {
    scroll-behavior: auto;
  }
}

This starter deliberately leaves imagery intrinsic, does not reproduce the unexplained desktop gap, and keeps the contact text static. Menu functionality, collection navigation, and any optional reveal triggers require separate implementation and testing. The footer padding and display-heading child sizes are adaptations; the measured tokens do not make this a pixel-identical reconstruction.

Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This is not evidence that the original website uses Tailwind. Define the custom properties above first.

@theme inline {
  --color-canvas: #ffffff;
  --color-ink: #523c3c;
  --color-muted: #727171;
  --color-footer-muted: #a5a5a5;
  --color-footer-link: #b5b5b5;

  /* Estimated visual colors */
  --color-peach: #e8c9af;
  --color-charcoal: #282622;

  --font-site: 'Outfit', YuGothic, 'Yu Gothic',
    'Zen Kaku Gothic New', sans-serif;

  --text-body: 16px;
  --text-service: 13px;
  --text-service-title: 20.8px;
  --text-story-title: 18px;

  --spacing-page: var(--gutter);
  --spacing-section: 120px;
  --spacing-card-gap: 40px;

  --radius-media: 12px;
  --radius-control: 20px;
  --radius-contact: 35px;
  --radius-hero: 60px;

  --ease-site: cubic-bezier(0.165, 0.84, 0.44, 1);
}

Sources & Evidence

  • Nakatani Tax Accounting Office — current homepage: supplied original-page browser captures, rendered text, links, custom-property inventory, element rectangles, and computed styles. Original and final URLs are identical; the recorded HTTP status is 200.
  • Capture timestamp: 2026-10-01T15:17:23.717Z, equivalent to October 2, 2026, 00:17:23.717 JST.
  • Desktop: 1440 × 1000 CSS pixels; approximately 13610px document height. Supplied images show the opening hero, a header-only blank state, and the dark footer.
  • Mobile: 390 × 844 CSS pixels; approximately 10274px document height. Supplied images show a partially rendered opening and the contact/footer ending.
  • Structural evidence: computed styles and rectangles cover strengths, services, customer stories, news, office links, recruitment, blog, contact, and footer. These establish layout and type measurements even where full visual captures are unavailable.
  • Observation limits: supplied stills and selected element styles do not establish all image content, border paint, pseudo-elements, font-file loading, hidden panel styling, or animation sequences. Link destinations are evidenced, but their destination pages were not inspected. No independent browsing or interaction was performed for this reference.
  • Capture conditions: the supplied browser procedure waited for document readiness, finite motion, sampled stability, and visible image decoding within stated limits; perpetual animations were temporarily paused during readiness checks. SharedWorkers and service workers were disabled. These conditions do not guarantee semantic completeness or rule out delayed content.

This reference describes the current supplied homepage evidence. Estimates, arithmetic derivations, and recommended implementation choices are identified separately from measured values.

スタイルやページの種類、ジャンルが近いデザインを集めました。

← デザイン一覧に戻る