MANERUBETA
GLOBAL WORK｜ウツクシルエット 爽快物語 湘南・江ノ島旅編のWebサイトプレビュー

DESIGN REFERENCE

GLOBAL WORK｜ウツクシルエット 爽快物語 湘南・江ノ島旅編

LPブランドサイトキャンペーンサイト特設ページファッションコーディネート写真中心手描きイラスト地図3カラム固定サイドレスポンシブモーダル爽やか

人物写真・コーディネート記事・手描きの旅マップを3カラムで構成したファッション特集。海を感じるブルーと白にピンクを添え、モバイルでは縦一列に展開します。

オリジナルサイトを見る
ジャンル
ファッション・服飾
元の業種
ファッション・アパレル
デザイン分析日
2026/9/13

design.md

ダウンロード

GLOBAL WORK / Soukai Story — Style Reference

A seaside fashion story framed by a portrait and a hand-drawn travel map.

Website: GLOBAL WORK — Soukai Story Original URL: https://www.globalwork.jp/women/utsuku-silhouette/soukai-story/ Final URL: https://www.globalwork.jp/women/utsuku-silhouette/soukai-story/ Response: HTTP 200; original and final URLs are identical. Theme: light, with white editorial surfaces, coastal blue, soft pink, and yellow graphic accents. Inspected: September 13, 2026, Japan Standard Time. The supplied observation was retrieved at September 12, 2026, 17:15:22.255 UTC, equivalent to September 13 at 02:15:22.255 JST. Viewports: 1440 × 1000 and 390 × 844 CSS pixels. Scope: the current fashion feature: portrait introduction, illustrated destination map, five outfit stories, item lineup, special-movie section, scenic footer, and the open movie announcement dialog. Three desktop and two mobile page captures support the visual analysis.

The page presents GLOBAL WORK's summer pants through a trip around Shonan and Enoshima. Its Japanese graphic identity includes “ウツクシルエット,” “爽快物語,” and “湘南・江ノ島旅編.” The inspected state combines Japanese artwork lettering with English rendered copy and a visible ENGLISH selector. The mechanism responsible for this language state was not established.

On desktop, a large portrait occupies the left side, a narrow editorial story runs down the center, and an illustrated map occupies the right. The side compositions remain in place across the supplied scroll captures. On mobile, the portrait, map, and stories enter a single vertical flow. Photography establishes the atmosphere; the map adds a travel-guide character; small product rows connect each outfit to shopping destinations.

Every current screenshot also contains a centered movie announcement. Its dark translucent backdrop visibly dims the entire underlying composition. That gray veil is an overlay state, not the page's base palette.

How to Read This Reference

  • Measured means a value appears in the supplied rendered element rectangles, computed styles, or custom properties. Measurements are rounded for readability.
  • Derived means a relationship was calculated from those measurements. The reconstructed scaling unit below is not a recovered stylesheet formula.
  • Estimated means a visual approximation from the current screenshots. Dialog measurements, its yellow accents, and backdrop opacity fall into this category.
  • Recommended means an implementation choice for a new page. The CSS breakpoint, accessibility additions, and untested interaction endpoints are recommendations.
  • Declared font families identify computed CSS stacks. They do not prove that every requested web font loaded or identify the font inside an image.
  • The announcement obscures substantial portions of the page. DOM evidence supports the underlying content and selected geometry, but it does not reveal every hidden visual detail.

Tokens — Colors

Default Palette

Name Value Token / evidence Role
Coastal Blue #1E66A4 Measured source --colorBlue Map identity, selected weather labels, and the visual family of blue controls
Summer Pink #E97B7D Measured source --colorPink Map shopping CTA, lineup buttons, and section labels; echoed by the campaign seal
Text Ink #151515 Measured source --colorText Editorial text, product names, and prices
Featured Blue #A8D3F7 Measured rgb(168, 211, 247) CHECK pill for the featured pants in outfit lists
Companion Gray #E2E2E2 Measured rgb(226, 226, 226) CHECK pills for accompanying garments and accessories
Movie Surface #F2F2F2 Measured rgb(242, 242, 242) In-document special-movie section
White #FFFFFF Measured control text; visually observed page and dialog surfaces Open editorial canvas, reversed labels, and announcement panel
Announcement Yellow Approximately #FFF500 Visual estimate; no source color supplied UPDATE! label and irregular promotional stickers
Backdrop Approximately rgb(0 0 0 / 30%) Visual estimate Dims the page while leaving the announcement clear

The blue and pink values are authoritative source tokens. Yellow is an approximation for implementation planning; it was not sampled with a pixel-reading tool. Yellow within the map artwork may differ from the announcement yellow.

The HTML and body backgrounds were reported as transparent. White is therefore the visible canvas, rather than a confirmed explicit body background declaration. The reusable CSS makes this canvas explicit.

The map also contains pale blue land/water shapes, yellow routes, and blue linework. These belong to the illustration's palette. Do not generate extra interface tokens from the dimmed appearance of those assets.

Theme Behavior

Only the light presentation is evidenced. No theme switch or alternate palette was inspected. The supplied --swiper-theme-color: #007aff is a library variable, not evidence that this brighter blue is a primary visible brand color.

Tokens — Typography

Source Font Families

