MANERUBETA

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

COUNTER株式会社｜オレンジの格子と大判タイポグラフィのWebサイトプレビュー

DESIGN REFERENCE

COUNTER株式会社｜オレンジの格子と大判タイポグラフィ

コーポレートサイトポートフォリオデジタルマーケティングWeb制作オレンジグリッドレイアウト大きなタイポグラフィ縦書きセリフ体ノイズテクスチャ非対称レイアウトレスポンシブ

鮮やかなオレンジ、細かな格子、紙のようなノイズを組み合わせたコーポレートサイト。大きな英文見出し、縦組みの日本語、細身のセリフ体、非対称なサービス配置が特徴です。

オリジナルサイトを見る
ジャンル
デザイン・広告・制作
元の業種
デジタルマーケティング・Web制作
デザイン分析日
2026/9/12

design.md

ダウンロード

COUNTER — Style Reference

Orange graph paper, monumental sans-serif lettering, and condensed serif typography on a finely grained canvas.

Original URL: counter-digital.jp Final URL: counter-digital.jp Theme: a light canvas with orange typography, orange hero artwork, and an orange footer; no user-selectable theme was verified. Inspected: September 12, 2026, at 12:58:29 UTC / 21:58:29 JST, through the supplied browser inspection. Viewports: 1440 × 1000 and 390 × 844 CSS pixels. Scope: the current corporate homepage: desktop hero, a desktop service-section crop, desktop contact/footer, mobile hero and footer, and supplied rendered text, link destinations, custom properties, and element measurements throughout the homepage. Open-menu states and destination pages were not visually inspected.

COUNTER株式会社 presents its digital marketing, creative production, and local media business through a strong two-color identity. The dominant orange is both ink and environment: it draws the fine grid, colors most section text, fills rectangular continuation links, and becomes the footer surface. White and orange alternate roles without introducing a separate action color.

The opening is composed like a poster. Three enormous lines of English sit across the bottom of the desktop viewport, while dense and sparse grid regions create folded, column-like bands behind them. Below, the page opens into generous white space, orange-tinted project imagery, vertically composed Japanese statements, and parenthesized serif section labels. Compact navigation and oversized diagonal arrows keep the corporate information easy to identify within this expressive composition.

This is a long corporate homepage with service discovery, project references, partnerships, testimonials, editorial content, and contact routes. Preserve that information hierarchy when adapting the visual language.

How to Read This Reference

  • Measured means a supplied computed style, custom property, or rendered DOM rectangle. The root font size is 16px at both inspected widths.
  • Visual estimate means an approximate measurement or appearance inferred from the original-page screenshots. It is not a recovered CSS declaration.
  • Calculated means arithmetic using supplied measurements, such as converting rem values or comparing section extents.
  • Recommended means guidance for a new implementation. Breakpoints, substitute artwork, accessibility treatments, and the Quick Start layout formulas fall into this category unless explicitly identified as measured.
  • Font names are the exact declared family identifiers where available. A computed family stack does not independently establish which font file supplied every rendered glyph.
  • DOM presence does not establish visibility. Menu content, duplicated labels, and transformed text layers appear in the extraction without being visible in the corresponding screenshots.
  • Coordinates describe sampled states. Some scrolled screenshots differ from the initial DOM geometry. Do not turn those differences into invented animation paths or exact positioning formulas.

Tokens — Colors

Default Palette

Name Value Source / implementation token Role and evidence
Counter Orange #FF552B Source --color-assort; alias --orange Measured on navigation, headings, case links, rules, and filled MORE links. Visually dominates the hero and footer.
White Canvas #FFFFFF Measured body background; alias --paper Main page base, circular menu surface, and floating action surfaces. Hero text is also measured white.
Soft Inverse #EFECEB Source --color-inverse; alias --inverse Measured mobile footer text and DOM-resident menu text. This is not the measured body background.
Warm Charcoal #3A3735 Source --color; alias --ink Measured body text default. Most prominent homepage sections explicitly override it with orange.
Secondary Brown #584E49 Source --color-light Available source token; a significant visible role is not established by the supplied captures.
Menu Category Gray #807977 Measured category-heading color Appears in computed menu content, including SEO and advertising category labels. The open panel was not visually verified.
Neutral Rule #D9D9D9 Source --border-gray-dark Available 1px border token. Its component assignment is not established here.

Color Behavior

The visible page is more restricted than its complete custom-property inventory. Generic platform colors, gradients, and shadow presets occur in the extraction, but the supplied screenshots do not establish their use in the homepage design. Do not add those colors to the brand palette.

The page base is measured white, although the fine gray grain makes it read as textured paper. Use #FFFFFF beneath a restrained texture when reproducing that relationship. Filling the entire page with #EFECEB would make the content area warmer and darker than the measured base.

The hero uses orange, white, and pale orange transitions within the artwork. These are spatial variations inside the graphic, not evidence of a separate palette of interface colors. Likewise, the orange treatment over service and project images is visually evident, but its original compositing method was not supplied.

Recommended contrast adaptation: opaque #FF552B against white has a calculated contrast ratio of approximately 3.19:1. Large display text can retain the original pairing; small functional copy needs separate contrast review. The existing #3A3735 token provides a compatible darker option for a more accessible adaptation.

Tokens — Typography

Japanese Sans Serif

  • Declared primary family: Tazugane Gothic HondaMKTA Med.
  • Source variable: --font.
  • Declared fallbacks: Hiragino Kaku Gothic variants, Meiryo, and sans-serif.
  • Measured default: 16px / 24px, weight 500.
  • Role: Japanese body copy, vertical statements, service titles, testimonial text, and contact labels.
  • Character: controlled and relatively dense, with limited tracking in ordinary Japanese paragraphs.

Latin Sans Serif

  • Roman identifier: HelveticaNeueeTextPro-Roman.
  • Medium identifier: HelveticaNeueeTextPro-Md.
  • Source aliases: --Helvetica and --Suisse point to the Roman stack; --Suisse-Md points to the Medium stack.
  • Important: retain the supplied identifier spelling when referencing existing font declarations. The variable name --Suisse is not evidence that the rendered font is Suisse.
  • Role: monumental hero lettering, uppercase navigation, dates, continuation links, and footer utilities.

