ronantakizawa/japanese-webdesign
Claude Code skill for designing websites optimized for Japanese audiences - cultural UX principles, bento layouts, trust signals, and localization best practices
npx skills add ronantakizawa/japanese-webdesignREADME
Japanese Web Design Skill
A Claude Code skill for designing japanese-styled websites.
Overview
Japanese web design follows fundamentally different principles than Western design. What appears "cluttered" or "outdated" to Western eyes is actually optimized for Japanese cultural values, trust-building, and user expectations.
This skill helps you:
- Design information-dense layouts that Japanese users prefer
- Implement proper trust signals and confirmation patterns
- Understand the cultural context behind design decisions
- Create UI components following Japanese conventions
- Build bento-style modular layouts
- Design for B2B/SaaS in the Japanese market
- Avoid common localization mistakes
Installation
npx skills add ronantakizawa/japanese-webdesign
Or via Claude Code directly:
claude mcp add --from-github ronantakizawa/japanese-webdesign
Browse on skills.sh
Key Concepts
安心 (Anshin) - Reassurance Through Information
The core principle: Japanese users expect all information upfront. Hiding information creates suspicion.
一目瞭然 (Ichimoku Ryouzen) - Understanding at a Glance
Everything needed should be visible without requiring clicks or navigation.
Information Density
| Western Approach | Japanese Approach |
|---|---|
| "Less is more" | "More is trust" |
| Progressive disclosure | Everything visible |
| Clean whitespace | Productive use of space |
| Single call-to-action | Multiple detailed options |
Topics Covered
- Core Principles: Anshin, Ichimoku Ryouzen, Ponchi-e culture
- Layout Patterns: Bento grids, information density, visual hierarchy
- Trust Signals: Company info, certifications, reviews, contact details
- Typography: Font stacks, line-height, avoiding italics
- E-Commerce: Product pages, price display, payment methods
- SaaS/B2B: CTAs, documentation requirements, Keigo levels
- Mobile Design: Tab navigation, density on small screens
- Cultural Factors: Mascots, seasons, numbers to avoid
- Localization Mistakes: Common failures to avoid
- 2025 Trends: Neo-retro, bento layouts, collapsible sections
Market Context
- Rakuten Ichiba: ¥6+ trillion GMV, ~90% of Japanese internet users registered
- Yahoo Japan Shopping: 118.2 million monthly visitors
- Mobile traffic: 60%+ in Japan
- Payment: Credit-card-only loses 30% of buyers (konbini/PayPay preferred)
Reference Materials
The skill includes detailed reference files:
- component-patterns.md: UI component examples with HTML/CSS
- cultural-context.md: Deep dive into cultural factors affecting design
Research Sources
This skill was built from extensive research including:
- iCrossBorder Japan - Japanese Web Design Trends 2025
- Netwise - Web Design Trends 2025 from Japan's Digital Frontier
- Nihonium - Japanese UI/UX Design: Key Requirements for SaaS
- McLaren Group - UX Research in Japan
- WPIC - How to Design for Maximum Engagement in Japan's E-commerce
- Medium - Japanese Web Typography Best Practices
- Fujitsu - When Clutter Got Purpose: Cultural Context in UX/UI
- Asia Localize - Japanese Website Localization Secrets
- iXora Solution's analysis of Japanese UX
- sabrinas.space quantitative research on Japanese web design patterns
- MultiLingual Magazine's industry perspective
License
MIT
Publisher
ronantakizawa