MANERU

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

CHIMJUN｜沖縄発ヘアケアブランドの余白とタイポグラフィのWebサイトプレビュー

DESIGN REFERENCE

CHIMJUN｜沖縄発ヘアケアブランドの余白とタイポグラフィ

コーポレートサイトブランドサイトヘアケア美容サロン沖縄タイポグラフィ大きなロゴ余白ベージュブルーグレーレスポンシブ

巨大な極細ロゴ、温かなベージュ、沖縄の自然写真が印象的なブランドサイト。製品グリッド、大胆なセクション見出し、段状に配置されたフッターを特徴とする。

オリジナルサイトを見る
ジャンル
美容・化粧品
元の業種
美容・ヘアケア
デザイン分析日
2026/9/29

design.md

ダウンロード

CHIMJUN — Style Reference

Monumental hairline lettering, warm paper, and a narrow window onto Okinawa.

Original URL: https://chimjun.jp/ Final URL: https://chimjun.jp/ Theme: warm light canvas with a black salon portal and a muted blue-gray footer. Inspected: September 29, 2026, from the supplied browser evidence retrieved at 12:56:03.981 UTC / 21:56:03.981 JST. Viewports: desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels. Scope: the current corporate and brand homepage: opening identity composition, company introduction, product index, professional salon service, salon presentation, news, journal, contact/shop handoff, and footer. Visual captures show the desktop opening, salon portal, and footer, plus the mobile opening and footer. The rendered DOM supplies additional measurements for the intervening sections. Linked pages and shop destinations were not inspected.

CHIMJUN presents an Okinawa-based beauty company through an unusually large identity system. A delicate, high-contrast wordmark stretches across the opening and returns near the bottom of the page. Warm beige and dark brown give the interface a quiet material character; a tightly cropped photograph of rock, vegetation, and sky provides its strongest natural color. Neutral grotesk lettering carries the English statements, Japanese explanations, navigation, and product information.

The homepage alternates between spacious brand compositions and structured indexes. Products occupy a ruled matrix, news uses broad linked rows, and journal entries extend horizontally with alternating vertical offsets. The footer introduces a cool blue-gray field and a distinctive diagonal progression of information. Preserve these changes in scale and alignment: they explain the site more accurately than a uniform collection of cards.

全文を表示閉じる

CHIMJUN — Style Reference

Monumental hairline lettering, warm paper, and a narrow window onto Okinawa.

Original URL: https://chimjun.jp/ Final URL: https://chimjun.jp/ Theme: warm light canvas with a black salon portal and a muted blue-gray footer. Inspected: September 29, 2026, from the supplied browser evidence retrieved at 12:56:03.981 UTC / 21:56:03.981 JST. Viewports: desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels. Scope: the current corporate and brand homepage: opening identity composition, company introduction, product index, professional salon service, salon presentation, news, journal, contact/shop handoff, and footer. Visual captures show the desktop opening, salon portal, and footer, plus the mobile opening and footer. The rendered DOM supplies additional measurements for the intervening sections. Linked pages and shop destinations were not inspected.

CHIMJUN presents an Okinawa-based beauty company through an unusually large identity system. A delicate, high-contrast wordmark stretches across the opening and returns near the bottom of the page. Warm beige and dark brown give the interface a quiet material character; a tightly cropped photograph of rock, vegetation, and sky provides its strongest natural color. Neutral grotesk lettering carries the English statements, Japanese explanations, navigation, and product information.

The homepage alternates between spacious brand compositions and structured indexes. Products occupy a ruled matrix, news uses broad linked rows, and journal entries extend horizontally with alternating vertical offsets. The footer introduces a cool blue-gray field and a distinctive diagonal progression of information. Preserve these changes in scale and alignment: they explain the site more accurately than a uniform collection of cards.

How to Read This Reference

  • Measured means a value recorded in the supplied rendered DOM or computed styles. Tables round measurements to two decimal places where practical.
  • Visual estimate means an approximation from an original-page screenshot. Photo bounds, the footer background color, and the visible hero lettering size fall into this category.
  • Derived means arithmetic based on recorded measurements, such as a width percentage or a source-root equivalent.
  • Recommended means an implementation choice for a new build. Breakpoints, accessibility additions, fallback fonts, and the Quick Start interpolation rules are recommendations.
  • Font-family declarations identify the requested source families; the evidence does not independently verify which font file rendered every glyph.
  • The DOM includes offscreen navigation and repeated heading copies. Their presence does not establish that they were visible in the captured state.
  • Some contact-panel coordinates differ from their placement in the scrolled footer captures. Treat the measurements as state-specific snapshots, not a complete map of scroll animation.
  • All tokens introduced here are descriptive aliases. The only supplied source custom properties are Swiper defaults, which do not describe the visible brand palette.

Tokens — Colors

Default Palette
Name Value Suggested token Evidence and role
Warm Paper #eae3da --color-paper Measured: body background; also the computed light text color in the footer and dark capsules
Brown Ink #3f342f --color-ink Measured: navigation, body copy, headings, and ordinary links
Capsule Brown #484036 --color-capsule Measured: business and salon capsule backgrounds in the DOM
Salon Gray #a6a19c --color-salon-text Measured: salon heading, address, explanatory paragraph, and detail link
Portal White #ffffff --color-portal-text Measured: the large OUR PRODUCT and OUR SALON heading text
Portal Black approximately #000000 --color-portal Visual estimate: the large black field in the desktop salon capture; the selected anchor itself has a transparent computed background
Coastal Blue Gray approximately #83979c --color-footer Visual estimate: footer field in desktop and mobile screenshots; its container background was not included in the computed-style sample
Quiet Rule ink or paper with low opacity --color-rule Recommendation: reproduce the restrained separators; exact source rule colors were not supplied

The warm canvas is continuous across much of the homepage. Dark text and rules establish hierarchy without a large set of accent colors. Photography supplies sky blue, forest green, stone gray, and warm hair tones.

The footer color is a local section treatment, not evidence of a user-selectable theme. Likewise, the black salon panel is the observed captured surface; the evidence does not establish whether it is permanently black or a background for media.

Incidental Source Variables

