MANERUBETA

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

株式会社パートナーズ｜企業サイトのデザイン分析のWebサイトプレビュー

DESIGN REFERENCE

株式会社パートナーズ｜企業サイトのデザイン分析

コーポレートサイト企業サイト不動産資産運用ブルー写真中心大きなタイポグラフィ余白ピル型ボタンレスポンシブ

ブルーを軸に、スマートフォンを操作する手元の全面写真、大きな英字、写真付き事業カードと広い余白で構成された不動産・資産運用の企業サイト。

オリジナルサイトを見る
ジャンル
不動産
元の業種
不動産・資産運用
デザイン分析日
2026/9/17

design.md

ダウンロード

PARTNERS — Style Reference

Human-scale photography, expansive blue surfaces, and oversized brand language for a real-estate advisory company.

Website: partners-re.co.jp Original URL: https://partners-re.co.jp/ Final URL: https://partners-re.co.jp/ Theme: light, with white and pale blue-gray sections, saturated blue actions, and photographic backgrounds. Inspected: September 17, 2026, 05:13:48 JST; supplied retrieval timestamp: September 16, 2026, 20:13:48.004 UTC. Viewports: desktop 1440 × 1000 and mobile 390 × 844 CSS pixels. Scope: the current corporate homepage. Supplied screenshots show the desktop hero, five secondary service cards, desktop footer, mobile hero, and lower mobile footer. Rendered DOM measurements additionally cover the brand introduction, all six service links, company feature, news, and contact section. Destination pages and opened navigation states were not inspected.

PARTNERS pairs a close-up photograph of hands using a smartphone with the Japanese statement 「資産運用の世界に、愛とテクノロジーを。」. A large two-line LOVE & TECHNOLOGY composition anchors the bottom of the opening screen. The photograph supplies human presence; saturated blue, translucent diagonal shapes, and a restrained navigation bar supply the technology association.

The page is a substantial corporate homepage with multiple destinations and a comprehensive footer. Its main structural signature is the service presentation: one wide featured business, followed by three photographic cards and a centered pair. Broad section spacing, large English headings, blue pill buttons, and pale curved surfaces connect the opening brand statement to practical company information.

How to Read This Reference

  • Measured values come from the supplied rendered DOM, computed styles, and element rectangles. Values are CSS pixels unless stated otherwise.
  • Visually observed details come from the current-page screenshots. Dimensions inferred from those images are explicitly described as estimates.
  • Calculated values are simple conversions or differences between supplied measurements, such as grid gaps and rem equivalents.
  • Recommended values and behaviors are implementation proposals. The CSS Quick Start is an adaptation, not recovered source code.
  • Token names in this document are descriptive aliases unless a source custom property is explicitly identified.
  • The extracted element list is selective. It does not expose every image, pseudo-element, clipping layer, child text style, or animation.
  • A nonzero element rectangle does not establish visibility. Several mobile navigation links are positioned beyond the right edge of the viewport, and desktop submenu rectangles exist despite the closed menu shown in the screenshot.

Tokens — Colors

Default Palette

Name Value Suggested token Evidence and role
Brand Blue #0080D9 --brand Measured background of navigation contact, section buttons, contact-form button, and Page top control
White #FFFFFF --paper Measured body background and reversed text on blue actions and service links
Black #000000 --ink Measured principal text color, including Japanese headings and navigation
Service Mist #EFF6F7 --service-surface Measured service-section background
Footer Gray #F7F7F7 --footer-surface Measured footer background
Secondary Gray #8C8C8C --muted Measured footer service and company sublinks
Menu Gray #5C5C5B --menu-muted Computed on offscreen mobile submenu links; their opened appearance was not visually verified

Blue is the principal action color and the organizing color of the photographic treatment. There is no observed alternate theme or theme switch.

Graphic Color Treatments

The hero photograph contains many cool blues, natural skin tones, and a vivid blue sleeve. The large LOVE lettering appears to transition from cyan-blue toward deeper blue, while the ampersand is pale and TECHNOLOGY is very dark. These are visual observations; the corresponding text fills, blend modes, or asset colors were not provided.

Service cards use a strong blue upper region that gradually reveals the photograph, with darker lower areas behind the description. Exact gradient stops and opacity values are unavailable. Reproduce the tonal relationship rather than claiming that a guessed gradient is an original token.

The footer has a very subtle white sweeping shape over its gray background. The contact panel's visible lower edge has a pale cyan-blue treatment. Neither decorative treatment has a supplied computed gradient definition.

Exclude unused presets: the extracted custom properties contain many WordPress font, color, gradient, and shadow presets, plus a Swiper theme color. Their presence does not establish use in the visible design. In particular, #007AFF is not the measured button blue.

Tokens — Typography

Japanese Text and Interface

  • Measured stack: YakuHanJP, 'Noto Sans JP', sans-serif.
  • Roles: body text, navigation, Japanese hero statement, service titles, descriptions, buttons, news titles, and footer links.
  • Weights: mostly 400 for supporting text and 500 for headings and actions; small legal links use 300.
  • Character: clear, compact Japanese sans-serif text, with generous paragraph leading in the introductory narrative.
  • Tracking: many titles and controls use 0.02em; ordinary paragraphs usually have normal tracking.

These are computed font-family declarations, not an independent audit of each loaded font file or rendered glyph.

