MANERUBETA
福岡女学院大学 感性メディア学科 特設サイトのWebサイトプレビュー

DESIGN REFERENCE

福岡女学院大学 感性メディア学科 特設サイト

LPブランドサイトキャンペーンサイト大学学科紹介特設サイト縦書き明朝体写真動画リンク余白ブルーレスポンシブ

2028年新設構想中の感性メディア学科を紹介する特設サイト。大きな縦組み文字とキャンパスの映像的なビジュアル、淡いブルーの背景、明朝体、広い余白で学びの内容を伝えます。

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

design.md

ダウンロード

Fukuoka Jo Gakuin University / Kansei Media — Style Reference

A cinematic campus opening followed by a spacious academic prospectus in pale blue, fine Mincho lettering, and restrained teal and rose accents.

Website: Fukuoka Jo Gakuin University — Kansei Media Original URL: https://www.fukujo.ac.jp/university/kansei-media/ Final URL: https://www.fukujo.ac.jp/university/kansei-media/ Response: HTTP 200; original and final URLs are identical. Theme: light editorial content, photographic opening, and a teal career section. No theme switch is evidenced. Inspected: September 12, 2026; supplied retrieval timestamp 2026-09-12T12:42:55.991Z, equivalent to 21:42:55.991 JST. Viewports: desktop 1440 × 1000 and mobile 390 × 844 CSS pixels. Scope: the current department introduction, including the opening, concept text, department information, three learning pillars, nine curriculum entries, career information, university features, and footer. Visual evidence comprises three desktop captures and two mobile captures; additional sections and detail content are documented through supplied DOM and computed-style records.

The page introduces a department currently described as planned for 2028, with the qualification 仮称・設置構想中. Its visual identity rests on two complementary experiences: a full-height photographic opening with large vertical lettering, and a long, quiet reading sequence with carefully differentiated Japanese typefaces.

The opening distributes information across the frame. Announcement copy sits at the upper left, the phrase ひらけ、 occupies the upper right, 感性。 anchors the lower left, and a narrow department identity sits near the center. A small Full Movie preview occupies the lower right. Subsequent content uses pale blue space, fine rules, square photographs, teal academic labels, and restrained rose accents for university features and the official-site link.

How to Read This Reference

  • Measured values come from the supplied element rectangles, computed styles, or CSS custom properties. Coordinates describe the captured state, not universal positioning rules.
  • Estimated values describe visible screenshot geometry where an element measurement was not supplied. They are rounded and explicitly identified.
  • Calculated values are arithmetic derived from measured values or declared formulas.
  • Recommended values and behaviors belong to the reusable implementation guidance. They do not establish how the original was implemented.
  • Source tokens retain their supplied names. Quick Start tokens use descriptive aliases prefixed with --k-.
  • The browser reserved a 15px scrollbar gutter in both inspections: the measured document widths were 1425px and 375px. Do not recreate that gutter as a decorative white strip or subtract it manually from a new layout.
  • No additional browsing, resource inspection, or interaction testing was performed for this reference.

Tokens — Colors

Default Palette

Name Value Source token Role and evidence
Pale Blue Paper #edf4f6 --color-my-background Declared background token; matches the visible curriculum, university features, and footer canvas
Blue-Black Ink #263940 --color-my-black Computed body and content text color; softer than literal black
Academic Teal #1483a3 --color-my-blue Computed curriculum titles and learning keywords; computed career-section background
University Rose #a44858 --color-my-red Computed university feature subtitles and official-site CTA background
Pale Rule #d3e1e5 --color-my-border Declared border token; consistent with the fine visible separators
Secondary Gray #767f82 --color-my-gray Computed explanatory text inside the learning-pillar buttons
White #ffffff --color-my-white Computed pillar-button surfaces and opening text; visible reversed labels

The body itself reports a transparent background. The pale page appearance is supported by the background token and screenshots; the supplied records do not identify every ancestor or decorative layer applying it.

Contextual Color Treatments

Treatment Evidence Reuse guidance
Opening announcement Computed white Preserve legibility against the chosen photographic frame
Small opening qualifier White at 0.8 alpha A secondary annotation; use stronger contrast if required by the image
Opening plan disclaimer White at 0.6 alpha Visually quiet, but still meaningful information
Large opening lettering Navy, gray, and pale areas visible within the current captures Preserve supplied artwork when available; masking, blending, and color-change mechanisms are unverified
CTA label Visibly white on rose The sampled anchor inherits dark ink, so its computed parent color does not describe the visible child label
LINE identity Bright green inside the official badge artwork Treat as a service-brand asset; its exact green was not supplied as a measured token

Use teal for academic structure and rose for institutional emphasis. Photography contributes foliage greens, warm masonry, classroom colors, and skin tones without turning them into interface tokens.

Tokens — Typography

Japanese Display — Ryumin

  • Source: --font-display-ja: a-otf-ryumin-pr6n, serif.
  • Computed use: section statements, subsection headings, the large 感性 keyword, and learning-area detail headings.
  • Weight: typically 500; the body baseline is 400.
  • Character: fine Mincho contrast, generous tracking, and a literary academic tone.

Japanese Reading — Hiragino Mincho

  • Source: --font-display-ja-hiragino-mincho: hiragino-mincho-pron, sans-serif.
  • Computed use: opening announcement, concept prose, explanatory introductions, curriculum titles, and university feature subtitles.
  • Weight: 500 in sampled elements.
  • The supplied fallback is sans-serif. Preserve that fact when documenting the source; a different fallback would be an implementation choice.

Japanese Supporting Text — Shuei Gothic Gin

  • Source: --font-display-ja-shuei-gothic-gin: dnp-shuei-gothic-gin-std, sans-serif.
  • Computed use: curriculum descriptions, university feature descriptions, secondary pillar explanations, and small opening annotations.
  • Weight: 500.
  • The Gothic paragraphs give dense factual content a distinct reading texture beneath the Mincho headings.