The DOM exposes --swiper-theme-color: #007aff and --swiper-navigation-size: 44px. These are library defaults. No supplied screenshot establishes bright blue as a visible brand accent or 44px as the size of the site's gallery controls. Do not include that blue in the primary design system.

Tokens — Typography

Grotesk Text — Navigation, Body Copy, and Links

Declared source stack:

neue-haas-grotesk-text, noto-sans-cjk-jp, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, serif

Most sampled text uses weight 400. English utility labels are compact and frequently uppercase. Tracking commonly resolves to 0.03em. Japanese paragraphs use normal tracking and more generous line spacing.

The root and some structural containers report Times. Their styled descendants explicitly request the grotesk stack, so those inherited container values should not be interpreted as the visible body typography.

Grotesk Display — Statements and Section Headings

Declared leading family: neue-haas-grotesk-display, followed by the text stack.

Sampled company statements, news headings, salon headings, and contact statements use weight 500, usually with line height close to 1. The visual character is clear and restrained. Large size and careful line breaks supply emphasis instead of heavy weight.

CheyraRegular — Section Portals

Declared leading family: CheyraRegular.

This family is directly evidenced on OUR PRODUCT and OUR SALON. It produces tall, fine, high-contrast display lettering. At desktop scale, its narrow strokes are paired with a large open arrow and substantial empty space.

Use this face only when the appropriate font asset is available. A generic serif fallback will change the proportions substantially.

Wordmark — Preserve as Identity Artwork

The opening H1 and footer brand heading have empty text in the element extract, while the screenshots clearly show the wordmark. Its exact asset format and font construction were not supplied.

Treat the wordmark as supplied identity artwork. Do not assume that typing CHIMJUN in CheyraRegular recreates it merely because the portal headings use that font. The measured heading boxes also do not equal the visible ink bounds of the artwork.

Type Scale
Role Desktop at 1440px Mobile at 390px Weight / leading / tracking Evidence
Hero statement, visible lettering approximately 76–80px approximately 31px Three lines, approximately one-em leading Visual estimate; child text styles were not sampled
Company opening statement 61.71px 24.96px 500, line height 1, tracking 0.03em Measured
Company mission statement 61.71px 26px 500, line height 1; mobile tracking 0.04em Measured
News / journal section heading 61.71px 36.4px 500, line height 1, tracking 0.03em Measured
Professional service heading 61.71px 47.84px 500, line height 1, tracking 0.03em Measured parent heading
Portal display heading 205.71px 47.84px 400, line height 0.9, tracking 0.03em Measured
Contact statement 61.71px 31.2px 500, line height 1, tracking 0.03em Measured
Standard Japanese body 14.4px / 25.2px 12.48px / 21.84px 400, normal paragraph tracking Measured
Company introduction body 14.4px / 28.8px 12.48px / 24.96px Leading 2 Measured
Product link / ordinary detail link 18.51px 16.64px 400, usually line height 1, tracking 0.03em Measured on anchor
Desktop primary navigation 13.37px Not visible as a horizontal row 400, line height 1, tracking 0.03em Measured
Mobile menu entries Not applicable to visible hero row 16.64px 400, line height 1, tracking 0.03em Measured offscreen menu entries
Footer links 16.46px / 21.39px 14.56px / 18.93px 400, tracking 0.03em Measured
Contact-panel explanation 12.34px / 22.22px 11.44px / 20.59px 400, normal tracking Measured
Privacy link 12.34px 11.44px Line height 1, tracking 0.03em Measured

Hero measurement caveat: its parent H2 reports 14.4px on desktop and 12.48px on mobile, but the visible lettering is much larger. The parent boxes are 240px and 93.56px high respectively, each containing three lines. Do not use the inherited parent font size to reproduce the hero.

Tokens — Spacing & Shapes

Source Root and Derived Units

The measured root size is 10.2857px on desktop and 10.4px on mobile. In this document, 1u means the root size at that sampled viewport.

Many dimensions are simple multiples of that unit. These equivalences are calculated from the measurements; a complete source spacing-token system was not supplied.

The desktop root happens to equal viewport width / 140, and the mobile root equals viewport width / 37.5. These relationships fit the two samples. They do not prove the original breakpoint, clamping behavior, or root formula at other widths.

Spacing Scale
Use Desktop measurement Mobile measurement Derived relationship
General outer gutter 41.14px 15.6px 4u desktop; 1.5u mobile
Mobile company-label inset — 10.4px 1u
Hero top padding 50px 83.2px Desktop measured directly; mobile 8u
Product tile padding 24.69px 16.64px 2.4u / 1.6u
Detail-link arrow reservation 30.86px 24.96px 3u / 2.4u left padding
Introduction paragraph to link 36px approximately 24.96px Derived from element bounds
Introduction bottom padding 102.86px 52px 10u / 5u
News horizontal inset 129.6px 15.6px Desktop 9vw; mobile 1.5u
News top padding 154.29px 74.88px 15u / 7.2u
News bottom padding 123.43px 74.88px 12u / 7.2u
Journal card side padding 61.71px 20.8px 6u / 2u
Journal alternating offset 90px 49.92px Measured opposing top/bottom padding
Contact-panel mobile inner inset — approximately 20.8px Derived from panel and paragraph bounds
Border Radius and Linework
Element Treatment Evidence
Product links Square, 0px radius Computed
Ordinary text links Unboxed, 0px radius Computed and visible
Hero photograph Square rectangle with a fine dark edge Screenshot
Contact panel Square paper rectangle Screenshot
Business / salon capsules 102.86px desktop radius; 104px mobile radius Computed; effectively fully rounded at their approximately 48px height
Product matrix separation Approximately 1px between measured cells Derived from positions; exact separator construction unknown
Footer rules Fine, low-contrast horizontal lines Screenshot; opacity not supplied
Arrows Open heads and simple straight shafts Screenshot; use consistent SVG strokes in a new implementation

The rounded business capsule is a specific exception. It is not a general radius token for product tiles, images, or content panels.

