MANERUBETA

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

グランドパレス弘前｜スナック型複合施設のWebサイトプレビュー

DESIGN REFERENCE

グランドパレス弘前｜スナック型複合施設

ブランドサイトイラストレトロカラフル紙の質感大胆なロゴ変形カード縦書き施設紹介レスポンシブ

ピンクとブルーの建物イラスト、紙のような質感、個性的な店舗ロゴが印象的な複合施設サイト。縦型ナビゲーションと変形カードで「遊ぶ・泊まる・鍛える・働く」を案内します。

オリジナルサイトを見る
ジャンル
その他
元の業種
複合施設・商業施設
デザイン分析日
2026/9/13

design.md

ダウンロード

Grand Palace Hirosaki — Style Reference

A pink illustrated city block, textured like printed paper, with tenant identities arranged as playful shop signs.

Website / original URL: grandpalace-hirosaki.jp Final URL: https://grandpalace-hirosaki.jp/ Theme: multicolor illustrated sections, navy interface text, pale pink framing, and a blue information area. No theme selector was evidenced. Inspected: September 13, 2026, at 02:26 JST; supplied retrieval timestamp: September 12, 2026, at 17:26:49.805 UTC. Viewports: desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels. Scope: the current facility homepage. Visual evidence covers the desktop hero, training section, contact area and footer, plus the mobile hero and footer. Rendered DOM and computed-style evidence cover the homepage's activity sections, news, floor-map link, access information, contact introduction, navigation, and footer. Destination pages and the open menu were not inspected.

Grand Palace Hirosaki presents a mixed-use facility through four activities: “遊ぶ”, “泊まる”, “鍛える”, and “働く”. Its homepage combines a tenant directory, accommodation referral, news, visitor information, and inquiry routing. The illustrated building establishes a shared place; the individual tenant marks give each destination its own personality.

The strongest relationships are pale pink against textured blue, dark lettering against colorful illustration, and white sign-shaped cards against large abstract background shapes. Desktop compositions use generous empty space and staggered positions. Mobile keeps that irregular rhythm while cropping the opening illustration, reversing the hero text order, and stacking the information sections.

How to Read This Reference

  • Measured means a value appears in the supplied rendered DOM or computed styles. Measurements describe the captured state, not every possible browser or scroll position.
  • Calculated means simple arithmetic from those measurements, such as column gaps or a mobile-to-desktop size ratio.
  • Estimated means a visual approximation from the current-page screenshots. Estimated hex colors are reusable approximations, not sampled or source-declared colors.
  • Recommended means implementation guidance for an adaptation. This includes the CSS class names, breakpoint, accessibility treatments, and state attributes below.
  • Asset lettering is separate from typography. The main wordmark and tenant identities are graphic lettering. Their appearance cannot be reconstructed from the enclosing element's font size.
  • The supplied WordPress preset variables are generic platform presets. Their presence does not establish that the visible design uses their gradients, shadows, or color palette.
  • No additional browsing, file inspection, or interaction testing was performed for this reference.

Tokens — Colors

Default Palette

Token names are implementation aliases, not original source variable names.

Name Value Evidence Suggested token Role
Palace Pink #ffc7c8 Measured: footer background, rgb(255, 199, 200) --gp-pink Flat footer surface; visually also the outer frame's pink
Navigation Navy #112961 Measured: body text and inactive side links --gp-ink Body copy, navigation, fine outlines, and the visual reference for hard shadows
Hero Violet Ink #1f1847 Measured: dark hero-copy layer --gp-hero-ink Hero statement; a useful approximation for the dark graphic wordmark
Sign White #fafafa Measured: menu text, information text, and accommodation label background --gp-white Reversed text and light sign faces
Frame Blue approximately #5892ff Screenshot estimate --gp-frame-blue Fine perimeter line and desktop side-navigation backing
Illustrated Blue approximately #245f9e Screenshot estimate --gp-scene-blue Flat fallback beneath the textured hero artwork
Information Blue approximately #3b5682 Screenshot estimate --gp-info-blue Flat fallback for the darker, mottled contact background
Pale Gold approximately #f2d486 Screenshot estimate --gp-gold Training section field and its highlighted navigation appearance
Ochre Shape approximately #e6b956 Screenshot estimate --gp-ochre Large background discs and rounded geometric forms
Gym Coral approximately #ff4d44 Screenshot estimate --gp-coral Gym identity and its oval VIEW label
Studio Purple approximately #4c007b Screenshot estimate --gp-purple Studio identity and its oval VIEW label

The illustrated blues and golds are textured fields with considerable local variation. A single hex value only provides a fallback; it does not reproduce the painted surface.

The hero DOM contains both white and dark copies of the same statement, with nearly coincident bounds. The supplied hero screenshots visibly emphasize the dark copy. This is evidence of layered text, but does not establish a color-switching interaction or animation sequence.

Color Relationships

  • Keep navy as the common interface color across the colorful tenant identities.
  • Use pink for the enclosing page identity and final directory surface.
  • Let the training section's gold establish a different atmosphere without changing its navy outlines and white sign faces.
  • Associate coral and purple with their respective tenant signs. They are not interchangeable global action colors.
  • Use white text on the blue information area. The contact link adds a small pink arrow rather than a large filled button.

Tokens — Typography

Japanese Text — Noto Sans JP

Measured family: "Noto Sans JP", sans-serif.

The body uses 16px, weight 500, and 24px line height at both supplied viewport sizes. Actual component rules reduce selected mobile text to 13–14px. Hero copy and Japanese activity headings use weight 700.

This clear Japanese sans-serif keeps the utility layer readable while the artwork and logos supply expressive forms. Normal tracking is common in body text; wide tracking is reserved for the hero statement, vertical navigation, and activity headings.

English Utility Headings — Alkatra

Measured leading family: Alkatra, followed by system sans-serif fallbacks.