English Section Headings

  • Measured stack: Lato, sans-serif.
  • Weight: 700 for the section heading containers and Contact heading.
  • Tracking: 0.02em.
  • Role: oversized English labels such as Service, Company, and News, paired with smaller Japanese section labels.

The combined heading containers include both languages, but individual Japanese child styles were not supplied. Do not apply the parent's 80px size to both languages indiscriminately.

Brand Graphics and Utility Text

The PARTNERS symbol and wordmark should be treated as a brand asset. The font or construction of the huge hero lockup was not identified by the element extract. Lato is a reasonable implementation fallback for a new lockup, but is not a verified identification of that graphic.

Footer copyright is explicitly measured as Lato, weight 300. The HTML element's inherited Times declaration is not evidence that the visible interface uses a serif typeface.

Type Scale

Values below are measured. Desktop and mobile columns show font size / line height.

Role Desktop Mobile Weight and tracking
Body default 16 / 16px 13.52 / 13.52px 400; individual paragraphs override leading
Hero Japanese statement 32 / 57.6px 17.68 / 28.288px 500, normal tracking
Introductory narrative 16 / 33.6px 13.52 / 28.392px 500, normal tracking
Main English section heading 80 / 96px 52 / 62.4px Lato 700, 0.02em
Service introduction 16 / 28.8px 13.52 / 24.336px 500
Service card title 26 / 41.6px 20.8 / 33.28px 500, 0.02em
Service card description 14 / 25.2px 12.48 / 19.968px 400
Company feature title 24 / 38.4px 20.8 / 33.28px 500, 0.02em
Standard section button 16 / 25.6px 13.52 / 21.632px 500, 0.02em
News item title 18.72 / 29.952px 11.44 / 18.304px 400
Contact heading 60 / 60px 41.6 / 41.6px Lato 700, 0.02em
Contact-form action 18 / 28.8px 13.52 / 21.632px 500, 0.02em
Footer navigation 14 / 22.4px 11.44 / 18.304px Headings 500, sublinks 400
Footer legal links 12 / 19.2px 10.4 / 16.64px 300, 0.02em
Footer copyright 13 / 15.6px 10.4 / 12.48px Lato 300, 0.02em
Page top caption 14 / 14px 9.36 / 9.36px 300

Desktop primary navigation uses 14px text for the service and company links, and 13px for the voice and news links. These links are replaced visually by a hamburger control on mobile.

Estimated display scale: approximately 140px is a useful starting point for the desktop hero lockup and 52px for its mobile equivalent. These are reconstruction estimates, not measured font sizes. The actual letter shapes and line widths should take priority when the authorized graphic is available.

Tokens — Spacing & Shapes

Source Unit and Spacing Scale

The measured root font size is 10px on desktop and 10.4px on mobile. The following custom properties were supplied directly:

Source property Source expression Desktop equivalent Mobile equivalent
--s-2 calc(0.8rem / 2) 4px 4.16px
--s4 calc(0.8rem * 4) 32px 33.28px
--s6 calc(0.8rem * 6) 48px 49.92px
--s8 calc(0.8rem * 8) 64px 66.56px
--s10 calc(0.8rem * 10) 80px 83.2px

This establishes an 8px desktop spacing unit and an 8.32px mobile equivalent for these variables. It does not establish the complete responsive root-size formula. Copying the same rem expressions into a project with a 16px root would produce different dimensions.

Applied Spacing

Use Desktop Mobile Evidence
Header horizontal padding 64px 20.8px Computed
Main service content gutter 80px 20.8px Element positions
Service title left inset inside card 40px 20.8px Element positions
Service grid horizontal gap 72px Single column Calculated from card rectangles
Service card row gap 72px About 33.27px Calculated from card rectangles
Service and company section padding 168px vertically 83.2px vertically Computed
News section padding 128px vertically 83.2px top, 0 bottom Computed
Footer padding 128px top, 80px bottom 66.56px top, 41.6px bottom Computed
News row internal gap 48px 16.64px Computed

The header, hero copy, service container, and footer logo do not all share one left edge. Preserve these nested alignments rather than forcing every component into a single uniform gutter.

Border Radius and Shapes

Element Value or appearance Evidence
Service-section upper-left corner 200px desktop; 74.88px mobile Measured; other corners are square
Blue pill actions 100px desktop; 104px mobile Measured
Service image corners Approximately 8px Visual estimate; link boxes themselves report 0px radius
Page top control Circular, 130px desktop diameter Visually circular; measured outer box is square and reports 0px radius
Mobile Page top control 74.875 × 74.875px Measured box; appearance was not established by the supplied mobile captures
Card arrow enclosure Thin white circle, approximately 60px diameter Desktop screenshot estimate
Facebook enclosure Pale circular surface, about 40px desktop Screenshot plus measured 40 × 40px link box

Large curves operate at section scale; small radii soften image edges; full pills identify primary navigation actions. There is no visible general-purpose card-shadow system.

Components

Corporate Header

Role: brand identity and access to the main corporate destinations.

At desktop size, the header overlays the hero with a transparent background and a measured height of 100px. The logo is 182 × 39.41px, positioned at approximately (64, 30.30). Service and company links follow on the left. A large flexible gap separates them from the voice, news, and contact links on the right.

The contact button is 180 × 52.38px, with white 14px text and the measured blue fill. A thin, low-contrast blue rule runs beneath the header in the screenshot; its exact border color was not supplied.