Layout Measurements
Element Desktop Mobile Interpretation
Document height 11,557.25px 10,911.56px Measured at the supplied state; not an implementation target
Hero section 1440 × 1606.95px 390 × 1039.91px The opening section extends beyond the initial viewport
Opening wordmark heading box 1357.72 × 295.02px, at (41.14, 50) 358.81 × 91.89px, at (15.59, 83.19) Measured container bounds
Visible desktop wordmark ink approximately 1150px wide Nearly fills its 358.81px box Visual estimate; container width is larger on desktop
Hero statement box 1357.72 × 240px, top 469.81px 358.81 × 93.56px, top 206.27px Measured
Hero photograph approximately 390 × 612px, at (1009, 338) approximately 108px wide, starting at (141, 337) Visual estimates; mobile bottom extends below the screenshot
Product / salon portal 1440 × 810px 390 × 452.39px Measured; desktop happens to be 16:9
Standard product tile 479.33 × 529.53px 390 × 510.30px Three columns become one
News list width 1180.81px 358.81px Measured
Typical news row height 99.70px 121.34px; longer entries 146.83px Measured; mobile grows with wrapping
Journal card bounds 440.20px wide 269.09px wide Track extends horizontally beyond the viewport
Contact-panel apparent width approximately 835px 351px Desktop supported by visible panel edge and inner geometry; mobile screenshot and DOM agree
Footer brand heading box 1357.72 × 390px 358.81 × 92.03px Measured; visible artwork occupies less than the desktop container height

Components

Global Header and Navigation

Role: company identification and access to the main site areas.

The mobile capture shows a small company label at the upper left and a two-line menu icon at the upper right. The company link is positioned at approximately 10.4px from the left and 16.63px from the top. The recorded menu button is 24 × 24px, at approximately (355.61, 18.72).

Its navigation entries exist above the viewport in the measured closed state. They include the main site sections, an online-shop link, and a business capsule. Their destinations are real anchors, but the menu was not opened in the supplied evidence. Do not invent its complete open layout, focus behavior, or overlay treatment.

On desktop, the opening composition contains a separate horizontal navigation row beneath the large wordmark. ABOUT begins at x = 360px, and the row continues through CONTACT near x = 1011px. Its top is approximately 396.44px. Meanwhile, the fixed-header company link and navigation have negative vertical coordinates in the sampled initial state.

The DOM also reports a secondary brand lockup and a salon capsule within the hero. They are not clearly distinguishable in the supplied opening screenshot. Their computed styles are useful evidence, but they should not all be forced into the visible initial composition.

Opening Brand Composition

Role: establishes identity, positioning, and an Okinawan sense of place.

The desktop arrangement has five principal elements:

  1. A centered, very large wordmark near the top.
  2. A compact horizontal navigation row beneath it.
  3. A centered English statement across three lines.
  4. A narrow landscape photograph pushed to the right and overlapping the wordmark's lower vertical region.
  5. A large downward arrow near the bottom center of the first viewport.

The statement reads:

For a beautiful
today, tomorrow,
and beyond

The photograph begins around y = 338px, close to the wordmark's lower edge, while the statement begins around y = 470px. This creates a layered composition rather than an ordinary equal-width text/image split. Keep the broad empty paper field to the left of the image.

The downward cue is approximately 64 × 96px, centered near x = 720px, with its top near y = 850px. The screenshot establishes its appearance, not whether it is clickable.

On mobile, the composition becomes vertical: company/menu strip, wordmark, three-line statement, then a very narrow centered photograph. The wordmark starts at 83.19px, the statement at 206.27px, and the photo around 337px. The photo is only about 28% of the viewport width, with extensive paper on both sides. It continues below the first screen. Preserve this unusually slender crop rather than expanding it automatically to the full mobile width.

Company Introduction

Role: connects the brand to Okinawa and explains its beauty-company mission.

Desktop uses large English statements and a comparatively small Japanese paragraph placed toward the right. The Japanese text begins at approximately x = 923.67px, occupies 475.19px, and uses 14.4px type with 28.8px leading. The About Us link follows with a reserved arrow space.

The second English statement occupies a broad central region, approximately 1008px wide. Its placement gives the section a composed, editorial rhythm rather than a compact text block.

Mobile changes the reading sequence. The mission statement precedes the Japanese paragraph in the measured layout, and both use the general 15.6px page gutter. The Japanese paragraph becomes 358.81px wide. Reproduce this responsive ordering explicitly instead of simply shrinking the desktop right-hand column.

No introduction photograph is visible in the supplied captures, and no relevant asset URL was supplied. Its content should not be invented from the company description.

Product and Salon Portals

Role: large linked entrances to major areas of the site.

Each portal is a full-width anchor. Both measure 810px high on desktop and 452.39px on mobile. The primary heading combines an open rightward arrow with a large CheyraRegular label.

For the desktop salon portal, the measured heading box is approximately 945.66 × 185.14px, beginning at x = 247.17px within the page. A 133.71px left padding reserves space for the arrow. The screenshot shows white lettering and arrow on a black field, centered with generous empty space above and below.

On mobile, the salon heading becomes approximately 234.55 × 43.05px with a 45.76px arrow reservation. Portal text is 47.84px, not a uniformly scaled version of the enormous desktop label.

Repeated heading copies carry a desktop animation declaration. The visible screenshot shows a single central label, so the duplicate nodes must not be interpreted as several simultaneously visible headline rows. Exact clipping and activation behavior remain unverified.

Product Index Tile

Role: direct entry to a specific shop product.

The desktop matrix contains five numbered product anchors and a sixth overview tile. The recorded items are premium shampoo, regular shampoo, treatment, hair milk, and hair gelee. Labels use parenthesized three-digit numbers such as (001) with uppercase English names.

Each standard desktop tile is approximately 479.33px wide and 529.53px high, with 24.69px padding. The positions establish three columns and two rows separated by approximately one pixel. The sixth cell contains the brand statement and View all.

Mobile is a single full-width column. Each standard product tile remains substantial at approximately 510.30px high, with 16.64px padding. The overview tile is slightly shorter, approximately 493.17px. This is a tall product sequence, not a two-column mobile thumbnail grid.

The anchors and dimensions are measured, but the supplied screenshots do not show the product imagery. Bottle shapes, image backgrounds, hover swaps, and image fitting cannot be specified as original-page findings.

Professional Service Feature

Role: introduces the salon-oriented chemi na chura offering.

The desktop capture shows the lower portion of a paper-colored text panel on the left and a close photograph of long dark hair and a shoulder on the right. Their split occurs near the page midpoint. The text panel has a fine vertical boundary against the image.