The family is explicitly present on MENU, NEWS & EVENT, FLOOR MAP, ACCESS, and CONTACT. Its slanted, rounded forms connect these small English labels to the illustrated setting.

The large rotated TRAIN lettering is visually related, but its individual font declaration was not included. Treat its precise construction as unverified.

Main and Tenant Wordmarks

The central “グランドパレス弘前” mark uses angular strokes, rounded dots, varied widths, and a long sweeping lower stroke. The training signs contain distinct red and purple Japanese logotypes. These should remain graphic assets or separately authored lettering.

The hero's enclosing H1 computes to 32px / 48px, but its graphic occupies 918 × 174px on desktop and 301.59 × 57.16px on mobile. Copying the H1 font size would not reproduce the wordmark.

Type Scale

Role Desktop measured value Mobile measured value Notes
Body default 16px / 24px, weight 500 Same Individual components override this
Hero statement 27px / 40.5px, weight 700 15.6px / 26.52px, weight 700 Tracking 2.7px and 1.56px, respectively: 0.1em
Menu label 16px / 32px, weight 700 Same Alkatra; uppercase visible label
Side-navigation labels 15px / 15px, weight 700 12px / 12px, weight 700 Tracking 7.5px / 6px; mobile links are offscreen in the sampled state
Japanese activity heading 32px / 32px, weight 700 Same 9.6px tracking; vertical desktop arrangement becomes horizontal on mobile
Accommodation capsule heading 30px / 45px, weight 700 20px / 30px, weight 700 White rounded label
Accommodation introduction 24px / 32px, weight 700 20px / 28px, weight 700 Two-line copy in both samples
English information heading 40px / 40px, weight 500 Same Alkatra
News title 15px / 24px, weight 500 14px / 20px, weight 500 Measured title height grows from 24px to 40px
Building name in access section 17px / 34px, weight 500 14px / 28px, weight 500 Paired with map links
Address 16px / 32px, weight 500 14px / 28px, weight 500 Compact visitor information
Access notes 16px / 24px, weight 400 13px / 20px, weight 400 Parking and station information
Contact subheading 20px / 24px, weight 500 Same One desktop line, two mobile lines
Contact explanation 17px / 25px, weight 500 14px / 25px, weight 500 Mobile retains generous leading
Footer category capsule 15px / 30px, weight 500 Same 44px outer height in both footer samples
Footer tenant link 15px / 30px, weight 500 13px / 26px, weight 500 Long mobile labels wrap
Footer secondary link 14px / 28px, weight 400 13px / 26px, weight 400 Contact, company, and privacy links

Several desktop English headings have reported visual bounds only 32px high despite a computed 40px line height. The supplied evidence does not identify the transform or other cause. Preserve the distinction between computed typography and rendered bounds.

Tokens — Spacing & Shapes

Measured root: 16px. There is no evidence of a custom miniature rem system.

Density: sparse, large-scale illustrated scenes; compact labels; substantial spacing between activity groups; a more conventional information layout near the bottom.

Spacing Scale

Use Value Evidence
Outer illustrated-frame inset Approximately 12px Screenshot estimate, desktop and mobile
Menu dot-to-label gap 12px Measured grid gap
Footer bullet-to-text gap 9px Measured inline-grid gap
Information link-to-arrow gap 8px Measured on contact and other utility links
Desktop side-link separation 13px Calculated from successive 111px-high link bounds
Footer capsule padding 6px 23px Measured at both viewports
Mobile off-canvas menu capsule padding 0 23px Measured; distinct from footer capsules
Desktop news-column gap 39px Calculated from three adjacent card bounds
Mobile news-card gap 27px Calculated from successive card bounds
Mobile gym-to-studio gap 50px Calculated between the measured card boxes
Main mobile information inset 50px per side Measured 290px content width at 390px
Footer vertical padding 60px desktop; 44px mobile Measured

These values form a useful adaptation scale, but they do not prove the original uses a single spacing-token system.

Border Radius and Depth

Element Geometry Evidence
Illustrated viewport frame Approximately 24px rounded corners and a 2px blue edge Screenshot estimate
Side-navigation pills Fully rounded Source radius 1440px desktop and 844px mobile
Footer category capsules Fully rounded Same very large source radii; outer height 44px
Accommodation heading 100px radius Measured
Gym sign Tall capsule with semicircular ends Screenshot; face approximately 292 × 434px
Studio sign Rounded square, approximately 30px corner radius Screenshot; face approximately 324 × 324px
Tenant-sign shadow Hard navy offset, approximately 14px right and down Screenshot estimate; no visible blur
VIEW label Tilted ellipse Screenshot estimate; roughly 136 × 76px visible footprint
Footer 80px 80px 0 0 desktop; 30px 30px 0 0 mobile Measured

The tenant anchors themselves report transparent backgrounds and zero radius. The visible white faces and shadows belong to inner graphics or descendants that were not individually measured. Do not mistake the outer anchor's computed style for the complete sign appearance.

Layout Measurements

Element Desktop, 1440 × 1000 Mobile, 390 × 844
Document height Approximately 7339.64px Approximately 7805.55px
Illustrated hero aperture Approximately 1416 × 976px Approximately 366 × 820px
Header logo link 190 × 35.37px, x ≈ 39 152 × 28.29px, x = 38
Menu button 70.95 × 32px, x ≈ 1328.05, y = 34 Same size, x ≈ 278.05, y = 34
Central hero graphic 918 × 174px, x = 261 301.59 × 57.16px, x ≈ 44.20
Hero statement 798.94 × 40.5px 188.77 × 79.5px
Main information width 1213px, x = 113.5 290px, x = 50
News entry Approximately 378.33 × 291.88px Approximately 290 × 243.19px
Floor-map link block 1440 × 524px 290 × 340.81px
Footer 1440 × 519.31px 390 × 879.73px
Footer wordmark 619 × 117.31px 273 × 51.73px