The hero is weight 500, with a line height of 0.9 and tracking of -0.05em. Its force comes from size, tight spacing, and arranged word groups rather than an extra-heavy weight.

Condensed Serif

  • Declared family: ITCGaramondStd-BkCond.
  • Source variable: --ITCGaramondW01-BookCn.
  • Declared fallbacks: Japanese Mincho families and serif.
  • Role: parenthesized section labels, the large Download/Contact labels, menu category buttons, and the footer statement.
  • Measured weights: 400 for several display uses; 500 for some later section labels.

Keep this serif as a clear second voice. Its narrow proportions and curved parentheses soften the rigid grid and broad sans-serif hero. A generic serif fallback is usable, but will not reproduce the same widths.

Type Scale

Values below are measured unless marked as visual estimates. Sizes and line heights are CSS pixels.

Role Desktop Mobile Tracking / notes
Hero statement 110 / 99, weight 500 50 / 45, weight 500 -5.5px / -2.5px; exactly -0.05em at both sizes
Hero English explanation 12 / 15.6 12 / 15.6 Sideways vertical arrangement on desktop; horizontal paragraph on mobile
Hero Japanese tagline 25 / 37.5 25 / 37.5 Size is retained across the two inspected widths
Desktop primary navigation 14 / 21, weight 500 Not visible 0.14px tracking
Moving Japanese statement 45 / 58.5 24 / 31.2 Orange text, repeated horizontally
Promise section label 36 / 54, weight 400 24 / 36, weight 400 Desktop 1.8px; mobile -1.2px tracking
Vertical Promise statement 74 / 96.2 40 / 52 Two Japanese columns
Promise body 25 / 32.5 16 / 20.8 Larger editorial copy than the default body style
Service section label 96 / 86.4, weight 400 48 / 43.2, weight 400 Desktop 3.84px; mobile -1.92px tracking
Service titles 32 / 48, weight 500 20 / 30, weight 500 Some desktop rectangles include transforms; use computed type values independently
Vertical service statement Approximately 60–64px, visual estimate 36 / 39.6 Desktop size is not provided in the sampled text elements
Service closing sentence 24 / 31.2 20 / 26 Full-width copy on mobile before MORE
Casestudy / Partnership / Voice labels 64 / 64, weight 500 32 / 32, weight 500 -0.04em tracking
Case index links 25 / 37.5, weight 400 16 / 24, weight 400 Mobile rows grow when titles wrap
MORE links 20 / 26 or 20 / 30 Same measured sizes Line height differs by instance
Testimonial quote 18 / 25.2 16 / 22.4 0.1em tracking at both sizes
Mobile article date Not sampled 24 / 21.6 Latin Roman stack
Mobile article title Not sampled 14 / 21 Japanese sans serif
Download / Contact display label Approximately 60–64px, visual estimate 32 / 28.8 Mobile tracking -1.6px
Floating action label Approximately 11px, visual estimate 11 / 16.5 Compact Japanese utility copy
Footer statement Approximately 60–64px, visual estimate 32 / 32, weight 400 Condensed serif, centered on two lines
Footer navigation Approximately 14px, visual estimate 14 / 21, weight 400 Mobile tracking 0.14px
Footer Contact Us Approximately 40px, visual estimate 24 / 36, weight 400 Large diagonal arrow supplies additional emphasis

The COUNTER wordmark is visible as a distinct brand graphic. The measured home-link widths are 160px on desktop and 104px on mobile; its 16px inline rectangle height should not be treated as the artwork’s intrinsic height or font size.

Tokens — Spacing & Shapes

Base unit: a conventional 16px root, with explicit pixel values and rem tokens. Density: spacious section staging, tightly composed display text, compact utility navigation, and square image boundaries.

Spacing Scale

Use Desktop Mobile Evidence
Header height 6.25rem = 100px 4.6875rem = 75px Source --header-height, confirmed by header rectangles
General gap token 1rem = 16px 0.75rem = 12px Source --gap
Block spacing token 3.125rem = 50px 2.5rem = 40px Source --padding-block
Small block spacing token 2.5rem = 40px 1.875rem = 30px Source --padding-block-sm
Hero horizontal inset 30px 15px Measured statement rectangles
Logo left position 40px 15px Measured home-link rectangles
Menu top / right inset 20px / 20px 15px / 15px Measured control rectangles
Desktop navigation item gap 30px Not applicable Calculated from adjacent link rectangles
Later section top padding 136px 55px Measured Casestudy, Partnership, and Voice sections
Mobile article-row padding Not sampled 40px top, 32px bottom Measured link styles
Mobile floating action gap Approximately 3px 3px Calculated from measured link positions
Mobile footer vertical padding Not sampled 28px Measured footer style

The source tokens are not a universal spacing grid. Several sections add their own substantial offsets. Preserve the distinction between global insets and section-specific composition.

Border Radius

Element Value Status
Visible circular menu button 100% on a 60 × 60px box Measured
MORE links and floating actions 0 Measured
Visible service/project image boundaries Square Screenshot observation
DOM-resident index links 70px Measured style, but the open-menu appearance is unverified

Rules and Icon Geometry

  • Orange solid rule: source --border-assort: 1px solid #FF552B.
  • Orange dashed horizontal rule: source --border-assort-dot uses 3px of orange followed by 3px transparent, repeating in a 6 × 1px tile.
  • Orange dashed vertical rule: source --border-assort-vertical uses the same 3px/3px sequence in a 1 × 6px tile.
  • Menu glyph: four orange squares arranged in a 2 × 2 group. Approximately 14px overall is a visual estimate; the containing button is measured at 60px.
  • Arrows: open northeast arrows, with a diagonal shaft and a right-angle head. They appear at several scales, from compact footer links to a prominent Contact Us arrow.

Layout Measurements