Source variable Declared family Verified application
--font_ja Noto Sans JP, Japanese system sans-serif fallbacks, sans-serif Body inheritance and map shopping CTA
--font_serif Noto Serif JP, followed by Yu Gothic, Hiragino Kaku Gothic Pro, Meiryo, and sans-serif fallbacks Outfit descriptions and item-lineup introduction
--font_garamond eb-garamond, serif Outfit product names, prices, and their CHECK labels
--font_en din-condensed, sans-serif Weather, temperature, and time overlays
--font_futura futura-pt, sans-serif MENU, lineup metadata, and section labels

The source serif stack has sans-serif fallbacks. Preserve awareness of that fallback behavior when comparing renders. The CSS adaptation below retains its English-named family equivalents without supplying font files.

Graphic Lettering

The campaign title, vertical Japanese introduction, map heading, and several chapter captions are visually graphic elements. Their heading containers have empty extracted text. Their visible lettering should not be reconstructed from the inherited heading font size alone.

The map heading mixes energetic brush lettering with smaller handwritten text. The portrait title uses large white Japanese lettering with smaller supporting lines. These treatments coexist with restrained live type in the product lists.

The announcement heading and paragraph look like bold serif text. Their computed font declarations were not included, so no named font is assigned to them here.

Type Scale

Values below are computed unless marked estimated. Line-height ratios are derived from the supplied pixel values.

Role Desktop size Mobile size Weight Line height / tracking
Body inheritance 14.758px 12.757px 500 1.66
Outfit product name and price 17.921px 15.491px 600 1.2
Outfit CHECK label 13.704px 11.846px 600 Approximately 1.66
Outfit description 13.704px 11.846px 600 1.46; 0.019em tracking
Weather / temperature / time 21.083px 18.224px 400 1.2; -0.02em tracking
MENU 12.650px 10.935px 700 Approximately 1.66
ITEM LINEUP 14.758px 12.757px 700 Approximately 1.66
SPECIAL MOVIE 14.758px 12.757px 700 1
Lineup price 15.813px 13.668px 700 Approximately 1.66
Map shopping CTA 10px 9.112px 500 1.66
Announcement heading About 18px About 16px Visually bold About 22px / 19px; estimated

The distinction between serif commerce details, condensed travel annotations, and small sans-serif utilities is central to the design. A single font across every component would flatten that hierarchy.

Tokens — Spacing & Shapes

Responsive Unit

The measured custom property --designwidth changes from 1366 on desktop to 428 on mobile. Many dimensions fit this reconstructed unit:

/* Derived relationship, not a retrieved source rule */
--u: calc(100vw / var(--designwidth));

At the inspected desktop size, 1u ≈ 1.05417px. At the inspected mobile size, 1u ≈ 0.911215px.

For example, a 14u body size produces the observed 14.758px and 12.757px. A 35u story inset produces approximately 36.896px and 31.893px.

The HTML root remains 16px; this is not a tiny-root-rem system. Some elements also cap their dimensions: the map heading is essentially 350px wide at both viewports, and the desktop map CTA measures 190px rather than scaling to approximately 200px. Treat the unit as a strong recurring relationship, not a universal rule.

Spacing Scale

Use Derived nominal value Desktop Mobile Evidence
Product metadata-to-pill gap 10u 10.542px 9.112px Computed grid gap
Ordinary product-row separation About 14u 14.75px 12.75px Derived from consecutive row rectangles
Portrait's vertical strip top/left inset 15u 15.813px 13.656px Measured position
Map section top padding 25u 26.354px 22.780px Computed padding
Story start / common section padding 30u 31.625px 27.336px Measured and computed
Product and paragraph horizontal inset 35u 36.891px 31.891px Derived from section and child rectangles
Special-movie horizontal/bottom padding 50u 52.709px 45.561px Computed padding

Chapter spacing is content-dependent. Measured desktop gaps between successive story sections include approximately 52.70px, 57.97px, and 105.41px. Do not impose identical spacing on every photographic transition.

Border Radius

Element Value Status
Story sections and media panels 0 Computed section geometry and visual observation
MENU, outfit pills, map CTA 50px Computed
Lineup CHECK pills 100px Computed
Announcement panel About 10px Visual estimate
Map number markers Rough circular shapes Artwork appearance; no CSS geometry established

There is no general rounded-card or soft-shadow system. Pills mark controls; the announcement is the prominent rounded container.

Layout Measurements

Element Desktop: 1440 × 1000 Mobile: 390 × 844
Portrait region Approximately 484 × 1000px, estimated from capture 390 × 674.30px; height derived from following section's position
Right map section 483.875 × 1000px, beginning at x = 956.125 390 × 691.906px, beginning at y = 674.297
Story section width 451.203px, beginning at x = 494.391 390px, beginning at x = 0
First story start y = 31.625px y = 1393.531px
Inner product/copy width 377.422px 326.219px
Portrait title artwork box 303.594 × 120.312px 262.422 × 104px
Map heading artwork box 350 × 71.328px 349.906 × 71.312px
MENU 130.703 × 41.109px 112.984 × 35.531px
Outfit CHECK 98.031 × 25.297px 84.734 × 21.859px
Map shopping CTA 190 × 30px 173.125 × 27.328px
Announcement panel Approximately 467 × 476px Approximately 350 × 416px
Document height 12,997.05px 12,601.50px