The document is taller on mobile even though the tenant artwork becomes smaller. Stacked news, directory groups, and wrapped text account for additional vertical space.

Components

Illustrated Hero

Role: introduces the facility as a place containing several kinds of activity.

The opening composition fills almost the entire viewport inside a pink margin and rounded blue outline. A textured blue ground surrounds a large pink building. Its windows and cutaway rooms provide small narratives: a seated worker at the left, a circular bedroom scene at the right, and stylized people across the foreground.

The central identity has two parts:

  1. The statement “働く、遊ぶ、夢を見る。すべてが叶うスナック型秘密基地。”
  2. The large graphic wordmark beneath it on desktop.

At desktop size, the statement's dark layer starts near y = 390.25 and the wordmark near y = 435.75. They form a centered block over the building rather than occupying a separate opaque text panel.

Mobile reverses their visual order. The wordmark starts near y = 357.83, followed by three centered lines of copy near y = 414.98:

“働く、遊ぶ、夢を見る。”
“すべてが叶う”
“スナック型秘密基地。”

The mobile illustration is heavily cropped. The black-suited figure remains near the lower left and the red-dressed figure near the lower right; much of the bedroom circle is outside the right edge. Preserve an intentional focal composition instead of compressing the whole desktop scene into the phone width.

Header Utilities

Role: home identity and access to the wider directory.

The top-right menu combines a white 16px circular mark, a 12px gap, and the Alkatra label MENU. Its measured grid columns are 16px 42.9531px. The button remains the same size at both viewports, with its right edge 41px from the viewport edge.

The small white wordmark is visible in the supplied scrolled captures. The opening hero instead gives visual priority to the large central mark. Logo link bounds exist in the DOM even in the initial samples, so those bounds alone do not establish when the small logo becomes visible.

The utilities remain at consistent screen locations across the provided captures, which supports a persistent-header interpretation. The exact positioning and visibility logic were not supplied.

Menu Directory — Closed-State Evidence

Role: groups tenants and utility destinations behind the menu control.

The DOM includes a second logo, the four activity groups, tenant links, news, floor map, contact, company, privacy, and another button. These elements are positioned beyond the viewport's right edge in the sampled state: the directory's logo begins at x = 1498 on desktop and x = 414 on mobile.

This establishes the presence of off-canvas content. It does not verify the opened panel's appearance, transition direction, focus handling, closing behavior, or scroll locking.

The mobile off-canvas group capsules measure 32px high, while mobile footer capsules remain 44px high. Keep these two contexts separate when reusing their styling.

Desktop Activity Rail

Role: direct links to the four homepage activity sections.

A blue backing strip protrudes from the left edge, with rounded outer corners. Four narrow navy capsules contain upright Japanese labels. The links target #havefun, #stay, #train, and #work.

Measured desktop links are 31 × 111px at x = 7, starting at y = 256, 380, 504, and 628. Their narrow letter columns use 15px bold text with 7.5px tracking. Together with the screenshot, these bounds suggest a backing approximately 45px wide and 528px tall.

The training capture shows “鍛える” on a pale-gold fill while the other pills remain navy. This is a visible selected appearance; the mechanism that synchronizes it with scrolling was not tested.

At the mobile sample, all four link boxes lie at x = −29 with a width of 25px, entirely outside the viewport. The hero screenshot consequently has no visible rail. Do not infer that the links were removed from the DOM or that their visibility never changes later.

Activity Chapter Headings

Role: marks changes between the facility's four activity categories.

The desktop training capture pairs large rotated TRAIN lettering with a smaller vertical Japanese heading. The Japanese headings measure 32px with 9.6px tracking. Their repeated desktop viewport positions suggest viewport-aligned chapter labeling, but the exact sticky or scripted implementation is unverified.

On mobile, the Japanese headings occupy horizontal rows above the content. Their type remains 32px. The English activity labels are absent from the supplied mobile rendered-text extraction.

Tenant Sign Cards

Role: lets visitors enter a tenant or service detail page through its own visual identity.

The training section provides the clearest visible anatomy:

  1. A white shaped face with a fine navy outline.
  2. A solid navy offset silhouette that makes the sign look thick.
  3. A small outlined capsule describing the service.
  4. A large tenant logotype in its individual color.
  5. A tilted oval VIEW label that overlaps the sign's lower-right region.

The gym uses a tall capsule. Its label reads “プライベートジム”; its large red identity reads “ジム・シークレット”. The studio uses a rounded square with the label “レンタルスタジオ” and a purple “踊る夜” identity.

The label capsules are visually about 166 × 38px. The gym's red oval tilts clockwise and the studio's purple oval counterclockwise; approximately +12° and −18° are reasonable visual estimates, not measured source transforms.

Each tenant is represented by an anchor. In an adaptation, keep the whole sign clickable and make the overlapping VIEW element a child of the same link. Avoid creating a second nested interactive control.

Training Composition

Role: turns two service links into a spacious illustrated chapter.

The pale-gold background contains much larger ochre circles and rounded architectural shapes. These forms sit behind the white signs and remain lower contrast than the foreground identities.

On desktop, the gym anchor measures 292 × 434px at x = 377, while the studio measures 324 × 324px at x = 739. The studio begins 321px below the gym. This produces diagonal balance rather than a level two-card row.

On mobile, the gym measures 202 × 300px at x = 50 and the studio 224 × 224px at x = 116. The studio begins 50px after the gym's bottom edge. The approximately 69% scale reduction is specific to these cards; other activity assets use different ratios.

Other Activity Entries

Role: extends the directory beyond the visually captured training chapter.

Their dimensions and destinations are established by DOM evidence. Their full artwork was not supplied as current-page screenshots, so detailed visual descriptions would be speculative.