At 390px wide, the header is 62.39px high with 20.8px side padding. The logo becomes 156 × 33.78px. A three-line blue hamburger appears at the right; its visible strokes span roughly 33px. The mobile footer capture still shows this header at the top, now against a near-white surface. That establishes a persistent visible header in that capture, but not its exact fixed/sticky mechanism or scroll trigger.

The DOM contains grouped service and company navigation destinations. Their opened states, focus behavior, and activation mechanisms remain unverified.

Full-Viewport Hero

Role: establish the relationship between personal service and technology before presenting the company's businesses.

The section occupies exactly 1440 × 1000px and 390 × 844px in the supplied measurements. The current photographed subject is a pair of hands using a smartphone, with a blue sleeve and a softly blurred blue background. Large translucent diagonal facets cross the image.

The Japanese statement is independent of the large English lockup:

  • Desktop statement box starts at (112, 220) and uses two 57.6px line boxes.
  • Mobile statement starts at approximately (24.94, 91.52) and uses two 28.288px line boxes.
  • LOVE & and TECHNOLOGY sit near the lower-left edge, at a substantially larger scale than the Japanese text.
  • A vertical Scroll cue is visible near the desktop right edge. It is absent from the supplied mobile hero image even though the text occurs in the DOM.

The mobile image is strongly cropped, with the phone entering from the left and the hands extending beyond the right edge. Preserve subject placement and room for the upper-left statement. Scaling the complete desktop composition down would not reproduce this result.

The photograph's asset type and playback behavior are unknown. Do not infer a video, slideshow, parallax effect, or automatic transition from the still captures.

Brand Introduction

Role: explain the company's positioning before the service section.

Measured desktop paragraphs form a right-weighted column beginning at x = 688px, with a width of 680px and 33.6px line height. The company-information action aligns to that column and measures 300 × 80px.

On mobile, the paragraphs remain offset to the right: approximately x = 125.94px, width 255.75px, and 28.392px line height. The CTA is separately centered at x = 70.20px, width 249.59px.

This is a deliberately asymmetric text arrangement in the measured layout. The supplied screenshots do not reveal all imagery or decoration around it. Do not interpret gaps in the extracted text coordinates as proof of completely empty space.

Bilingual Section Heading

Role: provide a recognizable rhythm for Service, Company, and News.

Each heading container combines a smaller Japanese label with a dominant English word. The measured English heading scale is 80px desktop and 52px mobile, with bold Lato and 1.2 line height. Desktop heading padding includes a 48px left inset; mobile reduces that inset to 20.8px.

The service heading includes a short Japanese introduction. Its desktop action appears to the right of the introduction area. Mobile moves the action below all six cards, creating the order: heading, description, cards, section action.

Featured Service Link

Role: give the investment-property selling business greater prominence than the other five categories.

The for Selling link spans the full service content width: 1280 × 450px on desktop. It becomes 348.41 × 312px on mobile, retaining a taller format than the remaining service links.

Its measured content includes an English category label, Japanese title, and a supporting description, all within one link to /service/forselling/. Desktop title text begins 40px from the left and 70px below the top of the card. Mobile uses a 20.8px left inset and approximately 39.52px title offset.

The featured card's image subject is not shown in the supplied screenshots. Preserve its measured hierarchy without inventing photographic content.

Secondary Service Card

Role: offer five clearly differentiated business destinations.

Desktop cards measure 378.66 × 410px. Three occupy the first row, starting at approximately x = 80.02, 530.67, and 981.33. The second row contains two cards centered at x = 305.34 and 756.

The visible anatomy is consistent:

  1. An edge-to-edge photograph with a blue upper treatment and a darker lower region.
  2. A small white English category label near the upper-left corner.
  3. A white Japanese title beneath it, using 26px text, weight 500, and 1.6 line height.
  4. A short white description near the bottom, using 14px text and 1.8 line height.
  5. A thin white circular arrow near the lower-right corner.

The whole card is the link. The arrow is a visual cue inside that link, not a separate nested action.

Observed categories are for Buying, Property Management, Crowdfunding, Insurance, and Residential. Most Japanese titles occupy two lines; Crowdfunding occupies three.

On mobile, each secondary card measures about 348.41 × 197.59px. Titles remain relatively large at 20.8px. The measured three-line Crowdfunding title ends only about 1.7px above its description. A new implementation should use a minimum height that can grow with text rather than enforcing this tight height under zoom, translation, or different fonts.

Blue Pill Action

Role: provide a consistent route from overview content to a destination page.

Standard desktop section actions measure 300 × 80px; the News action is 250px wide. Their source padding is 8px 20px 8px 40px, with 16px medium-weight text and a 100px radius. The contact-form action is larger at 380 × 120px.

Mobile section actions measure approximately 249.59 × 71.09px, with 16.64px 16.64px 16.64px 33.28px padding. The mobile contact-form action measures 281.88 × 83.19px.

Several link text extractions contain repeated copies of the same label. The screenshots do not show two stacked labels. This may reflect internal presentation layers, but the behavior is not established. Render one visible label in a reusable implementation; do not reproduce duplicate accessible names.

Company Feature

Role: link from the homepage to the company's identity and organizational information.

The supplied DOM exposes one About feature link. Its desktop box is centered at approximately x = 525.33px, width 389.33px, height 501.95px. The Japanese title and description are near its lower portion and have white computed text.

Mobile uses a 348.41 × 333.61px box aligned to the usual content gutter. The title becomes 20.8px and the description 12.48px.

No supplied screenshot shows the feature's full image or surrounding visual treatment. Its link structure, dimensions, and typography are established; the photographic subject and exact overlay are not.