Announcement dimensions are estimates from screenshots; its own computed rectangle was not supplied.

Components

Portrait Introduction

Role: persistent campaign identity on desktop and the opening section on mobile.

A tightly cropped seaside portrait fills the region. Current desktop captures show both a black sleeveless outfit and a teal sleeveless outfit with a patterned head scarf. The sequence proves that different hero images were rendered, but it does not establish whether a timer, scrolling, or another trigger changes them.

Layer the composition as follows:

  1. Full-region portrait photograph.
  2. A narrow vertical Japanese promotional strip near the upper-left edge.
  3. A pink emblem with the white “美” character near the upper-right area.
  4. Centered campaign title artwork with smaller supporting text.
  5. A white outlined MENU capsule beneath the title, containing a label and thin hamburger lines.
  6. An irregular yellow movie sticker near the menu area.

The title and menu form a vertically centered group. The measured title-to-menu separation is approximately 30u at both viewports. Keep the portrait's face, clothing, and title in deliberate relationship; a generic centered cover crop may place lettering over the face.

The menu's expanded contents and dismissal behavior were not inspected.

Language Utility

Role: visible access to language selection.

A small white ENGLISH tab with a downward triangle sits at the viewport's upper-right corner in the initial desktop and mobile captures. It uses plain, compact dark text and remains visually subordinate to the campaign artwork.

No open selector or language-switch result is supplied. Do not infer the available languages, persistence behavior, or translation provider.

Illustrated Travel Map

Role: geographic overview and a parallel index to the outfit stories.

The heading stacks a yellow handwritten travel phrase, a larger blue Shonan/Enoshima title, and a smaller yellow model credit. Beneath it, a dense illustration combines landmark drawings, route lines, railway imagery, marine motifs, and small photographic outfit cutouts.

The visual vocabulary includes temples, the Great Buddha, stations, trains, birds, dolphins, footwear, and coastline shapes. Blue linework does most of the drawing; yellow routes guide the eye through pale blue areas and white space.

Below the illustration, a blue PLACE graphic introduces five numbered destinations. The desktop layout pairs entries in two columns: 1/2, 3/4, then 5 and the pink shopping CTA. Long destination names wrap. The visible locations are Pacific Drive-in, Shichirigahama, Photo Spot!, Hasedera Temple, and Enoshima Benzaiten Shopping Street.

The place markers appear to correspond to the story sequence. Their exact click targets and scrolling behavior were not exercised. The shopping CTA is a rendered button, so its label alone is not evidence of an external destination.

Outfit Story Chapter

Role: combine travel narrative, outfit photography, and purchase references.

Each of five chapters uses a narrow editorial column. Its anatomy consists of a leading photographic composition, a vertical trip-schedule graphic, a stacked weather/time annotation, a caption treatment, a product list, descriptive copy, and additional imagery.

Visible fragments include a café interior, paired denim outfit details, green foliage, and the closing coastal scene. Some imagery and captions remain hidden behind the announcement. Preserve the alternation between large photographs, inset text, and smaller paired images without claiming unseen image layouts.

The five weather/time groups progress from 9:05 a.m. through 2:45 p.m. One chapter uses Light Rain; the others use Sunny. This turns the clothing feature into a day-long travel sequence rather than a uniform product catalog.

Weather and Schedule Annotation

Role: connect clothing choices to time and conditions.

A narrow vertical schedule graphic sits near the photograph's right edge. Beneath it, three compact lines show weather, temperature, and time in din-condensed.

The measured type is 21.083px / 25.300px on desktop and 18.224px / 21.869px on mobile, with slightly negative tracking. White is used on some photographs and source blue on others. This variation is evidenced by computed colors; it should follow the photograph's composition and contrast rather than a single global rule.

Outfit Product Row

Role: provide a direct shopping link without interrupting the editorial rhythm.

The whole row is an anchor. Its outer grid contains a flexible metadata region and a fixed-width CHECK capsule. At desktop, the measured columns are approximately 268.859px 98.031px with a 10.542px gap. On mobile they are 232.375px 84.734px with a 9.112px gap.

Inside the metadata region, the product name sits left and the price follows to its right. Both use eb-garamond, weight 600. The first, featured pants row receives a pale-blue pill; accompanying items receive gray pills. A fine separator and additional space distinguish the featured item from the remaining outfit.

Long product names are allowed to wrap. The premium-pants row reaches approximately 43px high on desktop and 37.156px on mobile while its pill remains the usual compact size and is vertically centered.

Observed anchors lead to product-specific www.dot-st.com/globalwork/disp/item/ URLs, including color query parameters. These destinations were not opened during this analysis. Preserve real anchor semantics and avoid nesting a second interactive button inside the row.

Editorial Description

Role: explain the silhouette and its relationship to the location, weather, and styling.

Descriptions share the product list's inset width. They use the declared Noto Serif JP stack, weight 600, 1.46 line height, and slight positive tracking. Paragraphs are compact, generally spanning four to six measured lines in the English DOM state.

The paragraph begins about 21px after the last standard product row on desktop and 18px on mobile. Its visual weight is greater than a light caption, but it remains secondary to photography.