Element Desktop observation Mobile observation
Document extent 9718.47px measured body height 6912.5px measured body height
Hero 1440 × 1000px 390 × 684px
Hero statement block x = 30; y = 671; width = 1380; three 99px lines x = 15; y ≈ 195.16; width = 360; five 45px lines
Desktop navigation backing Approximately 458 × 41px, centered near x = 720; visual estimate Absent from the visible header
English hero explanation x ≈ 1293.22; y = 260; 46.78 × 244px x = 15; y ≈ 450.16; 360 × 31.19px
Service section extent Approximately 3599px in the sampled state Approximately 1251px in the sampled state
Case section label x = 93 x = 15
Case link column x = 428; width = 984px x = 30; width = 345px
Case row height 52px 37px normally; first long title uses 61px
MORE link 200 × 60px 200 × 60px
Download / Contact strip Two approximately 720 × 336px panels, visual estimate Two measured 195 × 130px panels
Floating actions Similar dimensions in the screenshot; approximately 28px from right/bottom 142 × 46px and 130 × 46px; 15px right/bottom inset
Footer project preview Approximately 417px wide in the supplied crop Measured link frame 360 × 225px, ratio 8:5
Footer Partial desktop screenshot Measured height 817px

The long desktop service extent includes substantial composition space. It is not evidence that a reusable service section should have a fixed 3599px height, nor does it prove a particular scroll-pinning implementation.

Components

Persistent Header

Role: maintain identity and primary site access over changing backgrounds.

The desktop header places the COUNTER wordmark at the left, a narrow rectangular navigation strip near the horizontal center, and a circular menu control at the far right. The central strip contains ABOUT, SERVICE, CASESTUDY, BLOG, and NEWS in small orange uppercase text. Its pale backing separates the links from the busy hero without turning the whole header into a solid bar.

The header remains near the viewport top in the supplied scrolled captures. This supports persistent behavior, but the supplied style fields do not distinguish a fixed implementation from a sticky one.

The wordmark is white over the hero and orange over the light service/contact areas. On mobile, the central navigation disappears while the 60px circle remains. The logo becomes narrower, and both controls use 15px side insets. The mobile footer capture shows weak logo contrast against the orange surface; explicit background-aware logo treatment is a recommended improvement.

Circular Menu Control and Navigation Content

Role: expose the broader site index and service taxonomy.

The visible control is a white 60px circle with an orange outline and a small four-square symbol. It is a button in the supplied DOM.

The extraction also contains an Index group, service category buttons, and Download/Contact links. Desktop service categories are accompanied by detailed links; on mobile the extracted visible-text set is reduced to Digital Marketing, Creative Work, and Local Media. Their computed type changes from 64px to 36px condensed serif.

These observations support a responsive navigation structure, but do not establish how it opens, whether category buttons expand accordions, or how focus is managed. No open-menu screenshot or click sequence was supplied. Do not invent the panel background, opening direction, or dismissal animation.

Hero Poster

Role: communicate the company’s positioning through an immediately recognizable composition.

The hero is a full-width orange-and-white graphic field rather than a photographic banner. Coarse rectangular grids alternate with dense strips of much smaller cells. Pale zones fade into orange, creating the impression of folded or cylindrical surfaces. Fine grain covers the result.

On desktop, the headline is deliberately arranged in three lines:

  1. BUILDING at left; CUTTING-EDGE across the remaining width.
  2. MODELS at left; FROM in the middle; LOCAL at right.
  3. INNOVATION. at left, with the Japanese tagline toward the lower right.

The text uses 110px medium sans serif, 99px line height, and negative tracking. Its line boxes begin at y = 671 in the 1000px-high capture, leaving the upper two thirds predominantly graphic. The small English explanation occupies a sideways vertical strip near the right edge.

At 390px, the statement is rebuilt into five lines: BUILDING / CUTTING-EDGE / MODELS / FROM LOCAL / INNOVATION. It begins around y = 195 and uses 50px type. The English explanation moves below the headline, followed by the unchanged 25px Japanese tagline, “ローカルから最先端をつくる。”

The mobile hero is measured at 684px high, exposing the beginning of the next section within the 844px viewport. Its grid appears predominantly orange with narrow pale grid strips. The mechanism producing the artwork and any movement within it are unverified.

Moving Statement and Promise

Role: bridge the graphic opening and the company’s editorial statement.

A repeated Japanese sentence forms a horizontal strip below the hero. The mobile screenshot visibly shows orange text clipped by the viewport edges, with a highlighted orange segment carrying reversed text. The DOM supplies three repetitions and a named continuous animation.

The Promise section combines a small parenthesized serif label, substantial Japanese paragraphs, and a two-column vertical Japanese statement. On mobile, the vertical statement is positioned at the right; the first body block is only 247px wide, while the later paragraph expands to 360px. This is a composed editorial arrangement rather than uniform centered copy.

Several duplicate Promise layers occur at displaced coordinates in the DOM, and faint oversized text is visible near the bottom of the mobile opening capture. Their exact reveal, overlap, and scrolling behavior are not established. For a new implementation, retain one semantic copy of the text and keep any visual duplicates out of the accessibility tree.

Asymmetric Service Composition

Role: present three connected capabilities without a uniform feature-card grid.

The three services are digital marketing, creative work, and local media operation. Each has imagery, a Japanese title, and a short explanation. The desktop crop shows a tall tablet mockup on the left and a creative-work image and caption toward the upper right. Between them, a large vertical Japanese statement reads “デジタル起点 / 全方位支援”.

The local-media image is approximately 328 × 419px in the screenshot, beginning near x = 208. It has square corners, a coral/orange treatment, and an angled tablet displaying a local publication. Orange grid fragments extend behind and around the imagery. The cards have no visible raised container or shadow; the image itself establishes their boundary.

Desktop service headings are measured at 32px. Mobile headings become 20px, and all three sampled heading rectangles begin at x = 139 with a width of 236px. The mobile service statement sits at the left in two 36px vertical columns. This confirms retained asymmetry, although the mobile image arrangement is not shown in a supplied screenshot.

Finish the section with a capability sentence and a square orange MORE link. On mobile, the sentence spans the 360px content width and the 200px button aligns to the right.

Case Study Index

Role: provide a compact route into individual projects.

The supplied DOM shows seven stacked project links under a condensed serif “(Casestudy)” label. Desktop links occupy a wide right-hand column: x = 428 to x = 1412. Each row is 52px high and uses 25px Japanese text.

