MANERU

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

養老ミートオンラインストアのWebサイトプレビュー

DESIGN REFERENCE

養老ミートオンラインストア

ブランドサイトECサイト食品精肉和風イラスト明朝体縦書き暖色余白ギフトレスポンシブ

軍配を持つ人物の温かなイラスト、縦書きの明朝体、朱色のアクセントが印象的な精肉ECサイト。広い余白で商品、贈答品、読み物、店舗情報をつなぐ構成。

オリジナルサイトを見る
ジャンル
食品・飲料
元の業種
食品・精肉販売
デザイン分析日
2026/10/5

design.md

ダウンロード

Yoro Meat Online Store — Style Reference

A generous Japanese butcher’s storefront, combining illustrated ceremony, quiet serif typography, and vivid orange ink.

Website: Yoro Meat Online Store Original URL: https://www.hidagyu-yoromeat-honten.com/ Final URL: https://www.hidagyu-yoromeat-honten.com/ Response: HTTP 200; original and final URLs are identical. Theme: light content surfaces, a warm illustrated opening, and a saturated orange footer. Inspected: supplied capture record dated October 5, 2026, 06:06:32 JST / October 4, 2026, 21:06:32.317 UTC. Viewports: desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels. Scope: the current store homepage, including its illustrated opening, whole-animal promotion, ranking, product lineup, gifts, journal, news, store links, newsletter, footer, and shipping notice. Visual captures cover the desktop opening, gift transition, and footer, plus the mobile opening and lower footer. Other sections are documented through supplied rendered DOM measurements and text. Linked pages and checkout were not inspected.

Yoro Meat gives a commercial catalog the character of an illustrated Japanese shop sign. A large figure holding a ceremonial fan fills the opening composition. Paper-like grain, orange floral clothing, muted plum fabric, pale mountains, and floating slices of meat create a warm, humorous identity. A red bull emblem and calligraphic wordmark anchor the interface.

The shopping content uses a quieter register: dark brown serif text, small English captions, vertical Japanese titles, plain product links, and unusually generous gaps between sections. Gift packaging becomes an editorial spread with two tall photographs surrounding a narrow central message. The footer then becomes a broad orange field containing navigation, service links, and a large black brand mark.

This is a full ecommerce homepage with editorial and store information. Its identity depends on the relationship between expressive artwork and restrained catalog structure. Product discovery, account access, cart access, prices, delivery information, and gift links remain part of that structure.

全文を表示閉じる

Yoro Meat Online Store — Style Reference

A generous Japanese butcher’s storefront, combining illustrated ceremony, quiet serif typography, and vivid orange ink.

Website: Yoro Meat Online Store Original URL: https://www.hidagyu-yoromeat-honten.com/ Final URL: https://www.hidagyu-yoromeat-honten.com/ Response: HTTP 200; original and final URLs are identical. Theme: light content surfaces, a warm illustrated opening, and a saturated orange footer. Inspected: supplied capture record dated October 5, 2026, 06:06:32 JST / October 4, 2026, 21:06:32.317 UTC. Viewports: desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels. Scope: the current store homepage, including its illustrated opening, whole-animal promotion, ranking, product lineup, gifts, journal, news, store links, newsletter, footer, and shipping notice. Visual captures cover the desktop opening, gift transition, and footer, plus the mobile opening and lower footer. Other sections are documented through supplied rendered DOM measurements and text. Linked pages and checkout were not inspected.

Yoro Meat gives a commercial catalog the character of an illustrated Japanese shop sign. A large figure holding a ceremonial fan fills the opening composition. Paper-like grain, orange floral clothing, muted plum fabric, pale mountains, and floating slices of meat create a warm, humorous identity. A red bull emblem and calligraphic wordmark anchor the interface.

The shopping content uses a quieter register: dark brown serif text, small English captions, vertical Japanese titles, plain product links, and unusually generous gaps between sections. Gift packaging becomes an editorial spread with two tall photographs surrounding a narrow central message. The footer then becomes a broad orange field containing navigation, service links, and a large black brand mark.

This is a full ecommerce homepage with editorial and store information. Its identity depends on the relationship between expressive artwork and restrained catalog structure. Product discovery, account access, cart access, prices, delivery information, and gift links remain part of that structure.

How to Read This Reference

  • Measured means a value appears in the supplied computed styles or element rectangles. Measurements are CSS pixels unless stated otherwise.
  • Derived means arithmetic applied to those measurements, such as the gap between consecutive product positions.
  • Estimated means a visual approximation from an original-page capture. Estimated colors were not sampled with a pixel tool.
  • Recommended means a proposed implementation choice. Breakpoints, accessible interaction patterns, and unmeasured media ratios in the Quick Start belong to this category.
  • Token names are descriptive aliases. The only supplied source custom property is --vh, recorded as 10px on desktop and 8.44px on mobile.
  • Computed font-family stacks are available, but font files and actual glyph fallback resolution were not independently checked.
  • Element bounds alone do not establish visibility, clipping, or interaction state. This is particularly important for the overlapping mobile product panels.

Tokens — Colors

Default Palette
Name Value Suggested token Evidence and role
Main Ink #231815 --color-ink Measured: body and most content text, from rgb(35, 24, 21)
Header Brown #522e03 --color-header-ink Measured: desktop vertical navigation, from rgb(82, 46, 3)
Active Ivory #f7f3eb --color-active Measured: selected desktop beef category background
White #ffffff --color-white Measured: desktop English masthead and primary CTA text; also visually present in the catalog region
Black #000000 --color-black Measured: mobile English masthead, selected category text, newsletter button text, and some news titles
Hero Cream approximately #ffe6bc --color-hero Estimated: the illustrated opening’s pale peach paper; texture creates many local variations
Gift Paper approximately #f7f1e1 --color-paper Estimated: the cream field behind the gift composition
Action Vermilion approximately #ef3300 --color-action Estimated: primary pill, menu disc, and small link dots
Footer Orange approximately #df4000 --color-footer Estimated: the broad orange footer, visually deeper than the hero action color
Plum Fabric approximately #ae6675 --color-art-plum Estimated, artwork only: fan and headwear
Mountain Ochre approximately #cfc16e --color-art-ochre Estimated, artwork only: layered hills and related illustration accents
Dark Wash rgba(0, 0, 0, 0.1) --color-wash Measured: newsletter registration button background