Latin Contact Text — Minerva Modern

  • Source: --font-display-en: minerva-modern, sans-serif.
  • Verified computed use: footer email and telephone links.
  • Weight: 500; tracking 0.02em.
  • Other English labels appear in the page, but their leaf-level font measurements were not supplied. Do not assign them a size from the inherited H2 wrapper.

These names are supplied declarations and computed font-family values. Exact font-file delivery and glyph fallback were not independently tested. The Quick Start does not include licensed font files.

Type Scale

Sizes and line heights below are measured CSS values. Tracking is expressed in em for reuse.

Role Desktop size / line height Mobile size / line height Tracking Family
Base body 16 / 24px 16 / 24px Normal Ryumin
Opening announcement 18 / 29.7px 16 / 26.4px 0.08em Hiragino Mincho
Opening qualifier and disclaimer 10 / 14px 10 / 14px 0.06em Shuei Gothic Gin
Opening navigation 13 / 18.2px Not shown 0.08em Hiragino Mincho
Concept prose 18 / 43.2px 15 / 34.5px 0.08em Hiragino Mincho
Major section statement 44 / 66px 36 / 54px 0.15em Ryumin
Section introduction 15 / 31.5px 14 / 29.4px 0.08em Hiragino Mincho
Subsection heading 26 / 42.9px 22 / 39.6px 0.05em Ryumin
Core keyword 感性 52 / 72.8px 40 / 56px 0.24em Ryumin
General explanatory prose 15 / 27.75px 14 / 25.9px 0.08em Hiragino Mincho
Pillar lead and curriculum title 18 / 29.7px 16 / 26.4px 0.08em Hiragino Mincho
Dense supporting description 14 / 23.1px 13 / 21.45px 0.08em Shuei Gothic Gin
Detail-area heading, DOM only 44 / 61.6px 36 / 50.4px 0.05em Ryumin
Footer contact links 14 / 19.6px 11 / 15.4px 0.02em Minerva Modern

The mobile subsection heading changes to a 1.8 line-height ratio, while the desktop equivalent uses 1.65. This helps retain breathing room after the font size decreases.

The opening's giant phrase is not measured by this table. The central H1 wrapper has an inherited 16px font size and no extracted text, while the screenshot shows a designed vertical lockup. That inherited size cannot be used to reconstruct the visible identity artwork or slogan.

Tokens — Spacing & Shapes

Density: broad section spacing, compact factual paragraphs, and large photographic areas. Baseline: the source declares --spacing: .25rem; with the measured 16px root this equals 4px. Component measurements also include values outside a strict four-pixel scale.

Responsive Grid

Declaration Desktop Mobile
--base-width 1440 390
--base-grid-number 12 4
--base-side-margin 80 16
--base-gutter 20 16
--space-side calc(100vw * 80 / 1440) calc(100vw * 16 / 390)
--space-gutter calc(100vw * 20 / 1440) calc(100vw * 16 / 390)

The declared column calculation is:

/* Source formula, expressed with readable aliases */
--column-width: calc(
  (100vw - 2 * var(--side) - (var(--columns) - 1) * var(--gutter))
  / var(--columns)
);

At the nominal viewport widths, this gives 88.33px desktop columns and 77.5px mobile columns. These are formula results, not measured content widths. The actual document rectangles are narrower because of the scrollbar gutter, and individual sections use their own spans and gaps. Use the measured component geometry below when matching the supplied captures.

Layout Measurements

Element Desktop Mobile Status
Document 1425 × 13154.19px 375 × 17400.63px Measured
Opening section 1425 × 1000px 375 × 844px Measured
Main inner content band 1050.83px, starting at x = 187.08 343px, starting at x = 16 Measured across curriculum and university content
Academic label column 301.23px Full content width Measured
Academic content column 729.58px, starting at x = 508.31 Full content width Measured
Curriculum column 323.61px 343px Measured
Curriculum horizontal gap 40px Single column Calculated from measured positions
University feature column Approximately 495.41px 343px Measured
University feature gap 60px Single column Calculated from measured positions
Central opening identity 67 × 315.28px 53 × 249.41px Measured wrapper
Movie preview image 216 × 120px Approximately 171 × 95px Desktop measured; mobile image height calculated from link height minus padding
Official-site CTA 288.75 × 63.75px 273.38 × 57.89px Measured

Spacing Scale

Use Desktop Mobile Evidence
Opening announcement inset 36px left, 32px top 16px left, 26px top Measured
Pillar separation 20px 20px Calculated from button rectangles
Pillar vertical padding 32px on button Internal content begins 32px below top Measured
Pillar horizontal content inset Label 32px; middle column 20px 20px Measured or calculated from child rectangles
Curriculum heading to introduction 24px 24px Calculated
Curriculum title to description 16px 16px Calculated
University title to subtitle 8px 6px Calculated
Final feature description to CTA Approximately 120px 100px Calculated
Department section top padding 200px 200px Computed
University section top padding 171px 120px Computed
Footer padding 160px 80px 20px 120px 16px 80px Computed
Logo block to contact label 60px 60px Calculated
Contact links to footer LINE badge 50px 36px Calculated

Border Radius

Element Geometry Evidence
Pillar buttons 0 Computed
Official-site CTA 0 Computed
Curriculum photographs Square corners Visible
Footer LINE link 6px Computed
Edge LINE link 6px 0 0 0 Computed
University number markers Tall outlined capsules Visible; about 32 × 74px on desktop, estimated
Academic note label Teal pill Visible; exact radius unmeasured
Main dividers Fine solid or dotted rules Visible; approximately 1px

There is no visible general shadow system. Separate content through spacing, typography, flat fills, image edges, and thin rules.

Components

Cinematic Opening

Role: establishes the department's emotional character before detailed information begins.