Entry Desktop anchor size Mobile anchor size Observed destination
Cafe & Bar 326 × 326px 253 × 253px /cafe_theatre
Karaoke rental room 356 × 311px 251 × 219px Homepage; label says COMING SOON
Event space 304 × 367px 236 × 285px /cafe_theatre
Other food venues 354 × 208px 275 × 162px /food
Accommodation graphic link 331 × 462px 212 × 297px https://goodoldhotel.com/
Former snack-bar office 332 × 373px 234 × 264.36px /office

The mobile play entries alternate their horizontal positions: the café starts at x = 42, event space at x = 121, karaoke at x = 42, and other food venues at x = 82. This is a staggered vertical sequence, not a uniform full-width card stack.

The karaoke entry's homepage link does not prove that its service can be booked or that its control is disabled. Preserve the observed COMING SOON status when describing the current page.

Accommodation Introduction

Role: explains the stay offering and routes visitors to its separate website.

The DOM establishes a white capsule heading, a two-line introduction, a GOOD OLD HOTEL link with “公式サイトへ”, and a separate linked graphic.

Desktop places the text near x = 349–369 and the graphic at x = 760. Mobile places the text first, followed by a centered 212 × 297px graphic at x = 89. The service heading reduces from 30px to 20px; the introduction reduces from 24px to 20px.

This is an external accommodation referral. An inline reservation flow was not evidenced.

News and Event Entries

Role: supplies dated programming updates.

The homepage contains three linked entries with an INFO or EVENT label, date, and Japanese title. Their dates in the inspected content are August 11, June 23, and June 5, 2025; these content dates are separate from the 2026 inspection date.

Desktop uses three approximately 378.33px-wide entries with calculated 39px gaps. Mobile uses a 290px-wide vertical list with 27px gaps. The section heading remains 40px Alkatra, while the “NEWS一覧へ” link moves below the heading on mobile.

The supplied DOM does not establish the exact news-image treatment. Do not invent thumbnail subjects, hover overlays, or title truncation behavior.

Floor-Map Link

Role: provides a prominent route to the facility floor map.

The desktop anchor spans 1440 × 524px and uses two measured grid columns of approximately 732.78px and 653.20px, separated by 54px. Mobile becomes a single 290px column with zero grid gap, and the FLOOR MAP heading appears at the top of that block.

The destination is /floor_map. The floor plan itself and any interactive map behavior were not inspected.

Access Information

Role: distinguishes the two buildings and explains arrival logistics.

Each building has a name, a Google map link, and an address. Additional text states that there is no dedicated parking and that the nearest station is a three-minute walk away.

Desktop text occupies a measured 512px-wide region. Mobile uses the main 290px content column, with building names and map links still sharing a row. Small typography and generous line height keep this factual section compact.

Two distinct map destinations are present in the DOM. Their external behavior and the map content were not tested.

Contact Section

Role: routes tenancy, media, and rental inquiries.

A mottled dark-blue surface carries a white Alkatra CONTACT heading, a Japanese subheading, a short explanation, and a text link ending in a pink arrow.

On desktop, the subheading sits to the right of the English heading; the explanatory copy begins on the next row. The main content aligns to x = 113.5. Broad empty blue space separates this content from the pink footer.

On mobile, the section stacks within x = 50–340. The subheading occupies two 24px lines, and the explanation occupies four 25px lines. The visible homepage component links to /contact; it is not an embedded form.

Footer Directory

Role: repeats the site's identity and gives a complete set of destinations.

The footer is a flat #ffc7c8 field with large rounded top corners. A dark graphic wordmark dominates the first row, with copyright beside it on desktop. Below are two columns of activity groups and a third column of utility links.

Each activity group begins with a thin outlined capsule. Tenant links use a 10px bullet column, a 9px gap, and the text column. This small repeated dot echoes the menu's circular mark without adding a separate icon family.

Desktop group starts are approximately x = 113.5, 551.78, and 903.78. Mobile stacks the groups in the order play, stay, train, work, then utility links. The main footer links retain a 50px left inset, and the wordmark becomes a centered 273px-wide graphic.

In the supplied bottom-of-page mobile capture, the persistent white header logo overlaps the large dark footer logo. This is an observed collision, not a recommended design rule. A new implementation should preserve header contrast and avoid that overlap.

Tokens — Motion & Interaction

Element or behavior Available evidence What can be concluded
Menu button Computed transition 0.3s A transition is declared; its changed property and open-state result are unverified
Tenant and utility anchors Computed transition 0.3s Timing exists; hover appearance was not captured
Activity rail background-color 0.3s ease-in-out Background-color changes have a verified duration and easing
Training rail selection Gold “鍛える” pill in the scrolled screenshot A selected appearance exists; its activation logic was not tested
Hero text layers White and dark copies with nearly identical bounds Layering is present; timing, masks, and movement are unverified
Sampled element animations animation: none on listed elements These sampled nodes do not establish active CSS keyframes; other nodes, pseudo-elements, assets, or scripts may differ
Menu directory Offscreen bounds beyond the right edge Closed off-canvas content is present; opening and closing were not exercised
Section anchors Four explicit fragment destinations Section navigation is available; smooth scrolling and scroll snapping were not established

The inspection process initially observed the page for at least five seconds and waited for loading, visible image decoding, and sampled layout stability. Perpetual animations were paused during readiness checks and then resumed. These capture procedures do not constitute a motion recording or prove that all delayed behavior was seen.

Recommended adaptation: start with the evidenced 300ms color transition. Add further motion only with a specific purpose. Keep all content available without entrance animations and support reduced motion. Do not invent floating characters, parallax layers, logo morphing, or scroll-triggered card movement as original-site facts.

Surfaces

Layer Appearance Function
Outer identity field Flat pale pink Frames the illustrated opening and returns as the footer
Hero scene Textured blue, pink architecture, colorful room cutaways Establishes place and atmosphere
Activity background Large low-contrast geometric forms; gold in the captured training section Gives each chapter a distinct setting
Tenant face Nearly white, shaped silhouette, fine navy edge Keeps each identity legible
Tenant depth Solid offset navy silhouette Makes signs feel tangible without soft elevation
Oval action label Coral or purple, white lettering, thin dark edge Adds directional emphasis to a tenant link
Information area Mottled blue with white text Supports practical content and inquiry routing
Footer Flat pink with dark lettering and outlined capsules Provides a clear final directory