News Section

Role: present current operational and company announcements.

Four article links are exposed in the supplied DOM. Their anatomy includes date, optional category text, and a Japanese title. One item lacks the お知らせ label in the extracted text, so category display should remain optional.

Desktop uses a heading/action area on the left and a list beginning at x = 466px. Each measured article link is 894px wide and 151px high, with 20px vertical padding and a 48px internal gap. Title boxes begin at x = 714px and are 566px wide.

Mobile stacks the section heading, article list, and centered list action. Article links are 348.41px wide and approximately 100–105px high. Their titles are measured at 11.44px, with a 186.19px text box. The supplied element extract does not identify all content occupying the leading part of each row; do not invent thumbnail subjects.

Contact Panel

Role: offer form and telephone contact near the end of the page.

Desktop panel bounds are 1280 × 320px at x = 80px. The Contact heading begins at x = 160px; the blue form action begins at approximately x = 480.81px; telephone information follows in the content sequence. The visible panel edge in the footer screenshot has a pale cyan-blue treatment and softly rounded corners.

On mobile, the section occupies the viewport width with 20.8px horizontal padding. Inner content is 281.88px wide, beginning at approximately x = 54.06px. Heading, introduction, form action, and telephone information stack vertically.

The header contact action links to /contact/, while the panel action links to /contact/form/. The homepage contains a form-entry link, not an inspected inline form. A telephone number is displayed, but a tel: destination is not present in the supplied link evidence.

Page Top Control

Role: return to the page's #pageTop anchor.

The desktop screenshot shows a 130px blue circle with an upward arrow and a light-weight Page top caption. In the service capture it sits near the lower-right corner. In the footer capture it overlaps the footer's upper boundary instead.

The supplied desktop rectangle at one captured state is (1248, 839, 130, 130). Mobile DOM geometry gives a 74.875px square at approximately (290.16, 748.33), but the control is not visibly established in the supplied mobile screenshots.

The destination is verified. Its show/hide threshold, footer collision handling, and scroll animation are not. Avoid implementing it as an always-visible fixed circle that obscures footer content.

Corporate Footer

Role: provide full-site navigation, policies, social access, copyright, and a final brand statement.

The desktop footer is 759.13px high, with a measured gray background and a large, subtle white sweep. The logo begins at x = 104px. Service, company, and resource columns begin at approximately x = 556, 863.52, and 1061.39.

Group titles use black, medium-weight text. Service and company sublinks use gray regular text. Resource links include voice, news, and contact, followed by smaller policy links. A black Facebook symbol sits in a pale circle. Copyright and a small blue emblem occupy the lower-right area; the large LOVE & TECHNOLOGY signature occupies the lower-left area.

The mobile footer grows to 1015.52px. Its own logo is 197.59px wide, distinct from the smaller persistent header logo. Service and company links form two 153.39px columns separated by approximately 41.63px. Other resources, policies, social access, and copyright continue below. The large brand signature appears after the copyright area, near the bottom of the capture.

Tokens — Motion & Interaction

Treatment Supplied evidence What can be concluded
Link transitions opacity 0.2s, color 0.2s Opacity and color have defined 200ms transitions; final hover values were not supplied
Header transition transform 0.4s Header transform changes have a defined 400ms transition; trigger and transform endpoints are unknown
Sampled element animation Most listed elements report animation: none Those elements lack a reported animation at that sample; this does not cover all children, assets, or pseudo-elements
Section links and service cards Actual href destinations are provided Navigation targets are established; destination page interactions were not tested
Page top Link to #pageTop Anchor intent is established; smooth scrolling is unverified
Desktop submenu DOM links and rectangles exist Group structure is known; hover/click activation and open-state motion are unverified
Mobile menu Hamburger is visible; menu links sit offscreen Closed presentation is supported; opening behavior was not exercised
Duplicate CTA text Repeated labels in text extraction Possible presentation layering only; no rolling-label animation can be claimed
Hero photography Settled still images No verified autoplay, slide duration, video, or parallax behavior

The capture procedure waited for visible finite motion and layout stability, temporarily paused perpetual animations during readiness checks, and then resumed them. These readiness checks are not an interaction recording and do not prove that every delayed reveal or transition was exercised.

Recommended extension: retain restrained 200ms color/opacity feedback and provide reduced-motion handling. Card lifts, spring motion, automatic image cycling, and animated counters would be additions rather than documented behavior.

Surfaces

Layer Appearance Function
Main page White Neutral space around narrative, company, and news content
Opening hero Full-viewport cool photograph with translucent geometry Establishes the visual identity at large scale
Service section Pale blue-gray with a large upper-left curve Groups the company's six businesses
Service link Photograph, blue upper treatment, darker lower region, white content Makes each business a distinct destination
Primary action Saturated blue pill, white label Repeats a recognizable navigation affordance
Contact panel Pale cyan-blue visual treatment Creates a distinct closing contact area
Footer Very light gray with a low-contrast white sweep Separates extensive navigation from the main content
Arrow cue Thin white circular outline over photography Indicates a card destination without adding another filled button

Depth comes from photography, contrast, overlap, and broad curves. Heavy shadows, glass blur, and thick bordered cards are not defining features of the supplied captures.

Imagery

The imagery is realistic and commercially legible. Technology is represented by a device in use; property services are represented by buildings, consultations, and domestic interiors. Photographs are shaped by the blue brand treatment rather than replaced by abstract technology illustrations.