The opening fills the inspected viewport height. Its background shows warm campus architecture and trees on desktop, and a student using a camera beneath sunlit foliage on mobile. These captures establish photographic content and different compositions. They do not establish whether the background is a video, an image sequence, or separately selected responsive media.

The composition has five distinct anchors:

  1. A two-line announcement at the upper left, followed by the small planning qualifier.
  2. Large vertical ひらけ、 lettering at the upper right.
  3. Large vertical 感性。 lettering at the lower left.
  4. A narrow central department identity, including the white strip behind the department name.
  5. A small movie preview at the lower right.

On desktop, the central identity is centered at approximately (712.5, 500). On mobile its center is approximately (187.5, 402), placing it 20px above the viewport's vertical midpoint. Preserve that optical adjustment when adapting the composition.

The large letterforms have fine strokes and varied visible tones. Their estimated overall widths are around 150–190px on desktop and 80–105px on mobile, depending on the phrase and punctuation. These are artwork-envelope estimates, not font-size measurements.

Opening Navigation and Planning Notice

Role: provides section access and communicates the provisional nature of the announcement.

Desktop navigation is a small, centered row near the bottom of the image. Its labels are コンセプト, 学科について, 資格・進路, and 大学について, with fine underlines and slash separators visible in the capture. The links point to #concept, #department, #qualification-career, and #university on the same page.

The row is absent from the mobile screenshot and mobile visible-link inventory. No replacement menu is evidenced. The planning notice remains at the bottom, using 10px Gothic text, and is centered across the mobile opening.

Anchor destinations are verified from the DOM. Smooth scrolling, active-section highlighting, and sticky navigation behavior were not tested.

Full Movie Preview

Role: offers a small route into the department film without dominating the opening.

The rectangular preview shows a group near a bright window, with Full Movie and a small circular arrow/play-style mark at the lower right. It uses a landscape ratio close to 9:5, square corners, and no surrounding card shell.

The desktop link measures 216 × 120px, with 16px clearance from the visible right and bottom edges. On mobile, the visible image is approximately 171 × 95px, positioned at x = 188, y = 709. The link's total measured height is 119px, including 24px bottom padding.

Its observed destination is the department film on YouTube. The link was not activated; embedded playback, modal presentation, new-tab behavior, and audio settings remain unverified.

Concept Prose

Role: introduces the relationship between perception, expression, and society.

The text forms five short paragraph groups. Desktop paragraphs occupy a right-side column at approximately x = 936.66, width 408.34px, with white 18px Mincho text and a very open 43.2px line height. Paragraph gaps calculate to approximately 36px.

Mobile prose moves into a 343px column with 16px side insets. It uses 15px text with 34.5px line height, retains the paragraph gaps, and adds responsive line breaks in the opening paragraph.

The supplied screenshots do not show this entire section. Its typography and positions are measured, while its complete photographic background and any scroll-linked behavior are unverified.

Department and University Introductions

Role: creates editorial chapter openings before dense factual material.

Both sections have a narrow bilingual heading near the right edge and a tall, two-column Japanese statement beside it. The statement measures 132px wide on desktop and 108px on mobile, matching two line boxes of 66px and 54px respectively. This geometry supports a vertical editorial arrangement.

The introductory paragraph occupies a separate narrow block. In the department section it measures 252px wide on desktop and approximately 235.13px on mobile. Those widths closely correspond to eight line-height units, consistent with vertical prose. The supplied style fields do not include writing-mode, so that paragraph orientation remains an inference rather than a directly recorded CSS property.

On mobile, the department statement begins around y = 1888, and its introductory paragraph begins around y = 2269.81, below the statement. The university introduction follows a similar sequence. Preserve the separation between chapter title, statement, and explanation rather than compressing them into one heading block.

Learning Core

Role: identifies 感性 as the academic center of the department.

Desktop geometry places 学びの核 in the left label column, the large teal keyword in the main content area, and explanatory prose beside it. The keyword uses 52px Ryumin with unusually wide 0.24em tracking.

Mobile content stacks: the heading occupies the outer 343px band, followed by the 40px keyword and a 311px explanatory block inset by an additional 16px. A subsequent course-example group combines a small label and course name, followed by two compact Gothic paragraphs.

The supplied records establish text geometry but do not expose the complete surrounding graphic treatment. Do not invent a diagram, icon set, or card fill for this section.

Learning-Pillar Buttons

Role: summarizes the three areas おもう, あらわす, and つなぐ and provides an interactive affordance.

Each entry is a native BUTTON with a flat white background and square corners. Desktop buttons measure approximately 729.58 × 189.56px and use three grid columns:

grid-template-columns: 176px 484.578px 69px;

The first column contains the teal Ryumin keyword. The middle column contains an 18px Mincho lead and a 14px gray Gothic explanation. The final 69px column reserves space for an affordance whose exact graphic was not supplied.

On mobile the button becomes a single-column grid, 343px wide, with 20px horizontal padding. The keyword, lead, explanation, and remaining affordance space stack vertically. Heights vary with content: approximately 300.25–321.69px. Keep those heights content-driven.

Color transitions are declared, but their final hover colors were not captured. Button activation was not tested.

Learning-Area Detail Content — DOM Only

The DOM contains separate detail groups headed with each learning-area name and the label 領域. Each group includes a large heading, a Mincho lead, a longer explanation, and a practical example in Gothic text.

Desktop detail paragraphs occupy a central width of approximately 686.66px; mobile paragraphs use 318px. Repeated unlabeled controls measure 80 × 80px on desktop and 60 × 60px on mobile, with opacity and translation transitions.

These viewport-relative records are consistent with detail overlays, but no supplied screenshot shows an opened panel and no activation trace confirms the relationship. Panel fill, backdrop, dismissal behavior, focus management, and animation sequence must remain unverified. An accessible dialog is a reasonable implementation recommendation if this interaction is reproduced.

Academic Summary Note

Role: expresses the department's characteristics in a more formal academic register.