The DOM supplies a large mixed brand/service heading, a salon qualifier, Japanese explanatory copy, and View More. The lower desktop paragraph is approximately 521.94px wide, beginning at x = 20.56px. Its detail link uses the same arrow-and-text construction as About Us.

The mobile text is nearly full width within the standard gutter. The service heading is 47.84px, notably larger than ordinary mobile section headings. Preserve that distinction. The mobile image arrangement was not visually captured; do not claim that its crop or order has been verified.

Role: introduces the physical salon and its role as a place to experience products and techniques.

Below the portal, the DOM records OUR SALON / IN OKINAWA, a linked address, Japanese explanatory copy, and View Our Salon. These use Salon Gray #a6a19c. A dark brown panel is visible at the lower edge of the desktop salon capture, but its complete background styling is not supplied.

Desktop text begins at approximately x = 123.42px. The explanatory paragraph is 411.42px wide. Mobile uses a more generous local inset of approximately 24.96px, with a 340.08px paragraph width.

The text includes a 1 / 4 gallery indicator. The mobile extraction additionally includes NEXT IMAGE. These establish a gallery affordance and a four-item count, but no next action, drag gesture, autoplay, or slide transition was exercised. Preserve the counter and provide explicit controls in a new implementation without presenting an invented interaction as measured behavior.

News Release Index

Role: compact access to announcements, press information, products, and events.

The desktop section uses a narrower content region than the product matrix: 1180.81px, inset 129.6px from either side. A large NEWS RELEASE heading appears on the left, while category links form a small vertical group near the right.

Six broad linked rows follow. Each carries a date, Japanese title, and category. The row anchor uses flex layout, 8.23px top padding, and 61.71px bottom padding, producing a measured row height near 99.70px. The exact child alignment and divider styling were not included in the element sample.

Category links point to category-specific URLs such as /news?cat=information. This establishes navigation destinations; it does not establish an in-place filtering interaction.

At mobile size, the section returns to the standard 15.6px gutter. Rows grow to approximately 121–147px depending on title wrapping. The category-link group is absent from the mobile rendered link list. View All remains aligned toward the right below the entries.

Journal Track

Role: presents an extended stream of dated editorial content.

Desktop uses a vertical title area alongside a horizontal sequence of article anchors. The JOURNAL heading's measured box is 61.72px wide × 289.67px high; the nearby View All link also has a tall, narrow box. These bounds establish the vertical arrangement, but do not identify whether the source uses rotation or writing mode.

Article bounds are approximately 440.20px wide. Their x coordinates continue well beyond the viewport. Alternate articles have 90px top padding instead of bottom padding, creating a staggered rhythm within the same row.

Mobile keeps the horizontal sequence. Cards are approximately 269.09px wide, about 69% of the viewport, and their alternating inset becomes 49.92px. The section heading is horizontal above the track, and View All appears after it near the lower right.

The mobile first card starts at x = 0 and the second near x = 270.09, so the next item can be partially visible. Desktop advances and bounding widths differ slightly; do not infer a precise negative gap without the track's transform and sizing rules.

Dates and Japanese titles are documented. Article image assets and actual swipe, drag, or keyboard behavior are not. A native horizontally scrollable list is a reasonable implementation recommendation, not a verified source mechanism.

Contact and Shop Panel

Role: separates professional inquiries from customer purchases.

The footer area contains an English statement followed by two audience-specific groups:

  • FOR SALON: inquiry and information-request copy with Contact.
  • FOR CUSTOMER: official-shop copy with Online Shop and a northeast arrow.

Desktop inner text regions are approximately 334.8px wide and appear in parallel columns in the DOM. Mobile stacks the two groups inside a 351px-wide paper panel, inset approximately 19.5px from the viewport edges. Paragraphs begin at x = 40.30px, leaving approximately 20.8px of inner padding.

The mobile screenshot shows a fine divider above the customer group, compact text, and an unboxed shop link. The card has square corners and no visible elevation shadow. It sits above the blue-gray footer field.

Its scrolled appearance and the initial DOM coordinates do not describe a single static position. An overlap can be used in an adaptation, but the source pinning or scroll choreography is not established.

Role: closes the page with strong identity and a concise directory.

The wordmark returns in warm paper color over blue gray. On desktop it nearly fills the available 1357.72px inner width; on mobile it fills approximately 358.81px. The mobile visible mark is about 92px high.

The desktop directory has an unusual staircase arrangement. Four labels start at quarter-width positions:

Group Measured content x position Relative start within the inner width
Site map 41.14px 0%
Salon address 380.56px 25%
Online shop 720px 50%
Social links 1059.42px 75%

The corresponding values occupy successive horizontal rows. Thin rules extend across the inner page width while the content steps down and to the right. The result is not a conventional four-column footer with all values on one baseline.

The sitemap wraps into two lines and uses slash separators. The salon address is underlined. The shop link has a small northeast arrow. Social labels are separated by slashes. In the supplied DOM, the social anchors point to the homepage, so their external social destinations are not established.

Mobile replaces the staircase with a vertical stack: heading, value, separator, then the next group. All groups align to the 15.6px gutter. Copyright and privacy remain at opposite ends of the final line, using approximately 11–12px text.

Tokens — Motion & Interaction

Treatment Recorded value or state What is established Limitation
Header movement transform 0.4s ease-in-out A transform transition is declared Scroll trigger and full sequence were not exercised
Desktop company-logo movement transform 0.4s ease-in-out Same transition on the sampled logo anchor Initial anchor is above the viewport
Mobile company label and menu button 0.6s cubic-bezier(0.425, 0, 0, 1) Duration and easing are recorded Complete changed-property set and interaction result are not supplied
Mobile menu links transform 0.4s ease-out Transform transition on offscreen entries Menu opening was not tested
Portal heading transform 0.4s ease-out Heading has a transform transition Hover displacement or other trigger is unknown
Repeated desktop portal headings 30s linear infinite forwards endless Continuous animation is declared on duplicate headings Exact keyframes, clipping, direction, and activation are not supplied
Mobile portal Central heading sampled with no animation The sampled central heading is static Does not prove every mobile decorative animation is disabled
Salon gallery 1 / 4; mobile NEXT IMAGE Multiple-image affordance exists No verified slide change, autoplay, or gesture
Journal Horizontally extending article bounds A horizontal content track exists Input method and movement behavior untested
Hero and contact composition State-dependent positions Screenshots and DOM show the captured arrangements No verified parallax, reveal duration, or pinning formula