The hero uses a close crop with strong diagonal movement: the phone tilts upward from the left, the upper hand reaches across the frame, and the blue sleeve anchors the right edge. Soft background detail leaves room for the Japanese statement. On mobile, the crop changes the composition substantially while retaining the same recognizable subject.

Observed Asset References

Asset URLs, file formats, native resolutions, and image source attributes were not included. The following references identify visible subjects, not downloadable files.

Asset or subject Supplied evidence Use
PARTNERS symbol and wordmark Desktop/mobile headers and desktop footer Primary brand identity
Hands using a smartphone, blue sleeve Desktop and mobile hero screenshots Full-viewport opening image
Modern multistory buildings for Buying card screenshot Investment-property sales
Hands discussing documents at a table Property Management card screenshot Rental management
Smartphone being used in a softly blurred setting Crowdfunding card screenshot Digital property investment
Suited adviser presenting a laptop Insurance card screenshot Insurance consultation
Bright living room with plants and neutral furnishings Residential card screenshot Residential property sales
Thin arrows and circular outlines Service cards and Page top Navigation cues
Facebook symbol and small blue footer emblem Footer screenshots Social link and supplementary footer graphic

Use appropriately licensed photographs and authorized brand artwork. Do not invent original asset paths. For new photography, leave a quieter upper area for titles and enough lower tonal density for white descriptions. Check the crop separately for portrait desktop cards and shallow mobile cards.

Layout & Responsive Behavior

Measured Endpoint Comparison

Element Desktop: 1440 × 1000 Mobile: 390 × 844
Document height About 8738.80px About 7023.86px
Hero height 1000px 844px
Header height 100px 62.39px
Header logo width 182px 156px
Service content width 1280px 348.41px
Featured service 1280 × 450px 348.41 × 312px
Secondary service card 378.66 × 410px 348.41 × 197.59px
Service arrangement Featured banner, three cards, centered pair Six stacked links
Service section action Beside section introduction Below all cards
Company feature 389.33 × 501.95px, centered 348.41 × 333.61px
News section Heading/action beside article list Heading, list, then action
Contact bounds 1280 × 320px Section 390 × 385.33px
Footer height About 759.13px About 1015.52px
Footer navigation Logo plus three principal columns Logo, two columns, then additional groups

Mobile is not a uniform scale reduction. The root font grows slightly while role-specific type sizes become smaller. Secondary cards change from portrait-like panels to shallow horizontal panels. Actions move after their content, contact information stacks, and the footer becomes taller.

The desktop service section begins at approximately document y = 2896.55px; mobile begins at y = 1958.66px. This records the long introduction in the sampled page, but should not become a hardcoded empty spacer in a reconstruction.

Only two viewport widths were inspected. Tablet behavior, exact media-query boundaries, landscape layouts, safe-area rules, and the original viewport-height unit remain unknown. The Quick Start uses explicit proposed breakpoints and svh as implementation choices.

Do’s and Don’ts

Do

  • Keep the measured action blue #0080D9 and pale service surface #EFF6F7 central to the visual system.
  • Preserve the separation between the small Japanese hero statement and oversized lower English lockup.
  • Crop hero photography deliberately for mobile, keeping the device and hands recognizable.
  • Maintain all six service destinations and the desktop hierarchy of one feature, three cards, and a centered pair.
  • Use blue upper overlays and sufficient lower contrast for white service text.
  • Keep Japanese text in the measured sans-serif stack and English section headings in Lato when those fonts are available.
  • Preserve broad section spacing, modest image-corner rounding, and strongly rounded action pills.
  • Retain news, company information, policies, and the substantial corporate footer.
  • Move section actions below the relevant content on mobile where the measurements establish that change.

Don’t

  • Don't flatten the service section into six equal desktop tiles.
  • Don't reuse the desktop hero crop unchanged at phone width.
  • Don't make all Japanese headings oversized simply because their parent container declares a large Lato size.
  • Don't treat the WordPress preset catalog as the site's active palette or font collection.
  • Don't add heavy card shadows, decorative gradients in unrelated colors, or glass panels.
  • Don't force long mobile titles into a fixed 197.59px card when content no longer fits.
  • Don't render duplicate CTA labels merely because the extracted text contains repeated strings.
  • Don't present offscreen menu rectangles as evidence of a visible open menu.
  • Don't claim hero playback, hover transformations, or production authorship without original-page evidence.

Recommended Implementation Additions

These are recommendations for a new implementation, not verified capabilities of the inspected page:

  • Give the hamburger a minimum 44px interactive target, an accessible name, and a correctly managed expanded state. Keep closed navigation out of keyboard focus and the accessibility tree.
  • Make whole-card links keyboard operable with visible focus. Treat the circular arrow as decorative within the card's accessible name.
  • Expose one accessible label for each action, even if separate visual layers are used for animation.
  • Improve small-text contrast. Calculated solid-color contrast is approximately 4.1:1 for white on #0080D9, and 3.1:1 for #8C8C8C on #F7F7F7. A darker action-text background or darker footer text can preserve the palette while improving readability.
  • Consider at least 14px for mobile news titles and at least 12px for essential legal navigation. These intentionally exceed the measured source sizes.
  • Let service cards grow with font enlargement and longer copy; the three-line mobile Crowdfunding title is especially tight.
  • Provide meaningful alternatives for informative imagery, while keeping decorative facets and redundant brand graphics out of repeated screen-reader output.
  • Use a tel: link for the displayed phone number if direct calling is intended.
  • Respect reduced motion and avoid obscuring focused elements with a persistent mobile header or Page top control.
  • Supply responsive image sizes and reserve image geometry to prevent layout shifts. Prioritize the hero image and defer below-the-fold media when appropriate.