On mobile, the label moves to x = 15, while the list keeps a smaller additional inset at x = 30. Text becomes 16px. The first longer title wraps into a 61px row, while the other sampled rows are 37px high. Preserve content-driven row height.

The homepage also contains project-preview links elsewhere. The evidence does not establish a hover preview attached to the case index. Fine orange row dividers would be a compatible recommendation, but their exact assignment to these rows is not supplied by the extracted styles.

Partnership Roster

Role: communicate the company’s collaboration network.

The section uses the same parenthesized serif label as the case index, followed by two groups labeled “Aliance” and “Creator” in the source UI. Desktop group headings are 24px Latin sans serif; mobile headings are 16px. The mobile rectangles place the two groups side by side toward the right portion of the page, continuing the offset layout.

Use compact text lists and preserve the hierarchy between group labels and names. The roster is business-network content; it does not establish who designed or developed this homepage.

Voice Entries

Role: provide short customer endorsements.

Each entry combines a customer name and a brief Japanese quote. The measured desktop entries occupy separate horizontal positions. On mobile, all three sampled entries begin at x = 32 and stack vertically, with quote widths of 326px.

Names use 14px mobile text; quotes use 16px / 22.4px with 0.1em tracking. The desktop quote scale is 18px / 25.2px. The component’s visual border, image treatment, and full desktop container anatomy are not available in the supplied crops, so those details should remain implementation choices rather than claimed observations.

Editorial Media Section

Role: connect company expertise to ongoing content.

The section includes a parenthesized Counter Media heading, an introduction, COUNTER Channel, two named profile links, and an Owned Blog Media list. Three article links are present, each carrying a date, title, and category.

The mobile article list retains a two-part structure: a large 24px date on the left and a 208px-wide title block starting at x = 167. Titles use 14px / 21px. Each sampled article link is 360 × 162px with generous vertical padding. Do not replace this measured date/title relationship with small image cards when reproducing the mobile information rhythm.

Channel playback, video controls, and profile-image styling were not verified. The supplied links establish destinations, not successful playback or navigation outcomes.

MORE Link

Role: consistently terminate section summaries with a route to deeper content.

Measured instances are 200 × 60px on both desktop and mobile. They have orange fill, white 20px Latin text, square corners, 10px vertical and 12px horizontal padding, and a declared 500ms transition.

These are anchors, including routes to /service/, /creative-case/, /voice/, and /counter-media/. Keep their stable width and right alignment. Their duplicated DOM labels may support a visual text effect, but a specific hover rollover was not exercised.

Download / Contact Split

Role: offer two distinct conversion routes at the end of the main content.

The desktop screenshot shows two equal-width panels on the white textured canvas. A thin orange top rule spans the pair, and a dashed orange divider separates them. Each panel centers a large condensed serif label in parentheses, a Japanese subheading, and a short explanatory paragraph.

Both panels are anchors: Download points to /download/; Contact points to /contact/.

Mobile retains two columns. Each panel is measured at 195 × 130px, with a 32px serif label and 12px Japanese subheading. The descriptive paragraphs are absent from the mobile rendered-text result, although they remain in the link’s DOM text. Do not assume that the pair stacks vertically on phones.

Floating Download and Contact Actions

Role: keep the two contact routes available during lower-page browsing.

The supplied service and mobile footer captures show two white rectangular links with thin orange borders, small orange Japanese labels, and large northeast arrows. Mobile measurements are 142 × 46px for “資料ダウンロード” and 130 × 46px for “お問い合わせ”, separated by 3px and positioned 15px from the right and bottom edges.

They are not visibly present over the initial hero screenshots. Their exact appearance threshold and hide/show logic were not supplied. Implement that state explicitly instead of assuming they should cover every page position.

Orange Footer

Role: close with a brand statement, an abbreviated sitemap, contact access, and a project preview.

The footer changes the entire surface to orange and reverses the typography to white or soft inverse. A small upper row distributes location, the Japanese tagline, and Download. The statement “Turn the mainstream / upside down.” appears in centered condensed serif.

On desktop, the supplied crop places the statement near the center, a narrow five-row sitemap at the right, and social links plus a project preview toward the lower left. Each sitemap row has a thin pale rule and a northeast arrow. Contact Us is larger and uses a much larger arrow.

Mobile reorganizes this into a clear sequence: location row, centered two-line statement, full-width sitemap, Contact Us, right-aligned privacy/terms links, social links, and a wide project preview. The sitemap rows are measured at 360 × 32px; Contact Us occupies a 360 × 50px link frame.

The project-preview track contains several horizontally adjacent link frames in the DOM, each 360 × 225px on mobile. The supplied desktop and mobile screenshots show different project images. This supports a multi-item preview structure, but does not establish autoplay, swipe behavior, timing, or transition direction.

Tokens — Motion & Interaction

Treatment Supplied evidence Interpretation and limit
General links and visible menu button 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) Measured transition declaration. The exact hover-property changes were not supplied.
Shared duration Source --easeDuration: .5s Reusable timing token; not proof that every motion lasts 500ms.
Shared quartic ease Source --easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1) Matches numerous computed transitions.
Repeating Japanese statement 40s linear infinite loopLeft desktop; 20s linear infinite loopLeft mobile Verified CSS animation declaration, with repeated text and clipped positions. Keyframes were not provided.
Statement reveal transitions Transform 2s; opacity 1s with 0.2s delay; quartic ease Measured declarations on the ticker elements. Trigger and start/end values are unverified.
Mobile section-label transition 1s quartic ease with 0.05s delay Measured on several labels. Specific movement distance is not available.
Hero supporting-copy delay 0s 1.5s Declared delay; insufficient evidence to describe a fade or entrance path.
Header persistence Similar top-edge positions across scrolled screenshots Visible persistence; exact fixed/sticky CSS and color-change trigger were not supplied.
Hero grid Static supplied frames Rendering technology, animation path, and timing unverified.
Duplicated navigation text Repeated labels in DOM, single visible label in captures Possible presentation layers; no verified rollover sequence.
Footer project track Multiple adjacent frames and different visible projects Multi-item structure supported; autoplay and user controls unverified.

