Shosetsuka ni Narou (小説家になろう) DESIGN.md

Design System Inspiration of Shosetsuka ni Narou (小説家になろう)

Overview

Visual Theme & Atmosphere

Shosetsuka ni Narou is a Japanese fiction submission and reading service operated by HinaProject. Its site guide describes free registration, reading published fiction, bookmarks and writing tools. The operator dates the service to 2004 and describes its founding idea as “誰でも小説を投稿した瞬間から小説家”: anyone becomes a novelist upon posting a novel. Site guide, company history.

The measured homepage presents a busy reading directory: cyan navigation and a cyan wordmark, blue story links, white list panels on a pale grey page, dark teal headings, and an orange registration area. Small crown icons distinguish the leading ranks. The dominant content is titles, authors and genres; illustration appears in promotional banners and published-book covers. These are observations of the live desktop homepage, not stated corporate design principles. Live homepage.

The service evolves through specific reading and writing improvements. In January 2024, its official ranking announcement replaced the homepage's monthly ranking with separate weekly rankings for ongoing serials and short works—the two columns still visible in this capture. A March 2024 announcement documents a separate redesign of user pages and revisions to writing and submission features. These announcements establish product changes; the measurements below describe the public homepage. Ranking announcement, user-page announcement.

Brand Narrative

The operator's history starts with a desire to read fiction more conveniently, dates the service to 2004 and the move from personal to corporate operation to 2010. It describes a 2024 vision centred on creators' ambitions and names apps and author revenue sharing among its subsequent initiatives. That history connects a broad invitation to write with ongoing support for creation. It does not provide a rationale for the homepage's individual colour or typography choices. Company history.

Principles

The verified product idea is open participation in fiction: the help centre says users can publish fiction freely and read posted fiction free of charge. For implementation, the measured homepage supplies three concrete cues: expose reading routes in navigation, place titles above compact metadata, and use restrained background changes to signal interactive rows. The latter cues are observations, not an official principles document. About the service, homepage.

Personas

The official help centre names readers, amateur writers, online writers, professional writers, fiction-site operators, publishers and people in the fiction industry as audiences. No demographic or behavioural persona was researched. About the service.

Colors

The homepage census contains 299 computed custom properties, all named --color-*. Each matches the first :root block in the first-party base stylesheet. The stylesheet walk itself could not read the cross-origin sheets, so its empty declared-property map is not evidence of missing declarations. These are live implementation variables, not a separately published design-system specification. Base stylesheet.

Three translucent values carry interaction: rgba(255, 255, 255, 0.2) over navigation or registration; rgba(241, 243, 245, 0.5) over the ranking card; and rgba(100, 178, 247, 0.25) in the input's focus shadow. The input's top and bottom borders are rgba(133, 213, 225, 0.5). Preserve the underlying surface when using these alpha values.

The most frequent text colour in the census is muted metadata, not body ink. The paragraph-ink census is empty, and the fetched homepage contains no <p> elements. The foreground role above is supported by its root variable and the author-name measurement; it is not presented as a paragraph measurement.

Typography

Substitute: none chosen. The reference keeps measured type metrics and omits a machine-readable text-family value. Base stylesheet, homepage stylesheet.

Measured navigation and registration labels are 14px / 400, with 21px line height. The ranking link is 14px / 400, with 23.8px line height; its rank numeral is 16px / 700. The compact contest action is 11px / 400, with 18.7px line height. These metrics do not establish a font family.

Layout

At the measured desktop width, a white header contains the wordmark, utility links and a joined search group; a cyan navigation band follows it. A wide promotional carousel precedes the main directory. The ranking panel occupies two equal 364px columns, with announcements and contests in a right sidebar. Further down, the page groups completed serials, updated serials, new short works and published books. The footer returns to dark teal. Homepage.

The loaded homepage stylesheet declares a 1048px content container and navigation list, a 728px main region, a 330px joined search group and 15px gaps between successive main-region blocks. These are source declarations; the survey independently places the two ranking columns at x=189 and x=553, each 364px wide. Repeated list-row padding is the measured 10px. Homepage stylesheet.

Dense titles are intentional: the official help page says it abbreviates some titles and author names to fit more information. It documents weekly-ranking title limits of 40 characters on desktop and 35 on smartphones. Homepage help.