Many elements report only transition: all without a useful nonzero duration. That is not sufficient evidence for a specific hover effect.

The collection process waited for document load, image decoding, finite animation readiness, and sampled layout stability. Perpetual animations were temporarily paused during readiness checks and then resumed. This supports the supplied captures, but it is not an interaction recording or a guarantee that every delayed medium was present.

For a new implementation, use a restrained 400ms transform transition where appropriate, and treat the 30-second loop as an optional decorative behavior. Provide a static reduced-motion state. Do not add continuous movement merely to fill an evidentiary gap.

Surfaces

Layer Appearance Structural purpose
Main canvas Solid warm paper Unifies the opening, copy, and indexes
Hero image Narrow, sharp-edged photograph with fine outline Introduces place and color without filling the canvas
Product matrix Square cells, continuous alignment, approximately one-pixel separation Gives the product range a catalog structure
Salon portal Captured black field with white display lettering Creates a strong pause and major navigation entrance
Salon information Muted light-gray text associated with a dark panel Separates the physical-salon story from paper sections
Contact/shop panel Square paper panel with restrained division Groups the two audience pathways
Footer Blue-gray field with paper lettering and fine rules Provides a cool closing register and directory
Business capsule Dark brown, fully rounded, light text Specific emphasis for a professional audience link

The inspected design does not show a general shadow-based elevation system. Separation is achieved through large color fields, linework, image edges, and changes in composition.

Imagery

The opening photograph shows a rocky outcrop, dense vegetation, palms, and a pale blue sky. Its visual power comes from the crop: a relatively narrow vertical window cuts into an expansive beige composition. Mobile narrows that window further and allows it to continue below the fold.

The professional-service fragment shows long, smooth dark hair and skin at close range. It introduces a tactile beauty image with a different scale from the landscape. Keep the distinction between environmental photography and intimate hair imagery.

Do not impose a single crop rule on every photograph. A landscape may intentionally use cover in a slender frame, while product imagery may need a different fitting strategy. Product and journal image treatments were not visually documented here.

Observed Asset References

No direct image, video, SVG, or font-file URLs were included in the supplied original-page evidence. The following are visual references, not downloadable asset paths.

Visual Observed use Available evidence
CHIMJUN wordmark Opening and footer Desktop and mobile captures; heading container bounds
Okinawan landscape Opening vertical image Desktop and mobile captures; estimated crop bounds
Long hair / shoulder photograph Professional-service split panel Upper fragment of desktop salon capture
Open directional arrows Hero, portal, detail links, shop link Visible captures; some link padding measurements
Product media Inside or associated with product entries Product-link structure is documented; media appearance and URLs are not
Salon gallery media Four-item gallery Counter and control text; full images not documented
Journal media Article track Link geometry and titles; images not visually documented

Use supplied brand artwork and suitable image files when available. Do not invent source filenames or treat a content title as proof of a photograph's subject.

Layout & Responsive Behavior

Desktop: Large Compositions and Multiple Alignment Systems

The homepage uses several deliberate widths rather than one universal centered container:

  • 41.14px outer gutters for the opening and footer.
  • Full-width bands for major portals and the product matrix.
  • 129.6px insets for news.
  • A right-positioned 475px paragraph within the introduction.
  • A horizontal journal track beside a vertical title area.
  • Quarter-width alignment points within the footer directory.

These alignments make the page feel composed across its full width. Applying the same max-width and side padding to every section would erase much of that character.

Mobile: Recomposition, Not Uniform Shrinking
Area Desktop Observed mobile change
Navigation Horizontal hero row Small company label and menu icon; menu entries offscreen
Hero image Right-aligned, approximately 390px wide Centered vertical slit, approximately 108px wide
Hero statement Approximately 80px visible type Approximately 31px while retaining three lines
Introduction Statements and right-hand paragraph Full-width text with changed visual ordering
Product index Three columns One full-width column
Portal heading Approximately 206px Approximately 48px
News Narrower desktop container and category group Standard mobile gutter; taller wrapped rows; category group not listed
Journal Horizontal track beside vertical heading area Horizontal track beneath a horizontal heading
Contact groups Parallel columns in DOM Stacked within a 90%-width panel
Footer Staircase directory Four vertically stacked groups

Only the two stated viewports were supplied. The exact breakpoint is unknown. The Quick Start uses 48rem as a recommended breakpoint and fits the recorded values at the two inspection widths.

The first screen does not contain the whole hero at either viewport. Avoid imposing a strict 100vh section height that clips the mobile photograph or collapses the original breathing room. Also avoid deriving fixed document positions from the contact-panel snapshots; their geometry varies with capture state.

Do’s and Don’ts

Do
  • Keep the measured paper and ink pair: #eae3da and #3f342f.
  • Preserve the wordmark as artwork and allow it to dominate both the opening and the footer.
  • Pair fine display lettering with neutral grotesk text and modest utility labels.
  • Retain the hero's three-line statement and its deliberately narrow photograph.
  • Use distinct section widths: full-bleed products, inset news, offset introduction copy, and quarter-width footer alignments.
  • Keep product tiles square-cornered and convert the desktop matrix into one mobile column.
  • Preserve the journal's horizontal sequence and alternating vertical offsets.
  • Make the desktop footer step diagonally through successive ruled rows.
  • Maintain separate salon-inquiry and customer-shop pathways.
  • Mark estimated colors, inferred geometry, and new interaction behavior explicitly when implementing from this reference.
Don’t
  • Don't replace the large wordmark with an ordinary text heading in an assumed font.
  • Don't use the hero parent element's inherited 14.4px or 12.48px value as the visible headline size.
  • Don't turn every content area into a rounded card with a shadow.
  • Don't widen the mobile hero photograph to full width by default.
  • Don't convert the mobile product sequence into a compact two-column grid.
  • Don't flatten the footer into four identical desktop columns.
  • Don't promote the Swiper default blue into a brand color.
  • Don't infer video, autoplay, parallax, hover distance, or menu behavior from a static frame or transition declaration alone.
  • Don't fabricate product packaging, journal photography, or asset URLs where the evidence is absent.
  • Don't assume offscreen repeated headings should appear as duplicate accessible content.