The measured body and footer backgrounds are transparent. Their visible fills therefore cannot be attributed to those elements from this record. Use the estimated surface colors as practical approximations, not recovered source declarations.

The palette has distinct jobs: orange identifies actions and the final brand field; dark brown carries reading; cream supports imagery and gift presentation. Plum and ochre belong chiefly to the illustration. They do not establish additional interface status colors.

Theme Presets

No theme selector or alternate color theme is evidenced. White catalog areas, cream gift areas, and the orange footer are different page surfaces within the same experience. The desktop-to-mobile masthead text-color change is an observed responsive/state difference, not evidence of a theme system.

Tokens — Typography

Japanese Serif — Commerce and Navigation

Measured family stack: 'Noto Serif JP', YuMincho, '游明朝', 'Times New Roman', 'Hiragino Mincho ProN', 'HGS明朝B', 'ＭＳ Ｐ明朝', serif.

Most content uses weight 500; navigation, major Japanese section titles, and primary actions commonly use 600. Serif strokes and loose tracking give the catalog a printed, deliberate rhythm. Product titles remain modest in size, allowing imagery and spacing to carry the hierarchy.

Use vertical writing selectively for section titles, navigation, promotional copy, and desktop footer groups. The product descriptions and prices remain horizontally readable.

Latin Serif — Captions and Editorial Labels

Measured family stack: CarrigDC, YuMincho, '游明朝', 'Times New Roman', 'Hiragino Mincho ProN', 'HGS明朝B', 'ＭＳ Ｐ明朝', serif.

CarrigDC is declared for the small English masthead, uppercase section captions, package labels, journal headings, dates, and social links. These roles span very small tracked capitals and larger editorial words. A production implementation needs an available, appropriately licensed font resource; this reference does not supply a font URL.

Brush Lettering and Brand Artwork

The hero slogan, 目利きの力で、軍配があがる。, has irregular brush-like strokes visible in the captures. Its font or asset implementation is not supplied. The bull emblem, Japanese wordmark, and SINCE 1972 lockup also have their own drawn character. Preserve these as authorized artwork when available; do not assign them an invented font family.

Type Scale
Role Desktop measurement Mobile measurement Weight / tracking
Root element 10px 16.64px Root sizing only; not the body text size
Body 16px / 16px 13.52px / 13.52px 500; normal tracking
English masthead 10px / 10px 9.36px / 18.2px 700; desktop 2px, mobile 0.936px tracking
Desktop navigation 15px / 42px Labels absent from the mobile opening 600; 3px tracking
Primary CTA label 24px / 15px 14.56px / 24.96px 600; 0.1em tracking
Main Japanese section title 30px / 49.5px 18.72px / 28.08px 600; 0.3em tracking
English section caption 14px / 14px 10.4px / 10.4px 500; 0.16em tracking
Product title 16px / 26.08px 12.48px / 20.3424px 500; desktop 3.2px, mobile normal tracking
Price paragraph 14px / 14px approximately 11.49px / 11.49px 500; desktop 0.7px, mobile normal tracking
Category label 14px / 36px 12.48px / 52px 500; desktop 1.4px, mobile 2.496px tracking
Text action 24px / 24px Not supplied 500; normal tracking
Gift supporting copy 18px / 32.04px Not supplied 500; 5.4px tracking
Package side label 16px / 16px Not supplied CarrigDC, 400; 1.6px tracking
Large journal label 42px / 42px Not supplied CarrigDC, 400
New Journal label 40px / 50px Not supplied CarrigDC, 400; 2px tracking
News title 18px / 28px Not supplied 500; 1.8px tracking
Social link 32px / 36px Not supplied CarrigDC, 400

The price values above describe the sampled paragraph, not every nested numeral span. Likewise, the CTA’s measured inline label is smaller than its painted pill. Do not calculate either component’s full height solely from its text line-height.

The source’s root size changes substantially across the two viewports while body text becomes smaller. Copying desktop rem values into a conventional 16px-root project would therefore distort the design. The Quick Start uses explicit semantic sizes instead.

Tokens — Spacing & Shapes

Density: spacious at the page level, compact within utility controls and product metadata.

Responsive Unit

The supplied --vh values equal one hundredth of each viewport height. No declaration showing how the site consumes that variable is included.

Many mobile measurements are multiples of 1.04, including 26px, 31.2px, and 18.72px. This is consistent with scaling a 375px design to 390px, but the original formula and media-query boundaries are not provided. Treat that relationship as an observation, not a recovered CSS rule.

Spacing Scale
Use Desktop Mobile Status
Header logo left inset 70px 24.95px Measured
Header logo top inset 46px 26px Measured
Ranking outer inset 96px at first item 41.59px Measured
Pickup category left inset 70px 26px inner text inset Measured
Desktop sidebar width 236px Full-width 390px category rows Measured
Sidebar-to-products gap 64px Sidebar relationship removed Derived from desktop positions
Pickup product column gap 30px approximately 15.59px Derived from title/card positions
Pickup product row gap 80px Items share one horizontal row Derived from desktop link bounds
Pickup section padding 250px top, 300px bottom 156px top and bottom Measured
Title-to-English-caption gap 38px approximately 19.23px Derived from section heading bounds
Journal section top padding 240px Not supplied Measured
Footer horizontal content inset 120px approximately 41px in lower footer Desktop measured; mobile estimated
Footer padding 280px top, 158px bottom Not supplied Measured desktop

This spacing system includes several distinct alignments. The header, ranking, product lineup, gift spread, and footer do not all sit on one identical left edge.