The measured mobile size is under 12px. A new implementation should assess readability separately from visual fidelity.

Item Lineup

Role: collect the three pants categories after the travel stories.

A small pink ITEM LINEUP label precedes a two-line benefit introduction and a horizontally arranged product presentation. Metadata changes to the futura-pt family, and the lineup's CHECK pills use pink with white text.

The DOM contains three distinct categories—premium tapered, tapered, and wide-leg pants—plus repeated entries. It also contains a 1 / 3 indicator. Product metadata rectangles extend beyond the central column and, on mobile, beyond the viewport. These are consistent with a carousel track; they do not by themselves prove looping, autoplay, drag support, or a page overflow defect.

The observed lineup links use dot-st.to/m/premiumtapered, /tapered, and /wide. Image crops, navigation controls, and slide transitions are not clearly exposed in the supplied screenshots.

Special-Movie Section

Role: provide a permanent location for the video promotion within the document.

This is a square-cornered light-gray section in the story column. Computed padding is approximately 30u 50u 50u. A small pink SPECIAL MOVIE heading introduces a centered promotional headline, supporting copy, and a rectangular movie thumbnail.

The supplied links identify the video destination as the linked YouTube video. This is a destination reference, not an inspected video player. No inline playback, autoplay, or audio behavior was demonstrated.

Movie Announcement Dialog

Role: foreground the movie update over the current page.

The announcement is the most prominent component in all supplied screenshots. Its anatomy is unusually specific:

  1. A full-viewport translucent dark backdrop.
  2. A white rounded panel with a thin dark border and no conspicuous shadow.
  3. A blue CLOSE capsule centered over the panel's top border, with a white X at its right.
  4. A small yellow UPDATE! rectangle inside the upper-right corner.
  5. A centered three-line serif headline and a separate supporting paragraph.
  6. A roughly 16:9 photographic movie thumbnail.
  7. A jagged yellow sticker overlapping the thumbnail's lower-left corner.

At desktop, the panel is approximately 467px wide and centered near (720, 500). Its thumbnail is about 406 × 229px. On mobile, the panel is approximately 350px wide with 20px side clearances and is centered near (195, 422). The thumbnail is about 298 × 167px.

The desktop supporting copy occupies approximately two lines; mobile uses approximately four. The panel therefore adapts through both width and text wrapping. It does not simply scale as one raster composition.

The same announcement remains centered while the background advances from the opening region to the footer. Its initial display delay, close action, backdrop-click response, keyboard handling, and reopening policy were not verified.

Coastal Footer and Credits

Role: close the travel story with the destination and brand.

A tall scenic photograph gives substantial space to sky and sea, with Enoshima near the lower portion. A small white GLOBAL WORK mark and copyright line sit toward the bottom. On desktop this closing scene stays in the central story column while the side portrait and map remain visible. On mobile it fills the reading width.

The rendered DOM lists Asuka Kijima for model, Hiroya Nishizaki for photography, Yoko Sakano for styling, Yusuke Hashimoto for hair and makeup, Ryoko Sekishiro for text, and Hayato Miura for web development. It also names Adastria Co., Ltd. in the copyright notice. The precise visual arrangement of the credit block is not established because the announcement obscures it.

The page includes a link to the GLOBAL WORK women's section. Its destination was not inspected.

Tokens — Motion & Interaction

Treatment Supplied evidence Supported conclusion / limitation
Desktop menu feedback background-color 0.3s A background-color transition is declared; its activated colors were not captured
Desktop outfit pills transition: 0.3s A transition duration is present; the changed property and endpoint are not established
Desktop map CTA opacity 0.3s Opacity feedback is declared; hover result not inspected
Lineup pills opacity 0.3s at both viewports Short opacity feedback is declared
Global timing variable --transition_speed: 1s Variable exists; no specific animation can be assigned to it from this evidence
Portrait image variation Two different portraits across current desktop captures Multiple rendered states; trigger, interval, easing, and sequence unknown
Side-panel persistence Same side compositions across different story positions Viewport-persistent desktop behavior; fixed versus sticky implementation not exposed
Announcement persistence Same panel location over different background positions Viewport-centered overlay behavior; scroll locking and dismissal unverified
Item lineup Repeated entries, offscreen rectangles, 1 / 3, Swiper variables Carousel-like structure; interaction details unverified
Sampled element animations animation: none No animation on those sampled elements at capture time; not proof that the whole site is static

The mobile menu and several mobile product controls report only transition: all, without a meaningful supplied duration. Do not copy desktop timing onto them as an observed fact.

For a new implementation, restrained 300ms color or opacity feedback fits the evidenced controls. Any image crossfade, scrolling animation, or dialog entrance should be explicitly treated as a new choice. Still captures cannot establish motion choreography.

Surfaces

Layer Appearance Function
Main canvas Visually white Unifies portrait, story, and map
Editorial content White, square-cornered, largely unboxed Lets photography and typography establish sections
Product controls Small blue or gray capsules Distinguishes featured pants from companion items
Lineup controls Small pink capsules Connects the concluding product selection to the campaign accent
Movie section Measured #F2F2F2 Separates the permanent video promotion from outfit content
Announcement backdrop Estimated 30% black veil Subordinates the entire page
Announcement panel White with a thin dark edge and modest rounding Keeps promotional text and imagery legible

