MANERU

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

ピック アップ プレイグラウンド｜白黒と余白で伝えるバスケットボールの地域活動のWebサイトプレビュー

DESIGN REFERENCE

ピック アップ プレイグラウンド｜白黒と余白で伝えるバスケットボールの地域活動

ブランドサイトキャンペーンサイトバスケットボール地域活動環境活動プロジェクトサイトモノトーン余白タイポグラフィ写真レスポンシブ縦長レイアウト

イラスト入りの大きなロゴ、白黒の配色、大胆な余白、縦長の英字書体が特徴のプロジェクトサイト。活動写真、イベント一覧、ブランドコレクションを長いスクロールでつなぎ、モバイルでは一列構成に整理しています。

オリジナルサイトを見る
ジャンル
スポーツ・レジャー
元の業種
スポーツ・地域コミュニティ
デザイン分析日
2026/10/2

design.md

ダウンロード

PICK UP PLAYGROUND — Style Reference

A spacious black-and-white identity for street basketball, shared courts, and collective care.

Website / original URL: pickupplayground.jp Final URL: https://pickupplayground.jp/ Theme: white canvas with black typography and controls; natural-color photography and a small red illustration detail. Inspected: October 2, 2026, at 09:56:00.462 UTC / 18:56:00.462 JST, using the supplied browser evidence. Viewports: desktop 1440 × 1000 CSS px; mobile 390 × 844 CSS px. Scope: the current homepage, including its opening identity, project explanation and campaign links, event index, collection modules, cleanup-kit explanation, support message, and footer. Visual captures cover the desktop opening, an interior photograph, the desktop footer, and the mobile opening and footer. Other sections are documented from rendered DOM text, element bounds, and computed styles.

PICK UP PLAYGROUND is a long project and organization website connecting basketball games with cleanup activities and local court stewardship. Its design gives a community initiative the visual confidence of a sports identity: a large illustrated wordmark, strong Japanese text, condensed English lettering, documentary photography, and unusually generous white space.

The opening is almost entirely empty white canvas around the logo. Further down, information becomes denser without acquiring a card-based interface. Square image links, substantial Japanese paragraphs, simple rectangular actions, and monochrome partner marks establish the hierarchy. Desktop compositions use offset content columns and controls near the viewport edges. Mobile moves those controls into a compact top band and converts the main content into a single column.

全文を表示閉じる

PICK UP PLAYGROUND — Style Reference

A spacious black-and-white identity for street basketball, shared courts, and collective care.

Website / original URL: pickupplayground.jp Final URL: https://pickupplayground.jp/ Theme: white canvas with black typography and controls; natural-color photography and a small red illustration detail. Inspected: October 2, 2026, at 09:56:00.462 UTC / 18:56:00.462 JST, using the supplied browser evidence. Viewports: desktop 1440 × 1000 CSS px; mobile 390 × 844 CSS px. Scope: the current homepage, including its opening identity, project explanation and campaign links, event index, collection modules, cleanup-kit explanation, support message, and footer. Visual captures cover the desktop opening, an interior photograph, the desktop footer, and the mobile opening and footer. Other sections are documented from rendered DOM text, element bounds, and computed styles.

PICK UP PLAYGROUND is a long project and organization website connecting basketball games with cleanup activities and local court stewardship. Its design gives a community initiative the visual confidence of a sports identity: a large illustrated wordmark, strong Japanese text, condensed English lettering, documentary photography, and unusually generous white space.

The opening is almost entirely empty white canvas around the logo. Further down, information becomes denser without acquiring a card-based interface. Square image links, substantial Japanese paragraphs, simple rectangular actions, and monochrome partner marks establish the hierarchy. Desktop compositions use offset content columns and controls near the viewport edges. Mobile moves those controls into a compact top band and converts the main content into a single column.

How to Read This Reference

  • Measured values come from the supplied rendered DOM and computed-style records. Measurements are rounded to two decimal places where useful.
  • Visual estimates describe the attached original-page captures. They are not pixel samples or recovered stylesheet declarations.
  • Calculated values, such as grid gaps, are derived from measured element positions.
  • Recommended values describe a reusable implementation. Breakpoints, hover endpoints, accessibility behavior, and CSS formulas must not be mistaken for verified original code.
  • All named design tokens below are implementation aliases. The supplied custom-property evidence contains only two Swiper-related variables, not an original brand-token system.
  • A computed element box does not establish that the element was visibly painted. This matters for the navigation content, startup layer, and desktop corner logo.
  • The supplied views establish two responsive endpoints. Intermediate widths, landscape layouts, and browser zoom were not tested.

Tokens — Colors

Default Palette
Name Value Suggested token Role and evidence
Canvas White #FFFFFF --color-paper Measured on the full-viewport opening sections and mobile header; visually the dominant page surface
Ink Black #000000 --color-ink Measured text and filled action backgrounds; visually also the wordmark, menu strokes, and corner arc
Reversed White #FFFFFF --color-on-ink Measured text on black actions and white text within the renovation-project treatment
Character Red Muted medium red; approximately #B52B32 No general UI token Visual estimate for the character's hair inside the opening artwork; not a sampled or computed color
Partner Gray Light-to-medium gray No general UI token Visible within the media-partner artwork; not evidence of a gray surface system
Documentary Color Image-dependent Not applicable Natural browns, gray court surfaces, white gloves, and other photographic colors

The black-and-white interface is the stable system. Red belongs to a small part of the identity artwork, while photography supplies most of the page's color variation. Neither should become a general button or navigation color.

Computed Colors That Are Not Brand Tokens