The desktop capture shows a framed note beside 学びの３つの柱. A teal pill label interrupts the top edge. Fine teal strokes form upper and lower brackets; the side edges are interrupted through the middle rather than forming a heavy rectangular box.

The panel is approximately 730 × 180px in the screenshot. Its measured text width is 665.58px, consistent with 32px horizontal insets. Vertical insets are estimated at approximately 48px. The body uses 15px / 27.75px Mincho text.

On mobile the recorded paragraph narrows to 303px with 14px / 25.9px type. The complete mobile frame is not shown; allow the pill label to wrap without clipping in a new implementation.

Curriculum Grid

Role: makes the department's academic range concrete through nine course examples.

Desktop uses three columns, each approximately 323.61px wide, separated by 40px. Mobile uses one 343px column. Course order is preserved across both inventories.

Each entry has three layers:

  1. A square-cornered landscape photograph.
  2. A teal Mincho course title.
  3. A dark Gothic explanatory paragraph, separated from the title by a measured 16px gap.

The first visible row depicts printed visual-design work, a computer workspace, and a color-reference book. Photographs appear approximately 324 × 218px; 3:2 is a practical recommended ratio, not a measured source asset ratio. There are no visible image borders, shadows, or enclosing card backgrounds.

Desktop titles include 視覚文化論, デジタル表象生成論, and 色彩文化論. The remaining entries cover sound, filmmaking, materials, stage production, Japanese literature and culture, and media literacy. Their complete text is present in the supplied DOM, but their images are not all visible in the captures.

The course titles are sampled as paragraphs, and no course-detail destinations appear in the supplied link inventory. Do not make every course card clickable without an actual destination.

Qualification & Career Section

Role: connects the learning content to professional fields and possible career directions.

This is a full-width teal section, measured at approximately 984.44px tall on desktop and 1347.95px on mobile. Its main statement uses white Ryumin text, 26px on desktop and 22px on mobile.

Two information groups, 想定される領域 and 主な進路イメージ, sit side by side on desktop and stack on mobile. Their desktop heading boxes are 612.5px wide; body text is inset by 32px. Mobile heading boxes use 343px, with 279px body text widths after the same inset.

The supplied data confirms the teal section background and dark computed body text. The enclosing surfaces beneath those dark paragraphs are not recorded, and this section is not shown in the attached screenshots. Do not infer its complete card or illustration treatment from the text inventory.

University Feature Grid

Role: presents four institutional characteristics with a consistent numbered rhythm.

Desktop features form two columns of approximately 495.41px with a 60px gap. Mobile features stack in the order 01 through 04.

The visible anatomy is a landscape image, a dark Mincho title, a rose Mincho subtitle, a narrow outlined number capsule aligned to the right, a fine dotted divider, and a compact Gothic paragraph. The heading reserves 32px for the number on desktop and 24px on mobile.

The desktop crop shows 英語教育 and 少人数教育 as a pair. The mobile crop shows the final feature at full content width. Keep the rose accent confined to subtitles and number details; the description remains dark ink on pale blue.

Official-Site CTA

Role: routes readers to the main university website after the institutional feature sequence.

The label is 福岡女学院大学 公式HPはこちら. The link is a centered, square-cornered rose rectangle with visibly white text, approximately 289 × 64px on desktop and 273 × 58px on mobile.

The destination is the university's official site. It is a navigation link rather than an application form or a verified admissions conversion flow.

Footer and LINE Access

Role: closes the page with institutional identity and direct contact routes.

The footer remains on the pale blue canvas. It centers the university crest and bilingual wordmark, followed by the admissions publicity office label, underlined email and telephone links, a LINE badge, and small copyright text.

The logo appears approximately 355 × 89px on desktop and 244 × 60px on mobile; widths are screenshot estimates, while the corresponding logo-block heights are measured. Preserve its supplied proportions and clear space.

Email and telephone remain side by side at the inspected mobile width, with a measured 20px gap. Their type decreases from 14px to 11px; this is an observed detail worth improving for readability in an adaptation.

The footer LINE link measures 252 × 72px on desktop and 228 × 66px on mobile, with 6px corners. A separate edge-positioned LINE link also exists. It appears at the lower right in the desktop curriculum capture but is not visible in the opening or final-footer captures. Its visibility trigger and footer handoff are unverified.

Tokens — Motion & Interaction

Declared Timing

Source value Recorded application What is established
--common-duration: .6s Navigation, pillar colors, CTA colors, contact links, LINE links Computed transitions exist
--common-ease: cubic-bezier(.25,.46,.45,.94) The same sampled transitions Exact easing declaration
.6s with .15s delay Opacity and translation on repeated detail controls Control transition declaration; activation sequence unverified
--common-duration-fast: .35s Token only No specific visible effect established
--common-duration-late: .8s Token only No specific visible effect established
--animation-duration: .5s Token only No keyframes or trigger supplied
Fast/late animation tokens .35s and .8s Token only Available timing values
Default transition .15s, cubic-bezier(.4,0,.2,1) Global variables Not evidence that a particular component uses them

Most sampled elements report animation: none. That does not rule out video, animated descendants, pseudo-elements, or JavaScript-driven motion.

Interaction Evidence and Limits

Element Confirmed Unverified
Desktop section navigation Four same-page anchor destinations Scroll easing, active state, persistence
Movie preview YouTube destination Playback presentation, autoplay, loop, audio, target window
Learning pillars Native buttons and related detail content in DOM Opening behavior, backdrop, focus handling, dismissal
Official-site CTA University homepage destination Hover end state and target window
Email and telephone mailto: and tel: destinations External application behavior
LINE badges Same LINE destination on both entries Visibility thresholds and edge-to-footer handoff

The capture process observed the initial page for at least five seconds and waited for layout, visible finite motion, and image readiness within bounded time limits. Perpetual animations were temporarily paused during readiness checks and resumed afterward. This supports settled screenshots but does not establish complete motion behavior.