Responsive Behavior

Mobile layout was not measured. The official site guide confirms PC and smartphone support; its help page separately documents shorter ranking-title limits on smartphones. Those statements do not establish breakpoints or a mobile component geometry. Site guide, homepage help.

Elevation & Depth

The ranking panel's measured ancestor has 2px top and bottom borders in rgba(24, 183, 205, 0.5) and a paired shadow: rgba(0, 0, 0, 0.05) 0px 3px 1px -1px, rgba(0, 0, 0, 0.05) 0px -3px 1px -1px. The row itself has no shadow. The compact contest action gains a shallow shadow during interaction; the search field uses a zero-blur, 2px focus shadow. Keep these roles distinct.

Motion & Easing

The contest action's raw computed transition is all 0.2s ease 0s. Registration, ranking navigation, the search input and the ranking card each report all 0s ease 0s. These strings are copied from control identity records. Carousel timing, reduced-motion behaviour and other motion were not measured.

Components

All five controls are homepage product controls. Registration, navigation, contest actions and ranking cards are links; the search field is an input. The following are computed measurements at 1440×1000, not recommended minimum sizes.

The card's visible title child changes colour. Its numeral, author name, metadata and crown keep their separate colours. The probe's generic label picker selected the rank numeral; that numeral's colour is not the card-title colour.

Hover and pressed snapshots have matching pseudo-state flags, but the capture tool lost those states during PNG cropping. Focus crops were inspected to confirm the selected controls. The reference uses the computed snapshots, with the crop limitation recorded in the verification notes.

States

The measured states are resting, real pointer hover, held pointer press and keyboard Tab focus. The input's hover comparison covers itself, its pseudo-elements and three ancestor levels, with no descendants; it found no change across the probe's compared properties. This does not establish absence of pixel-only or out-of-scope changes.

Registration and navigation use the white overlay. The contest action gains its shallow shadow. The search input gains its blue-tinted focus shadow, which returns to none after blur. The ranking title lightens while its row background changes; its author, metadata, numeral and crown remain unchanged. The pressed samples include focus caused by pointer-down, so they do not isolate an independent active-only rule.

The registration, navigation and ranking links have outline-style: auto under keyboard focus. That ring is browser-provided; no branded focus-ring colour or corresponding component focus token is declared. Their authored background/colour focus observations remain documented above. Disabled states and filled-input states were not measured and have no tokens.

Do's and Don'ts

• Use cyan for the navigation surface, blue for reading links and orange for the registration parent.
• Preserve square ranking rows and the search input's square middle segment; the compact contest action has a measured 3px radius.
• Keep title, author, genre and rank colours separate when a row changes state.
• Preserve the background beneath translucent interaction layers.
• Preserve the official mark's proportions and colours. Its trademark guideline prohibits alterations and requires surrounding isolation space, without giving a numeric spacing value. Trademark guideline.
• Leave the text family unresolved; do not turn the declared stack or the loaded icon face into a verified text-font specimen.

Voice & Tone

The homepage calls itself “みんなのための小説投稿サイト” and labels tasks directly: 作品検索, ユーザ登録 and 応募作品を見る. The site guide invites visitors to register for free and explains practical benefits. A suitable reference cue is inclusive introductory copy followed by short task labels; this is an interpretation of those examples, not a published voice manual. Homepage, site guide.

Agent Prompt Guide

“Build a desktop fiction directory with pale grey page ground, white list panels, cyan navigation, blue story links and an orange registration area. Use square 364×87.8px ranking links with 10px padding and 14px/400 type at 23.8px line height. Hover adds the measured translucent pale background and lightens only the linked title and its inheriting containers. Retain separate author, genre, rank and crown colours. Keep the text family unspecified.”

“Make the middle field of a joined search control 35px high, square, with 5px 10px padding. In its empty state use the measured placeholder foreground; keyboard focus adds rgba(100, 178, 247, 0.25) 0px 0px 0px 2px.”

Governance

Known Gaps

• Contrast, contest-works. Text #1b8ef3 on #ffffff measures 3.38:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, search-input. Text #b3b3b3 on #ffffff measures 2.10:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.