These are recommendations for a new implementation, not verified properties of the inspected site:

  • Give the graphical wordmark an accessible name. Empty extracted heading text does not establish whether the original artwork already has an accessible alternative.
  • Expand the mobile menu's measured 24px control to a comfortable touch target, while retaining the small visible two-line icon. Use aria-expanded and connect it to the menu panel.
  • Keep closed navigation out of keyboard focus order. If implemented as a modal menu, support Escape and restore focus to the opener.
  • Provide explicit gallery buttons and keyboard access for horizontal article navigation. Do not rely solely on dragging.
  • Hide decorative repeated portal text from assistive technology and retain one meaningful link name.
  • Honor reduced-motion preferences and provide a way to stop continuous decorative movement where used.
  • Review the small mobile body text and footer contrast. Increase text sizes or adjust local foreground/background contrast where necessary without changing the wordmark's graphic role.
  • Keep an underlined or otherwise persistent distinction for address and inline links, with a visible focus indicator.
  • Validate the social-link destinations before using them in a new build; the supplied links resolve to the homepage.
  • Reserve image dimensions to prevent layout shifts, and preserve the intended crop when substituting assets.

Agent Prompt Guide

Quick Color Reference
  • Main paper: #eae3da, measured.
  • Main text and linework: #3f342f, measured.
  • Professional capsule: #484036 with paper text, measured.
  • Salon secondary text: #a6a19c, measured.
  • Portal lettering: #ffffff, measured.
  • Salon portal surface: approximately #000000, captured appearance.
  • Footer: approximately #83979c, visual estimate; use paper-colored lettering.
  • Rules: subtle ink or paper opacity, implementation recommendation.
Overall Prompt

“Create a corporate and brand homepage for an Okinawa-based haircare company, following CHIMJUN's observed visual structure. Use warm paper #eae3da, brown ink #3f342f, an oversized supplied wordmark, fine high-contrast portal lettering, and neutral grotesk body text. Build the opening around a three-line centered statement and a narrow landscape crop on the right. On mobile, stack the wordmark and statement above a slender centered photo. Continue with an offset company introduction, a three-column product matrix that becomes one column on mobile, large linked section portals, an inset news index, and a horizontal journal track with alternating offsets. Finish with a paper contact/shop panel and a muted blue-gray footer whose desktop information steps down through successive ruled rows. Keep motion restrained and distinguish verified transition values from newly designed behaviors.”

Example Component Prompts
  1. Desktop hero: “At 1440px wide, place a fine CHIMJUN wordmark near y = 50px, a small centered navigation row near y = 396px, and a three-line statement near y = 470px. Use approximately 80px statement type and a square-edged 390 × 612px landscape crop near the right edge, beginning around y = 338px. Preserve the broad empty paper field and the centered downward arrow.”
  2. Mobile hero: “At 390px wide, use approximately 15.6px content gutters, a wordmark near y = 83px, and a three-line statement around 31px. Center a landscape crop only about 108px wide beneath the statement. Let its image continue below the first screen rather than making a full-width banner.”
  3. Section portal: “Create a full-width linked portal with a large open right arrow and a thin high-contrast serif title. Match the captured salon appearance with white lettering on black. Use approximately 206px desktop title type and 48px mobile title type. Do not invent background video or a hover animation.”
  4. Product index: “Create five numbered product links and one overview tile in a square-cornered three-column matrix with approximately one-pixel divisions. At 1440px, tiles are about 479 × 530px with 25px padding. At 390px, use one full-width column with about 17px padding and tall 510px product entries. Use supplied product assets; do not assume their appearance.”
  5. Journal track: “Lay out dated Japanese article links in a horizontal sequence with alternating top and bottom spacing. Use approximately 440px-wide desktop cards and 269px-wide mobile cards. Put the desktop journal heading in a vertical side area and move it above the track on mobile. Implement accessible horizontal navigation as a new behavior.”
  6. Footer: “Use a muted blue-gray field, a nearly full-width paper-colored wordmark, small uppercase group labels, and fine horizontal rules. On desktop, start the sitemap at 0%, address at 25%, shop at 50%, and social links at 75%, placing their values in successive rows. On mobile, stack the four groups with separators and retain the slash-separated sitemap.”

Quick Start

CSS Custom Properties

This CSS is a static implementation adaptation, not recovered source code. It preserves the measured palette and typography roles, fits the two sampled viewport scales, and supplies the main layout relationships.

The footer hex, rule opacity, breakpoint, intermediate scaling, mobile photo height, native journal scrolling, and focus treatment are recommendations. Hero staging heights are fitted approximations. The source's complete scroll choreography and menu/gallery logic are not reconstructed.

Use a conventional root font size. The --u token carries the smaller source-derived unit without changing the meaning of rem elsewhere in the application. Font declarations below do not download font files. Supply the actual licensed font assets and wordmark separately; serif fallback metrics will differ.

Class anatomy: .hero contains .hero-logo, .hero-nav, .hero-statement, .hero-photo, and an optional SVG .hero-cue. A .portal contains .portal-label. Product and journal items should be semantic anchors. Each .footer-group contains one h3 and one .footer-value.

:root {
  /* Measured source colors */
  --color-paper: #eae3da;
  --color-ink: #3f342f;
  --color-capsule: #484036;
  --color-salon-text: #a6a19c;
  --color-portal-text: #fff;

  /* Screenshot approximations and recommended rule colors */
  --color-portal: #000;
  --color-footer: #83979c;
  --color-rule: rgb(63 52 47 / 22%);
  --color-footer-rule: rgb(234 227 218 / 22%);

  /* Source family names with practical fallbacks */
  --font-text: neue-haas-grotesk-text, noto-sans-cjk-jp,
    'Hiragino Kaku Gothic Pro', system-ui, sans-serif;
  --font-display: neue-haas-grotesk-display, var(--font-text);
  --font-portal: CheyraRegular, Georgia, serif;

  /* Recommended interpolation; matches 10.2857px at 1440px */
  --u: clamp(8px, 0.7142857vw, 12px);
  --gutter: calc(4 * var(--u));
  --text-body: calc(1.4 * var(--u));
  --text-link: calc(1.8 * var(--u));
  --text-section: calc(6 * var(--u));
  --text-portal: calc(20 * var(--u));
  --text-footer: calc(1.6 * var(--u));
  --text-small: calc(1.2 * var(--u));
  --tracking: 0.03em;
  --radius-pill: calc(10 * var(--u));

  /* Recorded timing values; behavior requires separate implementation */
  --motion-header: 400ms ease-in-out;
  --motion-transform: 400ms ease-out;
  --motion-mobile: 600ms cubic-bezier(0.425, 0, 0, 1);
  --motion-loop-duration: 30s;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: 1.75;
}