For a new implementation, retain the measured gentle easing for simple state changes. Any reveal animation, moving background, or dialog choreography should be labeled as an addition until verified separately.

Surfaces

Layer Appearance Evidence
Opening Full-frame campus/student imagery with superimposed lettering Screenshots
Main reading canvas Pale blue #edf4f6 Screenshot appearance and source token
Learning-pillar buttons Flat white, square corners Computed styles
Academic summary note Pale canvas with thin teal brackets and a teal pill Desktop screenshot
Curriculum entries Unboxed image, title, and paragraph groups Desktop screenshot and DOM
Career band Teal #1483a3 Computed section background
University features Pale canvas with dotted separators and rose details Desktop and mobile screenshots
Official-site CTA Flat rose rectangle Computed background and screenshots
LINE badge Light branded asset with a fine border and small radius Screenshots and link geometry
Detail overlay Complete surface not established DOM content only

Imagery

The visible photography feels observational: sunlight through foliage, warm brickwork, a student handling a camera, printed design experiments, a computer in use, and color-study materials. The subject matter connects perception to making and learning.

Preserve natural light, environmental context, and specific academic objects. The curriculum photographs explain the course content without needing decorative illustrations. Their consistent landscape proportions provide rhythm within the long page.

Hero media needs responsive art direction. A tall mobile crop must preserve the student's face, hands, and camera while leaving room for vertical lettering and the central identity. The different desktop and mobile scenes do not prove the use of separate media files; they may also represent different temporal frames.

Observed Asset References

No image source paths or video file URLs were included in the supplied records. The following inventory records visible assets without inventing filenames.

Asset Observed use Asset URL evidence
Campus building and trees Desktop opening File URL not supplied
Student using a camera Mobile opening File URL not supplied
Central department identity Vertical opening lockup File URL not supplied
Large opening phrase Opposing vertical title elements File URL not supplied; rendering mechanism unverified
Group near a window Full Movie preview Link destination supplied; thumbnail file URL absent
Printed visual-design work First curriculum image File URL not supplied
Computer workspace Second curriculum image File URL not supplied
Color-reference book Third curriculum image File URL not supplied
University crest and wordmark Footer identity File URL not supplied
Official LINE badge Edge link and footer link Destination supplied; artwork file URL absent

Use approved university and service-brand assets when available. The CSS below describes their placement and surrounding structure; it does not supply replacement identity artwork.

Layout & Responsive Behavior

The page remains a long document with normal section progression. Its measured height increases from approximately 13,154px on desktop to 17,401px on mobile as multi-column content stacks.

Pattern Desktop observation Mobile observation
Opening Full-height imagery with widely separated typographic anchors Same compositional roles, smaller identity, tighter edge placements
Navigation Four small bottom-center links Not shown; no replacement evidenced
Concept prose Right-aligned reading column Full content-width block with responsive line breaks
Chapter statement Tall statement beside a narrow section label Tall statement retained near the right; introduction follows below
Learning information Left label column plus wider content column Label and content stack
Pillar buttons Three internal columns One internal column
Curriculum Three columns One column
Career groups Two parallel information groups Stacked groups
University features Two columns One column
Footer contacts Centered horizontal pair Horizontal pair retained with smaller type

The mobile layout preserves large chapter spacing. Department top padding remains 200px, while university and footer top padding reduce to 120px. This is selective compression, not uniform scaling of the entire desktop page.

Only two viewport sizes were supplied. Exact breakpoints, tablet behavior, landscape behavior, maximum-width rules, browser toolbar response, and safe-area handling were not recorded. The Quick Start uses a recommended 64rem breakpoint and 100svh opening height; these are adaptation choices.

Do’s and Don’ts

Do

  • Preserve the relationship between a dramatic photographic opening and quiet academic reading sections.
  • Keep the pale blue, blue-black, teal, and rose values exact where they are measured.
  • Use the distinct display, reading, supporting, and Latin type roles.
  • Retain vertical title composition on mobile.
  • Keep the planning qualifier and notice attached to the announcement.
  • Use square landscape curriculum images with teal titles and compact Gothic descriptions.
  • Preserve 40px desktop curriculum gaps and 60px university-feature gaps at the inspected scale.
  • Keep content heights flexible when mobile text wraps.
  • Use thin rules and whitespace as the principal structural devices.
  • Preserve the university wordmark and LINE badge proportions.

Don't

  • Don't replace the opening with a single centered horizontal headline and oversized conversion button.
  • Don't use one sans-serif family for all Japanese content.
  • Don't turn every course into a rounded, elevated, clickable card.
  • Don't spread the rose accent across academic course titles or turn LINE green into a general action color.
  • Don't derive a hero font size from the central H1 wrapper's inherited 16px value.
  • Don't reproduce the capture's scrollbar gutter as page styling.
  • Don't assume different photographic frames prove a specific video or slideshow implementation.
  • Don't describe untested detail panels as verified dialogs with known dismissal behavior.
  • Don't fabricate course links, asset paths, motion sequences, or production authorship.
  • Don't shrink all desktop spacing proportionally; preserve the observed mobile reading rhythm.

Recommended Implementation Additions

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

  • Give the central identity a meaningful accessible heading, even when its visible treatment uses artwork. Mark duplicated decorative slogan artwork appropriately.
  • Maintain readable contrast over every hero frame. Provide a restrained scrim or frame-specific text treatment when needed.
  • Give Full Movie, LINE, and any detail controls explicit accessible names. Empty extracted text alone does not establish whether the original lacks an accessible name.
  • Provide keyboard-visible focus indicators and generous interactive hit areas around small navigation and contact text.
  • Consider a compact mobile section index or skip navigation, since the observed mobile opening does not expose section links.
  • If pillar buttons open dialogs, implement focus entry, Escape dismissal, focus restoration, an accessible title, and a reachable close control.
  • Offer a static alternative and user pause control for any moving hero media. Reduced-motion CSS does not pause a video by itself.
  • Keep mobile contact text larger than the observed 11px when readability takes priority over exact reproduction.
  • Reserve image dimensions to reduce layout movement and load below-the-fold curriculum photography progressively.
  • Ensure the edge LINE badge does not obscure course text or keyboard focus; avoid duplicate visible badges when the footer version is present.