The supplied DOM declares --swiper-theme-color: #007aff and --swiper-navigation-size: 44px. These are library-named values; the supplied captures do not establish visible blue controls. Several image-only anchors also report the browser's default link blue, rgb(0, 0, 238), even though their visible content is artwork. Do not add these blues to the reconstructed palette.

No theme selector or alternate color mode is established by the evidence.

Tokens — Typography

Japanese Text — Bold Gothic Sans

Measured body family: '游ゴシック体', YuGothic, 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', 'Noto Sans JP', sans-serif.

The body computes to weight 500, but nearly all sampled editorial paragraphs, Japanese headings, labels, and footer links use 700. This produces a firm, printed character even in long passages. Important introductory copy also uses 0.12em tracking, giving the Japanese text a deliberate, open rhythm.

These are computed font-family declarations. The evidence does not identify which fallback rendered every glyph or confirm individual font-file downloads.

English Display Text — Oswald

Measured family: Oswald, sans-serif.

Use its tall, condensed proportions for navigation, collection-brand headings, purchase labels, the social hashtag, and the textual cooperation credit. Weights vary by role: navigation and purchase labels use 500; brand headings and the footer hashtag use 700.

The condensed English lettering balances the wider Japanese characters and the broad serif forms of the illustrated logo.

Scroll Instruction — Lato

Measured family: Lato, sans-serif, weight 900.

The vertically oriented SCROLL DOWN instruction is a small but distinct utility treatment. It measures 16px / 22.4px on desktop and 10px / 14px on mobile. Its narrow visual footprint lets it sit at the edge of the opening without competing with the logo.

Wordmark — Artwork, Not a Verified Font

The large two-line wordmark has high-contrast serif forms, tightly composed lettering, heavy tapered horizontal rules, and a small red-haired character leaning across the upper rule. Its font identity and asset format are not supplied.

Treat the lockup as identity artwork. An ordinary serif heading will not reproduce its proportions, custom letter relationships, rules, or character placement. The compact corner wordmark is a separate visual treatment without the large surrounding composition.

Type Scale

All values in this table are measured computed styles unless marked otherwise. Sizes are CSS pixels, not source rem values.

Role Desktop size / line height Mobile size / line height Weight Tracking
Hero statement 26 / 36.4px 15 / 21px 700 0.12em
Primary navigation 62 / 86.8px 36 / 50.4px 500 Normal
Navigation legal links 20 / 32px 18 / 28.8px 700 Normal
Navigation hashtag 30 / 42px 18 / 25.2px 500 Normal
Scroll instruction 16 / 22.4px 10 / 14px 900 Normal
Project lead heading 50 / 65px 36 / 46.8px 700 0.12em
Project introduction 18 / 36px 13.8 / 27.6px 700 0.12em
Campaign and organizer paragraphs 18 / 39.6px 16 / 35.2px 700 Normal
Organizer heading 36 / 50.4px 22 / 30.8px 700 Normal
Renovation English title 38.5 / 50.05px 36 / 50.4px 700 Normal
Collection introduction 14 / 28px 14 / 28px 700 Normal
Collection brand name 20 / 24px 20 / 24px 700 Normal
Collection brand description 12 / 22.8px 12 / 22.8px 700 Normal
Purchase label 20 / 28px 20 / 28px 500 Normal
Cleanup-kit heading 34 / 37.4px 20 / 22px 700 Normal
Cleanup-kit paragraph 14 / 28px 14 / 28px 700 Normal
Support-message heading 24 / 33.6px 20 / 28px 700 0.12em
Support-message paragraph 16 / 35.2px 14 / 30.8px 700 Normal
Footer hashtag 40 / 56px 30 / 42px 700 Normal
Footer cooperation text 22 / 30.8px 22 / 30.8px 700 Normal
Footer category and legal labels 14 / 19.6px 14 / 19.6px 700 Normal

Composite-heading limitation: the PROJECT, EVENT, and PRODUCTS heading containers report 15px / 21px, but their combined bounds are approximately 142.39px tall on desktop and 74px on mobile. Child-level English display styles are absent from the sample. Do not interpret the parent's 15px value as the size of the entire visible English heading.

Root-size limitation: the original root computes to 10px. This is not the reading size of the page. The Quick Start uses explicit component sizes and a conventional root instead of requiring the original root setting.

Tokens — Spacing & Shapes

The rhythm is asymmetric and spacious. A thin left control rail, an offset editorial frame, and broad areas of white canvas provide structure without borders around every section.

Layout Measurements
Element Desktop: 1440 × 1000 Mobile: 390 × 844 Evidence
Opening section 1440 × 1000px 390 × 844px Measured
Main illustrated lockup Approximately 667 × 346px Approximately 344 × 180px Visual estimate, including the character and rules
Compact corner logo 131.77 × 41.11px 94.19 × 29.38px Measured link / heading box
Compact logo position x 1255.53, y 42.16 x 275.09, y 23.55 Measured; visibility differs between captures
Menu control box 52.70 × 52.70px 47.09 × 47.09px Measured
Menu control position x 47.44, y 473.64 x 28.25, y 14.59 Measured
General editorial frame x 189.75, width 1102.67px x 28.25, width 333.50px Measured from content bounds
Project copy column x 765.34, width 527.08px x 28.25, width 333.50px Measured
Centered campaign-link frame x 213.98, width 1012.03px x 28.25, width 333.50px Measured
Event grid frame x 213.98, width 1078.44px x 28.25, width 333.50px Measured
Event tile 337.33px square 333.50px square Measured
Event grid gaps 33.20px horizontal, 32px vertical 28.25px vertical Calculated from tile positions
Collection text column 358.41px wide 333.50px wide Measured
Support-message column 840.17px wide at x 321 333.50px wide at x 28.25 Measured
Footer columns Two 551.34px columns, approximately 42.16px gap One 333.50px column Measured and calculated