a { color: inherit; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

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

.brand-mark {
  display: block;
  width: 100%;
  height: auto;
}

.hero {
  position: relative;
  min-height: 111.6vw;
  padding: 50px var(--gutter);
  isolation: isolate;
}

.hero-logo {
  width: min(80vw, 100%);
  margin-inline: auto;
  aspect-ratio: 3.905;
  object-fit: contain;
}

.hero-nav {
  display: flex;
  justify-content: center;
  gap: calc(4.75 * var(--u));
  margin-top: calc(5 * var(--u));
  font-size: calc(1.3 * var(--u));
  line-height: 1;
  letter-spacing: var(--tracking);
}

.hero-nav a { text-decoration: none; }

.hero-statement {
  position: relative;
  z-index: 1;
  margin: 60px 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 5.555556vw;
  font-weight: 500;
  line-height: 1;
}

.hero-statement > span { display: block; }

.hero-photo {
  position: absolute;
  z-index: -1;
  top: 23.4722vw;
  right: var(--gutter);
  width: 27.083333vw;
  height: 42.5vw;
  margin: 0;
  border: 1px solid var(--color-ink);
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-cue {
  position: absolute;
  top: 85svh;
  left: 50%;
  width: 64px;
  height: 96px;
  transform: translateX(-50%);
}

.mobile-header { display: none; }

.text-link {
  position: relative;
  display: inline-block;
  padding-left: calc(3 * var(--u));
  font-size: var(--text-link);
  line-height: 1;
  letter-spacing: var(--tracking);
  text-decoration: none;
}

.text-link::before {
  position: absolute;
  left: 0;
  content: '→';
}

.business-link {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  padding: calc(1.6 * var(--u)) calc(2.4 * var(--u));
  border-radius: var(--radius-pill);
  background: var(--color-capsule);
  color: var(--color-paper);
  font-size: calc(1.3 * var(--u));
  line-height: 1;
  text-decoration: none;
}

.introduction {
  padding: 0 var(--gutter) calc(10 * var(--u));
}

.introduction-copy {
  width: 35%;
  margin-left: auto;
  line-height: 2;
}

.portal {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  color: var(--color-portal-text);
  background: var(--color-portal);
  text-decoration: none;
}

.portal-label {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--u));
  margin: 0;
  font-family: var(--font-portal);
  font-size: var(--text-portal);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: var(--tracking);
  white-space: nowrap;
  transition: transform var(--motion-transform);
}

.portal-label svg {
  width: calc(10 * var(--u));
  height: auto;
  flex: none;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-rule);
}

.product-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  aspect-ratio: 479.33 / 529.53;
  padding: calc(2.4 * var(--u));
  background: var(--color-paper);
  font-size: var(--text-link);
  line-height: 1;
  letter-spacing: var(--tracking);
  text-decoration: none;
}

.news {
  padding: calc(15 * var(--u)) 9vw calc(12 * var(--u));
}

/* Recommended child layout; source row anchors use flex. */
.news-row {
  display: grid;
  grid-template-columns: 8em minmax(0, 1fr) auto;
  gap: calc(2 * var(--u));
  padding: calc(0.8 * var(--u)) 0 calc(6 * var(--u));
  border-top: 1px solid var(--color-rule);
  text-decoration: none;
}

/* Native horizontal scrolling is an implementation recommendation. */
.journal-track {
  display: flex;
  gap: 1px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
}

.journal-card {
  flex: 0 0 30.57vw;
  min-width: 0;
  padding: 0 calc(6 * var(--u)) 90px;
  scroll-snap-align: start;
  text-decoration: none;
}

.journal-card:nth-child(even) {
  padding-top: 90px;
  padding-bottom: 0;
}

.contact-panel {
  width: 58vw;
  margin-inline: auto;
  padding: calc(4 * var(--u));
  color: var(--color-ink);
  background: var(--color-paper);
}

.contact-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(4 * var(--u));
}

.contact-option {
  padding-top: calc(2 * var(--u));
  border-top: 1px solid var(--color-rule);
}

.contact-option p {
  font-size: var(--text-small);
  line-height: 1.8;
}

.site-footer {
  padding: calc(7 * var(--u)) var(--gutter) calc(3.5 * var(--u));
  color: var(--color-paper);
  background: var(--color-footer);
}

.footer-logo { margin-bottom: calc(7.2 * var(--u)); }

.footer-directory {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.footer-group { display: contents; }

.footer-group h3 {
  grid-row: 1;
  margin: 0 0 calc(2.4 * var(--u));
  font-size: var(--text-small);
  font-weight: 400;
  line-height: 1;
}

.footer-value {
  grid-column: 1 / -1;
  min-height: calc(7.2 * var(--u));
  padding-block: calc(0.8 * var(--u));
  border-top: 1px solid var(--color-footer-rule);
  font-size: var(--text-footer);
  line-height: 1.3;
  letter-spacing: var(--tracking);
}

.footer-value nav { max-width: 24rem; }

.footer-group:nth-child(1) h3 { grid-column: 1; }
.footer-group:nth-child(2) h3 { grid-column: 2; margin-top: calc(1.2 * var(--u)); }
.footer-group:nth-child(3) h3 { grid-column: 3; margin-top: calc(2.4 * var(--u)); }
.footer-group:nth-child(4) h3 { grid-column: 4; margin-top: calc(3.6 * var(--u)); }

.footer-group:nth-child(1) .footer-value { grid-row: 2; }
.footer-group:nth-child(2) .footer-value { grid-row: 3; padding-left: 25%; }
.footer-group:nth-child(3) .footer-value { grid-row: 4; padding-left: 50%; }
.footer-group:nth-child(4) .footer-value { grid-row: 5; padding-left: 75%; }

.footer-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: calc(11 * var(--u));
  font-size: var(--text-small);
  line-height: 1;
}