Agent Prompt Guide

Quick Color Reference

  • Reading canvas: #edf4f6.
  • Main text: #263940.
  • Academic titles, learning keywords, and career band: #1483a3.
  • University subtitles and official-site CTA: #a44858.
  • Fine rules: #d3e1e5.
  • Secondary pillar explanations: #767f82.
  • Pillar surfaces and reversed text: #ffffff.
  • Photography and official brand assets retain their own colors.

Overall Prompt

“Create a Japanese university department introduction with a full-height cinematic photographic opening and a long pale-blue editorial body. Place fine vertical Japanese title artwork at opposing upper-right and lower-left anchors, a narrow department identity near the center, a small announcement at upper left, and a compact Full Movie preview at lower right. Use pale blue #edf4f6, blue-black text #263940, academic teal #1483a3, and restrained university rose #a44858. Pair Mincho display and reading text with Gothic factual descriptions. Build three desktop curriculum columns with square landscape photos, two university-feature columns with numbered capsules, and a centered institutional footer. Stack these sections on mobile while retaining vertical title composition and generous chapter spacing. Treat all animation and detail-panel behavior as implementation choices requiring explicit specification.”

Example Component Prompts

  1. Opening: “Compose a full-height campus photograph with large, fine-stroked vertical phrases at the upper right and lower left. Keep a slim department lockup near the center, a small two-line announcement at upper left, and a 9:5 movie preview at lower right. Preserve space around the subject in the mobile crop.”
  2. Learning pillar: “Create a flat white square-cornered button with a teal Mincho keyword, a larger dark Mincho lead, a smaller gray Gothic explanation, and a reserved affordance area. Use three internal columns on desktop and stack the content with 20px horizontal insets on mobile. Do not assume a particular dialog design.”
  3. Curriculum: “Create three unboxed course entries across a pale-blue canvas, separated by 40px. Each has a natural-light landscape photograph, an 18px teal Mincho title, and a 14px Gothic paragraph. Use one column with 16px titles and 13px descriptions on mobile.”
  4. Academic note: “Create a pale-blue academic note framed by thin teal upper and lower brackets. Center a teal pill label over the top rule, leave interruptions in the side strokes, and use airy Mincho body copy. Avoid a heavy card border or shadow.”
  5. University feature: “Place a landscape image above a dark Mincho title and rose subtitle. Reserve a slim right-side capsule for a two-digit number. Separate the compact Gothic description with a pale dotted rule. Use two columns on desktop and one on mobile.”
  6. Footer: “Center an approved university crest and bilingual wordmark on pale blue with generous clear space. Add an admissions contact label, underlined email and telephone links, a small official LINE badge, and quiet copyright text. Place a square rose official-site link above the footer.”

Quick Start

CSS Custom Properties

This CSS is a reusable adaptation, not extracted source code. Colors and core type values follow the supplied measurements. The 64rem breakpoint, hover end states, focus treatment, and responsive image handling are recommendations. The opening phrase envelopes are screenshot estimates.

Apply .kansei-page to the page wrapper. The hero expects approved media inside .hero-media, phrase artwork inside the two .hero-phrase elements, and identity artwork inside .hero-identity. A curriculum entry uses .course-image, .course-title, and .course-description. A pillar button uses .pillar-name, .pillar-copy, and .pillar-affordance; use phrasing elements such as spans inside a native button. Media and detail-panel behavior require separate application code.

:root {
  /* Measured palette */
  --k-paper: #edf4f6;
  --k-ink: #263940;
  --k-teal: #1483a3;
  --k-rose: #a44858;
  --k-rule: #d3e1e5;
  --k-muted: #767f82;
  --k-white: #ffffff;

  /* Source family declarations; font files are not included */
  --k-font-display: a-otf-ryumin-pr6n, serif;
  --k-font-reading: hiragino-mincho-pron, sans-serif;
  --k-font-detail: dnp-shuei-gothic-gin-std, sans-serif;
  --k-font-latin: minerva-modern, sans-serif;

  /* Mobile values measured at the supplied viewport */
  --k-text-section: 22px;
  --k-text-lead: 16px;
  --k-text-body: 14px;
  --k-text-detail: 13px;
  --k-text-statement: 36px;
  --k-text-core: 40px;
  --k-section-leading: 1.8;
  --k-side: 16px;
  --k-grid-gap: 16px;

  /* Source timing; hover endpoints below are recommendations */
  --k-duration: 600ms;
  --k-ease: cubic-bezier(.25, .46, .45, .94);
}

* { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; }

.kansei-page {
  color: var(--k-ink);
  background: var(--k-paper);
  font-family: var(--k-font-display);
  font-size: 16px;
  line-height: 1.5;
}

.kansei-page p,
.kansei-page h1,
.kansei-page h2,
.kansei-page h3 {
  margin: 0;
}

.wide,
.inner {
  width: calc(100% - 2 * var(--k-side));
  margin-inline: auto;
}

.section-heading {
  font-family: var(--k-font-display);
  font-size: var(--k-text-section);
  font-weight: 500;
  line-height: var(--k-section-leading);
  letter-spacing: .05em;
}

.reading-copy {
  font-family: var(--k-font-reading);
  font-size: var(--k-text-body);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: .08em;
}

.detail-copy,
.course-description {
  font-family: var(--k-font-detail);
  font-size: var(--k-text-detail);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .08em;
}

/* Recommended vertical-title implementation */
.vertical-statement {
  writing-mode: vertical-rl;
  font-family: var(--k-font-display);
  font-size: var(--k-text-statement);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .15em;
}