Many sampled elements report animation: none. That does not rule out motion on ancestors, pseudo-elements, or script-controlled transforms.

The inspection waited for finite motion and layout stability within stated limits, temporarily paused perpetual animations during readiness checks, and then resumed them. These still images are therefore evidence of captured states, not a complete motion specification.

Recommended motion direction: retain the measured restrained quartic easing for small interface changes and a slow linear statement loop. Keep decorative movement behind readable text. Do not introduce a dramatic hero morph or elaborate page transition without treating it as new design work.

Surfaces

Layer Appearance Function
Main canvas White base with fine gray grain Gives the content a tactile, paper-like ground
Hero field Orange and pale grid regions with dense/sparse cell changes Carries the primary visual identity
Service imagery Square-edged, orange-tinted device and project imagery Connects the abstract identity to practical work
Header navigation backing Small pale rectangular strip Keeps compact navigation legible over artwork
MORE link Solid orange rectangle with white text Repeated section-level continuation
Floating action White rectangle, orange rule, label, and arrow Persistent lower-page contact access
Contact strip White textured panels separated by orange rules Distinguishes two conversion routes without card elevation
Footer Orange field with pale text, rules, and project preview Creates a strong visual ending

There is no visible general-purpose shadow or rounded-card elevation system. The circular menu is a deliberate geometric exception. Structure comes from color reversal, thin rules, spacing, and hard image edges.

Imagery

The hero’s defining image is an abstract grid, not a stock photograph. Large rectangular cells coexist with narrow strips of tiny cells. Orange-to-pale shading gives these planar patterns an architectural or folded quality. The texture is fine grain rather than pixelated artwork; do not apply image-rendering: pixelated to this site’s imagery.

The desktop service crop shows device mockups with a coordinated orange cast: an angled tablet for local media and a partially visible laptop scene for creative work. Preserve recognizable screens and device geometry beneath the tint. A solid orange rectangle would lose the evidence of actual work.

The footer preview contains recognizable client website compositions, including people and interface typography, all visually brought into the orange family. Different captures show different projects, so the exact pictured person or project is not a fixed identity asset for the footer.

Observed Asset References

No original hero, grain, logo, service-image, or project-preview asset URL was supplied. The table records visible asset roles rather than inventing filenames.

Asset role Original-page evidence Reuse guidance
COUNTER wordmark Desktop and mobile headers Use an authorized brand asset when available; text is only a structural substitute
Grid hero artwork Desktop and mobile opening captures Recreate the coarse/fine rhythm and tonal structure; original rendering method is unknown
Fine grain Light content, hero, and footer captures A subtle generated noise layer is a recommended approximation
Local-media tablet mockup Desktop service crop Retain the portrait framing, angled device, and orange treatment
Creative-work laptop image Upper-right area of desktop service crop Preserve the image/caption grouping and square edges
Footer project previews Desktop/mobile footer captures and adjacent DOM link frames Keep wide project screenshots in consistent frames; do not infer playback behavior

Any CSS gradient, blend mode, SVG noise, or image filter proposed in a new implementation is an approximation unless separately verified against the original asset pipeline.

Layout & Responsive Behavior

Desktop Composition

The 1440px layout uses the full browser width for the hero, grid transitions, contact split, and footer. The headline runs almost edge to edge with 30px insets. Ordinary content has several alignment levels: approximately 28px outer clearance, section labels at x = 93, and the case index beginning much farther right at x = 428.

The service region is especially spacious and asymmetric. Images and captions occupy different widths and vertical positions around the vertical statement. Later sections tighten into indexes and information groups. Reproducing every section with the same centered max-width container would flatten this rhythm.

Mobile Composition

At 390px, most page content uses 15px outer insets, but selected components retain internal offsets:

  • The hero becomes five arranged text lines rather than a scaled three-line desktop block.
  • The English hero explanation changes orientation and moves into the normal reading sequence.
  • The Japanese hero tagline stays at 25px.
  • The visible menu circle stays 60px; the wordmark shrinks and the central navigation disappears.
  • The Promise layout retains a right-side vertical statement and a narrower opening paragraph.
  • Service headings remain offset to x = 139 rather than becoming full-width centered titles.
  • The case list uses a 30px left position, with content-driven wrapping.
  • Voice entries stack vertically.
  • Editorial rows retain date and title columns.
  • Download and Contact remain side by side, with their explanatory paragraphs omitted from the rendered mobile text.
  • Footer navigation expands to the available 360px content width, followed by the project preview.

Implementation Limits

Only 1440px and 390px widths were supplied. No exact media-query boundary, tablet layout, landscape layout, or intermediate fluid formula was recovered. The Quick Start uses a recommended 48rem breakpoint and interpolation formulas to approximate the inspected endpoints.

Do not derive a universal 100vh hero rule from the desktop capture: the mobile hero is 684px within an 844px viewport. Likewise, do not copy the sampled document or service heights as fixed dimensions.

Decorative overflow is visible in the ticker and graphic layers. Keep such clipping local to those elements; essential headings and link text should remain readable at narrower widths and increased text sizes.

Do’s and Don’ts

Do

  • Use the measured orange #FF552B as the central identity color.
  • Keep the page base white and add grain separately.
  • Preserve the contrast between tightly tracked medium sans-serif hero text and narrow serif section labels.
  • Compose the desktop statement in three lines and the mobile statement in five.
  • Keep selected Japanese statements vertical, with deliberate space for adjacent content.
  • Alternate expansive service composition with compact project and editorial indexes.
  • Use square image boundaries, 1px rules, rectangular actions, and open diagonal arrows.
  • Keep the menu circle at its measured 60px size on both inspected layouts.
  • Retain two mobile contact panels and the mobile date/title article structure.
  • Treat measured motion declarations and verified visual states as separate evidence.