The darker-looking map and gray-looking white space in the screenshots are consequences of the open overlay. Do not bake that dimming into source photographs or the page background.

Imagery

Photography is naturalistic and location-specific: sunlight, sea, casual clothing, denim details, café interiors, and greenery. Skin tones, fabric texture, and environmental color remain central. There is no evidence of a global duotone or stylized raster filter.

The portrait is an editorial cover composition. Story photography is a sequence of outfits and travel moments. The footer returns to the coastal setting. These images need different crop strategies; a universal object-fit: cover rule should not be applied indiscriminately to every asset.

The illustrated map is a dense piece of artwork with fine blue linework, irregular handwritten labels, yellow routes, and photographic figure cutouts. Preserve the entire map composition and its readable landmarks. Its internal drawings should not become a generic map-widget skin.

The video thumbnail has a deliberately louder visual language: a photographic presenter, large Japanese text with thick outlines, red emphasis, and an irregular yellow sticker. Keep that expressive treatment localized to the movie promotion.

Observed Asset References

Original image src URLs and file formats were not included in the evidence. The references below identify visual roles, not fabricated asset paths.

Asset role Current observation Reuse guidance
Portrait variants Black sleeveless outfit; teal outfit with patterned scarf Use dedicated crops that preserve face, clothing, and graphic placement
Campaign title and seal White Japanese title; pink emblem containing “美” Retain authorized artwork and provide text alternatives
Travel-map composition Landmarks, routes, marine motifs, outfit cutouts Preserve full composition and sufficient resolution for fine lines
Story imagery Café fragment, denim detail pairs, foliage, travel scenes Mix large frames with smaller details; retain square image boundaries
Movie thumbnail Presenter and bold Japanese promotional lettering Keep approximately 16:9; avoid cropping the embedded lettering
Yellow sticker Jagged promotional shape over the thumbnail Use the actual graphic when available; exact outline is not a standard CSS shape
Footer photograph Enoshima, open sky, and blue sea Preserve the destination and space for the small white brand mark

Hamburger lines, a close X, tiny chevrons, and numbered map markers are visible. No icon-library identity was established.

Layout & Responsive Behavior

Desktop

At 1440px wide, the composition behaves like three editorial panels. The center's actual story content is approximately 451.20px wide. Roughly 10.54px gutters separate it from the side regions, which are each about 484px wide.

The portrait and map remain visible through the later document captures. The story column carries the long page, including the closing footer. This keeps campaign identity and geographic context available while individual outfits change.

The map's contents are vertically composed within a 1000px region. Its heading begins around y = 126px, leaving substantially more breathing room than the section's own top padding. Preserve this composed alignment rather than automatically attaching all map content to the top edge.

Mobile

At 390px wide, the order is portrait → map → five stories → lineup → special movie → footer. The portrait ends at approximately 674.30px. The map then occupies approximately 691.91px, followed by a 27.33px gap before the first story.

The hero height is consistent with approximately 740u at this viewport, but its original height declaration was not supplied. It should not be described as a verified 80vh rule.

Story media becomes 390px wide. Product lists and descriptions retain approximately 31.89px side insets. Product metadata and pills remain side by side, with long names wrapping as needed.

The map heading is approximately 350px wide on both desktop and mobile. This is a notable exception to proportional shrinking: the heading retains its presence on the phone.

The announcement remains centered in the viewport while the underlying mobile document changes position. Its width becomes approximately 100vw - 40px, and its copy reflows independently from the media.

Unverified Widths and Conditions

Only 1440px and 390px layouts are directly evidenced. The actual breakpoint, tablet layout, landscape behavior, wide-screen caps, safe-area handling, and browser-zoom behavior are unknown.

The Quick Start uses a recommended 900px breakpoint and a centered intermediate reading width. These are practical adaptation choices, not original-site measurements. Validate them with actual content and translated text.

Do’s and Don’ts

Do

  • Preserve the desktop relationship between portrait, narrow story column, and illustrated map.
  • Stack those regions in their observed mobile order.
  • Use source blue #1E66A4 and pink #E97B7D consistently.
  • Keep photography and custom lettering responsible for the largest visual statements.
  • Separate serif product details, condensed travel annotations, and sans-serif utility labels.
  • Keep the featured pants pill blue and companion-item pills gray.
  • Allow product names and translated copy to wrap without displacing their controls.
  • Retain the map's fine linework, yellow routes, and photographic cutouts.
  • Treat the movie section and announcement as related but separate components.
  • Preserve the announcement's overlapping close capsule and lower-left sticker.
  • Keep the overlay dimming separate from the underlying page's colors.

Don’t

  • Don't replace the three-panel editorial structure with a conventional full-width hero and card grid.
  • Don't infer hidden page details from an unobscured image of another capture state.
  • Don't turn every photograph into a rounded card with a shadow.
  • Don't treat image-based lettering as proof of a particular font family.
  • Don't use the library's default bright blue as the campaign blue.
  • Don't assume the hero changes on a timer or that the lineup autoplays.
  • Don't describe menu navigation, language switching, or modal dismissal as tested behavior.
  • Don't make the video thumbnail fill an arbitrary aspect ratio that cuts off its lettering.
  • Don't shrink a complete desktop screenshot to create the mobile page.
  • Don't let the visible size of a tiny capsule dictate the only available touch target.