The general desktop content frame is not centered: its left margin is about 189.75px, while its right margin is about 147.58px. Campaign images and the event index use different left anchors. Preserve these distinctions when reproducing the inspected composition; one universal centered container will flatten its spatial character.

Spacing Anchors
Use Desktop Mobile Interpretation
Header top inset 42.17px 23.55px Measured padding
Header right inset 52.71px 20.72px Measured padding
Project section top padding 118.07px 65.94px Measured
Event / collection top padding 85.39px 65.94px Measured
Footer padding 171.83px 147.58px 92.77px 56.52px 28.26px 28.26px Measured
Event grid to more button 52px 52px Calculated from the final tile and button bounds
Brand title to description About 5.27px About 4.70px Calculated
Brand description to purchase action About 23.19px About 23.55px Calculated
Instagram icon / label gap 12px 8px Measured on the link wrapper

These values are anchors, not proof of an underlying 4px or 8px spacing system. Many dimensions are fractional and change between viewports. The original responsive formulas were not included.

Shapes and Edges
  • Sampled buttons and containers have 0px border radius.
  • The event links are square, and the visible large photograph has square corners.
  • The menu uses two thin horizontal black strokes, visually around 2px thick.
  • The corner motif is a heavy partial circular arc, visually around 58px in outer diameter with a roughly 7px stroke.
  • Logo rules taper and flare at the ends. They belong to the artwork rather than a general horizontal-rule component.
  • No shadow-based elevation system is visible in the supplied captures.

Components

Opening Identity

Role: introduce the project through its mark and statement before the long editorial content begins.

The opening occupies one viewport at both inspected sizes. The illustrated lockup sits near the center with the Japanese statement プレイグラウンドを愛するすべての人たちへ underneath. The statement is live text in the DOM; its measured line height is 36.4px on desktop and 21px on mobile.

On desktop, the lockup occupies roughly 46% of the viewport width. Its visible artwork extends approximately from x 385 to x 1052, with the character beginning around y 306. On mobile it expands to about 88% of the viewport width, leaving roughly 23px on either side. The surrounding white space remains substantial above and below.

There is no primary purchase or participation button in this captured opening. The secondary elements are the menu, the scroll instruction, and the partial arc near the lower right. Keep the full identity grouping intact rather than separating the character, rules, and lettering into unrelated decorative elements.

Persistent Viewport Chrome

Role: keep navigation and identity available without building a conventional desktop navigation bar.

The desktop menu sits halfway down the left edge. Its two strokes are contained in a roughly 53px square target. In the supplied interior and footer captures, the compact wordmark sits near the upper-right corner, approximately 53px from the right and 42px from the top.

The mobile treatment changes substantially: the menu moves to the upper left, the compact wordmark remains at the upper right, and the header has a measured white background and height of 76.47px. The controls retain their positions in the mobile opening and footer captures.

The compact desktop wordmark is absent from the supplied opening screenshot even though its DOM box is reported. It is visible in later captures. This establishes different painted states, but not the exact visibility threshold or transition logic. Persistent positioning is visually supported; the source position declaration was not supplied.

Navigation Content — DOM Evidence Only

The DOM contains four main section links: TOP, PROJECT, EVENT, and PRODUCTS, followed by 運営会社, プライバシーポリシー, and a hashtag.

On desktop, the main links measure 62px / 86.8px in Oswald, with their column starting at approximately x 858.77. A separate home-linked artwork box appears to their left. On mobile, the link column begins around x 58.64, measures 272.73px wide, and uses 36px / 50.4px Oswald.

These elements are not visible in the attached closed-menu captures. Their recorded layout suggests a large navigation panel, but its open appearance, backdrop, entrance direction, close behavior, focus management, and scroll locking were not exercised. Do not present an invented open-menu screenshot as an observed state.

Scroll Instruction and Corner Arc

The desktop SCROLL DOWN text is vertically oriented near the right edge and centered around the viewport's midline. On mobile it moves to the lower-left area, with bounds near x 18.83, y 735.41.

It is a paragraph in the supplied DOM, so its presence alone does not establish a clickable scroll control.

The lower-right partial arc appears in several orientations across the captures. The mobile footer also shows a small upward arrow within that area. A corresponding small anchor has a measured opacity 0.6s transition.

The arc may be related to motion or page state, but its exact meaning is unverified. Do not assert that it is a loading spinner, percentage indicator, or scroll-progress ring. A return-to-top affordance is visually suggested by the upward arrow; its activation was not tested.

Project Introduction

Role: explain the relationship between basketball, cleanup, and community stewardship.

Desktop separates the bilingual section heading from a substantial right-hand text column. That column contains the two-line lead ゴミ拾い×バスケットボール at 50px / 65px, followed by an 18px / 36px paragraph with 0.12em tracking. The copy column is 527.08px wide.

Mobile stacks the section heading, lead, and paragraph within a 333.50px content width. The lead remains assertive at 36px / 46.8px; the paragraph reduces to 13.8px / 27.6px. Preserve the contrast between the compact section introduction and the larger thematic statement.

This is editorial content, not a row of feature cards. Its measured desktop paragraph alone is 612px tall, making generous line spacing part of the section's character.

Campaign and Organizer Blocks

The project section includes image-linked campaign material, explanatory copy, a renovation-project treatment, and an area-organizer passage.

The two sampled large campaign anchors are approximately 1012 × 590px on desktop and 333.50 × 196.88px on mobile. These are rendered link boxes, not verified native image dimensions. Their destinations distinguish the crowdfunding project and a related summer-camp site.