Don’t

  • Don’t reduce the homepage to a hero and a generic feature-card grid.
  • Don’t introduce unrelated gradients, badge colors, or shadows from unused platform presets.
  • Don’t substitute soft rounded cards for the observed hard-edged composition.
  • Don’t call the Latin typeface Suisse solely because of a variable name.
  • Don’t turn the condensed serif into a wide, heavy display face.
  • Don’t set all content backgrounds to #EFECEB; the body base is measured white.
  • Don’t assume every desktop arrangement simply stacks on mobile.
  • Don’t treat duplicate DOM text as repeated visible content or proven hover animation.
  • Don’t invent WebGL, parallax, autoplay, accordion behavior, or transition timing for unexercised features.
  • Don’t use partnership names as production credits for the homepage.
  • Don’t hide text overflow globally to compensate for an incorrectly fitted headline.

Recommended Implementation Additions

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

  • Use one semantic H1 for the hero statement, with spans for visual word placement. Keep a real space between FROM and LOCAL in the accessible reading order.
  • Give the logo link a useful accessible name and the menu button an explicit label, expanded state, and controlled-panel relationship.
  • If implementing an overlay menu, provide keyboard access, Escape dismissal, focus return, and appropriate handling of background content.
  • Hide decorative duplicate text from assistive technology. Keep the editorial message available once in a normal reading order.
  • Offer a static alternative to the moving statement and stop nonessential motion under prefers-reduced-motion.
  • Review small orange text and pale footer text for contrast. Maintain the original orange display system while allowing darker functional copy where needed.
  • Increase compact footer-row hit areas where practical; the measured 32px rows are smaller than a recommended 44px touch target.
  • Give every linked project preview a descriptive accessible name. An empty extracted anchor text does not by itself prove that the original link lacks an image alternative.
  • Reserve sufficient bottom clearance and safe-area padding for floating actions so they do not obscure final content or keyboard focus.
  • Use an explicit header surface state to maintain logo contrast over both paper and orange sections.
  • Verify headline fitting with the actual licensed font and longer translations. Recovered pixel sizes are not a substitute for testing font metrics.

Agent Prompt Guide

Quick Color Reference

  • Brand ink and orange fields: #FF552B.
  • Main canvas and floating action surfaces: #FFFFFF.
  • Secondary reversed footer/menu text: #EFECEB.
  • Existing dark text option: #3A3735.
  • Borders: 1px orange; selected separators use 3px dashes with 3px gaps.
  • Texture: fine, low-contrast grain; no glossy elevation.

Overall Prompt

“Create a corporate homepage for a digital marketing and creative company using orange #FF552B, a white grained canvas, square imagery, and thin orange rules. Build a full-width opening graphic from coarse and dense grids with pale-to-orange shading. Place a tightly tracked medium sans-serif statement across the bottom in three desktop lines, using 110px type, 0.9 line height, and -0.05em tracking at 1440px. At 390px, recompose it into five 50px lines and move the small English explanation below it. Use a persistent wordmark, a narrow centered desktop navigation strip, and a white 60px circular menu with four orange squares. Continue with asymmetric service imagery, vertical Japanese statements, parenthesized condensed serif labels, a text-based case index, testimonials, editorial rows, a two-column contact strip, and an orange footer. Mark any newly introduced motion or behavior as an implementation choice.”

Example Component Prompts

  1. Hero: “Arrange BUILDING and CUTTING-EDGE on the first desktop row, MODELS / FROM / LOCAL on the second, and INNOVATION. on the third. Use white medium sans-serif text over orange grid artwork. Keep 30px desktop insets, a small sideways explanation near the right edge, and a Japanese tagline at the lower right. On mobile use five lines, 15px insets, and horizontal supporting copy.”
  2. Service composition: “On white fine-grained paper, place orange-tinted device mockups at different horizontal and vertical positions around a bold vertical Japanese statement. Use 32px Japanese service headings on desktop and 20px on mobile. Keep the images square-edged and the space around them generous. Avoid uniform card containers.”
  3. Case index: “Use a condensed serif parenthesized section label at the left and seven plain orange project links in a wide right-side column. At 390px, use a 15px heading inset, a 30px list inset, 16px link text, and rows that expand for wrapping. Finish with a right-aligned 200 × 60px orange MORE link.”
  4. Contact split: “Create two equal white panels with a fine orange top rule and a 3px-on/3px-off vertical divider. Center condensed serif Download and Contact labels in parentheses above Japanese subheadings. Retain two columns on phones, using 195 × 130px panels at 390px and omitting the longer explanatory text.”
  5. Footer: “Create an orange footer with a centered two-line condensed serif statement, thin pale navigation rules, northeast arrows, and a large Contact Us link. On mobile, stack the sitemap, contact link, legal links, social links, and a 360 × 225px project-preview frame. Keep the small floating download/contact rectangles clear of essential content.”

Quick Start

CSS Custom Properties

This is an implementation scaffold, not recovered source code. It preserves key measured colors, type proportions, and component dimensions. The 48rem breakpoint, responsive interpolation, decorative grid construction, and SVG grain are recommended approximations. The source artwork and font files are not bundled or fetched.

The font declarations below use the supplied family identifiers with shortened fallback stacks. Register authorized font files separately when available. Without them, fallback metrics will change the hero’s fit and the serif labels’ width.

:root {
  /* Measured source colors */
  --orange: #ff552b;
  --paper: #ffffff;
  --inverse: #efeceb;
  --ink: #3a3735;

  /* Declared source family identifiers; files are not bundled */
  --font-ja: 'Tazugane Gothic HondaMKTA Med',
    'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  --font-sans: 'HelveticaNeueeTextPro-Roman', var(--font-ja);
  --font-display: 'HelveticaNeueeTextPro-Md', var(--font-ja);
  --font-serif: 'ITCGaramondStd-BkCond', YuMincho,
    'Hiragino Mincho ProN', serif;

  /* Measured desktop tokens */
  --header-height: 100px;
  --gap: 16px;
  --block-space: 50px;
  --block-space-small: 40px;
  --menu-size: 60px;
  --rule: 1px solid var(--orange);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --motion-ui: 500ms;

  /* Recommended interpolation between inspected sizes */
  --hero-size: clamp(56px, 7.6389vw, 110px);
  --section-size: clamp(40px, 4.4444vw, 64px);
  --ticker-duration: 40s;
}