Recommended Implementation Additions

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

  • Use semantic headings with accessible text for graphic campaign titles and section labels. Empty extracted heading text does not establish whether the original images have adequate alternatives.
  • Give image-only movie and brand links meaningful accessible names. Empty extracted link text alone is insufficient to assess their existing accessible names.
  • Implement the announcement with an accessible dialog, clear labeling, keyboard dismissal, focus containment, and focus restoration. Keep the close control reachable in short viewports.
  • Prevent accidental background interaction while a modal is active. The supplied captures do not establish the original scroll-lock policy.
  • Retain compact visual pills while providing approximately 44px interaction areas where practical, particularly on mobile.
  • Consider a 14–16px reading size for mobile descriptions. The observed value is approximately 11.85px, so this will intentionally alter line wrapping and document height.
  • Verify small white text on pink and text placed over photography. Use measured contrast and actual crops when adjusting colors or adding local text support.
  • Give interactive map destinations real links or buttons with matching text labels; distinguish these from decorative landmarks.
  • Provide reduced-motion behavior for any implemented portrait changes, carousel motion, or smooth scrolling. Use stable, visible media when motion is disabled.
  • Supply responsive image sizes and explicit dimensions. Load the opening portrait promptly and defer lower story imagery without shifting captions or product rows.

Agent Prompt Guide

Quick Color Reference

  • Main canvas and announcement: white.
  • Text: #151515.
  • Coastal blue: #1E66A4.
  • Campaign pink: #E97B7D.
  • Featured outfit pill: #A8D3F7.
  • Companion outfit pill: #E2E2E2.
  • In-document movie surface: #F2F2F2.
  • Announcement yellow: approximately #FFF500; verify against authorized artwork.
  • Modal separation: a translucent dark veil, with no demonstrated blur.

Overall Prompt

“Create an editorial fashion feature for a summer coastal trip. On desktop, place a full-height portrait at left, a narrow scrolling outfit story in the center, and a detailed illustrated destination map at right. Keep the two side compositions visible as the story advances. Use white surfaces, coastal blue #1E66A4, soft pink #E97B7D, natural seaside photography, Japanese campaign artwork, and small yellow promotional accents. Combine serif outfit names and prices, condensed weather/time annotations, and compact sans-serif utilities. Product links are understated rows with pale-blue pills for featured pants and gray pills for companion items. On mobile, stack portrait, map, stories, lineup, movie, and scenic footer. Treat all unverified motion and breakpoint behavior as implementation choices.”

Example Component Prompts

  1. Portrait: “Build a seaside portrait introduction with a vertical Japanese text strip near the upper-left corner, a pink campaign seal at upper right, centered white title artwork, and a small outlined MENU capsule below. Keep the title/menu group centered as a unit and preserve the subject's face in the crop.”
  2. Travel map: “Create a white travel-guide panel with blue hand-drawn landmark artwork, pale-blue geographic shapes, yellow routes, and small outfit cutouts. Place a brush-lettered heading above and five numbered destinations below in two columns. Use supplied illustration assets rather than substituting a generic interactive map.”
  3. Product list: “Create a narrow, unboxed outfit list. Each entire row is a link with serif product name and price on the left and a small rounded CHECK label on the right. Use #A8D3F7 for the featured pants and #E2E2E2 for companion items. Keep long names wrappable and the label vertically centered.”
  4. Announcement: “Create a viewport-centered white announcement with a thin dark border, approximately 10px corners, a blue close capsule overlapping the top edge, and a small yellow UPDATE! label at upper right. Stack a bold serif headline, supporting copy, a 16:9 video thumbnail, and a jagged yellow sticker overlapping its lower-left corner. Use approximately 20px mobile side clearance.”
  5. Responsive story: “At wide sizes, keep the reading column around one third of the composition with persistent visual context on both sides. At phone sizes, move the portrait and map into document flow before the story. Preserve inset product typography and full-width photographs; allow translated copy to change component height.”

Quick Start

CSS Custom Properties

This is a reusable adaptation, not copied source CSS. It reproduces the recurring scale at the two inspected viewports. The 900px breakpoint, unit caps, intermediate maximum width, hover endpoints, and dialog styles are recommendations. Dialog geometry and yellow are visual approximations.

Expected structure: .soukai-page contains .hero, .travel-map, and .stories. The story container holds the outfit sections and lower-page content. A .product-row is one anchor containing .product-meta and .check. Use authorized images for the artwork classes. The independent .update-dialog is a native dialog; opening it modally and managing application state require JavaScript.