Agent Prompt Guide

Quick Color Reference

  • Primary actions: #0080D9 with white labels.
  • Main canvas: #FFFFFF.
  • Service section: #EFF6F7.
  • Footer: #F7F7F7.
  • Principal text: #000000.
  • Source footer sublinks: #8C8C8C; use a darker adaptation when readability requires it.
  • Photographic treatment: strong blue above, natural image detail through the middle, darker support behind lower white text.

Overall Prompt

“Create a Japanese corporate homepage for a real-estate and asset-management advisory company, using the current PARTNERS visual language as a reference. Build a full-viewport hero around a close-up photograph of hands operating a smartphone, with cool blue surroundings, room for a two-line Japanese statement at upper left, and an oversized LOVE & TECHNOLOGY lockup at lower left. Use a transparent desktop header, compact navigation, and a blue pill contact link. Follow with an asymmetric brand introduction and a pale blue-gray service section with a large upper-left curve. Present six services as one full-width feature, then three image cards and a centered pair. Use Noto Sans JP with YakuHanJP for Japanese interface text and bold Lato for large English section headings. Continue with company information, news, contact channels, and an extensive light-gray footer. On mobile, recrop the hero, replace navigation with a hamburger, stack the service cards, and move section buttons below their content. Keep motion restrained and do not invent unverified playback behavior.”

Example Component Prompts

  1. Hero: “A viewport-height blue photographic hero with a smartphone and hands filling the right and lower regions. Place the Japanese statement 「資産運用の世界に、愛とテクノロジーを。」 in two modest lines near the upper left. Anchor a very large two-line LOVE & TECHNOLOGY graphic near the lower left. Preserve open space around the statement and recrop the image for a 390px-wide phone.”
  2. Service collection: “A pale #EFF6F7 section with a large rounded upper-left corner, a small Japanese section label, and an 80px bold Lato Service heading. Inside a 1280px desktop content region, place one 450px-high feature above five 378.66 × 410px image cards, arranged three then two centered, with 72px gaps.”
  3. Service card: “An entire clickable photograph with approximately 8px visible corner rounding, a saturated blue upper gradient, white English category label, 26px Japanese title, and a short white description near the bottom. Add a thin white circular arrow at lower right. Use no shadow. On mobile, keep the card shallow but let it grow for long titles.”
  4. Footer: “A spacious #F7F7F7 corporate footer with a subtle white sweeping shape. Place the PARTNERS logo at left and service, company, and resource navigation to the right. Use black group labels and subdued sublinks. Finish with a large blue-and-black brand signature, Facebook access, copyright, and the authorized supplementary emblem. On mobile, use two navigation columns and put the large signature below the copyright area.”

Quick Start

CSS Custom Properties

This adaptation keeps a conventional document root and uses measured pixel values at the two inspected endpoints. It does not depend on the source's 10px rem convention. The 1100px and 767px breakpoints are recommendations; the original breakpoints were not provided.

Use actual authorized image and logo elements with the classes below. No original asset URLs are implied. The hero lockup font, gradient colors, card clipping radius, and photographic overlay stops are approximations. Prefer the authorized brand graphic when available.

The service layout expects .section-header, .service-grid, and .service-action as children of .service-layout. Each service card contains an image, category label, title, and a bottom row with description and decorative arrow. Minimum heights intentionally allow content to grow.

:root {
  /* Measured colors */
  --brand: #0080d9;
  --paper: #ffffff;
  --ink: #000000;
  --service-surface: #eff6f7;
  --footer-surface: #f7f7f7;
  --muted: #8c8c8c;

  /* Measured font-family declarations */
  --font-jp: YakuHanJP, 'Noto Sans JP', sans-serif;
  --font-en: Lato, sans-serif;

  /* Desktop reference geometry */
  --content-width: 1280px;
  --gutter: 80px;
  --header-gutter: 64px;
  --section-space: 168px;
  --card-gap: 72px;
  --text-body: 16px;
  --text-section: 80px;
  --text-card: 26px;
  --text-card-body: 14px;
  --pill-radius: 100px;

  /* Visual estimates and adaptation values */
  --card-radius: 8px;
  --hero-ink: #102a36;
  --hero-position: 50% 50%;

  /* Measured transition durations */
  --link-duration: 200ms;
  --header-duration: 400ms;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-jp);
  font-size: var(--text-body);
  line-height: 1.8; /* Readable adaptation of the source body default. */
}

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

a {
  color: inherit;
  text-decoration: none;
  transition:
    opacity var(--link-duration),
    color var(--link-duration);
}

button { font: inherit; }

.container {
  width: min(
    var(--content-width),
    calc(100% - var(--gutter) - var(--gutter))
  );
  margin-inline: auto;
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  height: 100px;
  padding-inline: var(--header-gutter);
  transition: transform var(--header-duration);
}

.site-header::after {
  content: '';
  position: absolute;
  inset: auto var(--header-gutter) 0;
  height: 1px;
  background: rgb(0 128 217 / 20%); /* Estimated rule color. */
}

.site-header.is-solid { background: var(--paper); }
.site-header__logo { flex: 0 0 182px; }