Depth comes from hard silhouettes and overlap. Grain belongs mainly to the illustrated surroundings; the training sign faces remain comparatively clean.

Imagery

The imagery resembles gouache, colored paper, and printed illustration. Fine mottling breaks up large flat shapes. Figures have elongated fashion-like proportions, simplified faces, irregular silhouettes, and strong clothing colors. Architecture uses simple perspective and large rectangular masses, while circular cutaways reveal activities inside the building.

The hero's pink façade and blue sky dominate. A green workplace vignette, teal bedroom surround, yellow bedding, black suit, and red-orange dress create secondary focal points. Text and wordmark cross the scene at its center, so the underlying composition must leave that region readable.

The training background translates the building's rounded and architectural geometry into abstract ochre forms. White tenant signs appear to sit above that printed field.

Do not use image-rendering: pixelated for this reference. The visible character is fine grain and painterly edges, not enlarged bitmap pixels.

Observed Asset References

No reliable image src values, graphic filenames, or font-file URLs were included in the supplied evidence. The following identifies visible assets without inventing paths.

Asset Current-page evidence Implementation guidance
Main facility wordmark Desktop/mobile hero and footer Preserve its proportions and custom lettering
Small reversed wordmark Scrolled desktop and mobile captures Provide a contrast-appropriate version for its background
Building and foreground figures Desktop/mobile hero Use authored illustration and intentional mobile cropping
Workplace and bedroom cutaways Hero Preserve their relationship to the façade
Gym tenant identity Desktop training capture Use its coral lettering rather than generic display text
Studio tenant identity Desktop training capture Preserve the purple custom Japanese mark
Paper-like background texture Hero, training, and contact captures Use restrained raster texture or another authored equivalent
Menu dot, bullets, and arrows Screenshots and measured link layout Simple CSS or vector primitives are suitable

The evidence does not reveal whether the hero is a single image or several independently positioned assets. A responsive picture element and separately authored mobile composition are recommendations, not claims about the original implementation.

Layout & Responsive Behavior

Overall Structure

The current homepage follows this sequence:

  1. Illustrated opening identity.
  2. Play destinations.
  3. Accommodation introduction.
  4. Gym and rental studio.
  5. Office destination.
  6. News and events.
  7. Floor-map link.
  8. Access information.
  9. Contact introduction.
  10. Footer directory.

This is a long document with multiple navigation purposes. Its measured content height exceeds seven viewport heights on desktop and nine viewport heights on the inspected phone.

Desktop Composition

The hero presents a broad building scene and a 918px-wide central wordmark. The desktop rail occupies the far left. Activity chapters use staggered cards and substantial decorative space, while news and practical information align to a 1213px-wide content region.

The footer switches to an orderly directory without abandoning the large brand mark, pink field, pills, and dots.

Mobile Changes Actually Evidenced

Feature Desktop Mobile
Hero identity order Statement above wordmark Wordmark above three-line statement
Hero illustration Broad façade with both cutaways Narrow crop with substantial side content removed
Main wordmark width 918px Approximately 301.59px
Menu size Approximately 71 × 32px Same size
Side rail in sampled hero state Visible at left Link bounds fully offscreen to the left
Japanese chapter labels Vertical composition Horizontal heading rows
Training cards Two staggered desktop positions Smaller, sequential cards with alternate alignment
Accommodation Text and graphic beside one another Text followed by centered graphic
News Three columns One column
Floor-map anchor Two columns with 54px gap One column with zero gap
Contact heading pair Side by side Stacked
Footer Three directory columns One vertical sequence
Footer top radius 80px 30px

There is no basis for a single uniform desktop-to-mobile scaling formula. Training graphics shrink to about 69%, the café and event entries to about 78%, and the accommodation graphic to about 64% of their desktop widths.

The actual breakpoint was not supplied. The Quick Start uses 48rem as a recommended breakpoint, selected to separate a narrow stacked layout from a roomy desktop composition. Intermediate widths and short landscape screens still require validation.

The rounded blue frame is visible around the hero and training captures. The footer visually overtakes that treatment. A permanently drawn border across the entire footer would not match the supplied bottom capture.

Do’s and Don’ts

Do

  • Keep the exact measured pink #ffc7c8, navy #112961, hero text color #1f1847, and white #fafafa as the reliable palette core.
  • Preserve painterly texture in large scenes and clean white faces on the tenant signs.
  • Use Noto Sans JP for Japanese interface text and Alkatra for the evidenced English utility labels.
  • Treat the main and tenant wordmarks as graphic identities.
  • Keep sign shapes varied: tall capsule, rounded square, and overlapping tilted oval.
  • Use hard navy offsets for sign depth.
  • Preserve the four activity categories as the main organizing structure.
  • Keep the desktop signs staggered and retain alternating alignment on mobile.
  • Reverse the hero statement/wordmark order for the observed mobile composition.
  • Distinguish destination links, external accommodation links, and COMING SOON status.
  • Use the footer as a practical directory with generous group spacing.

Don’t

  • Don’t replace the illustrated facility with generic stock interiors or a conventional photographic hotel banner.
  • Don’t normalize every tenant into identical rectangular cards.
  • Don’t typeset the custom Japanese wordmarks with a substitute display font.
  • Don’t flatten textured blue and gold artwork into a complete design made only of solid CSS colors.
  • Don’t add blurred shadows, glass panels, or glossy gradient buttons to the sign system.
  • Don’t use the generic WordPress preset palette as evidence of visible brand colors.
  • Don’t squeeze the entire desktop building into the mobile hero.
  • Don’t force a visible desktop rail into the mobile hero based only on its presence in the DOM.
  • Don’t infer an opened menu or elaborate animation from transition declarations.
  • Don’t reproduce the mobile header/footer logo collision as an intentional feature.
  • Don’t invent asset URLs or visually describe uncaptured destination pages.