:root {
  /* Exact source colors and measured component fills */
  --color-blue: #1e66a4;
  --color-pink: #e97b7d;
  --color-ink: #151515;
  --color-featured: #a8d3f7;
  --color-companion: #e2e2e2;
  --color-movie: #f2f2f2;
  --color-paper: #fff;

  /* Visual approximations */
  --color-yellow: #fff500;
  --color-rule: #b8b8b8;
  --color-backdrop: rgb(0 0 0 / 30%);
  --radius-dialog: 10px;

  /* Source-declared families; font files are not supplied */
  --font-ja: 'Noto Sans JP', 'Yu Gothic',
    'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
  --font-editorial: 'Noto Serif JP', 'Yu Gothic',
    'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
  --font-product: 'eb-garamond', serif;
  --font-weather: 'din-condensed', sans-serif;
  --font-utility: 'futura-pt', sans-serif;

  /* Derived scaling with a recommended intermediate-width cap */
  --u: min(1px, calc(100vw / 428));
  --text-base: calc(14 * var(--u));
  --text-product: calc(17 * var(--u));
  --text-copy: calc(13 * var(--u));
  --text-weather: calc(20 * var(--u));
  --story-inset: calc(35 * var(--u));
  --check-width: calc(93 * var(--u));
  --check-height: calc(24 * var(--u));
  --radius-pill: 50px;
  --feedback-duration: 300ms;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  font: 500 var(--text-base)/1.66 var(--font-ja);
}

img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

.soukai-page {
  width: 100%;
  max-width: 428px;
  margin-inline: auto;
}

.hero {
  position: relative;
  height: calc(740 * var(--u));
  overflow: hidden;
}

.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Tune this against each authorized portrait crop. */
  object-position: center;
}

.hero__strip {
  position: absolute;
  top: calc(15 * var(--u));
  left: calc(15 * var(--u));
  width: calc(20 * var(--u));
}

.hero__seal {
  position: absolute;
  top: calc(15 * var(--u));
  right: calc(20 * var(--u));
  width: calc(90 * var(--u));
}

.hero__lockup {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(288 * var(--u));
  transform: translate(-50%, -50%);
}

.hero__title { margin: 0; }
.hero__title img { width: 100%; height: auto; }

.hero__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(20 * var(--u));
  width: calc(124 * var(--u));
  height: calc(39 * var(--u));
  margin: calc(30 * var(--u)) auto 0;
  padding: 0;
  border: 1px solid white;
  border-radius: var(--radius-pill);
  color: white;
  background: transparent;
  font: 700 calc(12 * var(--u))/1 var(--font-utility);
  transition: background-color var(--feedback-duration);
}

.travel-map {
  padding-block: calc(25 * var(--u)) calc(30 * var(--u));
  background: var(--color-paper);
}

.travel-map__heading {
  width: min(350px, calc(100% - 44 * var(--u)));
  margin: 0 auto calc(15 * var(--u));
}

.travel-map__heading img,
.travel-map__art { width: 100%; height: auto; }

.places {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(8 * var(--u));
  padding-inline: calc(20 * var(--u));
  color: var(--color-blue);
}

.places__heading { grid-column: 1 / -1; }

.pink-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 3px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  color: white;
  background: var(--color-pink);
  text-decoration: none;
  transition: opacity var(--feedback-duration);
}

.stories {
  min-width: 0;
  padding-top: calc(30 * var(--u));
}

.story { scroll-margin-top: 24px; }
.story + .story { margin-top: calc(50 * var(--u)); }
.story.story--spacious { margin-top: calc(100 * var(--u)); }
.story__media { position: relative; }
.story__media > img { width: 100%; height: auto; }

.weather {
  position: absolute;
  top: calc(190 * var(--u));
  right: calc(28 * var(--u));
  margin: 0;
  color: white;
  font: 400 var(--text-weather)/1.2 var(--font-weather);
  letter-spacing: -0.02em;
}
.weather--blue { color: var(--color-blue); }

.story__details { margin-inline: var(--story-inset); }
.product-list { display: grid; gap: calc(14 * var(--u)); }

.product-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--check-width);
  align-items: center;
  gap: calc(10 * var(--u));
  color: var(--color-ink);
  text-decoration: none;
}

.product-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(17 * var(--u));
  font: 600 var(--text-product)/1.2 var(--font-product);
}
.product-meta p { margin: 0; }
.product-price { white-space: nowrap; }

.check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--check-width);
  height: var(--check-height);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-companion);
  font: 600 var(--text-copy)/1 var(--font-product);
  transition: background-color var(--feedback-duration),
    color var(--feedback-duration);
}

.product-row--featured { margin-bottom: calc(15 * var(--u)); }
.product-row--featured .check { background: var(--color-featured); }
.product-row--featured::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: calc(-15 * var(--u));
  left: 0;
  height: 1px;
  background: var(--color-rule);
}

.story__copy {
  margin: calc(20 * var(--u)) 0 0;
  font: 600 var(--text-copy)/1.46 var(--font-editorial);
  letter-spacing: 0.019em;
}

.section-label {
  color: var(--color-pink);
  font: 700 var(--text-base)/1 var(--font-utility);
  text-align: center;
}

.special-movie {
  margin-top: calc(35 * var(--u));
  padding: calc(30 * var(--u)) calc(50 * var(--u))
    calc(50 * var(--u));
  background: var(--color-movie);
  text-align: center;
}

.movie-thumbnail { position: relative; display: block; }
.movie-thumbnail__image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* Approximate announcement geometry; native dialog behavior is separate. */
.update-dialog {
  position: fixed;
  inset: 0;
  width: min(468px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100dvh - 64px);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-dialog);
  color: var(--color-ink);
  background: white;
}

.update-dialog::backdrop { background: var(--color-backdrop); }