Border Radius
Element Treatment Evidence
Product and editorial content Square, unboxed structure Sampled links have 0px radius; broad DOM geometry supports open layouts
Primary CTA Full pill Estimated desktop size approximately 257 × 80px; mobile approximately 166 × 52px
Menu control Circular orange disc with pale rim Estimated diameter approximately 54px desktop and 42px mobile
Hero scroll control Tall capsule Measured link bounds 55 × 74px; rounded surface visible
Newsletter input and submit Rectangular Screenshot and measured submit radius 0px
Shipping notice Small rounded rectangle Estimated radius approximately 10px
Layout Measurements
Element Desktop 1440 × 1000 Mobile 390 × 844
Document height 11423.45px 10086.86px
Header logo link 96 × 152px at (70, 46) 47.83 × 76.39px at (24.95, 26)
Cart icon link 20 × 22.03px 16 × 18.14px
Account icon link 20 × 22.55px 16 × 18.14px
Hero CTA text 132 × 35px at (646.5, 894.5) 80.09 × 21px at (154.95, 674.92)
Ranking item starts x = 96, 520, 944px, same y x = 41.59px, successive vertical positions
Pickup title columns x = 370, 700, 1030px; 300px wide Product links 156px wide, beginning at x = 26, 197.59, 369.19px
Gift spread 1260px between outer bounds x = 90–1350px Geometry not supplied
Gift composition 410px left link, 440px center, 410px right link; 538px section height Not visually captured
Footer Starts at document y = 10073.77px; height 1349.69px Lower portion visually captured; complete footer bounds not supplied

Document coordinates explain the unusually long pacing. The desktop ranking starts at y = 2606px, well beyond the opening viewport. The first illustrated screen should not be mistaken for the entire introduction.

Components

Floating Brand and Utility Header

Anatomy: bull-and-wordmark home link at left; small centered English masthead; circular menu control at right; account and cart utilities; six vertical desktop navigation links.

At desktop width, the home link occupies 96 × 152px. The English masthead is only 10px, white over the illustration. Navigation begins around x = 1055px, with 42px column widths and brown text. The menu label forms a separate vertical column below the orange disc.

The gift capture retains the logo, account, cart, and menu controls near the viewport top. The footer capture does not show that header. This supports a persistent content state, but the source positioning method and hide threshold are not supplied.

On mobile, the logo becomes approximately half size, the masthead turns black, and the vertical navigation labels disappear. The menu remains at the upper right, followed by cart and account icons in a vertical stack. The open menu was not captured.

Illustrated Opening

Anatomy: full-bleed textured scene, a centrally dominant ceremonial figure, a brush-lettered slogan, brand overlay, primary category link, and a desktop scroll capsule.

The desktop composition crops tightly into the figure: the hat extends beyond the top edge, the face occupies the center, the fan fills much of the left, and the slogan sits in the open right-hand field. The orange pill is centered near the bottom of the viewport.

At 390px, the slogan moves above the figure. The whole hat, more of the torso, the hand, and a large cut of meat near the bottom become visible. The CTA appears around y = 660px, across the figure’s lower torso. This is substantial compositional adaptation, not a uniformly scaled desktop screenshot.

商品を探す links to /category/. The desktop capsule links to /#banduke. Its scrolling behavior was not exercised. The internal image layers and asset source URLs are unknown.

Whole-Animal Promotion

Anatomy: vertical promotional label, adjacent short title, narrow multiline copy, and a second orange action.

The DOM identifies WEB限定, 一頭買いセット, explanatory copy, and 売場に行く, which links to /yokozunaset/. The desktop copy rectangle is 380 × 230px, with 16px text, 38px line-height, and 1.6px tracking. The mobile copy region becomes approximately 215 × 198px, using 12.48px text and 23.92px line-height.

Its tall, narrow label and copy bounds are consistent with a vertical editorial arrangement. No supplied capture directly shows this section, so its background illustration and image placement are not specified here.

Bilingual Section Heading

Anatomy: compact vertical Japanese title block, generous clearance, and a small horizontal English caption.

The pattern recurs in ranking, pickup, gifts, journal, news, and stores. Four-character titles occupy approximately 99 × 78px on desktop, while the two-character gift title occupies 49.5 × 78px. Desktop Japanese type is 30px, weight 600, with 9px tracking. English captions sit 38px below the measured title box.

For implementation, short vertical columns can be represented by separate spans inside a writing-mode: vertical-rl heading. That markup is a recommendation; the supplied evidence does not include the original writing-mode declaration.

Ranking Product Entry

Anatomy: large upper media allocation, horizontally readable product title below, and a separate tax-inclusive price line.

Three entries sit across the desktop page. Their title regions begin 88px inside each measured link’s left edge. On mobile, all three entries stack vertically within approximately 307px-wide links; title regions are inset by approximately 66.55px.

The media-to-title allocation is large: desktop titles begin 427px below their link’s top; the first mobile title begins approximately 325.52px below. These are measured offsets, not measured image heights. Exact media ratios and ranking decorations are absent from the supplied captures.

Keep the product title and price in one linked content group. The DOM supports detail-page navigation, not an observed add-to-cart interaction within these entries.

Pickup Navigation and Product Collection

Desktop anatomy: a 236px category sidebar, a 64px separation, and a product area with three 300px title columns. Six beef entries occupy two rows in the recorded state.

Category rows are 36px high. The selected beef row has a measured #f7f3eb background. Other choices include pork, processed meat, seasonings, and named brands. Product titles use spacious 0.2em tracking; prices sit below with their own vertical clearance.

Mobile anatomy: 52px category rows and 156px product links arranged horizontally at approximately 15.6px intervals. The third product begins at x ≈ 369px, and later products extend well outside the viewport.

The mobile extraction contains several category panels whose child rectangles overlap later category rows and extend beyond the section’s measured bounds. This may involve clipping or disclosure state. It does not establish that every extracted product is simultaneously visible. Horizontal arrangement is verified; swipe handling, snapping, expansion behavior, and autoplay are not.

Text Link with Accent Dot

Anatomy: plain serif action text followed by a small orange dot, without a filled container.

Examples include 牛肉一覧を見る and 一覧を見る. Desktop text is 24px, weight 500. The gift link measures 153px overall while its text measures 120px; the beef link measures 201px overall with 168px of text. Both leave 33px for the trailing decoration and separation.

Use this quieter action style after product and editorial sections. The filled pill is reserved for stronger opening actions.