The renovation treatment contains a three-line condensed English title, white Japanese text, and a white rectangular ご支援者はこちら action. The action measures 346 × 69px on desktop and 342.91 × 50.86px on mobile. Its surrounding image or background composition is not visible in the supplied screenshots, so only the measured text and button treatment can be stated confidently.

The organizer block uses a 36px desktop heading and 18px / 39.6px copy; mobile uses 22px and 16px / 35.2px. It ends with an inline お問い合わせ link. These links were extracted, not followed; the evidence does not verify whether campaigns or contact workflows are currently accepting submissions.

Documentary Photo Interlude

Role: show the project's practical activity through a large, immediate image.

The supplied desktop interior capture shows a gloved hand using litter tongs beside a paper cup and a can on a basketball court. A player's shoes and lower legs occupy the right side; background people are out of focus. The low camera angle gives the cleanup action the same physical presence normally given to athletic movement.

The visible photograph starts at approximately x 148, y 189, reaches the right edge of the viewport, and extends to about y 864. Its visible rectangle is roughly 1292 × 675px. This is a screenshot estimate, not a recovered image element size or native aspect ratio.

There is no visible caption, overlaid headline, border, or rounded frame. White margins above and below allow the photograph to function as a large visual pause. Its exact section association and offscreen image extent are not established by the supplied evidence.

Event Index

Role: present event announcements as linked visual material.

Nine square Instagram-linked anchors are present in the supplied DOM. Desktop arranges them as a three-by-three grid of 337.33px squares. Horizontal spacing is approximately 33.20px; vertical spacing is 32px.

Mobile retains almost the same tile size, 333.50px, but stacks all nine in one column with 28.25px gaps. This is a decisive responsive change: the tile remains readable while the layout becomes much taller.

A centered black もっと見る button follows the grid after a 52px gap. It measures 337.33 × 59.80px on desktop and 249.59 × 57px on mobile. Its text is white, bold Japanese sans, and its corners are square.

The event artwork itself is not shown in the attached original-page screenshots. The button's presence and dimensions are verified, but its expansion or fetching behavior was not exercised.

Collection Brand Modules

Role: explain the participating brands and connect selected collections to their own shops.

The DOM identifies five consecutive modules: AKTR, ALLDAY, ballaholic, SOMECITY, and TACHIKARA. Each has a brand heading and descriptive text. The recorded state also contains fraction-style gallery indicators: 3 / 10 in the desktop snapshot and 4 / 10 in the mobile snapshot.

Text anatomy is compact and consistent:

  1. A brand heading in 20px / 24px Oswald, weight 700.
  2. A short Japanese description in 12px / 22.8px, weight 700.
  3. Where present, a black BUY NOW link with white 20px Oswald text.

Desktop text columns measure 358.41px; mobile text columns measure 333.50px. Purchase actions are left aligned on desktop at approximately 231.91 × 52.70px, then centered on mobile at approximately 207.23 × 47.09px.

A purchase link is present for four brands; the supplied ALLDAY module has none. Preserve that content distinction instead of automatically rendering an action in every module.

The counters support the presence of gallery state, but do not establish autoplay, swipe support, synchronization, transition direction, or image cropping. No collection-gallery screenshot or image-element measurements were supplied.

Cleanup-Kit Explanation

This section explains the branded gloves, tongs, and bags used in cleanup activities. Its desktop copy occupies the same right-side 527.08px column as the project introduction. The heading is 34px / 37.4px; its paragraph is 14px / 28px.

Mobile uses the common 333.50px content column and reduces the heading to 20px / 22px, while keeping the paragraph at 14px / 28px. The evidence establishes this copy structure, not the detailed composition of any adjacent imagery.

Support Message

Role: provide a longer personal statement after the collection and project material.

The section headed 応援メッセージ uses a narrower desktop reading column, 840.17px wide at x 321. Its heading is 24px / 33.6px with 0.12em tracking, followed by bold 16px / 35.2px text and the signature 井上 雄彦.

Mobile uses the standard content width, a 20px heading, and 14px / 30.8px body copy. Preserve paragraph breaks and the separate signature. The supplied text identifies the author of this statement; it does not establish a website design or development credit.

Role: conclude with community participation, organizer identity, cooperation marks, and legal navigation.

Desktop uses two broad columns. The left centers the large #pickupplayground hashtag above an Instagram icon and account label. The right stacks:

  1. Organized by and 一般社団法人ピックアッププレイグラウンド.
  2. The 協力 label and a group of partner marks.
  3. The textual I.T.PLANNING,INC. cooperation link.
  4. Media partner and the newspaper mark.
  5. 会社概要, a vertical separator, and プライバシーポリシー.
  6. The copyright line.

The partner marks retain individual widths and proportions. Desktop places AKTR, ALLDAY, ballaholic, FLY, and SOMECITY in the first row, with TACHIKARA below. Mobile places four marks in the first row, then SOMECITY and TACHIKARA in the second. There are no individual logo cards or enclosing borders.

Mobile stacks the social block above the organizational content, with the social text centered and the remaining content left aligned. The organizer's long Japanese name wraps naturally. The legal links and copyright sit well below the media-partner block.

The organizer identity is directly supported by the current page. Cooperation and media-partner labels identify project relationships; they are not website-production credits. No website designer or developer is established by the supplied original-page evidence.

Tokens — Motion & Interaction

Measured Transition Declarations
Target Computed declaration What it establishes
Additional full-viewport white section opacity 1.2s 0.05s An opacity transition exists; this is consistent with a startup layer, but its contents and trigger are unverified
Hero statement opacity 0.8s 2s A delayed opacity transition; the initiating state change is not recorded
Section headings and selected text blocks transform 0.4s ease-in-out, opacity 0.4s ease-in-out Transform and opacity are animated when their values change; travel distance and direction are absent
Campaign and organizer text opacity 0.4s ease-in-out Fade-capable text treatment
Navigation links color 0.3s Color-transition capability; hover and active endpoint colors were not captured
More button and supporter action background-color 0.3s, color 0.3s Background and text color transitions
Purchase actions background-color 0.3s Background-color transition
Small corner anchor opacity 0.6s Visibility can change through opacity