.core-word {
  color: var(--k-teal);
  font-size: var(--k-text-core);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .24em;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  color: var(--k-white);
}

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

.hero-media > :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-announcement {
  position: absolute;
  top: 26px;
  left: 16px;
  max-width: 65%;
  font-family: var(--k-font-reading);
  font-size: var(--k-text-lead);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .08em;
}

.hero-qualifier,
.hero-disclaimer {
  font-family: var(--k-font-detail);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .06em;
}

.hero-qualifier {
  display: block;
  margin-top: 6px;
  color: rgb(255 255 255 / .8);
}

.hero-identity {
  position: absolute;
  top: calc(50% - 20px);
  left: 50%;
  width: 53px;
  transform: translate(-50%, -50%);
}

.hero-identity img,
.hero-phrase img {
  display: block;
  width: 100%;
  height: auto;
}

/* Estimated artwork envelopes; tune to the approved assets */
.hero-phrase {
  position: absolute;
  pointer-events: none;
}
.hero-phrase--right { top: 24px; right: 16px; width: 80px; }
.hero-phrase--left { top: 54%; left: 16px; width: 104px; }

.hero-nav { display: none; }

.hero-disclaimer {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  text-align: center;
  color: rgb(255 255 255 / .6);
}

.hero-movie {
  position: absolute;
  right: 16px;
  bottom: 40px;
  width: 171px;
  color: white;
}

.hero-movie img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 5;
  object-fit: cover;
}

.hero-movie-label {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 12px;
}

.study-layout,
.pillar-list,
.curriculum-grid,
.university-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.study-layout { gap: 40px; }
.pillar-list { gap: 20px; }

.pillar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  padding: 32px 20px;
  border: 0;
  border-radius: 0;
  color: var(--k-ink);
  background: var(--k-white);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--k-duration) var(--k-ease);
}

.pillar-name {
  display: block;
  color: var(--k-teal);
  font-size: var(--k-text-section);
  font-weight: 500;
  line-height: var(--k-section-leading);
  letter-spacing: .05em;
}

.pillar-copy { display: block; margin-top: 24px; }
.pillar-lead,
.pillar-description { display: block; }

.pillar-lead,
.course-title {
  font-family: var(--k-font-reading);
  font-size: var(--k-text-lead);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .08em;
}

.pillar-description {
  margin-top: 16px;
  color: var(--k-muted);
  font-family: var(--k-font-detail);
  font-size: var(--k-text-detail);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .08em;
}

.pillar-affordance {
  display: grid;
  min-height: 44px;
  margin-top: 16px;
  place-items: center end;
}

.academic-note {
  position: relative;
  padding: 44px 20px;
}

.academic-note::before,
.academic-note::after {
  content: '';
  position: absolute;
  right: 0;
  left: 0;
  height: 32px;
  border: 1px solid var(--k-teal);
  pointer-events: none;
}

.academic-note::before {
  top: 0;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}

.academic-note::after {
  bottom: 0;
  border-top: 0;
  border-radius: 0 0 3px 3px;
}

.academic-note-label {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  max-width: calc(100% - 24px);
  width: max-content;
  padding: 8px 16px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  color: var(--k-white);
  background: var(--k-teal);
  font-family: var(--k-font-reading);
  font-size: var(--k-text-body);
  line-height: 1.4;
  letter-spacing: .08em;
  text-align: center;
}

.section-rule {
  position: relative;
  height: 1px;
  border: 0;
  background: var(--k-rule);
}

.section-rule::before {
  content: '';
  position: absolute;
  width: 60px;
  height: 1px;
  background: var(--k-teal);
}

.curriculum-intro { margin-top: 24px !important; }

/* Image ratio and vertical gaps are practical approximations */
.curriculum-grid { gap: 80px 40px; margin-top: 72px; }

.course-image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
}

.course-title {
  margin-top: 24px !important;
  color: var(--k-teal);
}

.course-description { margin-top: 16px !important; }
.university-grid { gap: 80px 60px; }

.feature-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: start;
}

.feature-subtitle {
  margin-top: 6px !important;
  color: var(--k-rose);
  font-family: var(--k-font-reading);
  font-size: var(--k-text-body);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: .08em;
}

/* Capsule dimensions are an adaptation of the visible marker */
.feature-number {
  display: grid;
  width: 24px;
  min-height: 60px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--k-rose) 25%, transparent);
  border-radius: 999px;
  color: var(--k-rose);
  font-family: var(--k-font-latin);
  font-size: 12px;
}

.feature-description {
  margin-top: 20px !important;
  padding-top: 20px;
  border-top: 1px dotted var(--k-rule);
}

.official-cta {
  display: grid;
  width: min(100%, 273.38px);
  min-height: 58px;
  margin: 100px auto 0;
  padding: 14px 28px;
  place-items: center;
  border-radius: 0;
  color: var(--k-white);
  background: var(--k-rose);
  font-family: var(--k-font-reading);
  font-size: var(--k-text-body);
  line-height: 1.85;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--k-duration) var(--k-ease);
}

.university-footer {
  padding: 120px var(--k-side) 80px;
  text-align: center;
}

.footer-logo {
  display: block;
  width: min(244px, 100%);
  height: auto;
  margin-inline: auto;
}

.footer-contact-label { margin-top: 60px !important; }

.footer-contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 20px;
  margin-top: 16px;
}

.footer-contacts a {
  color: inherit;
  font-family: var(--k-font-latin);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .02em;
  text-underline-offset: 4px;
}

.footer-line {
  display: block;
  width: min(228px, 100%);
  margin: 36px auto 0;
  overflow: hidden;
  border-radius: 6px;
}
.footer-line img { display: block; width: 100%; height: auto; }

.footer-copyright {
  margin-top: 48px !important;
  color: var(--k-muted);
  font-family: var(--k-font-detail);
  font-size: 10px;
  letter-spacing: .06em;
}