/* Recommended breakpoint, not a recovered source media query. */
@media (max-width: 48rem) {
  :root {
    --u: clamp(9px, 2.6666667vw, 11.2px);
    --gutter: calc(1.5 * var(--u));
    --text-body: calc(1.2 * var(--u));
    --text-link: calc(1.6 * var(--u));
    --text-section: calc(3.5 * var(--u));
    --text-portal: calc(4.6 * var(--u));
    --text-footer: calc(1.4 * var(--u));
    --text-small: calc(1.1 * var(--u));
  }

  .mobile-header {
    position: fixed;
    z-index: 50;
    inset: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(0.6 * var(--u)) var(--u);
  }

  /* Enlarged target is recommended; observed button is 24px. */
  .mobile-header button {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
  }

  .hero {
    min-height: 123.2svh;
    padding: calc(8 * var(--u)) var(--gutter) calc(3 * var(--u));
  }

  .hero-logo { width: 100%; }
  .hero-nav { display: none; }

  .hero-statement {
    margin-top: calc(3 * var(--u));
    font-size: 8vw;
  }

  .hero-photo {
    position: relative;
    z-index: 0;
    inset: auto;
    width: 27.7vw;
    height: 72svh;
    margin: calc(3.6 * var(--u)) auto 0;
  }

  /* Source mobile arrow position was not visible in the capture. */
  .hero-cue { display: none; }

  .text-link { padding-left: calc(2.4 * var(--u)); }
  .introduction { padding-bottom: calc(5 * var(--u)); }
  .introduction-copy { width: 100%; }

  .portal { aspect-ratio: 390 / 452.39; }
  .portal-label { gap: calc(1.4 * var(--u)); }
  .portal-label svg { width: calc(3 * var(--u)); }

  .product-grid { grid-template-columns: 1fr; }
  .product-tile {
    aspect-ratio: 390 / 510.30;
    padding: calc(1.6 * var(--u));
  }

  .news { padding: calc(7.2 * var(--u)) var(--gutter); }
  .news-row {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-bottom: calc(4.8 * var(--u));
  }
  .news-title { grid-column: 1 / -1; grid-row: 2; }

  .journal-card {
    flex-basis: 69vw;
    padding: 0 calc(2 * var(--u)) calc(4.8 * var(--u));
  }
  .journal-card:nth-child(even) {
    padding-top: calc(4.8 * var(--u));
    padding-bottom: 0;
  }

  .contact-panel { width: 90vw; padding: calc(2 * var(--u)); }
  .contact-options { grid-template-columns: 1fr; gap: calc(2 * var(--u)); }

  .footer-logo { margin-bottom: calc(3.5 * var(--u)); }
  .footer-directory { display: block; }
  .footer-group {
    display: block;
    padding-block: calc(2 * var(--u));
    border-bottom: 1px solid var(--color-footer-rule);
  }
  .footer-group:nth-child(n) h3 {
    margin: 0 0 calc(1.2 * var(--u));
  }
  .footer-group:nth-child(n) .footer-value {
    min-height: 0;
    padding: 0;
    border: 0;
  }
  .footer-meta { margin-top: calc(6 * var(--u)); }
}

/* Recommended keyboard and reduced-motion support. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .hero *,
  .portal *,
  .mobile-header * {
    animation: none !important;
    transition: none !important;
  }
  .journal-track { scroll-behavior: auto; }
}

The optional mobile arrow omission above is a conservative adaptation, not proof that the original has no mobile arrow. Likewise, the black portal background reproduces the captured salon appearance; it should not be applied to undocumented media states as a factual reconstruction.

Tailwind v4 Token Mapping

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

@theme inline {
  --color-paper: #eae3da;
  --color-ink: #3f342f;
  --color-capsule: #484036;
  --color-salon-text: #a6a19c;
  --color-coastal: #83979c; /* Visual approximation */

  --font-brand-text: var(--font-text);
  --font-brand-display: var(--font-display);
  --font-brand-portal: var(--font-portal);

  --text-brand-body: var(--text-body);
  --text-brand-link: var(--text-link);
  --text-brand-section: var(--text-section);
  --text-brand-portal: var(--text-portal);

  --spacing-unit: var(--u);
  --spacing-page: var(--gutter);
  --radius-business: var(--radius-pill);
}

Sources & Evidence

  • Inspected original and final page: https://chimjun.jp/. The supplied browser record reports HTTP 200, the title CHIMJUN, and no URL change.
  • Capture date: September 29, 2026. Evidence retrieval timestamp: 2026-09-29T12:56:03.981Z. Both viewport records are included in that supplied inspection bundle; separate per-image timestamps were not supplied.
  • Desktop evidence: 1440 × 1000 CSS pixels. Original-page captures show the opening composition, the salon portal with neighboring section fragments, and the footer. DOM/computed-style evidence covers the homepage sections, links, element bounds, fonts, colors, and selected transitions.
  • Mobile evidence: 390 × 844 CSS pixels. Original-page captures show the opening and footer. DOM measurements document the stacked product sequence, changed introduction order, news dimensions, and horizontal journal layout.
  • Interaction evidence: initial loading and scrolling were part of capture collection. Declared CSS transitions, repeated-heading animation values, link destinations, gallery text, and offscreen menu geometry were supplied. Menu opening, hovering, gallery advancement, article dragging, and destination-page behavior were not exercised in the provided record.
  • Inspection limitations: no direct asset URLs, complete stylesheet, animation keyframes, font-file verification, accessibility tree, or device-pixel-ratio record was supplied. Intermediate viewport behavior and exact breakpoints remain unknown. No additional browsing or file access was used for this reference.

This document describes the current homepage represented by the supplied inspection. Measured values, screenshot estimates, and implementation recommendations remain separate throughout; the Quick Start is a reusable adaptation of that evidence.

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

← デザイン一覧に戻る