MANERU

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

札幌国際大学 スポーツのWebサイトプレビュー

DESIGN REFERENCE

札幌国際大学 スポーツ

コーポレートサイト大学スポーツ学科紹介大きなタイポグラフィ写真コラージュ余白円形ナビゲーションカラフルレスポンシブ

細い巨大英字、学生のスポーツ写真を重ねたコラージュ、大きな円形リンクが特徴。白い余白と鮮やかな競技モチーフで、スポーツビジネス学科とスポーツ指導学科を紹介する大学サイト。

オリジナルサイトを見る
ジャンル
教育・保育
元の業種
教育・大学
デザイン分析日
2026/10/2

design.md

ダウンロード

Sapporo International University / Sports — Style Reference

Campus sports photography, oversized hairline lettering, and circular controls that become part of the composition.

Original URL: https://www.siu.ac.jp/sports/ Final URL: https://www.siu.ac.jp/sports/ Page title: “スポーツ :: 札幌国際大学” Theme: white canvas, near-black lettering, and saturated sports graphics; no theme selector was observed. Inspected: October 2, 2026, at 02:53 JST; supplied retrieval timestamp: October 1, 2026, 17:53:30.921 UTC. Viewports: 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels. Scope: the supplied current-page captures and rendered DOM evidence covering the opening composition, Sports Business gateway, Sports Instruction gateway, and university footer mark. Department destination pages and activated media states were not inspected.

This is the sports gateway within Sapporo International University's official website. It directs visitors toward two departments through a sequence of large photographic compositions. Its identity comes from contrasts in scale: small institutional marks, compact English information, enormous thin oblique lettering, and outlined circles almost one third of the desktop viewport wide.

The page behaves visually like a series of overlapping posters. Sports photographs retain square edges and overlap colored graphic fields. Titles cross image boundaries. Navigation arrows extend into surrounding white space. On mobile, the compositions retain their oversized character: photographs overlap, long display words reach beyond the right edge, and circular controls move below the titles.

全文を表示閉じる

Sapporo International University / Sports — Style Reference

Campus sports photography, oversized hairline lettering, and circular controls that become part of the composition.

Original URL: https://www.siu.ac.jp/sports/ Final URL: https://www.siu.ac.jp/sports/ Page title: “スポーツ :: 札幌国際大学” Theme: white canvas, near-black lettering, and saturated sports graphics; no theme selector was observed. Inspected: October 2, 2026, at 02:53 JST; supplied retrieval timestamp: October 1, 2026, 17:53:30.921 UTC. Viewports: 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels. Scope: the supplied current-page captures and rendered DOM evidence covering the opening composition, Sports Business gateway, Sports Instruction gateway, and university footer mark. Department destination pages and activated media states were not inspected.

This is the sports gateway within Sapporo International University's official website. It directs visitors toward two departments through a sequence of large photographic compositions. Its identity comes from contrasts in scale: small institutional marks, compact English information, enormous thin oblique lettering, and outlined circles almost one third of the desktop viewport wide.

The page behaves visually like a series of overlapping posters. Sports photographs retain square edges and overlap colored graphic fields. Titles cross image boundaries. Navigation arrows extend into surrounding white space. On mobile, the compositions retain their oversized character: photographs overlap, long display words reach beyond the right edge, and circular controls move below the titles.

How to Read This Reference

  • Measured values come from supplied computed styles and element rectangles. Coordinates in measurement tables are document coordinates unless stated otherwise.
  • Visual estimates come from the current desktop and mobile captures. These are approximate CSS-pixel measurements, not programmatic pixel samples.
  • Source tokens preserve the supplied custom-property names and exact values. Their presence does not prove that every token is used in every visible composition.
  • Implementation aliases are new names for reuse. They are not claimed to exist in the original code.
  • Recommendations describe a new implementation. The CSS below approximates the observed composition without claiming to recover the original stylesheet.
  • Typography needs special care: computed heading styles belong to wrapper elements. They do not explain the size or weight of the giant visible lettering. The exact display face and rendering method were not supplied.

Tokens — Colors

Default Palette
Name Value Evidence Role / implementation alias
Canvas White #ffffff Visually observed; sampled HTML and body backgrounds are transparent Open page canvas and negative space; --canvas
Text Ink #191919 Measured body and heading color: rgb(25, 25, 25) Main text inheritance; --ink
Outline Black Approximately #000000 Visual estimate for the circles and their symbols Fine graphic outlines; --outline
Swimming Aqua #86e7ff Exact source --bg--swimming Bright cyan graphic field; --aqua
Handball Orange #d47445 Exact source --bg--handball Warm orange field visible behind the Business montage; --orange
Track Terracotta #b04d3a Exact source --bg--track Rust-colored field in the Instruction composition; --terracotta
Hockey Ice #eaf7fe Exact source --bg--hockey Very pale blue graphic field; --ice
Baseball Brown #4d2c1b Exact source --bg--baseball Dark brown sports graphic visible in the mobile Instruction capture; --brown
Soccer Green #13c14c Exact source --bg--soccer Green accent field visible at the beginning of the next mobile composition; --green