The sampled elements report animation: none, but the sample does not cover every pseudo-element, SVG, or script-driven effect. Entries that merely report transition: all without a meaningful duration do not prove visible animation.

Observed State Differences and Limits
  • The supplied captures were taken after browser readiness and stability checks; they show settled states rather than a recorded animation sequence.
  • Corner-arc orientation differs across captures. Its timing, direction, and relationship to scrolling remain unknown.
  • Gallery counters differ between desktop and mobile snapshots. This establishes different sampled states, not a verified autoplay mechanism or responsive rule.
  • Section links, image destinations, and purchase destinations are present in the DOM. Link activation, open-menu behavior, and the more-button result were not tested.
  • The capture procedure traversed the page, but no site-specific scroll snapping, parallax, or scroll-jacking behavior is established.

For an adaptation, short fades and restrained movement suit the design. Keep essential content visible without JavaScript and avoid adding continuous motion merely because the arc resembles a spinner.

Surfaces

Layer Appearance Purpose
Main canvas White, largely uninterrupted Gives the identity and content room to stand apart
Desktop chrome Sparse black marks over the page Keeps navigation present without a full-width navigation bar
Mobile header Solid white strip Separates top controls from scrolling content
Editorial content Black text directly on the canvas Creates hierarchy through size, weight, tracking, and spacing
Event and campaign links Square or rectangular image areas Allows the linked visual material to carry attention
Standard action Black rectangle with white text Clear, compact interaction emphasis
Renovation supporter action White rectangle with black text Reverses the action treatment within its surrounding composition
Footer Same white canvas with text and logos Ends the page without a separate dark panel

No visible gradient, glass blur, rounded-card system, or soft-shadow hierarchy is needed to explain the inspected design.

Imagery

The design uses two complementary forms of imagery: highly controlled identity artwork and direct documentary photography.

The wordmark is compact but expressive. Black lettering and tapered rules do most of the work; the small red-haired figure adds personality without turning the entire page into an illustration. The red detail should remain local to the artwork.

The visible photograph is tactile and specific: fabric gloves, metal tongs, a textured court, disposable litter, shoes, and sunlight. Its shallow focus and low viewpoint make the action understandable immediately. For a new project with a similar visual approach, prioritize concrete activity and human presence over generic environmental stock photography.

Partner logos remain distinct artworks with their own proportions. Do not normalize them into identical square crops or redraw them in one common typeface.

Observed Asset References

No image-source URLs, filenames, native dimensions, or asset formats were included in the supplied evidence. The following identifies visible or DOM-supported assets without inventing paths.

Asset Evidence Reuse implication
Main illustrated wordmark Desktop and mobile opening captures Preserve the complete lockup and intrinsic proportions
Compact corner wordmark Desktop interior/footer and mobile captures Use the compact treatment separately from the illustrated hero lockup
Court-cleanup photograph Desktop interior capture Preserve natural color and the relationship between hand, tongs, litter, and shoes
Campaign artwork links Measured DOM anchor boxes Source files and artwork appearance require separate confirmation
Event thumbnails Nine square DOM links to Instagram posts Tile geometry is verified; individual artwork content is not visually documented
Collection gallery assets Fraction indicators and brand modules in DOM Gallery imagery, controls, and native ratios remain unverified
Cooperation marks Footer captures and linked DOM boxes Preserve varying logo widths and the observed wrapping order
Media-partner mark Footer captures and linked DOM box Preserve its black/gray artwork treatment

CSS can reproduce the page's framing and hierarchy. The identity itself requires the appropriate artwork; use project-specific original artwork when adapting the style to another organization.

Layout & Responsive Behavior

The Document Is a Long Scroll

The measured desktop document is approximately 16,534.72px tall; mobile is approximately 16,219.75px. These are sampled content-state measurements, not heights to hardcode.

Section Desktop top / height Mobile top / height
Opening 0 / 1000px 0 / 844px
Project 1000 / 5254.67px 844 / 3854.14px
Event 6254.67 / 2471.81px 4698.14 / 3814.70px
Products 8726.48 / 5778.72px 8512.84 / 5759.17px
Support message 14505.20 / 1102.83px 14272.02 / 1178.34px
Footer 15608.03 / 926.69px 15450.36 / 769.39px

The mobile event section grows because its grid becomes a list, while some large desktop compositions shrink. A similar total page height does not mean the mobile layout is a uniformly scaled desktop page.

Desktop Composition
  • Keep the opening full height with a centered identity group and peripheral controls.
  • Reserve space for the menu at the left edge.
  • Use different frames for editorial columns, campaign images, and event tiles.
  • Maintain the project's left-heading/right-copy relationship.
  • Let the documentary photograph extend farther toward the viewport edge than ordinary text.
  • Keep the footer social block beside the organization and partner information.
Mobile Composition
  • Use a white top header, approximately 76px high at the observed size.
  • Move the menu to the top left and retain the compact wordmark at the top right.
  • Expand the opening artwork to approximately 88% of viewport width.
  • Move SCROLL DOWN to the lower-left edge.
  • Use approximately 28.26px side padding for most text at 390px width.
  • Stack project content and event tiles into one column.
  • Center purchase actions while keeping the brand text left aligned.
  • Stack the footer, preserve logo aspect ratios, and allow the organizer's name to wrap.