/* Recommended breakpoint; the original threshold was not supplied */
@media (min-width: 64rem) {
  :root {
    --k-text-section: 26px;
    --k-text-lead: 18px;
    --k-text-body: 15px;
    --k-text-detail: 14px;
    --k-text-statement: 44px;
    --k-text-core: 52px;
    --k-section-leading: 1.65;
    --k-side: min(80px, 5.555556vw);
    --k-grid-gap: 20px;
  }

  /* Ten inner columns from a twelve-column content grid */
  .inner {
    width: calc(
      (100% - 2 * var(--k-side) - 11 * var(--k-grid-gap))
      * 10 / 12 + 9 * var(--k-grid-gap)
    );
  }

  .hero-announcement { top: 32px; left: 36px; }
  .hero-qualifier { margin-top: 8px; }
  .hero-identity { top: 50%; width: 67px; }
  .hero-phrase--right { top: 32px; right: 20px; width: 150px; }
  .hero-phrase--left { top: auto; bottom: 20px; left: 32px; width: 190px; }
  .hero-movie { bottom: 16px; width: 216px; }
  .hero-disclaimer { bottom: 31px; }

  .hero-nav {
    position: absolute;
    bottom: 64px;
    left: 50%;
    display: flex;
    gap: 20px;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  .hero-nav a {
    color: inherit;
    font-family: var(--k-font-reading);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .08em;
    text-underline-offset: 4px;
  }

  .study-layout {
    grid-template-columns: minmax(0, calc(30% - 14px)) minmax(0, 1fr);
    gap: 20px;
  }

  .pillar {
    grid-template-columns: 176px minmax(0, 1fr) 69px;
    padding: 32px 0;
    align-items: start;
  }
  .pillar-name { padding: 9px 32px 0; }
  .pillar-copy { margin-top: 0; padding-inline: 20px; }
  .pillar-description { margin-top: 20px; }
  .pillar-affordance { margin-top: 0; place-items: center; }
  .academic-note { padding: 48px 32px; }
  .curriculum-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .university-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-heading { grid-template-columns: minmax(0, 1fr) 32px; }
  .feature-number { width: 32px; min-height: 74px; font-size: 14px; }
  .feature-subtitle { margin-top: 8px !important; }
  .feature-description { margin-top: 24px !important; padding-top: 24px; }

  .official-cta {
    width: min(100%, 288.75px);
    min-height: 64px;
    margin-top: 120px;
    padding-block: 17px;
  }

  .university-footer { padding: 160px var(--k-side) 20px; }
  .footer-logo { width: min(355px, 100%); }
  .footer-contacts a { font-size: 14px; }
  .footer-line { width: 252px; margin-top: 50px; }
}

/* Recommended feedback; original hover endpoints were not captured */
@media (hover: hover) {
  .pillar:hover {
    background: color-mix(in srgb, var(--k-teal) 5%, white);
  }
  .official-cta:hover {
    background: color-mix(in srgb, var(--k-rose) 90%, black);
  }
}

.kansei-page :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

/* Recommended CSS fallback; pause moving media separately in code */
@media (prefers-reduced-motion: reduce) {
  .kansei-page *,
  .kansei-page *::before,
  .kansei-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

The CSS intentionally leaves unseen chapter imagery, career information surfaces, detail overlays, and the edge LINE visibility logic to separate implementation. Their complete original behavior or appearance is not established by the supplied evidence.

Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. Define the custom properties above first. This mapping is implementation guidance, not a claim about the original authoring framework.

@theme inline {
  --color-paper: var(--k-paper);
  --color-ink: var(--k-ink);
  --color-academic: var(--k-teal);
  --color-university: var(--k-rose);
  --color-rule: var(--k-rule);
  --color-muted: var(--k-muted);

  --font-editorial: var(--k-font-display);
  --font-reading: var(--k-font-reading);
  --font-detail: var(--k-font-detail);
  --font-latin: var(--k-font-latin);

  --text-section: var(--k-text-section);
  --text-lead: var(--k-text-lead);
  --text-body: var(--k-text-body);
  --text-detail: var(--k-text-detail);
  --text-statement: var(--k-text-statement);
  --text-core: var(--k-text-core);

  --spacing-page-side: var(--k-side);
  --spacing-grid-gap: var(--k-grid-gap);
  --radius-brand-badge: 6px;
}

Sources & Evidence

  • Current department page: original and final inspected URL; HTTP 200. Authority for the supplied page title, content, link destinations, computed styles, and source custom properties.
  • Capture date: September 12, 2026, with supplied retrieval timestamp 2026-09-12T12:42:55.991Z.
  • Desktop evidence: 1440 × 1000 viewport; opening, curriculum-area, and final university/footer captures. Document width 1425px; measured height approximately 13154.19px.
  • Mobile evidence: 390 × 844 viewport; opening and final university/footer captures. Document width 375px; measured height approximately 17400.63px.
  • Rendered evidence: text inventory, anchor destinations, element rectangles, font-family declarations, sizes, weights, line heights, tracking, fills, padding, radii, grid columns, transition strings, and CSS custom properties for both viewport sizes.
  • Observed identity: the original-page footer presents Fukuoka Jo Gakuin University, its admissions publicity office, email, telephone, and official-site destination. Production authorship is not established by the supplied original-page evidence.
  • Interaction scope: scrolling and capture stabilization are described by the supplied collection notes. No click results, hover endpoints, keyboard tests, opened detail-panel screenshots, or playback-state records were supplied.
  • Limitations: exact asset paths, font-file resolution, writing-mode declarations, media playback configuration, responsive breakpoints, delayed content, safe-area behavior, and unexercised interaction states remain unverified. SharedWorkers and service workers were disabled during the supplied inspection.

This reference describes the current supplied render. Estimates, calculated geometry, and recommended implementation choices are labeled separately from measured observations.

← デザイン一覧に戻る