.site-nav {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 40px;
  margin-left: 64px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}

.site-nav__secondary-start { margin-left: auto; }

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 5px;
  border: 0;
  color: var(--brand);
  background: transparent;
}

.primary-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 300px;
  max-width: 100%;
  min-height: 80px;
  padding: 8px 20px 8px 40px;
  border-radius: var(--pill-radius);
  color: var(--paper);
  background: var(--brand);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.primary-link--header {
  justify-content: center;
  width: 180px;
  min-height: 52.375px;
  padding: 8px 16px;
  font-size: 14px;
}

.primary-link--contact {
  width: 380px;
  min-height: 120px;
  padding: 16px 32px 16px 56px;
  font-size: 18px;
}

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* Recommended unit; source unit is unknown. */
  overflow: hidden;
  isolation: isolate;
  background: #a9d5e8; /* Temporary image-loading approximation. */
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-position);
  z-index: -1;
}

.hero__statement {
  position: absolute;
  top: 22vh;
  left: calc(var(--gutter) + 32px);
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.8;
}

.hero__lockup {
  position: absolute;
  left: 72px;
  bottom: 24px;
  margin: 0;
  color: var(--hero-ink);
  font-family: var(--font-en); /* Fallback, not verified lockup font. */
  font-size: clamp(80px, 9.85vw, 142px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.hero__line { display: block; white-space: nowrap; }

.hero__love {
  background: linear-gradient(180deg, #28a6d7, #2459a9);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.hero__amp {
  color: rgb(255 255 255 / 65%);
  font-size: 0.54em;
}

.service-section {
  padding-block: var(--section-space);
  border-top-left-radius: 200px;
  background: var(--service-surface);
}

.service-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas: 'heading action' 'cards cards';
  gap: 120px 40px;
}

.section-header { grid-area: heading; }

.section-heading {
  margin: 0;
  padding-left: 48px;
  font-family: var(--font-en);
  font-size: var(--text-section);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.section-heading__label {
  display: block;
  font-family: var(--font-jp);
  font-size: 16px; /* Proposed child style; not separately measured. */
  font-weight: 500;
  line-height: 2.1;
}

.section-description {
  margin: 40px 0 0 48px;
  font-weight: 500;
  line-height: 1.8;
}

.service-action { grid-area: action; align-self: end; }

.service-grid {
  grid-area: cards;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--card-gap);
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - 2 * var(--card-gap)) / 3);
  min-width: 0;
  min-height: 410px;
  padding: 40px 24px 24px 40px;
  overflow: hidden;
  border-radius: var(--card-radius);
  color: var(--paper);
  background: var(--brand);
  isolation: isolate;
}

.service-card--featured {
  flex-basis: 100%;
  min-height: 450px;
}

.service-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Approximate overlays; tune each image for text contrast. */
  background:
    linear-gradient(180deg,
      rgb(0 128 217 / 98%) 0%,
      rgb(0 128 217 / 60%) 34%,
      rgb(0 128 217 / 0%) 76%),
    linear-gradient(0deg, rgb(0 0 0 / 64%), transparent 48%);
}

.service-card__eyebrow,
.service-card__title,
.service-card__bottom {
  position: relative;
  z-index: 2;
}

.service-card__eyebrow {
  margin: 0 0 16px;
  font-size: 14px; /* Visual approximation. */
  font-weight: 700;
  line-height: 1;
}

.service-card__title {
  margin: 0;
  padding-right: 16px;
  font-size: var(--text-card);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.service-card__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px;
  align-items: end;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
}

.service-card__description {
  margin: 0;
  font-size: var(--text-card-body);
  line-height: 1.8;
}

.circle-arrow {
  display: grid;
  place-items: center;
  width: 60px;
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.site-footer {
  position: relative;
  padding-block: 128px 80px;
  background: var(--footer-surface);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 0.65fr 0.9fr;
  gap: 64px;
}

.footer-logo { width: 182px; }
.footer-group h3 { margin: 0 0 32px; font-size: 14px; font-weight: 500; }
.footer-group ul { margin: 0; padding: 0; list-style: none; }
.footer-group li + li { margin-top: 16px; }
.footer-group a { font-size: 14px; line-height: 1.6; letter-spacing: 0.02em; }
.footer-group__secondary { color: var(--muted); }

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'brand legal';
  align-items: end;
  gap: 48px;
  margin-top: 100px;
}

.footer-brand { grid-area: brand; }
.footer-legal { grid-area: legal; }