The colors belong primarily to large background graphics. White remains the dominant surface, while photographs supply much of the visual density. There is no visible system of colored cards or filled rectangular action buttons.

Sports Graphic Palette

The following pairs are declared in both viewport snapshots. The sport names are source identifiers, not verified controls or selectable themes.

Source context Background token and value Foreground token and value
Soccer --bg--soccer: #13c14c --color--soccer: #2a3c90
Swimming --bg--swimming: #86e7ff --color--swimming: #f6683e
Baseball --bg--baseball: #4d2c1b --color--baseball: #3fa0c8
Handball --bg--handball: #d47445 --color--handball: #000000
Track --bg--track: #b04d3a --color--track: #2a3c90
Hockey --bg--hockey: #eaf7fe --color--hockey: #000000

Matching --rgba variants are declared at 0.35 alpha. Their exact application is not established by the supplied element sample; do not apply a 35% opacity wash to every photograph.

The Instruction capture also contains a vivid red circular/diagonal motif and a strong blue diagonal. Approximate reconstruction colors are #ff0000 and #3035d0. These are visual estimates, not measured source declarations. The visibly bright blue should not automatically be equated with the darker source value #2a3c90.

The anchors report a computed link color of rgb(0, 0, 238), but their visible symbols are black. That inherited link value is not evidence for a blue action-button treatment.

Tokens — Typography

Giant Oblique Display Lettering

The defining lettering is extremely thin, slightly slanted, and generous in width. Near-circular bowls and long crossbars give it a geometric character. Tight vertical stacking allows strokes and descenders to approach adjacent lines.

The opening display reads across four visual lines:

  • Sports
  • Business
  • Sports
  • Instruction

The semantic H1 text includes “Sports Business and Sports Instruction.” The visible composition does not present “and” as a comparable large line.

Department names use two large lines. Their scale makes them part of the artwork, crossing backgrounds and approaching the circular navigation mark. On mobile, Instruction extends beyond the visible right edge.

Font identity: unverified. The supplied evidence does not include font files, display-child styles, or sufficient asset markup to determine whether the visible letterforms are live type, outlined graphics, or another rendering treatment. Do not assign a named display font based on appearance alone.

Compact English Identity

“Sapporo International University” appears as a dense, bold, three-line English wordmark. It contrasts sharply with the display lettering through weight and compactness. Small English information beneath it acts visually like a printed caption.

The opening identity is larger than the repeated identity beside department titles. These are visual observations; their exact font family and child-level font sizes are unavailable.

Japanese Department Labels

The labels “スポーツビジネス学科” and “スポーツ指導学科” sit beneath the corresponding English display title. They are plain, dark, and unboxed. Their role is direct identification, with far less visual emphasis than the English artwork.

Measured Wrapper Typography

The computed body stack begins with SystemSerif, followed by Hiragino Kaku Gothic ProN, Hiragino Sans, Japanese family aliases, Meiryo, Osaka, MS UI Gothic, MS PGothic, and sans-serif. SystemSerif is an observed family identifier; its underlying face was not established.

Element Desktop size / line height Mobile size / line height Weight Interpretation
Body 21.3333 / 32px 8.125 / 12.1875px 400 Inherited text scale
H1 wrapper 37.7933 / 37.7933px 14.3939 / 14.3939px 600 Container style, not the giant visible lettering
H2 wrappers 34.3575 / 34.3575px 13.0854 / 13.0854px 600 Department heading containers
Header H3 wrapper 31.2341 / 31.2341px 11.8958 / 11.8958px 600 University-logo container

All sampled rows report normal letter spacing. The HTML element remains 16px at both widths, so the tiny mobile body value is not evidence of a tiny root rem system.

Visible Scale Estimates
Visible role Desktop estimate Mobile estimate Reproduction guidance
Opening display glyph height Roughly 100–115px per line Roughly 48–55px Measure the artwork or chosen face, not just its CSS font size
Department display glyph height Roughly 105–120px Roughly 40–48px Preserve thin strokes and wide words
Opening English wordmark Approximately 32–38px type Approximately 16–19px type Heavy, compact, three lines
Department English wordmark Approximately 25–29px type Approximately 10–12px type Small left-side identity block
Japanese department label Approximately 20–22px type Approximately 8–10px type Increase essential labels in an accessible adaptation

These estimates are not declarations recovered from the source. A generic sans-serif with font-weight: 100 will only approximate the display, and many fallback fonts do not provide a true thin face.

Tokens — Spacing & Shapes