Gift Packaging Spread

Anatomy: tall package photograph at each side; vertical English labels on the outside edges; a centered vertical Japanese heading, English caption, two-line description, and dot link; oversized pale GIFT lettering behind the middle.

The outer links are each 410px wide. A 36px caption allocation leaves approximately 374px for each photograph. The center spans 440px. The left label starts at the top, while the right label is positioned lower along its outside edge.

The photographed red box uses the bull logo; the pale box carries dark Japanese lettering. Both rest at an angle on neutral backgrounds with natural shadows. The photography supplies depth while the surrounding composition stays flat.

The left and right links target /gift/#keshobako and /gift/#kiribako. The central action targets /gift/. Mobile arrangement is unverified.

Journal Feature and Recent Articles

Anatomy from desktop DOM: centered section heading, a large featured article area, a vertical English side label, date metadata, and a lower list of recent articles.

The featured link spans 1118px from x = 202px, beside a 42px-wide Pick Up Journal label at x = 120px. Below it, a 160px editorial heading column sits to the left of three article rows approximately 854 × 173px each. Dates use CarrigDC at 14px with 0.7px tracking.

This is a distinct editorial layout within the shop. The article image subjects are not visible in the supplied captures and should not be invented from their titles.

The desktop news area contains three roughly 310px-wide links. Each headline has a tall, narrow 56 × 294px rectangle, consistent with vertical Japanese text, with a horizontal date below. The recorded titles concern business hours and seasonal delivery or store schedules.

The store area contains five 180px-wide linked items, starting at x = 120, 375, 630, 885, 1140px. Labels use 16px / 29.76px type. The approximately 190px allocation above each label indicates media space, but the actual images are not included in the visible captures.

These modules continue the restrained type hierarchy and wide spacing. Their mobile geometry is not supplied.

Anatomy: vertical newsletter heading, short explanatory copy, rectangular email field, rectangular submit button, and a separate social column.

The desktop newsletter section occupies 632px. The visible input is approximately 360 × 70px; its adjacent submit button is measured at 140 × 70px. The button uses a translucent black wash over the footer color, square corners, and 16px serif text.

Social links are written out in CarrigDC at 32px: Instagram, Twitter, and Facebook. They retain the labels shown by the current page. Form submission, validation, and success states were not tested.

Anatomy: newsletter/social region, thin horizontal divider, vertical shopping and editorial navigation, service links, a large black brand lockup, copyright, and a page-top control.

Desktop content spans 1200px between 120px side insets. Navigation reads in narrow vertical columns, while service links and copyright remain horizontal. A gourd-like outline with an upward arrow accompanies PAGE TOP near the right edge. The black logo occupies approximately 440px of width near the lower right.

The mobile lower footer uses horizontal, stacked navigation text with a left inset around 41px. Service links follow after a large gap. The brand lockup becomes centered at approximately 288px wide, with copyright centered below. The page-top control is not visible in that mobile crop; its mobile behavior is unknown.

Shipping Notice

A small cream notice is visible at the lower left of the desktop gift capture. Its approximate bounds are 312 × 103px, inset roughly 18px from the viewport’s left and bottom edges.

A vertical 出荷状況 label sits to the left of a fine divider, with a compact delivery message on the right and a small circular close affordance near the upper-right corner. The message describes the next possible shipment based on an order cutoff. Treat its date as live operational content, not fixed design copy.

The notice is not visible in the supplied opening and mobile captures. Its appearance timing, persistence, and dismissal behavior are unverified.

Tokens — Motion & Interaction

Measured Transition Declarations
Element Supplied declaration What it establishes
Header opacity 0.3s ease-out An opacity transition is configured; its trigger was not captured
English masthead color 0.5s, opacity 0.3s Color and opacity can transition; no full state sequence was supplied
Desktop navigation color 0.2s cubic-bezier(0.22, 1, 0.36, 1) Brief eased color feedback is configured
Category links background-color 0.3s Category background changes can transition
Text-action label color 0.3s ease-out The plain text action has an eased color transition
Newsletter submit opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1) Opacity feedback is configured
Social and some footer links color 0.2s cubic-bezier(0.22, 1, 0.36, 1) Consistent short color feedback

These declarations are stronger evidence than a static screenshot, but they do not prove a particular hover color, click result, or scroll threshold. Entries recorded only as transition: all provide no usable duration in this evidence.

Observed States and Limits

The capture process waited for document load, visible image decoding, finite animation readiness, and sampled layout/text stability. It included at least five seconds of initial observation. Perpetual animations were temporarily paused for readiness checks and resumed afterward.

The supplied artifacts are still images and computed-style snapshots, not a motion recording. No hero animation duration, blinking sequence, floating-meat movement, parallax, reveal choreography, or carousel behavior is established. Most sampled text elements report animation: none; that does not exclude animation on unmeasured image layers, wrappers, or pseudo-elements.

Scrolling produced opening, middle, and footer views. No menu opening, category activation, horizontal drag, product purchase, form submission, or shipping-notice dismissal was supplied. Retain the measured short transitions in an adaptation; treat additional motion as a new design decision.

Surfaces

Surface Appearance Structural purpose
Opening scene Textured pale peach with layered illustration Establishes the store’s character
Catalog region White or very pale neutral field Gives product names and prices reading clarity
Selected category Measured ivory #f7f3eb Marks the recorded desktop category state
Gift region Cream field reached through a soft light transition Frames packaging as an editorial feature
Package photographs Neutral photographic backgrounds with real shadows Makes the objects tangible without UI elevation
Footer Flat saturated orange with dark text and logo Creates a strong final brand field
Newsletter controls Fine outline input and dark translucent submit fill Provides functional contrast within the footer
Shipping notice Pale cream panel with warm edge and rounded corners Separates operational information from page content

The visible system does not rely on repeated elevated cards. Large color fields, photography, whitespace, writing direction, and small accent dots provide most of the organization.

Imagery

The opening illustration is the primary identity asset. The figure resembles a sumo referee holding a ceremonial fan, connecting directly to the homepage’s ranking vocabulary and the slogan’s reference to a raised fan. This describes the visible motif, not the identity of a real person.