Recommended Implementation Additions

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

  • Give the main graphic wordmark an accessible name. The extracted H1 has no text content, but the supplied evidence does not include enough accessibility information to determine its current name.
  • Implement the menu with aria-expanded, an explicit controlled panel, keyboard closing, and appropriate focus management. Prevent closed off-canvas content from remaining in the keyboard sequence.
  • Keep visible labels such as VIEW, while giving each tenant link a distinct accessible name that includes its tenant or service.
  • Enlarge the measured 32px menu height and 31px-wide desktop rail targets toward 44px where practical. The visible artwork can remain compact inside a larger hit area.
  • Use navy text on the pale-gold selected rail pill if contrast testing shows the captured white treatment is insufficient.
  • Keep the footer's small link typography under review on actual phones, especially long Japanese tenant names.
  • Change or hide the persistent header identity when it crosses the footer wordmark. Verify menu contrast over pink as well as blue.
  • Make a COMING SOON item an explicit status component or give its link a meaningful explanatory destination rather than silently returning visitors to the homepage.
  • Provide reduced-motion behavior and keep all tenant links usable before optional decorative motion initializes.
  • Reserve image dimensions to prevent layout shifts and provide an intentional crop for each tested hero aspect ratio.

Agent Prompt Guide

Quick Color Reference

  • Flat footer and outer identity color: #ffc7c8, measured.
  • Shared interface ink: #112961, measured.
  • Hero statement: #1f1847, measured.
  • Sign faces and reversed text: #fafafa, measured.
  • Frame blue: approximately #5892ff.
  • Training field and shapes: approximately #f2d486 and #e6b956.
  • Gym accent: approximately #ff4d44.
  • Studio accent: approximately #4c007b.
  • Depth: hard navy offset; no blur.

Overall Prompt

“Create a homepage for a Japanese mixed-use cultural facility inspired by Grand Palace Hirosaki's current visual language. Organize it around play, stay, train, and work, followed by news, a floor-map destination, access information, contact, and a complete footer directory. Use a pink illustrated building against textured blue, a narrow pale-pink perimeter, and a rounded blue outline. Place a large custom wordmark over the building. Use Noto Sans JP for Japanese interface text and Alkatra for small English utility headings. Present tenants as distinct white sign shapes with navy outlines, hard offset shadows, their own graphic identities, and tilted oval view labels. Preserve large empty areas and staggered alignment. On mobile, crop the scene intentionally, place the wordmark above three lines of copy, and stack content while retaining alternating card positions. Use supplied or newly authorized artwork; do not substitute ordinary text for established logos.”

Example Component Prompts

  1. Hero: “Build a near-viewport illustrated opening inside a roughly 12px pink margin and a fine rounded blue edge. Use a textured blue background, a pink building, colorful room cutaways, and elongated illustrated figures. Center a dark graphic wordmark. Put the statement above it on desktop and below it on mobile.”
  2. Training signs: “On a pale-gold paper-textured field with oversized ochre circles and rounded forms, place a white 292 × 434px capsule at left and a white 324px rounded square lower at right. Add thin navy outlines and approximately 14px hard navy offsets. Include outlined service labels, distinct coral and purple tenant artwork, and tilted oval view labels.”
  3. Activity navigation: “Create a compact desktop rail at the left edge with a blue backing and four narrow navy pills labeled ‘遊ぶ’, ‘泊まる’, ‘鍛える’, and ‘働く’. Use vertical bold Japanese lettering and a 300ms background-color transition. Treat mobile visibility and active-state synchronization as separately implemented behavior.”
  4. Contact: “Use a mottled blue surface with white Alkatra ‘CONTACT’, a Japanese subheading, compact explanatory copy, and a text link with a small pink arrow. Align the heading pair horizontally on desktop and stack it within a 290px content column at a 390px viewport.”
  5. Footer: “Create a flat pale-pink footer with large rounded top corners, an oversized dark graphic wordmark, and a directory of outlined category capsules and dot-led links. Use three desktop columns and one mobile sequence. Keep the persistent header from colliding with the footer logo.”

Quick Start

CSS Custom Properties

This is an adaptation scaffold, not extracted source CSS. It implements the principal geometry and responsive relationships with a conventional 16px root. Estimated colors, shapes, and the 48rem breakpoint are explicitly separate from measured values.

Load Noto Sans JP and Alkatra through the project's font setup. Supply the actual illustration, texture, and logo assets separately; no asset paths were established by the evidence.

Suggested anatomy:

  • .hero contains a picture.hero-art and .hero-content.
  • .hero-content contains .hero-title with a wordmark image and .hero-copy with three text spans.
  • .tenant-stage contains two anchors with .tenant-card--gym and .tenant-card--studio.
  • Each tenant anchor contains .tenant-label, an image with .tenant-mark, and a non-interactive .tenant-view span.
  • .footer-nav contains three column wrappers; the first two contain activity groups and the last contains utility links.
:root {
  /* Measured colors */
  --gp-pink: #ffc7c8;
  --gp-ink: #112961;
  --gp-hero-ink: #1f1847;
  --gp-white: #fafafa;

  /* Visual approximations: replace with authored artwork as needed */
  --gp-frame-blue: #5892ff;
  --gp-scene-blue: #245f9e;
  --gp-info-blue: #3b5682;
  --gp-gold: #f2d486;
  --gp-ochre: #e6b956;
  --gp-coral: #ff4d44;
  --gp-purple: #4c007b;

  /* Observed font families */
  --gp-font-body: 'Noto Sans JP', sans-serif;
  --gp-font-display: 'Alkatra', system-ui, sans-serif;

  /* Measured layout references */
  --gp-content-max: 1213px;
  --gp-text-body: 16px;
  --gp-text-section: 40px;
  --gp-text-japanese-heading: 32px;
  --gp-footer-radius: 80px;
  --gp-footer-padding: 60px;

  /* Adaptation geometry */
  --gp-frame-inset: 12px;
  --gp-frame-radius: 24px;
  --gp-sign-offset: 14px;
  --gp-content-gutter: clamp(24px, 12.82vw, 50px);
  --gp-texture: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--gp-pink);
  color: var(--gp-ink);
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-body);
  font-weight: 500;
  line-height: 1.5;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