Density: highly sparse page structure with locally dense overlaps. Primary shapes: unrounded photographic rectangles, enormous outlined circles, straight arrows, diagonal stripes, and cropped sports graphics. Spacing model: viewport-sensitive composition with separate desktop and mobile arrangements. The evidence does not expose an exact source formula or breakpoint.

Measured Layout Anchors
Measurement Desktop: 1440 × 1000 Mobile: 390 × 844
Document height 4086.97px 2806.48px
Main title left edge 24px 11.38px
Department header container x: 56px, width 1328px x: 15.44px, width 359.13px
University-logo link width 208px 102.09px
Opening header padding 80px 0 102.917px 0 35.2083px
H1 top / total box height 205.33px / 592px 162.5px / 289.73px
Opening circular control 481.33 × 481.33px 195.53 × 195.53px
Opening control position x: 902.67px, y: 508px x: 95.20px, y: 468.48px
Department circular controls 481.33px diameter 195.53px diameter

The logo link is inline. Its measured line-box height is not a reliable measurement of the visible logo artwork; width is the more useful supplied dimension.

Section Rhythm
Document landmark Desktop Y Mobile Y
Sports Business section starts 1170.66px 859.02px
Sports Business heading starts 2002.66px 1346.52px
Sports Business circle starts 1972px 1465.69px
Sports Instruction section starts 2621.31px 1856.22px
Sports Instruction heading starts 3341.31px 2294.97px
Sports Instruction circle starts 3310.66px 2414.14px
Footer logo paragraph starts 3873.30px 2674.67px

On desktop, each department circle starts about 30.66px above its heading wrapper and extends below the section's measured box. On mobile, the circle starts about 119.17px below the heading wrapper's top and is included within that wrapper's height.

This difference is central to the responsive composition. A simple uniform scale would not reproduce it.

The measured mobile gaps are also useful: the opening circle ends about 195px before the Business section begins, and Business ends 195px before Instruction begins. The final department circle ends 65px before the footer logo paragraph starts. These are distances between DOM boxes; decorative layers can extend into them.

Borders and Shapes
Element Value / treatment Evidence
Large action circles border-radius: 50% Measured
Circle and symbol strokes About 2px desktop, about 1px mobile Visual estimate
Circle interior Transparent Measured anchor background
Photographs Square corners, no visible frame Visual observation
Colored graphic fields Hard edges and deliberate clipping Visual observation
General card radius No visible rounded-card system Visual observation
Elevation No visible card shadows Visual observation

Components

University Identity Header

Role: connects the experimental sports presentation to the university.

A small official university logo sits at the upper left and links to https://www.siu.ac.jp/. Its visible artwork contains the Japanese institution name and a red/blue emblem. The opening media field occupies the right side of the page at the same time, so this is a layered composition rather than a separate full-width navigation bar.

The supplied link inventory contains no conventional multi-item navigation menu. Do not invent a menu, admissions button, or utility bar when reproducing this inspected page.

On mobile, the logo begins around 103px down the document while media is already visible at the top. Preserve that staggered entrance into the page.

Opening Media Composition

Role: establishes the university's sports environment through actual activity and facilities.

The desktop capture shows a large gym scene, with part of another scene visible above it. The mobile capture shows stacked sports-field and gym scenes. The largest fully visible scene tiles are approximately 16:9.

Estimated visible geometry:

  • Desktop media field: approximately x: 424px, width 960px, right margin 56px.
  • Mobile media field: approximately x: 79px, width 296px, right margin 15px.
  • A desktop gym tile is approximately 960 × 540px; a mobile scene tile is approximately 296 × 166px.

Images meet without ornamental borders. Titles overlap their left edge, making the media and typography read as one composition.

The evidence does not establish whether scene changes come from video, an image sequence, responsive selection, or capture timing. A static stack is an acceptable reference implementation until media behavior is separately verified.

Opening Title and English Identity

Role: names the two academic routes and supplies a strong first-page identity.

The title assembly combines a compact English university wordmark, a tiny information block, and four enormous display lines. Its H1 wrapper is much larger than the wrapper's inherited font size would suggest.

On desktop, the thin lettering starts in the left rail and crosses into the media field. On mobile, the word Instruction continues beyond the right edge of the capture. Keep the measured layout and visible glyph treatment separate when implementing this component.

For an accessible adaptation, retain a complete semantic heading even when decorative title artwork is clipped.

Opening Play Affordance

Role: visibly suggests a media action.

A thin circle encloses a large outlined right-pointing triangle. Both are black, with no solid fill. The desktop control overlaps the lower edge of the gym photograph and occupies a large white region beneath it. On mobile it sits below the display title, nearly centered.

The measured anchor uses href="javascript:void(0);". That confirms a scripted affordance, but does not reveal its outcome. A modal player, inline playback, audio state, close control, and keyboard behavior were not captured.

For a new implementation, use a button for an in-page media action and supply an accessible name. Do not copy the JavaScript URL as an implementation pattern.