Unverified: the original breakpoint, safe-area handling, image focal-point adjustments on mobile, and all intermediate-width rules. The Quick Start uses a recommended 768px breakpoint and endpoint-derived proportions; it is not recovered source CSS.

Do’s and Don’ts

Do
  • Build the page around exact white and black interface colors.
  • Give the illustrated wordmark enough empty space to function as the opening's main event.
  • Keep Japanese editorial copy bold and retain its unusually generous line height.
  • Use Oswald for the verified condensed English roles and Lato for the scroll instruction.
  • Preserve the artwork's serif lettering rather than approximating it with ordinary heading text.
  • Keep square image tiles and rectangular actions.
  • Preserve the desktop offsets between text, event, campaign, and photo frames.
  • Turn the event grid into one mobile column while retaining large, readable artwork.
  • Keep participation, campaign, and shop actions near their relevant content.
  • Distinguish organizer information, project cooperation, and actual production credits.
Don't
  • Don't replace the long project structure with a generic conversion funnel.
  • Don't place a large colored CTA over the opening artwork.
  • Don't extend the character's red hair into a site-wide accent system.
  • Don't treat the Swiper blue variable or image-anchor default blue as visible brand colors.
  • Don't use rounded white cards, soft shadows, or gray panels to separate every block.
  • Don't make all Japanese text light and compact; weight and breathing room are central to this design.
  • Don't apply one centered maximum-width container to every desktop section.
  • Don't squeeze the mobile event index into tiny two-column thumbnails.
  • Don't crop partner marks to matching squares or infer web-production roles from their presence.
  • Don't claim a specific loading, scroll-progress, hover, or carousel mechanism without interaction evidence.

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

  • Use a real button for the menu, with an accessible name, aria-expanded, and an associated navigation region. Manage focus and Escape behavior if it becomes a modal panel.
  • Give linked artworks useful accessible names. Empty extracted link text does not prove missing alternatives, but those alternatives should be verified.
  • Retain the visually large menu target. Expand the small corner-arrow target to at least 44 × 44px while keeping the arrow itself small.
  • Provide a visible black focus outline with enough offset to remain clear on artwork and buttons.
  • Let anchor destinations account for the mobile header so section headings remain visible after navigation.
  • Keep reveal content visible by default; enable hidden pre-reveal states only after the enhancement script is ready.
  • Respect reduced-motion preferences and provide controls for any automatically advancing gallery.
  • If もっと見る inserts events, announce the result and keep keyboard focus predictable.
  • Consider a 14px minimum for mobile collection descriptions. The measured original uses 12px; increasing it is an accessibility-oriented adaptation, not a faithful measurement.
  • Test the long organizer name and hero statement at narrow widths and increased text size instead of forcing them onto one line.

Agent Prompt Guide

Quick Color Reference
  • Canvas and header: #FFFFFF.
  • Text, controls, and principal artwork: #000000.
  • Standard action: black fill, white label, square corners.
  • Reversed action: white fill, black label.
  • Red: confined to the identity illustration; exact value not supplied.
  • Photography: natural color, without an added universal tint.
  • Separation: white space and alignment, not shadows or panel backgrounds.
Overall Prompt

“Create a long Japanese project website for a community basketball initiative. Use a white canvas, black typography, a large custom illustrated wordmark, and extensive empty space in a full-height opening. Pair bold Japanese gothic text with condensed Oswald English labels and a small Lato scroll instruction. On desktop, place a two-stroke menu at the left midpoint and a compact wordmark at the upper right in interior views. Build offset editorial columns, broad documentary photo sections, a three-column square event grid, compact brand descriptions with rectangular purchase links, and a two-column social and organization footer. On mobile, move the menu into a white top header, expand the hero artwork, stack the content and event tiles, and wrap partner marks naturally. Preserve the separation between observed appearance and any newly designed interaction behavior.”

Example Component Prompts
  1. Opening: “A 1440 × 1000 white opening with a roughly 667px-wide illustrated black wordmark centered in generous space. Place a bold, tracked Japanese statement below it. Keep a two-line menu at the left midpoint and a vertical scroll instruction near the right edge. Use original project artwork rather than substituting a stock serif font.”
  2. Project introduction: “An offset desktop editorial layout with a bilingual section heading on the left and a 527px-wide right column. Set the Japanese thematic heading at 50px with 1.3 line height and 0.12em tracking, followed by bold 18px text at 2 line height. Stack the content within a 333.5px column on a 390px phone.”
  3. Event index: “Nine square image links in three desktop columns, with approximately 33px horizontal and 32px vertical gaps. Use a centered black rectangular more button 52px below the grid. At 390px width, make each tile about 333.5px square and stack them with 28px gaps.”
  4. Documentary image: “A natural-color, low-angle photograph of a gloved hand using litter tongs on an outdoor basketball court. Preserve court texture, equipment, shoes, and shallow background focus. Display it as a large square-cornered image with broad white breathing room and no headline overlay.”
  5. Footer: “A white footer with a large condensed hashtag and Instagram link centered in the left desktop column. Stack organizer information, individually proportioned monochrome partner marks, media-partner artwork, and legal links on the right. On mobile, place the social block above the left-aligned organization information.”

Quick Start

CSS Custom Properties

This is a recommended implementation scaffold, not extracted source code. It combines measured endpoint dimensions with practical CSS rules. The percentage-based frames reproduce the 1440px and 390px anchors approximately; their behavior at other widths needs testing.

Load Oswald and Lato separately if using the observed families. Supply the actual identity, photography, and partner artwork through image elements. No original asset filenames are assumed here.

Use .hero > .hero-inner for the main artwork and statement, .project-intro for the heading/copy split, .event-grid for the event links, and .footer-shell for the two footer columns. The navigation controller, gallery behavior, more-button behavior, and corner-control state require separate implementation.