a {
  color: inherit;
}

img {
  display: block;
  max-inline-size: 100%;
  image-rendering: auto;
}

.gp-container {
  inline-size: min(
    var(--gp-content-max),
    calc(100% - 2 * var(--gp-content-gutter))
  );
  margin-inline: auto;
}

.chapter-frame {
  margin: var(--gp-frame-inset);
  border: 2px solid var(--gp-frame-blue);
  border-radius: var(--gp-frame-radius);
  overflow: hidden;
}

.hero {
  position: relative;
  isolation: isolate;
  min-block-size: calc(100vh - 2 * var(--gp-frame-inset));
  min-block-size: calc(100svh - 2 * var(--gp-frame-inset));
  background: var(--gp-scene-blue);
}

.hero-art {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero-art img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-content {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 5px;
  inline-size: min(918px, calc(100% - 48px));
  color: var(--gp-hero-ink);
  text-align: center;
}

.hero-title {
  inline-size: 100%;
  margin: 0;
}

.hero-title img {
  inline-size: 100%;
  block-size: auto;
}

.hero-copy {
  order: -1;
  margin: 0;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.site-header {
  position: fixed;
  inset: 34px 41px auto 39px;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  color: var(--gp-white);
  pointer-events: none;
}

.site-header > * {
  pointer-events: auto;
}

.site-brand {
  display: block;
  inline-size: 190px;
}

.menu-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 16px auto;
  align-items: center;
  gap: 12px;
  min-block-size: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--gp-font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 32px;
  text-transform: uppercase;
  cursor: pointer;
}

/* Recommended larger hit area without enlarging the visible label. */
.menu-toggle::after {
  content: '';
  position: absolute;
  inset: -6px;
}

.menu-toggle::before {
  content: '';
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background: currentColor;
}

/* Recommended state; background detection requires separate logic. */
.site-header[data-on-light='true'] {
  color: var(--gp-ink);
}

.section-rail {
  position: fixed;
  inset-inline-start: 0;
  inset-block-start: 50%;
  z-index: 15;
  transform: translateY(-50%);
  display: grid;
  gap: 13px;
  padding: 20px 7px 25px;
  border-radius: 0 24px 24px 0;
  background: var(--gp-frame-blue);
}

.section-rail a {
  display: grid;
  place-items: center;
  inline-size: 31px;
  block-size: 111px;
  border-radius: 999px;
  background: var(--gp-ink);
  color: var(--gp-white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-decoration: none;
  transition: background-color 0.3s ease-in-out;
}

.section-rail a[aria-current='location'] {
  background: var(--gp-gold);
  /* Recommended contrast improvement over the captured white label. */
  color: var(--gp-ink);
}

.section-rail[hidden] {
  display: none;
}

.activity-heading {
  margin: 0 0 40px;
  font-size: var(--gp-text-japanese-heading);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.3em;
  writing-mode: vertical-rl;
}

.train-section {
  padding-block: 80px;
  background-color: var(--gp-gold);
  background-image: var(--gp-texture);
}

/* Add authored ochre background forms separately. */
.tenant-stage {
  position: relative;
  inline-size: 686px;
  min-block-size: 700px;
  margin-inline: auto;
}

.tenant-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--gp-ink);
  background: var(--gp-white);
  box-shadow:
    var(--gp-sign-offset) var(--gp-sign-offset) 0 var(--gp-ink);
  color: var(--gp-ink);
  text-decoration: none;
}

.tenant-card--gym {
  inset: 0 auto auto 0;
  inline-size: 292px;
  block-size: 434px;
  border-radius: 999px;
}

.tenant-card--studio {
  inset: 321px auto auto 362px;
  inline-size: 324px;
  block-size: 324px;
  border-radius: 30px;
}

.tenant-label {
  padding: 7px 22px;
  border: 1px solid var(--gp-ink);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
}

.tenant-card--gym .tenant-label {
  margin-block-start: 74px;
}

.tenant-card--studio .tenant-label {
  margin-block-start: 29px;
}

.tenant-mark {
  inline-size: 82%;
  block-size: auto;
  margin-block-start: 52px;
  object-fit: contain;
}

/* Oval geometry is an approximation of the screenshot. */
.tenant-view {
  position: absolute;
  inset-inline-end: -20px;
  inset-block-end: 8px;
  display: grid;
  place-items: center;
  inline-size: 132px;
  block-size: 64px;
  border: 1px solid var(--gp-ink);
  border-radius: 50%;
  transform: rotate(12deg);
  background: var(--gp-coral);
  color: var(--gp-white);
  font-family: var(--gp-font-display);
  font-size: 22px;
  font-weight: 700;
}

.tenant-card--studio .tenant-view {
  inset-inline-end: -42px;
  inset-block-end: -28px;
  transform: rotate(-18deg);
  background: var(--gp-purple);
}

.information-area {
  padding-block: 80px;
  background-color: var(--gp-info-blue);
  background-image: var(--gp-texture);
  color: var(--gp-white);
}

.section-heading {
  margin: 0;
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-section);
  font-weight: 500;
  line-height: 1;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 39px;
}

.news-title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
}

.contact-heading-row {
  display: flex;
  align-items: center;
  gap: 64px;
}

.contact-heading-row h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
}