Sports Business Gateway

Role: links to the Sports Business department.

The composition uses three overlapping photographs: an athlete in a numbered bib, a person holding a microphone on a field, and a seated person at a table. Their lower edges form a descending staircase from left to right in the supplied desktop capture.

The pictures are approximately 480px wide on desktop. Neighboring lower edges differ by roughly 80px, and adjacent image columns overlap horizontally. An orange field sits behind the photography; a cyan band with broad white diagonals extends behind the title region.

Below and across the collage:

  1. A small English university identity occupies the far-left edge.
  2. The two-line Sports Business display begins farther to the right.
  3. “スポーツビジネス学科” appears beneath the display.
  4. A giant circular arrow occupies the right side and extends below the title area.

The confirmed destination is Sports Business. Only the circular anchor's bounds are established; the evidence does not prove that the entire montage is clickable.

Sports Instruction Gateway

Role: links to the Sports Instruction department.

The photographs show baseball practice, stretching on red turf, and running beside a sports field. Desktop image bottoms step downward from left to right. The title overlaps a pale blue field containing a very large red motif and a blue diagonal.

The mobile capture preserves a collage rather than turning the photographs into a single-column list. A baseball photograph occupies the left, while a partial stretching photograph and a runner occupy the right. The runner's visible panel is approximately 195 × 260px, supporting a 3:4 crop for that panel.

The mobile graphic field includes brown and white forms as well as pale blue and a blue diagonal. The supplied stills do not establish whether these differences are viewport-specific, time-dependent, or both.

The confirmed destination is Sports Instruction. Its English title, Japanese label “スポーツ指導学科,” and circular arrow follow the same hierarchy as Business.

Role: provides a large, unmistakable destination control while continuing the visual linework.

The outer circle is about 481px across on desktop and 196px across on mobile. A horizontal shaft crosses much of its interior, ending in a wide, open arrowhead. The arrow is composed of thin straight strokes with no filled head.

On desktop, the circle begins slightly above the department title and overlaps the photography/background region. On mobile, it moves below the title and is centered at approximately x: 195px.

A practical SVG approximation uses a 100 × 100 viewBox, a shaft from (14, 50) to (88, 50), and an arrowhead from (35, 26) through (88, 50) to (35, 74). These coordinates are a recommended reconstruction, not source path data.

Role: closes the sports sequence with a route back to the university homepage.

The official logo repeats at the lower left, surrounded by extensive white space. The supplied evidence contains a second link to the university homepage and no detailed multi-column footer.

Its desktop width matches the opening logo link at 208px; mobile width is approximately 102px. Avoid adding dense navigation or social widgets to a faithful reference of this particular page.

Tokens — Motion & Interaction

Treatment Supplied evidence What can be concluded
University-home links color 0.15s cubic-bezier(0.25, 0.1, 0.25, 1) A 150ms color transition is declared; target colors were not captured
Opening media control background 0.15s, transform 0.15s Background and transform transitions are declared; activation and hover outcomes are unverified
Department links Computed transition reported as 0.15s A 150ms transition exists; changed properties and end states were not supplied
Sampled element animation animation: none No animation is declared on those sampled elements; descendants, media, and pseudo-elements remain outside this conclusion
Sports scenes and graphic arrangements Different visible content across supplied captures Insufficient to establish playback mechanism, sequence, or speed
Page movement Intermediate scroll traversal was performed The evidence supports a vertically browsed page; it does not establish a specific scroll-triggered effect

The exported custom properties include many spring, bounce, elastic, and step easing presets. Their availability does not prove that these effects are applied to the inspected components. Do not assign bounce behavior to the circles simply because a bounce variable exists.

The capture process allowed an initial observation of at least five seconds. Perpetual animations were paused during readiness checks and resumed afterward. Static captures therefore cannot supply reliable durations for any continuing visual sequence.

Recommended behavior: retain short feedback transitions, provide a static presentation when reduced motion is requested, and require an explicit action before audible media. Those are implementation additions, not verified original behavior.

Surfaces

Layer Appearance Function
Page canvas White, largely uninterrupted Creates breathing room between large compositions
Sports graphic field Flat aqua, orange, terracotta, ice blue, green, or brown Adds sport-related color and geometric rhythm
Pattern layer Broad diagonals, oversized arcs, cropped graphic forms Connects separate photographs into a single poster-like composition
Photography Full-color, hard-edged rectangles Supplies the people, activity, equipment, and campus setting
Display layer Oversized near-black hairline lettering Names the academic routes and crosses visual boundaries
Action layer Transparent circles with black linework Makes navigation or media access prominent without a solid button fill
Institutional identity Small official logo or compact English wordmark Grounds the expressive layout in the university identity

These layers overlap visibly. Keep their stacking intentional: graphics behind photographs, titles over selected image edges, and action controls clear enough to remain identifiable.