:root {
  /* Measured interface colors */
  --color-paper: #fff;
  --color-ink: #000;
  --color-on-ink: #fff;

  /* Observed font-family declarations */
  --font-body: '游ゴシック体', YuGothic, 'Yu Gothic Medium',
    '游ゴシック', 'Yu Gothic', 'Noto Sans JP', sans-serif;
  --font-condensed: 'Oswald', sans-serif;
  --font-utility: 'Lato', sans-serif;
  --weight-body: 700;
  --tracking-editorial: 0.12em;

  /* Endpoint-derived frames; these are adaptation formulas */
  --frame-left: 13.1771vw;
  --frame-right: 10.2486vw;
  --event-left: 14.8600vw;
  --column-gap: 3.369vw;
  --mobile-inset: 7.2464vw;

  --text-hero: 26px;
  --text-lead: 50px;
  --text-intro: 18px;
  --text-body: 14px;
  --text-brand: 20px;
  --text-brand-copy: 12px;
  --text-social: 40px;
  --radius-flat: 0;

  /* Measured transition durations */
  --motion-color: 300ms;
  --motion-reveal: 400ms ease-in-out;
  --motion-corner: 600ms;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
}

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

a {
  color: inherit;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Recommended positioning to match the supplied captures */
.site-brand {
  position: fixed;
  z-index: 30;
  top: 42.16px;
  right: 52.71px;
  width: 131.77px;
}

.site-brand img {
  width: 100%;
  height: auto;
}

/* Apply this state only when the opening is current. */
.site-brand[data-hero-state='true'] {
  visibility: hidden;
}

.menu-toggle {
  position: fixed;
  z-index: 40;
  top: 50%;
  left: 3.2943vw;
  width: 52.7px;
  height: 52.7px;
  padding: 0;
  transform: translateY(-50%);
  color: var(--color-ink);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.menu-toggle::before,
.menu-toggle::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}

.menu-toggle::before {
  top: calc(50% - 5px);
}

.menu-toggle::after {
  top: calc(50% + 3px);
}

.hero {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  background: var(--color-paper);
}

.hero-inner {
  display: grid;
  justify-items: center;
  gap: 32px;
  width: 100%;
  transform: translateY(14px);
}

.hero-art {
  width: min(46.32vw, 800px);
  height: auto;
}

.hero-statement {
  max-width: 95vw;
  margin: 0;
  font-size: var(--text-hero);
  line-height: 1.4;
  letter-spacing: var(--tracking-editorial);
  text-align: center;
}

.scroll-hint {
  position: absolute;
  top: 50%;
  right: 4.684vw;
  margin: 0;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--font-utility);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.4;
  text-transform: uppercase;
}

.editorial-frame {
  margin-inline: var(--frame-left) var(--frame-right);
}

.campaign-frame {
  width: 70.28%;
  margin-inline: auto;
}

.section {
  padding-block: 85.39px 94.88px;
}

.project-section {
  padding-top: 118.07px;
}

.project-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--column-gap);
}

/* Recommended English heading scale: child size was not supplied. */
.section-heading-en {
  display: block;
  font-family: var(--font-condensed);
  font-size: clamp(44px, 6.11vw, 88px);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
}

.section-heading-ja {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.4;
}

.project-lead {
  margin: 0 0 38px;
  font-size: clamp(36px, 3.4722vw, var(--text-lead));
  line-height: 1.3;
  letter-spacing: var(--tracking-editorial);
}

.project-copy {
  margin: 0;
  font-size: var(--text-intro);
  line-height: 2;
  letter-spacing: var(--tracking-editorial);
}

.editorial-copy {
  font-size: var(--text-body);
  line-height: 2;
}

.campaign-copy {
  font-size: 18px;
  line-height: 2.2;
}

/* Recommended framing; the original image ratio is unknown. */
.photo-interlude {
  margin: 100px 0 100px 10.2486vw;
}

.photo-interlude img {
  width: 100%;
  height: auto;
  border-radius: 0;
}

.event-frame {
  margin-inline: var(--event-left) var(--frame-right);
}

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

.event-tile {
  display: block;
  aspect-ratio: 1;
}

.event-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-flat);
}

.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52.7px;
  padding: 12px 24px;
  color: var(--color-on-ink);
  background: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-flat);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--motion-color),
    color var(--motion-color);
}

/* Recommended hover endpoint; original endpoint was not captured. */
@media (hover: hover) {
  .action:hover {
    color: var(--color-ink);
    background: var(--color-paper);
  }
}

.more-action {
  display: flex;
  width: min(337.33px, 100%);
  min-height: 59.8px;
  margin: 52px auto 0;
  font-size: 17px;
  line-height: 1.4;
}

.brand-copy {
  max-width: 358.41px;
}

.brand-name {
  margin: 0 0 5.27px;
  font-family: var(--font-condensed);
  font-size: var(--text-brand);
  font-weight: 700;
  line-height: 1.2;
}

.brand-description {
  margin: 0;
  font-size: var(--text-brand-copy);
  line-height: 1.9;
}

.buy-action {
  width: 231.91px;
  margin-top: 23.19px;
  font-family: var(--font-condensed);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
}

.support-message {
  width: 58.345vw;
  margin-left: 22.2917vw;
  font-size: 16px;
  line-height: 2.2;
}

.footer-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.928vw;
  padding: 171.83px 10.2486vw 92.77px;
  font-size: 14px;
  line-height: 1.4;
}

.footer-social {
  align-self: center;
  text-align: center;
}

.footer-hashtag {
  margin: 0 0 30px;
  font-family: var(--font-condensed);
  font-size: var(--text-social);
  font-weight: 700;
  line-height: 1.4;
}

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

