| name | japanese-webdesign |
| description | Provides guidance for designing websites optimized for Japanese audiences, including cultural UX principles, information density patterns, bento layouts, trust signals, and localization best practices. Use when building e-commerce sites, landing pages, SaaS products, or any web application targeting Japanese users. |
| globs | ["**/*.html","**/*.css","**/*.jsx","**/*.tsx"] |
Japanese Web Design Skill
Overview
Japanese web design follows fundamentally different principles than Western design. What appears "cluttered" to Western eyes is optimized for Japanese cultural values, trust-building, and user expectations.
Market Context:
- Rakuten Ichiba: ¥6+ trillion GMV, 494.8 million monthly visitors
- Yahoo Japan Shopping: 118.2 million monthly visitors
- 60%+ of Japanese web traffic is mobile
- Credit-card-only checkout loses up to 30% of buyers
Reference Files
Core Principles
安心 (Anshin) - Reassurance Through Information
The most important concept: providing reassurance by eliminating surprises.
- All information visible upfront - hiding creates suspicion
- Complete specifications before purchase decisions
- Multiple confirmation points to prevent mistakes
"If you're not showing me everything, what are you hiding?" — Common Japanese consumer mindset
一目瞭然 (Ichimoku Ryouzen) - Understanding at a Glance
Everything needed should be visible without requiring clicks or navigation.
The Ponchi-e Culture
In Japanese business, Ponchi-e slides pack all relevant details into a single page. This approach directly influences web UI/UX expectations—no white space goes to waste.
Design Patterns
1. 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 |
| "Learn more" buttons | Information already present |
Why it works: Kanji characters carry meaning without being sounded out, enabling faster scanning of dense layouts.
Product cards should include: ranking badges, review count, shipping info, full specs, original/sale price, discount %, points, delivery estimates.
2. Bento Box Layouts (弁当箱レイアウト)
Modern Japanese design uses modular content blocks inspired by bento boxes:
.bento-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
grid-auto-flow: dense;
}
.bento-item { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; }
Best Practice: Limit to 9 or fewer boxes for clarity while maintaining density.
3. Visual Hierarchy (No Uppercase)
Japanese has no uppercase/lowercase. Create hierarchy through:
- Size variation (larger = more important)
- Color backgrounds (colored boxes for sections)
- Borders and frames (明確な区切り)
- Icons and badges
- Bold text (avoid italics—renders poorly)
4. Trust Signals (信頼性)
Required trust indicators:
- Customer service photo - Staff with headset showing human support available
- ISO/Privacy Mark certifications
- Years in business (創業○○年)
- Customer satisfaction % (お客様満足度)
- Full company info: address, phone, fax, representative name
- Review count with actual text content
- Shipping badges - 「当日出荷」(same-day shipping), 「送料無料」prominently displayed
5. Form Design: Show Everything First
Japanese users want to see the entire process before starting.
Wrong: Step-by-step wizard hiding fields
Right: All fields visible with progress indicator (入力項目: 12項目中 0項目入力済み)
6. Confirmation Culture (確認)
Add multiple confirmation points:
- Order summary (注文内容確認)
- Explicit confirmation dialog
- Final verification screen (最終確認)
- Completion with detailed next steps
7. Color Usage
Common patterns:
- Bright, saturated colors (red, yellow, orange for attention)
- Section color-coding for organization
- Seasonal colors (桜ピンク in spring, 紅葉 in autumn)
- Blue themes for comparison/information sites (Kakaku.com style)
- Orange/red for e-commerce CTAs and sale badges
:root {
--sale-red: #e60012;
--attention-yellow: #ffeb3b;
--trust-blue: #0066cc;
--kakaku-blue: #002d7a;
--sakura-pink: #fcc;
--category-purple: #6b5b95;
}
Site type color conventions:
- E-commerce: Red/orange accents (Rakuten style)
- Price comparison: Blue headers (Kakaku.com style)
- Portals: Multi-color sections (Yahoo Japan style)
8. Navigation
Show all options—avoid hamburger menus:
- Mega navigation with categories + item counts
- Inline popular items and current promotions
- Tab bars for mobile (not hamburger)
9. Category Grids (Kakaku.com Style)
Display categories as icon grids with subcategories inline:
- Icon + category name in colored box
- Subcategories listed below each main category
- Item counts per category (パソコン 15,234件)
- Blue/purple color coding for different sections
10. Trending Keywords (人気キーワード)
Show popular search terms as clickable tag buttons:
- Colored background tags (red for 注目, blue for trending)
- Displayed prominently near search bar
- Updated frequently to show freshness
11. Portal Layouts (Yahoo Japan Style)
Multi-column layouts for portal/news sites:
- 3+ columns on desktop
- Service sidebar with icons for each service
- News section with thumbnail + headline
- Topic tabs (経済, エンタメ, スポーツ, etc.)
- Weather widget with location
- "NEW" badges (新着) on fresh content
- Login/account section in sidebar
Typography
Font Terminology
- Serif = 明朝 (Mincho)
- Sans-Serif = ゴシック (Gothic)
Font Stack
Japanese fonts require 7,000-16,000 glyphs (vs. ~230 for English).
body {
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Meiryo", "Noto Sans JP", sans-serif;
}
.formal-text {
font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
}
Typography Rules
| Guideline | Recommendation |
|---|
| Font size | 10-15% smaller than Latin equivalent |
| Line height | 185-200% of font size |
| Line length | ~35 characters optimal |
| Italics | Avoid - renders poorly |
| Bold | Use sparingly, prefer color/size |
E-Commerce Patterns
Product Grid Layout
Dense thumbnail grids are standard:
- Small thumbnails (80-120px) in tight grid
- Price overlay on each thumbnail
- Discount badges (50%OFF, セール) as corner ribbons
- Category icons above product sections
- Promotional banners interspersed in grid
Product Pages (商品ページ)
Must include:
- Ranking indicators with date/category
- 10-20 product images (not 3-5)
- Exhaustive specifications table
- Shipping details (carrier, timing, costs)
- Full return policy text (not just link)
- Same-day shipping badge if applicable (当日出荷)
Price Display
Always show:
- Original price with label (メーカー希望小売価格)
- Sale price highlighted
- Discount amount AND percentage
- Tax status (税込/税抜)
- Points earned
Payment Methods
Include all common options:
- Credit cards (VISA, Master, JCB, AMEX)
- コンビニ決済 (convenience store)
- PayPay, LINE Pay, 楽天ペイ
- 銀行振込 (bank transfer)
- 代金引換 (cash on delivery)
SaaS & B2B Requirements
Key Differences
- Extended trial periods expected
- Detailed documentation required before sales calls
- Formal language (敬語) required
B2B-Specific CTAs
Primary flow: 資料ダウンロード (document download) → 無料トライアル → お問い合わせ
Required Content
- Comprehensive feature documentation with screenshots
- Pricing with all tiers, features, and limits visible
- Security certifications (ISO 27001, SOC 2, ISMS)
- Support options with hours (日本語電話サポート: 平日9:00-18:00)
- Extensive FAQ section
Language Formality (敬語)
| Context | Casual (B2C) | Formal (B2B) |
|---|
| Submit | 送信する | 送信いたします |
| Error | エラーが発生しました | エラーが発生いたしました。お手数ですが、再度お試しください。 |
Mobile Design
Principles
- Tab bars preferred over hamburger menus
- Information density maintained on mobile
- 2-3 column grids (not single column)
- Smaller font (12px) acceptable
@media (max-width: 768px) {
.product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mobile-tab-nav { position: fixed; bottom: 0; display: flex; justify-content: space-around; }
}
Cultural Considerations
Mascot Characters (ゆるキャラ)
Use mascots to:
- Make institutions approachable
- Reduce anxiety about complex processes
- Guide onboarding, errors, and help sections
Seasonal Content (季節感)
Update designs for seasons:
- 春: Cherry blossoms, graduation
- 夏: Cool blues, festival themes
- 秋: Maple leaves (紅葉)
- 冬: New Year, Valentine's
Error Messages
Japanese errors should be apologetic:
Localization Mistakes to Avoid
- Translation ≠ Localization - translated English loses nuance
- Machine translation - Japanese is too complex
- Informal language - sounds strange to customers
- Wrong Keigo level - damages brand perception
- Credit-card only - loses 30% of buyers
- No Japanese support - deters repeat customers
- Cultural insensitivity - improper imagery causes backlash
Anti-Patterns
Don't Do This:
- Hide information behind "Learn More"
- Use hamburger menus as primary navigation
- Minimize form fields
- Skip confirmation steps
- Use vague CTAs ("Get Started" → 「資料ダウンロード」)
- Remove trust signals for aesthetics
- Assume minimal = professional
- Use italics for Japanese text
- Rely on machine translation
Cultural Missteps:
- Number 4 (四 sounds like 死 = death)
- Number 9 (九 sounds like 苦 = suffering)
- Red ink for names (funeral association)
- Casual language in business contexts
2025 Trends
- Neo-retro design - Y2K meets Showa nostalgia
- Immersive 3D - tailored for precision
- AI personalization - with human touch
- Microinteractions - hover effects, scroll feedback
- Bento layouts - modular, mobile-friendly
- Collapsible sections - managing density
Key insight: Change is gradual. Japanese users adjust slowly—proven patterns are safer than innovation.
A/B Testing Reality
| Test | Result |
|---|
| Rakuten: Clean vs. cluttered | Cluttered converts better |
| Yahoo Japan: Modernized design | Users complained, reverted |
| Amazon Japan: Added MORE info | Sales increased |
Reference Sites
- Rakuten (rakuten.co.jp) - E-commerce benchmark
- Yahoo Japan (yahoo.co.jp) - Portal density
- Kakaku.com - Price comparison
- PayPay - Mobile payment design
- Mercari - Mobile marketplace
- LINE - Super app patterns
Quick Checklist