Imagery

Use documentary campus sports imagery: students training, equipment in use, fields, running tracks, instruction, and conversations. The supplied photographs include both wide facilities views and close human activity. Their natural greens, brick-red turf, gym equipment, and clothing sit against much flatter graphic colors.

Preserve straight rectangular crops. The visual identity depends on different images meeting at staggered positions, rather than every image sitting inside an identical framed card. For portrait montage panels, a 3:4 crop is a useful starting point; only the clearly visible mobile runner panel supports that ratio directly.

Keep important faces and athletic actions inside responsive crops. A desktop crop may show a whole scene while a mobile panel reveals a narrower part of it. Set object-position per image when necessary instead of applying the same center crop indiscriminately.

Observed Asset References

No original image, video, logo, font, or SVG asset URLs were included in the supplied evidence. The following are visual references, not invented filenames.

Asset group Observed content Intended use
Official university mark Japanese name with red/blue emblem Opening and footer homepage links
English identity Bold three-line university name with very small supporting information Opening and department identity blocks
Opening scenes Sports fields, training facilities, and gym activity Right-side opening media stack
Business photographs Numbered training bib, microphone on a field, seated conversation Business department collage
Instruction photographs Baseball, stretching, and running Instruction department collage
Graphic motifs White diagonal gaps, pale blue field, red arc/diagonal, blue slash, brown/white forms Large background artwork
Action symbols Outlined triangle and open arrow Media affordance and department navigation

Use authorized original assets when available. Authentic logo and title artwork will reproduce the identity more accurately than substitute lettering. The CSS shell alone cannot recreate those assets.

Layout & Responsive Behavior

Desktop

At 1440px, the opening scene field occupies roughly the right two thirds of the page. The identity begins near the left edge, while the oversized title crosses the boundary between the white rail and imagery. A large play circle aligns with the media field's right edge.

Each department then occupies a wide, staggered montage. Photographs span nearly the full viewport, with inset outer edges and overlapping interior columns. Department titles begin inside the composition rather than lining up with a standard centered content container. The circular links occupy the far right.

Measured Business and Instruction section heights are 1077.33px and 965.33px. Their circles extend beyond those section rectangles, so those heights should not be treated as the complete visual footprint.

Mobile

The 390px captures show several deliberate changes:

  • The opening media starts much closer to the left edge and occupies about 76% of the viewport width.
  • The institutional logo and English identity overlap the media region more strongly.
  • The opening title remains oversized and visibly crops at the right edge.
  • Circular controls become approximately half the viewport width and move below the titles.
  • The Instruction montage uses overlapping half-width photographs, including two vertically arranged image regions on the right.
  • Small identity marks and Japanese labels remain substantially smaller than the display lettering.
  • Large white intervals remain between sections and before the footer.

Business has measured mobile DOM geometry, but the supplied mobile screenshots do not expose its complete photographic montage. Do not infer its exact mobile image arrangement from the Instruction capture alone.

Scaling Limits

The body type scale changes by a factor of about 0.381 between the supplied widths, the control diameter by about 0.406, and the logo width by about 0.491. The viewport-width ratio itself is about 0.271. These differences rule out a single proportional reduction of the entire desktop page.

Only two viewport widths were inspected. Breakpoints, tablet behavior, landscape behavior, and maximum desktop scaling were not supplied. The breakpoint and fluid rules in Quick Start are recommendations fitted to the known compositions.

The visible right-edge cropping does not establish whether horizontal scrolling is possible. For a new implementation, clip decorative overflow inside the composition while keeping full accessible names and focus indicators available.

Do’s and Don’ts

Do
  • Keep white space as a major part of the composition.
  • Pair exceptionally thin, oversized display lettering with compact, heavy university identity marks.
  • Let titles overlap photographs and sports graphics at selected boundaries.
  • Use authentic sports activity and campus facilities photography.
  • Retain square photographic corners and hard graphic edges.
  • Build circular controls at the observed dramatic scale: about 481px desktop and 196px at the inspected mobile width.
  • Preserve the different desktop and mobile positions of those controls.
  • Use the exact declared sports palette where its application is supported.
  • Keep department names and actual destinations connected through semantic links.
  • Distinguish source measurements from estimates and accessible adaptations.
Don’t
  • Don’t replace the montage with a uniform rounded-card grid.
  • Don’t shrink every desktop element by one global scale factor.
  • Don’t use the H1 wrapper's 37.7933px size as the size of the giant visible title.
  • Don’t identify a display font without font or asset evidence.
  • Don’t turn the circles into small conventional pill buttons.
  • Don’t add shadows, glass effects, or gradients as a general surface system.
  • Don’t treat every exposed color or easing variable as a verified visible behavior.
  • Don’t invent a media modal, autoplay sequence, or scroll effect from still captures.
  • Don’t make the whole photographic montage clickable unless that is an intentional new interaction.
  • Don’t make essential mobile information depend on the original's tiny decorative text scale.