.contact-copy {
  margin-block: 36px 30px;
  font-size: 17px;
  line-height: 25px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.text-link .arrow {
  color: var(--gp-pink);
}

.site-footer {
  padding-block: var(--gp-footer-padding);
  border-radius: var(--gp-footer-radius) var(--gp-footer-radius) 0 0;
  background: var(--gp-pink);
  color: var(--gp-ink);
}

.footer-masthead {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 34px;
  margin-block-end: 40px;
}

.footer-brand {
  inline-size: min(619px, 100%);
}

.footer-nav {
  display: grid;
  grid-template-columns:
    minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 48px;
}

.footer-group + .footer-group {
  margin-block-start: 28px;
}

.category-pill {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 23px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 15px;
  line-height: 30px;
}

.footer-links {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  font-size: 15px;
  line-height: 30px;
  text-decoration: none;
}

.footer-links a::before {
  content: '';
  inline-size: 10px;
  block-size: 10px;
  margin-block-start: 10px;
  border-radius: 50%;
  background: currentColor;
}

/* Recommended keyboard focus treatment. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 5px;
}

/* Recommended breakpoint; the original breakpoint was not supplied. */
@media (max-width: 48rem) {
  :root {
    --gp-footer-radius: 30px;
    --gp-footer-padding: 44px;
    --gp-sign-offset: 10px;
  }

  .site-header {
    inset-inline-start: 38px;
  }

  .site-brand {
    inline-size: 152px;
  }

  .hero-content {
    inline-size: 77.333vw;
    gap: 0;
  }

  .hero-copy {
    order: 1;
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1.7;
  }

  .hero-copy span {
    display: block;
  }

  /* Adaptation choice matching the supplied mobile hero appearance. */
  .section-rail {
    display: none;
  }

  .activity-heading {
    writing-mode: horizontal-tb;
  }

  .tenant-stage {
    inline-size: 290px;
    max-inline-size: calc(100% - 48px);
    min-block-size: 620px;
  }

  .tenant-card--gym {
    inline-size: 69.655%;
    block-size: auto;
    aspect-ratio: 202 / 300;
  }

  .tenant-card--studio {
    inset: 350px 0 auto auto;
    inline-size: 77.241%;
    block-size: auto;
    aspect-ratio: 1;
    border-radius: 21px;
  }

  .tenant-label {
    padding: 5px 14px;
    font-size: 12px;
    line-height: 18px;
  }

  .tenant-card--gym .tenant-label {
    margin-block-start: 50px;
  }

  .tenant-card--studio .tenant-label {
    margin-block-start: 20px;
  }

  .tenant-mark {
    margin-block-start: 34px;
  }

  .tenant-view {
    inline-size: 96px;
    block-size: 48px;
    font-size: 18px;
  }

  .tenant-card--studio .tenant-view {
    inset-inline-end: -16px;
    inset-block-end: -20px;
  }

  .news-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 27px;
  }

  .news-title {
    font-size: 14px;
    line-height: 20px;
  }

  .contact-heading-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .contact-copy {
    margin-block: 29px 20px;
    font-size: 14px;
    line-height: 25px;
  }

  .footer-masthead {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }

  .footer-brand {
    inline-size: min(273px, 100%);
  }

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

  .footer-links a {
    font-size: 13px;
    line-height: 26px;
  }

  .footer-links a::before {
    margin-block-start: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-rail a {
    transition: none;
  }
}

The scaffold deliberately leaves menu opening, active-section detection, header visibility, and decorative artwork assembly to separate implementation. In particular, changing the header's text color does not recolor a raster logo; supply the appropriate graphic variant when switching backgrounds.

Tailwind v4 Token Mapping

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

@theme inline {
  --color-palace-pink: var(--gp-pink);
  --color-palace-ink: var(--gp-ink);
  --color-hero-ink: var(--gp-hero-ink);
  --color-sign-white: var(--gp-white);
  --color-frame-blue: var(--gp-frame-blue);
  --color-training-gold: var(--gp-gold);
  --color-gym-coral: var(--gp-coral);
  --color-studio-purple: var(--gp-purple);

  --font-body: var(--gp-font-body);
  --font-display: var(--gp-font-display);

  --text-section: 40px;
  --text-activity: 32px;
  --text-body: 16px;

  --radius-scene: var(--gp-frame-radius);
  --radius-footer: var(--gp-footer-radius);

  --spacing-frame: var(--gp-frame-inset);
  --spacing-content-gutter: var(--gp-content-gutter);
}

Sources & Evidence

  • Inspected original and final page: Grand Palace Hirosaki homepage. Both URLs are identical; the supplied response status is HTTP 200.
  • Capture time: supplied retrieval timestamp 2026-09-12T17:26:49.805Z, equivalent to September 13, 2026, 02:26:49.805 JST.
  • Desktop viewport: 1440 × 1000 CSS pixels. Supplied current-page images show the hero, training section, and contact/footer region.
  • Mobile viewport: 390 × 844 CSS pixels. Supplied current-page images show the hero and bottom footer region.
  • Rendered evidence: page title, text, destinations, element bounds, font declarations, colors, spacing, selected grid properties, footer radii, and transition declarations for both viewports.
  • Observed states: initial hero and settled scrolled captures. The training rail's selected appearance and the mobile footer/header overlap are visible. Menu opening, link activation, hover, keyboard behavior, form operation, and destination-page rendering were not exercised.
  • Capture limitations: finite readiness checks and image-decoding waits do not establish semantic completeness. Perpetual animation handling during capture does not establish the full motion design. SharedWorkers and service workers were disabled during inspection.
  • Unprovided details: original image paths, individual graphic internals, complete stylesheets, exact media-query breakpoints, and an accessibility-tree inspection. Estimated colors and recommended code are labeled accordingly.

This reference describes the current homepage represented by the supplied original-page evidence. Uncaptured visuals and untested interactions remain explicitly unverified.

← デザイン一覧に戻る