.footer-copyright {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.page-top {
  display: grid;
  place-content: center;
  gap: 16px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  color: var(--paper);
  background: var(--brand);
  font-size: 14px;
  text-align: center;
  /* Position and visibility require separate page-level behavior. */
}

/* Recommended accessibility and hover additions. */
:where(a, button):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

@media (hover: hover) {
  .primary-link:hover { opacity: 0.86; }
}

/* Proposed intermediate layout, not an observed source breakpoint. */
@media (max-width: 1100px) {
  :root {
    --gutter: 40px;
    --header-gutter: 32px;
    --card-gap: 32px;
    --section-space: 120px;
  }
  .site-nav { display: none; }
  .menu-toggle { display: grid; place-items: center; }
  .service-card { flex-basis: calc((100% - var(--card-gap)) / 2); }
  .service-card--featured { flex-basis: 100%; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  :root {
    --gutter: 20.8px;
    --header-gutter: 20.8px;
    --section-space: 83.2px;
    --card-gap: 33.28px;
    --text-body: 13.52px;
    --text-section: 52px;
    --text-card: 20.8px;
    --text-card-body: 12.48px;
    --pill-radius: 104px;
  }

  .site-header { position: fixed; height: 62.39px; }
  .site-header__logo { flex-basis: 156px; }

  .hero__statement {
    top: 91.52px;
    left: 24.94px;
    font-size: 17.68px;
    line-height: 1.6;
  }

  .hero__lockup {
    left: 8.32px;
    bottom: 20.8px;
    font-size: clamp(38px, 13.333vw, 52px);
    line-height: 1.02;
  }

  .primary-link {
    width: 249.59px;
    min-height: 71.09px;
    padding: 16.64px 16.64px 16.64px 33.28px;
    font-size: 13.52px;
  }

  .primary-link--contact {
    width: 281.88px;
    min-height: 83.19px;
  }

  .service-section { border-top-left-radius: 74.88px; }
  .service-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'heading' 'cards' 'action';
    gap: 41.6px;
  }
  .service-action { justify-self: center; }
  .section-heading { padding-left: 20.8px; }
  .section-heading__label { font-size: 12.48px; line-height: 1.6; }
  .section-description { margin: 16.64px 0 0 20.8px; }

  .service-card {
    flex-basis: 100%;
    min-height: 197.59px;
    padding: 20.8px 16.64px 16.64px 20.8px;
  }
  .service-card--featured { min-height: 312px; }
  .service-card__eyebrow { margin-bottom: 7.3px; font-size: 11.44px; }
  .service-card__bottom {
    grid-template-columns: minmax(0, 1fr) 48px;
    padding-top: 16px;
  }
  .service-card__description { line-height: 1.6; }
  .circle-arrow { width: 48px; } /* Recommended mobile size. */

  .site-footer { padding-block: 66.56px 41.6px; }
  .footer-grid { gap: 33.28px 41.6px; }
  .footer-logo { grid-column: 1 / -1; width: 197.59px; }
  .footer-group--resources { grid-column: 1 / -1; }
  .footer-group h3 { margin-bottom: 16.64px; font-size: 11.44px; }
  .footer-group a { font-size: 11.44px; }
  .footer-bottom {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'legal' 'brand';
    gap: 83.2px;
    margin-top: 41.6px;
  }
  .footer-copyright { font-size: 10.4px; }
  .page-top { width: 74.88px; height: 74.88px; font-size: 9.36px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  a { transition: none; }
}

The CSS preserves the measured palette for reference fidelity. An optional contrast adaptation can use #006DBB for small-text blue actions and #666666 for footer sublinks. These are proposed replacements, not original colors. Menu opening, header state changes, Page top positioning, and any brand animation require separate accessible behavior; none is supplied or claimed by this stylesheet.

Tailwind v4 Token Mapping

Optional mapping for projects already using Tailwind v4. This does not imply that the original website uses Tailwind. Define the custom properties above first.

@theme inline {
  --color-brand: var(--brand);
  --color-paper: var(--paper);
  --color-ink: var(--ink);
  --color-service: var(--service-surface);
  --color-footer: var(--footer-surface);
  --color-muted: var(--muted);

  --font-japanese: var(--font-jp);
  --font-latin: var(--font-en);

  --text-body: var(--text-body-size, 16px);
  --text-section-heading: var(--text-section);
  --text-service-title: var(--text-card);
  --text-service-description: var(--text-card-body);

  --spacing-page-gutter: var(--gutter);
  --spacing-section: var(--section-space);
  --spacing-service-gap: var(--card-gap);

  --radius-service-card: var(--card-radius);
  --radius-action: var(--pill-radius);
}

For a responsive body utility, map a separate project token to the measured 16px desktop and 13.52px mobile values; avoid creating a custom-property self-reference when naming Tailwind tokens.

Sources & Evidence

  • Inspected original and final homepage: https://partners-re.co.jp/. The supplied observation reports HTTP 200 with no URL change. The page title identifies 株式会社パートナーズ, and the footer displays Copyright © PARTNERS CO., LTD. All Rights Reserved.
  • Capture time: supplied retrieval timestamp 2026-09-16T20:13:48.004Z, corresponding to September 17, 2026, 05:13:48 JST.
  • Desktop evidence: 1440 × 1000 CSS-pixel viewport; hero, service-card, and footer screenshots; rendered document height approximately 8738.80px.
  • Mobile evidence: 390 × 844 CSS-pixel viewport; hero and lower-footer screenshots; rendered document height approximately 7023.86px.
  • Measurement basis: supplied rendered text, destination links, element rectangles, computed colors, typography, padding, radii, transition declarations, and selected custom properties.
  • Observation procedure: the supplied browser process waited at least five seconds initially, checked layout and text stability, awaited visible image decoding within stated limits, and traversed intermediate scroll positions. SharedWorkers and service workers were disabled.
  • Interaction limits: no supplied record demonstrates opening menus, hovering cards, activating links, submitting forms, testing keyboard behavior, or observing a complete hero animation cycle. No additional browsing or command execution was performed for this reference.
  • Asset and attribution limits: source image URLs and complete decorative-layer styles were not provided. No production-credit claim is supported by the inspected homepage evidence used in this document.

This reference describes the supplied current-page state. Measured endpoint layouts are distinguished from visual estimates and implementation recommendations; unobserved intermediate layouts and interactions remain unspecified.

← デザイン一覧に戻る