These are recommendations for a new implementation, not claims about existing features:

  • Give each circular link a complete accessible name, such as “Explore Sports Instruction.” Give the media button a name describing its real action.
  • Keep complete department names in semantic H1/H2 text even when decorative artwork extends outside the viewport.
  • Verify actual image alternatives, SVG titles, and ARIA labels. Empty extracted anchor text alone does not prove that the original lacks an accessible name.
  • Use a visible keyboard focus ring that remains clear over photographs and white space.
  • Keep essential labels at a readable mobile size. Treat enlarged labels as an accessibility adaptation, since the original capture shows very small type.
  • Supply captions and playback controls if the opening affordance activates video.
  • Provide reduced-motion and static-media options if ongoing motion is implemented.
  • Reserve image aspect ratios before loading to protect the carefully layered layout from shifts.
  • Define each photograph's crop independently and test it at both captured widths.
  • Preserve document reading order independently of absolute positioning.

Agent Prompt Guide

Quick Color Reference
  • Main canvas: white #ffffff.
  • Main text: measured #191919.
  • Circle and icon linework: visually black; use #000000 as a reconstruction value.
  • Cyan field: source #86e7ff.
  • Warm orange: source #d47445.
  • Terracotta: source #b04d3a.
  • Pale blue: source #eaf7fe.
  • Brown and green accents: source #4d2c1b and #13c14c.
  • Red and bright blue motifs: visual estimates, approximately #ff0000 and #3035d0.
  • Action treatment: transparent outlined circle with thin black geometry.
Overall Prompt

“Create a university sports gateway with a white canvas, overlapping documentary sports photographs, enormous thin oblique English display lettering, and compact bold university identity blocks. Introduce Sports Business and Sports Instruction as two successive photographic compositions. Use square image crops, staggered lower edges, cyan and warm terracotta/orange fields, broad diagonal graphics, and extensive white space. Place very large transparent circular controls with black outline arrows at the right on desktop and below the titles on mobile. Preserve oversized title cropping as a decorative treatment while keeping complete semantic headings. Use supplied authorized title artwork or an explicitly approximate thin display face; do not invent the original font or media behavior.”

Example Component Prompts
  1. Opening composition: “At a 1440px viewport, place a roughly 960px-wide sports-media stack against the right edge with a 56px margin. Add the university identity near the left edge, then overlay four lines of enormous thin oblique lettering across the white rail and imagery. Place an approximately 481px outlined play circle at the lower right. Keep the canvas white and the photographs unrounded.”
  2. Business gateway: “Arrange three overlapping campus photographs with lower edges stepping upward from left to right. Put an orange field behind the photos and a cyan band with broad white diagonals behind the title. Add a compact university wordmark at the far left, a two-line Sports Business title, the label ‘スポーツビジネス学科,’ and a huge circular outline arrow linking to the department.”
  3. Instruction gateway: “Use baseball, stretching, and running photography in a staggered montage. Add a pale blue field with cropped red and blue sports graphics. Overlay a thin two-line Sports Instruction title and the label ‘スポーツ指導学科.’ Keep the arrow circle large and partially overlapping the composition on desktop.”
  4. Mobile adaptation: “At 390px, preserve overlapping half-width portrait images and oversized display lettering. Allow decorative words to crop at the right edge, keep their full accessible text, and move each approximately 196px circular control below its title. Retain generous white intervals and a small university footer mark.”

Quick Start

CSS Custom Properties

This is a recommended reconstruction shell, not recovered source CSS. Its geometry is fitted to the supplied 1440px and 390px views. The 767px breakpoint, fluid interpolation, CSS-built graphic motifs, and readable caption minimums are implementation choices.

Use a conventional 16px root. Supply authorized logo, photograph, and title assets separately. The generic display stack below is an approximation; it does not reproduce the unknown original letterforms.

Expected structure:

  • .sports-page contains .sports-hero, two .department sections, and .site-footer.
  • The hero contains .hero-media, .hero-logo, .hero-brand, .hero-title, and .circle-action.
  • Each department contains .graphic-field, a .collage with three numbered photographs, and .department-info.
  • Department information contains .department-wordmark, .department-title, .department-caption, and its .circle-action.
  • Use .department--business and .department--instruction as section modifiers.
:root {
  /* Exact source colors where available; white and outline are visual aliases. */
  --canvas: #ffffff;
  --ink: #191919;
  --outline: #000000;
  --aqua: #86e7ff;
  --orange: #d47445;
  --terracotta: #b04d3a;
  --ice: #eaf7fe;
  --brown: #4d2c1b;
  --green: #13c14c;

  /* Visual estimates for graphic artwork. */
  --graphic-red: #ff0000;
  --graphic-blue: #3035d0;

  /* Recommended fallbacks, not identified original display fonts. */
  --font-body: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
    Meiryo, sans-serif;
  --font-display: sans-serif;
  --font-identity: sans-serif;

  /* Desktop proportions fitted to the supplied capture. */
  --copy-edge: 1.666667vw;
  --image-edge: 3.888889vw;
  --ring-size: 33.4256vw;
  --display-size: 10.4vw;
  --outline-width: 2px;
  --feedback-duration: 150ms;
}