* { box-sizing: border-box; }
body { margin: 0; }

.counter-site {
  color: var(--ink);
  background: var(--paper);
  font: 500 16px/1.5 var(--font-ja);
}

/* Recommended generated grain, not the original texture asset */
.counter-site::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.045;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.8%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  height: var(--header-height);
  z-index: 30;
  color: var(--paper);
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.site-header[data-surface='paper'] { color: var(--orange); }

.brand {
  position: absolute;
  top: 41px;
  left: 40px;
  width: 160px;
  color: inherit;
  text-decoration: none;
}
.brand img, .brand svg { display: block; width: 100%; height: auto; }

.primary-nav {
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 30px;
  padding: 10px 30px;
  background: var(--paper);
}
.primary-nav a {
  color: var(--orange);
  font: 500 14px/21px var(--font-sans);
  letter-spacing: 0.01em;
  text-decoration: none;
}

.menu-button {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: var(--menu-size);
  height: var(--menu-size);
  padding: 0;
  border: var(--rule);
  border-radius: 50%;
  color: var(--orange);
  background: var(--paper);
  cursor: pointer;
}
.menu-symbol {
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 6px 6px,
    linear-gradient(currentColor, currentColor) 100% 0 / 6px 6px,
    linear-gradient(currentColor, currentColor) 0 100% / 6px 6px,
    linear-gradient(currentColor, currentColor) 100% 100% / 6px 6px;
  background-repeat: no-repeat;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: clip;
  color: var(--paper);
  background: var(--orange);
}

/* Static coarse/fine collage: an approximation of the observed artwork */
.hero-matrix {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  grid-template-columns: 55% 20.5% 24.5%;
  grid-template-rows: 32.3% 35% 32.7%;
  pointer-events: none;
}
.hero-matrix > i {
  --cell-x: 100px;
  --cell-y: 70px;
  background:
    repeating-linear-gradient(90deg,
      var(--orange) 0 1px, transparent 1px var(--cell-x)),
    repeating-linear-gradient(0deg,
      var(--orange) 0 1px, transparent 1px var(--cell-y)),
    linear-gradient(90deg,
      rgb(255 255 255 / 0.8), var(--orange) 76%);
}
.hero-matrix > i:nth-child(3n + 2) {
  --cell-x: 15px;
  --cell-y: 10px;
}
.hero-matrix > i:nth-child(4),
.hero-matrix > i:nth-child(6) {
  --cell-x: 30px;
  --cell-y: 35px;
  transform: scaleX(-1);
}

.hero-title {
  position: absolute;
  inset: auto 30px 32px;
  display: grid;
  grid-template-columns: 42% 32% 26%;
  margin: 0;
  font: 500 var(--hero-size)/0.9 var(--font-display);
  letter-spacing: -0.05em;
}
.hero-title > span { min-width: 0; }
.word-building { grid-area: 1 / 1 / 2 / 2; }
.word-cutting { grid-area: 1 / 2 / 2 / 4; }
.word-models { grid-area: 2 / 1 / 3 / 2; }
.word-from { grid-area: 2 / 2 / 3 / 3; }
.word-local { grid-area: 2 / 3 / 3 / 4; }
.word-innovation { grid-area: 3 / 1 / 4 / 4; }

.hero-lead {
  position: absolute;
  top: 26%;
  right: 100px;
  inline-size: 244px;
  margin: 0;
  writing-mode: vertical-rl;
  font: 500 12px/1.3 var(--font-sans);
}
.hero-tagline {
  position: absolute;
  right: 24px;
  bottom: 38px;
  margin: 0;
  font: 500 25px/1.5 var(--font-ja);
}

.section {
  padding: 136px 28px 0 93px;
  color: var(--orange);
}
.section-label {
  margin: 0;
  font: 500 var(--section-size)/1 var(--font-serif);
  letter-spacing: -0.04em;
}
.vertical-statement {
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: var(--orange);
}

.case-list {
  margin: 40px 0 0 335px;
  padding: 0;
  list-style: none;
}
.case-list a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 7px 0 5px;
  color: inherit;
  font: 400 25px/1.5 var(--font-ja);
  text-decoration: none;
  /* Recommended divider using the observed rule system */
  border-bottom: var(--rule);
}

.more-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 200px;
  min-height: 60px;
  margin: 30px 0 0 auto;
  padding: 10px 12px;
  border-radius: 0;
  color: var(--paper);
  background: var(--orange);
  font: 500 20px/1.3 var(--font-sans);
  text-decoration: none;
}

.contact-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 80px;
  border-top: var(--rule);
  color: var(--orange);
}
.contact-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 336px;
  padding: 40px 24px;
  color: inherit;
  text-align: center;
  text-decoration: none;
}
.contact-panel + .contact-panel::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: repeating-linear-gradient(to bottom,
    var(--orange) 0 3px, transparent 3px 6px);
}
.contact-title {
  margin: 0 0 20px;
  font: 400 64px/0.9 var(--font-serif);
  letter-spacing: -0.05em;
}
.contact-label { margin: 0; font-size: 18px; }
.contact-description {
  max-width: 36ch;
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.7;
}

.quick-actions {
  position: fixed;
  right: 28px;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  z-index: 35;
  display: flex;
  gap: 3px;
}
.quick-actions[hidden] { display: none; }
.quick-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 142px;
  min-height: 46px;
  padding: 10px 9px;
  border: var(--rule);
  color: var(--orange);
  background: var(--paper);
  font: 500 11px/1.5 var(--font-ja);
  text-decoration: none;
}
.quick-action:last-child { width: 130px; }

.site-footer {
  padding: 28px;
  color: var(--inverse);
  background: var(--orange);
}
.footer-motto {
  margin: 60px 0;
  color: var(--paper);
  text-align: center;
  font: 400 64px/1 var(--font-serif);
}
.footer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  padding: 5px 0;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font: 400 14px/21px var(--font-sans);
  text-decoration: none;
}
.project-preview {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border-radius: 0;
}

/* Recommended interaction feedback; original hover changes are unverified */
a, button {
  transition: color var(--motion-ui) var(--ease-out-quart),
    background-color var(--motion-ui) var(--ease-out-quart);
}
.counter-site :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