The illustration combines softly modeled facial features with visibly textured areas of clothing and landscape. Orange floral fabric, plum headwear, olive cords, rolling ochre hills, and floating marbled-meat shapes belong to the same warm visual world. The grain should remain visible at the intended display size without becoming pixelated.

Photography has a separate role. The gift boxes are shown realistically on pale neutral grounds with directional shadows. Preserve accurate package color, printed lettering, and object proportions. The evidence does not support applying the hero’s grain treatment to every photograph.

Observed Asset References

No original image src URLs, filenames, or intrinsic dimensions are included in the supplied evidence. The references below identify visible assets and their placement only.

Asset Visible characteristics Placement / implementation guidance
Primary illustration Ceremonial figure, fan, floral robe, hills, floating meat Full-bleed opening; requires separate desktop/mobile composition decisions
Header brand lockup Vermilion bull, dark Japanese wordmark, small founding-year lettering Tall, narrow home-link footprint
Footer brand lockup Black bull and horizontal wordmark Large desktop lower-right placement; centered mobile placement
Hero slogan Two lines of irregular brush lettering Right of the desktop figure; above the mobile figure
Red gift package Angled red rectangular box with bull emblem Left side of desktop gift spread
Pale gift package Angled light-colored box with Japanese printing Right side of desktop gift spread
Utility symbols Fine brown account and basket outlines; white menu strokes Small header controls; no icon-library identity verified
Page-top symbol Gourd-like outline with upward arrow Desktop footer utility

Use authorized originals when available. For new artwork, preserve the composition, material warmth, and balance of detail without treating the original identity assets as interchangeable stock decoration.

Layout & Responsive Behavior

Desktop Structure

The page moves through a large illustrated introduction and promotion, three ranking entries, a sidebar-plus-products collection, a symmetrical gift spread, an editorial journal, vertically arranged news, five store links, and a substantial footer.

Several measured section separations reach 200–300px. The gift screenshot includes a broad quiet interval between the product-list action and the package photographs. Preserve this deliberate pacing when space permits.

Verified Mobile Changes
Feature Desktop Mobile
Header logo 96px wide Approximately 47.83px wide
Navigation Six visible vertical links plus menu label Text navigation absent from the opening
Utilities Horizontal placement near upper-right corner Cart and account stacked below menu
English masthead White, 10px, 2px tracking Black, 9.36px, 0.936px tracking
Hero composition Tight central portrait crop; slogan at right More complete figure; slogan above
Ranking Three entries across Three entries stacked vertically
Pickup collection Three columns and two recorded rows 156px-wide items extending horizontally
Product typography 16px, widely tracked 12.48px, normal tracking
Footer navigation Vertical columns Horizontal text in a vertical list
Footer identity Large lower-right logo Smaller centered logo

The mobile product layout is not a simple two-column grid: successive cards continue beyond the right edge at the same vertical position. A native horizontal scroller is a reasonable adaptation, but the original scrolling mechanism was not tested.

Mobile gift, journal, news, and store layout cannot be fully reconstructed from the provided element subset and endpoint captures. The text extraction confirms their content exists; it does not establish each section’s visual arrangement.

Choose a breakpoint based on when vertical navigation and the product sidebar stop fitting. The Quick Start uses 1024px as a proposed breakpoint, not a measured source value. Use mobile-specific artwork framing, preserve useful tap targets, and keep the product rail’s overflow local to its component.

Do not hardcode the measured full document heights. They describe this content and state at inspection time. Prices, titles, article counts, shipping notices, and font availability can change the final height.

Do’s and Don’ts

Do
  • Let the ceremonial illustration supply the opening’s scale and personality.
  • Preserve the measured dark brown text and ivory selected-category color.
  • Use orange consistently for strong actions, small navigation accents, and the footer field.
  • Combine Japanese serif text with the declared Latin editorial stack where the font is available.
  • Retain vertical writing for selected desktop navigation and title roles.
  • Keep product names, units, prices, and tax notes legible as a connected group.
  • Preserve the substantial desktop spacing between commercial and editorial sections.
  • Give the gift photographs equal visual importance around the central copy.
  • Art-direct the mobile opening independently, retaining the face, hat, fan, and primary action.
  • Keep visible source measurements separate from proposed interaction behavior.
Don’t
  • Don’t reduce the homepage to a single campaign screen; it includes a catalog, editorial content, news, and store access.
  • Don’t replace the illustration with a generic meat photograph and expect the identity to survive.
  • Don’t put every content item inside a rounded, shadowed card.
  • Don’t replace all serif text with a geometric sans-serif.
  • Don’t make the small English masthead behave like an oversized marketing headline.
  • Don’t scale the desktop hero uniformly into the mobile viewport.
  • Don’t turn the measured mobile product rail into a two-column grid by assumption.
  • Don’t interpret every mobile DOM rectangle as simultaneously visible content.
  • Don’t invent parallax, autoplay, menu transitions, or hover endpoints from static captures.
  • Don’t treat estimated orange and cream values as recovered source tokens.
  • Don’t reuse shipping dates or current prices as permanent interface constants.

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

  • Give menu, cart, account, shipping close, and page-top controls explicit accessible names. Expand small visible icons into approximately 44px touch targets.
  • Implement menu opening with an explicit expanded state, predictable focus movement, Escape handling, and focus return.
  • Use buttons and state attributes for in-place category switching. If panels behave as disclosures on mobile, expose their expanded state and relationship to the controlled region.
  • Keep horizontal product rails keyboard-accessible. Provide a visible continuation cue and avoid requiring drag as the only navigation method.
  • Provide a text equivalent for meaningful brush-lettered copy. Hide purely decorative meat shapes and landscape layers from assistive technology.
  • Review the small mobile product and price sizes under text zoom. A readability-focused adaptation may increase them beyond the measured values.
  • Test the final orange color against white CTA labels and dark footer text. Estimated screenshot colors are insufficient for a contrast guarantee.
  • Give newsletter fields persistent labels, appropriate email semantics, and explicit validation and completion messages.
  • Honor reduced-motion preferences if adding illustration or scroll animation. Essential content should be available without reveal timing.
  • Load appropriately sized responsive artwork and reserve media dimensions to limit layout shifts. Keep product photography visually accurate.