.sports-page,
.sports-page * {
  box-sizing: border-box;
}

.sports-page {
  position: relative;
  overflow-x: clip;
  background: var(--canvas);
  color: var(--ink);
  font: 400 1rem/1.5 var(--font-body);
}

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

.sports-hero {
  position: relative;
  min-height: 81.3vw;
  isolation: isolate;
}

.hero-media {
  position: absolute;
  top: 0;
  right: var(--image-edge);
  width: 66.667vw;
  height: 44.93vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: clip;
}

.hero-media img {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hero-logo {
  position: absolute;
  z-index: 2;
  top: 5.556vw;
  left: var(--copy-edge);
  width: 14.444vw;
}

.hero-brand {
  position: absolute;
  z-index: 2;
  top: 14.26vw;
  left: var(--copy-edge);
  width: 19vw;
  margin: 0;
  font: 800 2.5vw/.89 var(--font-identity);
}

.hero-title,
.department-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--display-size);
  font-style: italic;
  font-weight: 100;
  line-height: .68;
  font-synthesis: none;
}

.title-line {
  display: block;
  white-space: nowrap;
}

.hero-title {
  position: absolute;
  z-index: 3;
  top: 27.5vw;
  left: var(--copy-edge);
}

.circle-action {
  display: grid;
  place-items: center;
  width: var(--ring-size);
  aspect-ratio: 1;
  padding: 0;
  border: var(--outline-width) solid var(--outline);
  border-radius: 50%;
  background: transparent;
  color: var(--outline);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--feedback-duration),
    transform var(--feedback-duration);
}

.circle-action svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--outline-width);
}

.circle-action path {
  vector-effect: non-scaling-stroke;
}

.sports-hero > .circle-action {
  position: absolute;
  z-index: 4;
  top: 35.278vw;
  right: var(--image-edge);
}

.department {
  position: relative;
  margin-bottom: 11.67vw;
  isolation: isolate;
}

.collage {
  position: relative;
  height: 57.78vw;
}

.collage img {
  position: absolute;
  z-index: 1;
  width: 33.333vw;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.photo-1 { left: var(--image-edge); top: 11.111vw; }
.photo-2 { left: 33.333vw; top: 5.556vw; }
.photo-3 { right: var(--image-edge); top: 0; }

.graphic-field {
  position: absolute;
  z-index: 0;
  top: 46.2vw;
  left: 8.333vw;
  width: 100vw;
  height: 20.5vw;
  overflow: clip;
  background:
    repeating-linear-gradient(
      60deg,
      transparent 0 12vw,
      #fff 12vw 14vw
    ),
    var(--aqua);
}

.department--instruction .collage { height: 50vw; }
.department--instruction .photo-1 { top: 0; }
.department--instruction .photo-3 { top: 11.111vw; }

.department--instruction .graphic-field {
  top: 28vw;
  left: 0;
  height: 22.3vw;
  background:
    linear-gradient(
      135deg,
      transparent 0 84%,
      var(--graphic-blue) 84% 91%,
      transparent 91%
    ),
    var(--ice);
}

/* Approximate decorative arc; replace with authorized artwork if available. */
.department--instruction .graphic-field::before {
  content: '';
  position: absolute;
  top: -19vw;
  left: 2vw;
  width: 55vw;
  aspect-ratio: 1;
  border: 5vw solid var(--graphic-red);
  border-radius: 50%;
}

.department-info {
  position: relative;
  z-index: 2;
  min-height: 31.3vw;
}

.department-title { padding-left: 16vw; }
.department--instruction .department-title { padding-left: 14vw; }

.department-wordmark {
  position: absolute;
  top: 10vw;
  left: var(--copy-edge);
  width: 14vw;
  margin: 0;
  font: 800 1.9vw/.86 var(--font-identity);
}

.department-caption {
  display: block;
  margin-top: 1.2vw;
  font: 400 clamp(14px, 1.48vw, 24px)/1.5 var(--font-body);
}

.department-info > .circle-action {
  position: absolute;
  top: -2.129vw;
  right: var(--image-edge);
}

.department--instruction { margin-bottom: 5.65vw; }

.site-footer {
  padding: 0 var(--copy-edge) 10.65vw;
}

.footer-logo { width: 14.444vw; }

/* Recommended focus treatment; not an observed original state. */
.sports-page :focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 6px;
}