.update-dialog__content {
  max-height: calc(100dvh - 66px);
  overflow-y: auto;
  padding: 44px 25px;
  border-radius: inherit;
  text-align: center;
}

.update-dialog__close {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: calc(124 * var(--u));
  height: calc(39 * var(--u));
  transform: translate(-50%, -50%);
  border: 1px solid white;
  border-radius: var(--radius-pill);
  color: white;
  background: var(--color-blue);
  font: 700 12px/1 var(--font-utility);
}

.update-dialog__flag {
  position: absolute;
  top: 14px;
  right: 13px;
  padding: 1px 12px;
  color: var(--color-blue);
  background: var(--color-yellow);
  font: 700 12px/1.4 var(--font-utility);
}

.update-dialog__title {
  margin: 0;
  font: 700 16px/19px serif;
}

.update-dialog__copy {
  margin: 12px 0 0;
  font: 700 15px/17px serif;
}

.update-dialog .movie-thumbnail { margin-top: 22px; }

.movie-thumbnail__sticker {
  position: absolute;
  bottom: -36px;
  left: -20px;
  width: calc(160 * var(--u));
  height: auto;
}

/* Recommended desktop adaptation; original breakpoint is unknown. */
@media (min-width: 900px) {
  :root { --u: min(1.25px, calc(100vw / 1366)); }

  .soukai-page {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr) calc(428 * var(--u)) minmax(0, 1fr);
    column-gap: calc(10 * var(--u));
    align-items: start;
    max-width: none;
  }

  .hero {
    position: sticky;
    top: 0;
    grid-column: 1;
    grid-row: 1;
    height: 100svh;
  }

  .travel-map {
    position: sticky;
    top: 0;
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100svh;
    overflow-y: auto;
  }

  .stories { grid-column: 2; grid-row: 1; }

  .update-dialog__content { padding: 48px 30px 50px; }
  .update-dialog__title { font-size: 18px; line-height: 22px; }
  .update-dialog__copy {
    margin-top: 14px;
    font-size: 17px;
    line-height: 20px;
  }
  .update-dialog .movie-thumbnail { margin-top: 26px; }
}

/* Recommended feedback endpoints, not captured original states. */
@media (hover: hover) {
  .hero__menu:hover { background: rgb(255 255 255 / 15%); }
  .pink-cta:hover { opacity: 0.75; }
  .product-row:hover .check {
    color: white;
    background: var(--color-blue);
  }
}

:where(a, button, select):focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .soukai-page *, .update-dialog * {
    animation: none !important;
    transition: none !important;
  }
}

This shell does not implement carousel state, menu contents, language selection, portrait changes, or map navigation. Those behaviors need explicit requirements and testing. The native dialog must be opened with modal semantics for its backdrop and focus behavior to apply.

The typography intentionally preserves the observed small text scale. Apply the recommended readability and touch-target adjustments deliberately rather than assuming the measured sizes are accessibility targets.

Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. These do not imply that the original page uses Tailwind. Define the custom properties above first.

@theme inline {
  --color-coast: var(--color-blue);
  --color-summer: var(--color-pink);
  --color-editorial-ink: var(--color-ink);
  --color-pants-pill: var(--color-featured);
  --color-outfit-pill: var(--color-companion);
  --color-movie-panel: var(--color-movie);

  --font-story: var(--font-editorial);
  --font-commerce: var(--font-product);
  --font-travel: var(--font-weather);
  --font-label: var(--font-utility);

  --spacing-story-inset: var(--story-inset);
  --spacing-product-gap: calc(10 * var(--u));
  --radius-announcement: var(--radius-dialog);
  --radius-capsule: var(--radius-pill);
}

Sources & Evidence

  • Current GLOBAL WORK Soukai Story page: authority for the supplied page captures, rendered text, link destinations, computed styles, custom properties, and current-page credits. The original and final URLs are identical and returned HTTP 200.
  • Supplied observation timestamp: 2026-09-12T17:15:22.255Z, corresponding to September 13, 2026 in Japan. Separate per-image capture timestamps were not supplied.
  • Actual inspected viewports: 1440 × 1000 and 390 × 844 CSS pixels. The visual set contains three desktop and two mobile page captures at different document positions.
  • Measured evidence includes font stacks, text colors, control fills, selected transitions, section rectangles, product grids, padding, and the 1366 / 428 design-width variables.
  • The capture process reports an initial observation of at least five seconds and waits for image decoding, finite motion, and sampled layout/text stability under time limits. Perpetual animations were temporarily paused during readiness checks and then resumed. These procedures do not establish complete animation behavior or exclude delayed content.
  • Every supplied current screenshot shows the movie announcement open. Underlying visual coverage is consequently partial, even where the DOM provides complete text and geometry.
  • No click-result evidence was supplied for the menu, close control, language selector, map destinations, carousel, shopping links, or movie. Their unexercised states remain unverified.
  • Original image paths, font-file load verification, full stylesheets, exact breakpoints, and dialog computed styles were not supplied. Asset URLs, motion timings, and implementation details have not been invented to fill those gaps.

This reference describes the current served page using the supplied inspection evidence. Derived geometry and implementation recommendations are identified separately from measured original values.

← デザイン一覧に戻る