.partner-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px 25.3px;
}

/* Set --mark-width separately to preserve each logo's proportions. */
.partner-logos img {
  width: var(--mark-width, 80px);
  height: auto;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 100px;
}

/* Recommended static arc; no unverified progress logic is implied. */
.corner-control {
  position: fixed;
  z-index: 30;
  right: 4.1vw;
  bottom: 42px;
  display: grid;
  width: 58px;
  height: 58px;
  padding: 0;
  place-items: center;
  color: var(--color-ink);
  background: transparent;
  border: 0;
  transition: opacity var(--motion-corner);
}

.corner-control::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 7px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  transform: rotate(45deg);
  pointer-events: none;
}

/* Recommended breakpoint; the original breakpoint is unknown. */
@media (max-width: 48rem) {
  :root {
    --text-hero: 15px;
    --text-lead: 36px;
    --text-intro: 13.8px;
    --text-social: 30px;
  }

  .site-header {
    position: fixed;
    z-index: 25;
    inset: 0 0 auto;
    height: 76.47px;
    background: var(--color-paper);
  }

  .site-brand,
  .site-brand[data-hero-state='true'] {
    top: 23.55px;
    right: 5.313vw;
    width: 94.19px;
    visibility: visible;
  }

  .menu-toggle {
    top: 14.59px;
    left: var(--mobile-inset);
    width: 47.09px;
    height: 47.09px;
    transform: none;
  }

  .hero-inner {
    gap: 16px;
    transform: translateY(6px);
  }

  .hero-art {
    width: 88.2vw;
  }

  .scroll-hint {
    top: auto;
    right: auto;
    bottom: 36.2px;
    left: 4.828vw;
    transform: none;
    font-size: 10px;
  }

  .editorial-frame,
  .event-frame,
  .campaign-frame {
    width: auto;
    margin-inline: var(--mobile-inset);
  }

  .section,
  .project-section {
    padding-block: 65.94px 0;
  }

  .project-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 65.94px;
  }

  .section-heading-en {
    font-size: 44px;
  }

  .project-lead {
    margin-bottom: 41px;
    font-size: 36px;
  }

  .campaign-copy {
    font-size: 16px;
  }

  /* Recommended mobile photo treatment; no mobile photo was supplied. */
  .photo-interlude {
    margin: 66px 0;
  }

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

  .more-action {
    width: min(249.59px, 100%);
    min-height: 57px;
    font-size: 15px;
  }

  .brand-copy {
    max-width: none;
  }

  .buy-action {
    display: flex;
    width: min(207.23px, 100%);
    min-height: 47.09px;
    margin: 23.55px auto 0;
  }

  .support-message {
    width: auto;
    margin-inline: var(--mobile-inset);
    font-size: 14px;
  }

  .footer-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding: 56.52px var(--mobile-inset) 28.26px;
  }

  .footer-hashtag {
    margin-bottom: 20px;
  }

  .social-link {
    gap: 8px;
  }

  .partner-logos {
    gap: 28px 16.95px;
  }

  .partner-logos img {
    width: calc(var(--mark-width, 80px) * 0.8937);
  }

  .legal-links {
    margin-top: 84px;
  }

  .corner-control {
    right: 20px;
    bottom: 29px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .action,
  .corner-control,
  .reveal {
    transition: none;
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

The hero offset, arc construction, section-title child scale, image-fit rule, and hover endpoint above are explicit adaptation choices. The code does not establish the original implementation of those details. In particular, do not hardcode sampled document heights, gallery counters, or the duration of a startup screen.

Tailwind v4 Token Mapping

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

@theme inline {
  --color-paper: #fff;
  --color-ink: #000;
  --color-on-ink: #fff;

  --font-editorial: var(--font-body);
  --font-display: var(--font-condensed);
  --font-caption: var(--font-utility);

  --text-hero-copy: var(--text-hero);
  --text-project-lead: var(--text-lead);
  --text-project-copy: var(--text-intro);
  --text-brand-title: var(--text-brand);
  --text-brand-description: var(--text-brand-copy);
  --text-footer-social: var(--text-social);

  --spacing-phone-inset: var(--mobile-inset);
  --spacing-event-gap: 32px;
  --spacing-action-gap: 52px;
  --radius-flat: 0px;
}

Sources & Evidence

  • Inspected original and final website: https://pickupplayground.jp/. The supplied browser record reports HTTP 200 and the same original and final URL.
  • Capture timestamp: October 2, 2026, 09:56:00.462 UTC, equivalent to 18:56:00.462 JST.
  • Desktop evidence: 1440 × 1000 CSS-pixel opening, interior-photo, and footer captures; rendered DOM text, links, computed styles, and element bounds; document height approximately 16,534.72px.
  • Mobile evidence: 390 × 844 CSS-pixel opening and footer captures; rendered DOM text, links, computed styles, and element bounds; document height approximately 16,219.75px.
  • Capture process: the supplied browser notes describe an initial observation of at least five seconds, document-load checks, finite-animation waiting, sampled layout/text stability, and visible-image decoding within bounded waits. Perpetual animations were paused during readiness checks and resumed. SharedWorkers and service workers were disabled.
  • Inspection limits: no independent browsing or command execution was performed for this reference. Menu opening, hover endpoints, event expansion, gallery manipulation, form submission, external destinations, and return-to-top activation were not tested. Exact asset URLs, full stylesheets, font-file loading, original responsive formulas, and motion recordings were not supplied.

This reference describes the current page represented by the supplied evidence. Measurements, visual estimates, and implementation recommendations are labeled separately; older dates appearing within the site's content are not used to reconstruct a historical design.

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

← デザイン一覧に戻る