@media (max-width: 48rem) {
  :root {
    --header-height: 75px;
    --gap: 12px;
    --block-space: 40px;
    --block-space-small: 30px;
    --hero-size: clamp(38px, 12.8205vw, 50px);
    --section-size: 32px;
    --ticker-duration: 20s;
  }
  .brand { top: 41px; left: 15px; width: 104px; }
  .primary-nav { display: none; }
  .menu-button { top: 15px; right: 15px; }

  /* Endpoint approximation; the source mobile height formula is unknown */
  .hero { min-height: calc(100svh - 160px); }
  .hero-content {
    padding: clamp(140px, 23.12svh, 195.2px) 15px 155px;
  }
  .hero-title {
    position: static;
    grid-template-columns: 52% 48%;
  }
  .word-building { grid-area: 1 / 1 / 2 / 3; }
  .word-cutting { grid-area: 2 / 1 / 3 / 3; }
  .word-models { grid-area: 3 / 1 / 4 / 3; }
  .word-from { grid-area: 4 / 1 / 5 / 2; }
  .word-local { grid-area: 4 / 2 / 5 / 3; }
  .word-innovation { grid-area: 5 / 1 / 6 / 3; }
  .hero-lead {
    position: static;
    inline-size: auto;
    margin-top: 30px;
    writing-mode: horizontal-tb;
  }
  .hero-tagline { position: static; margin-top: 10px; }
  .hero-matrix { grid-template-columns: 78.5% 8% 13.5%; }
  .hero-matrix > i { background-color: var(--orange); }
  .hero-matrix > i:nth-child(3n + 1) { opacity: 0.2; }

  .section { padding: 55px 15px 0; }
  .case-list { margin: 30px 0 0 15px; }
  .case-list a {
    min-height: 37px;
    padding: 7px 0 6px;
    font-size: 16px;
  }
  .contact-panel { min-height: 130px; padding: 20px 8px; }
  .contact-title { margin-bottom: 0; font-size: 32px; }
  .contact-label { font-size: 12px; letter-spacing: 0.01em; }
  .contact-description { display: none; }
  .quick-actions {
    right: 15px;
    bottom: calc(15px + env(safe-area-inset-bottom, 0px));
  }
  .site-footer {
    padding: 28px 15px calc(76px + env(safe-area-inset-bottom, 0px));
  }
  .footer-motto { margin: 36px 0 44px; font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .counter-site *, .counter-site *::before, .counter-site *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

The header’s data-surface value and the floating actions’ hidden state require explicit application logic. Menu behavior, image-track behavior, and ticker keyframes are deliberately outside this CSS scaffold because their complete original behavior was not supplied.

A minimal semantic hero structure for the placement rules above:

<section class='hero' aria-labelledby='hero-title'>
  <div class='hero-matrix' aria-hidden='true'>
    <i></i><i></i><i></i>
    <i></i><i></i><i></i>
    <i></i><i></i><i></i>
  </div>
  <div class='hero-content'>
    <h1 class='hero-title' id='hero-title'>
      <span class='word-building'>BUILDING </span>
      <span class='word-cutting'>CUTTING-EDGE </span>
      <span class='word-models'>MODELS </span>
      <span class='word-from'>FROM </span>
      <span class='word-local'>LOCAL </span>
      <span class='word-innovation'>INNOVATION.</span>
    </h1>
    <p class='hero-lead'>We utilize our digital content and marketing
      expertise to overcome marketing challenges companies face.</p>
    <p class='hero-tagline' lang='ja'>ローカルから最先端をつくる。</p>
  </div>
</section>

Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. These do not identify the original site’s framework. Define the custom properties above first.

@theme inline {
  --color-counter-orange: var(--orange);
  --color-counter-paper: var(--paper);
  --color-counter-inverse: var(--inverse);
  --color-counter-ink: var(--ink);

  --font-counter-ja: var(--font-ja);
  --font-counter-sans: var(--font-sans);
  --font-counter-display: var(--font-display);
  --font-counter-serif: var(--font-serif);

  --text-counter-hero: var(--hero-size);
  --text-counter-section: var(--section-size);
  --spacing-counter-gap: var(--gap);
  --spacing-counter-menu: var(--menu-size);
  --radius-counter-square: 0px;
  --ease-counter-out: var(--ease-out-quart);
}

Sources & Evidence

  • Original and final website: https://counter-digital.jp/. The supplied inspection reports HTTP 200 with no URL change. The rendered title identifies COUNTER株式会社 and its digital marketing business in Koshigaya, Saitama.
  • Capture timestamp: September 12, 2026, 12:58:29.273 UTC / 21:58:29.273 JST.
  • Desktop evidence: 1440 × 1000 CSS pixels; original-page captures of the hero, part of the service composition, and the Download/Contact area with the upper footer. Supplied DOM body height is approximately 9718.47px.
  • Mobile evidence: 390 × 844 CSS pixels; original-page captures of the hero and footer, with rendered text and element measurements across the homepage. Supplied DOM body height is 6912.5px.
  • Style evidence: supplied root custom properties and computed colors, font stacks, sizes, line heights, tracking, padding, radii, transitions, animations, and rendered rectangles. Values for hidden or transformed content are identified separately from visible screenshot findings.
  • Navigation evidence: destination URLs were extracted from homepage anchors. Those destinations were not opened or independently inspected for this reference.
  • Interaction evidence: the supplied process observed initial rendering for at least five seconds and traversed intermediate scroll positions. It applied bounded layout, finite-animation, and image-readiness checks. No menu-opening, hover, form-submission, video-playback, or project-slider interaction sequence was supplied.
  • Limitations: screenshots represent selected states; the DOM element sample is not a complete stylesheet or asset manifest. Exact breakpoints, original decorative asset URLs, loaded-font resolution, hero rendering technology, delayed content, and unexercised interactions remain unverified. SharedWorkers and service workers were disabled during the supplied inspection.

This reference describes the current homepage represented by those original-page captures and measurements. Visual estimates and implementation recommendations are labeled throughout.

← デザイン一覧に戻る