Agent Prompt Guide

Quick Color Reference
  • Main reading ink: measured #231815.
  • Desktop navigation ink: measured #522e03.
  • Selected category: measured #f7f3eb.
  • Hero paper: estimated #ffe6bc.
  • Gift paper: estimated #f7f1e1.
  • Action orange: estimated #ef3300.
  • Footer orange: estimated #df4000.
  • Illustration accents: muted plum and ochre; avoid turning them into unrelated UI status colors.
Overall Prompt

“Create a Japanese meat-store homepage with a warm ceremonial illustration as its opening identity. Use a large fan-holding figure, visible paper-like texture, orange floral clothing, muted plum and ochre accents, and pale peach surroundings. Overlay a narrow bull-and-wordmark identity at the upper left, a tiny centered English serif masthead, vertical Japanese navigation on desktop, and a circular orange menu control. Place a vermilion pill linking to product categories near the lower center. Continue into a spacious serif catalog with ranking, category navigation, product names and prices, paired gift-package photography, editorial journal entries, news, store links, and a saturated orange footer. Recompose the artwork for mobile, stack ranking entries, arrange pickup products in a horizontal rail, and convert footer navigation to horizontal text. Use supplied measurements where available and label any new interaction or breakpoint as an implementation choice.”

Example Component Prompts
  1. Header: “Build an overlay header with a 96 × 152px brand footprint at 70px left and 46px top on a 1440px viewport. Center a 10px tracked Latin serif title. Place six narrow vertical Japanese links near the right, with a circular orange menu control above its own vertical label. On a 390px viewport, reduce the brand to about 48 × 76px, remove the text navigation, and stack cart and account icons beneath the menu.”
  2. Section heading: “Create a compact vertical Japanese section title in a Mincho-style serif: desktop 30px, weight 600, 0.3em tracking, and 1.65 line-height. Place a small uppercase Latin serif caption 38px below. Keep the surrounding section generous and the heading centered.”
  3. Product collection: “Use a 236px desktop category column beside three 300px product title columns with approximately 30px gaps. Titles are 16px serif with 26.08px line-height and 0.2em tracking. Prices sit separately below. On mobile, show 156px product cards in a horizontal track with about 15.6px gaps and 26px starting inset. Keep unverified category-panel behavior explicit as a new implementation decision.”
  4. Gift spread: “Compose two tall, square-cornered package photographs around a 440px central text region. Place vertical English package labels along the outside edges, a vertical Japanese title and small GIFT caption in the center, widely tracked two-line supporting copy, and a plain link ending in a tiny orange dot. Use cream surroundings and pale oversized GIFT lettering behind the copy.”
  5. Footer: “Create a full-width orange footer with dark serif text, a rectangular newsletter form, large written social links, a fine divider, and vertical shopping navigation on desktop. Put a large black horizontal brand lockup near the lower right. On mobile, stack horizontal links with generous gaps and center the logo and copyright.”
  6. Shipping notice: “Make a compact cream operational notice around 312 × 103px. Put a vertical status label at left, a thin divider, a short shipment-cutoff message at right, and a small close control. Keep the message data-driven and ensure the dismiss control has a usable touch target.”

Quick Start

CSS Custom Properties

This is an implementation scaffold, not recovered source CSS. Measured text colors and desktop type values are retained. Orange/cream fills are visual estimates. The 1024px breakpoint, mobile gift layout, media aspect ratios, focus treatment, and native horizontal scrolling are recommendations.

Keep a conventional root font size. Load authorized artwork and available font resources separately; no asset paths are assumed. A hero <picture> should supply deliberately framed desktop and mobile imagery. If the slogan is baked into the image, omit the separate slogan layer and provide an appropriate text equivalent.

For the section title, use .section-title__jp with one span per short vertical column. The catalog scaffold shows one active product panel; accessible category/menu state management requires separate implementation.

:root {
  /* Measured interface colors */
  --color-ink: #231815;
  --color-header-ink: #522e03;
  --color-active: #f7f3eb;
  --color-white: #fff;
  --color-black: #000;
  --color-wash: rgb(0 0 0 / 10%);

  /* Visual estimates: validate against approved assets */
  --color-hero: #ffe6bc;
  --color-paper: #f7f1e1;
  --color-action: #ef3300;
  --color-footer: #df4000;

  /* Families declared in the supplied computed styles */
  --font-jp: 'Noto Serif JP', YuMincho, '游明朝',
    'Times New Roman', 'Hiragino Mincho ProN',
    'HGS明朝B', 'ＭＳ Ｐ明朝', serif;
  --font-latin: CarrigDC, YuMincho, '游明朝',
    'Times New Roman', 'Hiragino Mincho ProN', serif;

  --text-body: 16px;
  --text-product: 16px;
  --text-price: 14px;
  --text-section: 30px;
  --text-caption: 14px;
  --text-action: 24px;
  --page-gutter: 70px;
  --product-gap: 30px;
  --section-space: 250px;
  --radius-pill: 999px;
  --ease-link: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
body { margin: 0; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }

.yoro-page {
  color: var(--color-ink);
  background: var(--color-white);
  font-family: var(--font-jp);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.7; /* Recommended readable default */
}

.yoro-page a { color: inherit; }
.yoro-page :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

.masthead {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  height: 233px;
  pointer-events: none;
  transition: opacity 300ms ease-out;
}
.masthead a, .masthead button { pointer-events: auto; }
/* Optional content state; determine its trigger separately. */
.masthead.is-floating { position: fixed; }

.brand-home {
  position: absolute;
  top: 46px;
  left: var(--page-gutter);
  width: 96px;
}
.brand-home img { width: 100%; height: auto; }

.masthead__title {
  position: absolute;
  inset: 66px 0 auto;
  margin: 0;
  color: var(--color-white);
  text-align: center;
  font: 700 10px/1 var(--font-latin);
  letter-spacing: 2px;
  transition: color 500ms, opacity 300ms;
}

.menu-toggle {
  position: absolute;
  top: 46px;
  right: 74px;
  display: grid;
  place-content: center;
  gap: 5px;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 3px solid rgb(255 255 255 / 45%);
  border-radius: 50%;
  color: var(--color-white);
  background: var(--color-action);
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 20px;
  height: 1px;
  background: currentColor;
}

.desktop-nav {
  position: absolute;
  top: 125px;
  right: 133px;
  display: flex;
}
.desktop-nav a {
  width: 42px;
  writing-mode: vertical-rl;
  color: var(--color-header-ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 42px;
  letter-spacing: 3px;
  transition: color 200ms var(--ease-link);
}

.utility-links {
  position: absolute;
  top: 51px;
  right: 145px;
  display: flex;
}
.utility-links a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--color-header-ink);
}
.utility-links svg { width: 20px; height: 23px; }

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--color-hero);
}
.hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__slogan {
  position: absolute;
  top: 38%;
  right: 5.5%;
  width: 21%;
}
.hero__cta {
  position: absolute;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%);
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 257px;
  min-height: 80px;
  padding: 16px 32px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-action);
  font-size: var(--text-action);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-decoration: none;
}
.yoro-page .pill { color: var(--color-white); }
.pill::after {
  content: '';
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  border-radius: 50%;
  background: currentColor;
}