@media (max-width: 767px) {
  .sports-page {
    --copy-edge: 2.9167vw;
    --image-edge: 3.9583vw;
    --ring-size: 50.1362vw;
    --display-size: 18.46vw;
    --outline-width: 1px;
  }

  .sports-hero { min-height: 220.26vw; }
  .hero-media { width: 75.9vw; height: 99vw; }
  .hero-logo { top: 26.389vw; width: 26.18vw; }

  .hero-brand {
    top: 41.667vw;
    width: 34vw;
    font-size: 4.615vw;
  }

  .hero-title { top: 65.13vw; }

  .sports-hero > .circle-action {
    top: 120.124vw;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .department { margin-bottom: 50vw; }
  .collage { height: 125vw; }
  .collage img { width: 50vw; }

  /* Based on the visible Instruction montage; Business is an adaptation. */
  .department .photo-1 { left: 6vw; top: 16.667vw; }
  .department .photo-2 { left: 50vw; top: -20.833vw; }
  .department .photo-3 { left: 50vw; right: auto; top: 45.833vw; }
  .department--instruction .collage { height: 112.5vw; }

  .graphic-field { top: 65vw; height: 45vw; }
  .department--instruction .graphic-field { top: 65vw; height: 47.5vw; }

  .department-info { min-height: 80.693vw; }

  .department .department-title {
    padding-left: 21.5vw;
    font-size: 15.4vw;
  }

  .department-wordmark {
    top: 15vw;
    width: 19.5vw;
    font-size: 2.75vw;
  }

  /* Larger than the observed tiny caption for practical readability. */
  .department-caption {
    margin-top: 2vw;
    font-size: max(12px, 2.5vw);
  }

  .department-info > .circle-action {
    top: 30.56vw;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .department--instruction { margin-bottom: 16.667vw; }
  .site-footer { padding-bottom: 26.4vw; }
  .footer-logo { width: 26.18vw; }
}

@media (prefers-reduced-motion: reduce) {
  .circle-action { transition: none; }
}

The shell contains the desktop circles within a larger information region for predictable document flow. The original measured department boxes allow those controls to extend below them. This is an intentional implementation difference.

For a department link, the following SVG provides usable outline geometry. The accessible label is a recommended addition.

<a
  class="circle-action"
  href="https://www.siu.ac.jp/sports/sports-instruction/"
  aria-label="Explore Sports Instruction"
>
  <svg viewBox="0 0 100 100" aria-hidden="true" focusable="false">
    <path d="M14 50H88M35 26L88 50 35 74" />
  </svg>
</a>

For the opening triangle, use a button connected to a verified media action and replace the arrow path with M29 25L81 50L29 75Z. Media assets, playback, dialog behavior, and motion sequences require separate implementation.

Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This does not identify the original site's framework. Define the CSS properties above first.

@theme inline {
  --color-canvas: var(--canvas);
  --color-ink: var(--ink);
  --color-outline: var(--outline);
  --color-aqua: var(--aqua);
  --color-orange: var(--orange);
  --color-terracotta: var(--terracotta);
  --color-ice: var(--ice);
  --color-brown: var(--brown);
  --color-green: var(--green);

  --font-sports-body: var(--font-body);
  --font-sports-display: var(--font-display);
  --font-sports-identity: var(--font-identity);

  --text-sports-display: var(--display-size);
  --spacing-copy-edge: var(--copy-edge);
  --spacing-image-edge: var(--image-edge);
  --spacing-action-diameter: var(--ring-size);
  --radius-action: 50%;
}

Sources & Evidence

  • Inspected original and final page: https://www.siu.ac.jp/sports/. The supplied browser record reports HTTP 200 and the same original and final URL.
  • Capture time: October 1, 2026, at 17:53:30.921 UTC, equivalent to October 2 at 02:53:30.921 JST.
  • Desktop evidence: 1440 × 1000 viewport; opening composition, Business section, and lower Instruction/footer captures; measured document height approximately 4087px.
  • Mobile evidence: 390 × 844 viewport; opening and lower Instruction/footer captures, plus DOM measurements for both departments; measured document height approximately 2806px.
  • Rendered evidence: document title, link destinations, element rectangles, computed wrapper typography, colors, padding, display modes, circular radii, transition declarations, and exported custom properties.
  • Original-page destinations: university homepage, Sports Business, and Sports Instruction. These links were observed on the page; their destination contents were not inspected for this reference.
  • Interaction scope: initial waiting and scrolling were performed by the supplied capture process. No activated media, hover outcome, keyboard sequence, or destination-page state was supplied.
  • Limitations: original asset URLs, display font identity, child-level title styles, source breakpoints, active animation timelines, and the complete mobile Business montage are unavailable. Readiness checks do not prove that all delayed content or interaction states were exposed.

This reference describes the supplied current page. Exact values are labeled as measured or source-declared; visual estimates and implementation recommendations remain separate.

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

← デザイン一覧に戻る