.section-title { text-align: center; }
.section-title__jp {
  display: inline-block;
  margin: 0;
  writing-mode: vertical-rl;
  font-size: var(--text-section);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: 0.3em;
}
.section-title__jp span { display: block; }
.section-title__en {
  margin: 38px 0 0;
  font: 500 var(--text-caption)/1 var(--font-latin);
  letter-spacing: 0.16em;
}

.catalog-section { padding-block: 250px 300px; }
.catalog {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 64px;
  width: min(1300px, calc(100% - 140px));
  margin: 169px auto 0;
  padding-right: 40px;
}
.catalog__nav button {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 6px 12px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  font-size: 14px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background-color 300ms;
}
.catalog__nav button[aria-selected='true'] {
  color: var(--color-black);
  background: var(--color-active);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 80px var(--product-gap);
  min-width: 0;
}
.product-card { display: block; text-decoration: none; }
.product-card__media {
  width: 100%;
  aspect-ratio: 3 / 4; /* Proposed ratio; not measured */
  object-fit: contain;
}
.product-card__title {
  margin: 36px 0 0;
  font-size: var(--text-product);
  font-weight: 500;
  line-height: 1.63;
  letter-spacing: 0.2em;
}
.product-card__price {
  margin: 36px 0 0;
  font-size: var(--text-price);
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.ranking-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: calc(100% - 192px);
  margin: 168px auto 0;
}
.ranking-grid .product-card__media { aspect-ratio: 1; }
.ranking-grid .product-card__info { padding-left: 88px; }
.ranking-grid .product-card__title { margin-top: 27px; }
.ranking-grid .product-card__price { margin-top: 20px; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  font-size: var(--text-action);
  line-height: 1;
  text-decoration: none;
  transition: color 300ms ease-out;
}
.text-link::after {
  content: '';
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: var(--color-action);
}

.gift-section {
  padding-block: 30px 200px;
  background: var(--color-paper);
}
.gift {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1.07317fr 1fr;
  align-items: center;
  width: min(1260px, calc(100% - 180px));
  margin-inline: auto;
}
.gift::before {
  content: 'GIFT';
  position: absolute;
  inset: 40% 0 auto;
  z-index: -1;
  color: rgb(255 255 255 / 55%);
  text-align: center;
  font: 400 200px/1 var(--font-latin);
  pointer-events: none;
}
.gift__package {
  display: flex;
  gap: 20px;
  min-width: 0;
  text-decoration: none;
}
.gift__package--right { flex-direction: row-reverse; }
.gift__label {
  margin: 0;
  writing-mode: vertical-rl;
  font: 400 16px/1 var(--font-latin);
  letter-spacing: 0.1em;
}
.gift__package--right .gift__label { align-self: flex-end; }
.gift__package img {
  width: calc(100% - 36px);
  height: auto;
}
.gift__copy { padding-inline: 20px; text-align: center; }
.gift__description {
  margin: 100px 0 86px;
  font-size: 18px;
  line-height: 1.78;
  letter-spacing: 0.3em;
}

.site-footer {
  padding: 280px 120px 158px;
  color: var(--color-ink);
  background: var(--color-footer);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 632px) 1fr;
  gap: 138px;
  padding-bottom: 45px;
  border-bottom: 1px solid rgb(35 24 21 / 25%);
}
.newsletter-form {
  display: grid;
  grid-template-columns: minmax(0, 360px) 140px;
  gap: 10px;
}
.newsletter-form input {
  width: 100%;
  min-width: 0;
  min-height: 70px;
  padding-inline: 30px;
  border: 1px solid currentColor;
  border-radius: 0;
  color: inherit;
  background: transparent;
}
.newsletter-form button {
  min-height: 70px;
  border: 0;
  border-radius: 0;
  color: var(--color-black);
  background: var(--color-wash);
  cursor: pointer;
  transition: opacity 200ms var(--ease-link);
}
.footer-social a {
  display: block;
  margin-bottom: 20px;
  font: 400 32px/36px var(--font-latin);
  text-decoration: none;
}
.footer-nav {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 48px;
  margin-top: 120px;
}
.footer-nav__group {
  writing-mode: vertical-rl;
  font-size: 18px;
  letter-spacing: 0.1em;
}
.footer-nav__group a {
  display: block;
  margin-block: 0 16px;
  text-decoration: none;
}
.footer-brand {
  width: 440px;
  max-width: 100%;
  margin: 100px 0 0 auto;
}

/* Recommended breakpoint; original media queries were not supplied. */
@media (max-width: 1024px) {
  :root {
    --page-gutter: 26px;
    --text-body: 13.52px;
    --text-product: 12.48px;
    --text-price: 11.49px;
    --text-section: 18.72px;
    --text-caption: 10.4px;
    --text-action: 14.56px;
  }

  .masthead { height: 151px; }
  .brand-home { top: 26px; left: 25px; width: 47.83px; }
  .masthead__title {
    top: 36.39px;
    color: var(--color-black);
    font-size: 9.36px;
    line-height: 18.2px;
    letter-spacing: 0.936px;
  }
  .desktop-nav { display: none; }
  .menu-toggle {
    top: 26px;
    right: 25px;
    width: 44px;
    height: 44px;
  }
  .utility-links {
    top: 73px;
    right: 25px;
    flex-direction: column;
  }
  .utility-links svg { width: 16px; height: 18px; }
  .hero__slogan { top: 13.5%; left: 28%; right: auto; width: 45%; }
  .hero__cta { bottom: 15.6svh; }
  .pill { min-width: 166px; min-height: 52px; padding: 10px 22px; }
  .section-title__jp { line-height: 1.5; }
  .section-title__en { margin-top: 19.23px; }

  .catalog-section { padding-block: 156px; }
  .catalog { display: block; width: 100%; margin-top: 75px; padding: 0; }
  .catalog__nav button {
    min-height: 52px;
    padding-inline: 26px;
    font-size: 12.48px;
    letter-spacing: 0.2em;
  }
  .product-grid {
    display: flex;
    gap: 4vw;
    overflow-x: auto;
    padding: 16px 26px 28px;
    scroll-padding-inline: 26px;
  }
  .product-grid > .product-card { flex: 0 0 40vw; }
  .product-card__title { margin-top: 26px; letter-spacing: normal; }
  .product-card__price { margin-top: 25px; letter-spacing: normal; }
  .ranking-grid {
    grid-template-columns: 1fr;
    gap: 41.6px;
    width: calc(100% - 83.2px);
    margin-top: 94.6px;
  }
  .ranking-grid .product-card__info { padding-left: 66.55px; }
  .ranking-grid .product-card__title { margin-top: 18.72px; }

  /* Proposed mobile gift layout; not visually verified. */
  .gift-section { padding-block: 80px 120px; }
  .gift { width: calc(100% - 52px); grid-template-columns: 1fr 1fr; gap: 20px; }
  .gift::before { font-size: 28vw; }
  .gift__copy { grid-column: 1 / -1; grid-row: 1; }
  .gift__description { margin: 40px 0; font-size: 15px; }
  .gift__copy .text-link { margin-bottom: 40px; }
  .gift__package { gap: 8px; }
  .gift__label { font-size: 10px; }
  .gift__package img { width: calc(100% - 18px); }

  .site-footer { padding: 100px 41px 48px; }
  .footer-top { grid-template-columns: 1fr; gap: 48px; }
  .newsletter-form { grid-template-columns: minmax(0, 1fr) auto; }
  .newsletter-form input { padding-inline: 12px; }
  .newsletter-form button { padding-inline: 16px; }
  .footer-nav { flex-direction: column; gap: 28px; margin-top: 64px; }
  .footer-nav__group { writing-mode: horizontal-tb; font-size: 20px; }
  .footer-nav__group a { margin: 0 0 12px; }
  .footer-brand { width: 288px; margin: 64px auto 0; }
}

/* Recommended motion preference support for this scaffold. */
@media (prefers-reduced-motion: reduce) {
  .yoro-page *, .yoro-page *::before, .yoro-page *::after {
    transition-duration: 0.01ms !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

The scaffold intentionally leaves product filtering, menu state, shipping-notice timing, and header visibility triggers to the application. Use explicit state and accessible controls when adding those behaviors. Image proportions should be adjusted after the actual authorized assets are available.

Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. Define the custom properties above first. This does not imply that the inspected website uses Tailwind.

@theme inline {
  --color-yoro-ink: var(--color-ink);
  --color-yoro-header: var(--color-header-ink);
  --color-yoro-active: var(--color-active);
  --color-yoro-paper: var(--color-paper);
  --color-yoro-hero: var(--color-hero);
  --color-yoro-action: var(--color-action);
  --color-yoro-footer: var(--color-footer);

  --font-yoro-jp: var(--font-jp);
  --font-yoro-latin: var(--font-latin);

  --text-yoro-body: var(--text-body);
  --text-yoro-product: var(--text-product);
  --text-yoro-price: var(--text-price);
  --text-yoro-section: var(--text-section);
  --text-yoro-caption: var(--text-caption);
  --text-yoro-action: var(--text-action);

  --spacing-yoro-gutter: var(--page-gutter);
  --spacing-yoro-product: var(--product-gap);
  --radius-yoro-pill: var(--radius-pill);
}

Sources & Evidence

  • Inspected original and final page: Yoro Meat Online Store. The supplied record reports HTTP 200 and an unchanged final URL.
  • Capture record: 2026-10-04T21:06:32.317Z, equivalent to October 5, 2026, 06:06:32.317 JST. Individual image timestamps were not supplied.
  • Desktop evidence: 1440 × 1000 CSS-pixel viewport; original-page captures of the opening, product-to-gift transition, and footer; rendered text, link destinations, selected computed styles, and element rectangles. Measured document height was approximately 11423.45px.
  • Mobile evidence: 390 × 844 CSS-pixel viewport; original-page captures of the opening and lower footer; rendered text, links, and computed geometry principally covering the header, promotion, ranking, and product area. Measured document height was approximately 10086.86px.
  • Inspection method supplied with the record: initial observation of at least five seconds; finite animation, image-decoding, and layout/text readiness checks; intermediate scroll traversal; temporary pausing and subsequent resumption of perpetual animations. These checks do not establish that every delayed or interactive state was observed.
  • Interaction limits: no supplied menu, hover, category-switching, horizontal-swipe, newsletter-submission, notice-dismissal, cart, or checkout test. Link targets establish destinations only; linked pages were not inspected.
  • Asset and style limits: no original image resource URLs, font files, full stylesheet, media-query definitions, or hero animation timeline were supplied. Color estimates and proposed CSS are labeled accordingly.

This reference describes the current homepage represented by the supplied original-page evidence. Measurements apply to the recorded viewports and states; recommendations provide a practical starting point where the evidence ends.

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

← デザイン一覧に戻る