ronantakizawa/japanese-webdesign

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

• reference/component-patterns.md - HTML/CSS component examples (product cards, banners, tables, footers, mobile navigation)
• reference/cultural-context.md - Deep cultural factors (Anshin, demographics, seasons, Keigo levels, numbers to avoid)

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:

1. Order summary (注文内容確認)
2. Explicit confirmation dialog
3. Final verification screen (最終確認)
4. 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:

// Western: "Invalid email address"
// Japanese: "メールアドレスの形式が正しくありません。お手数ですが、再度ご確認ください。"

Localization Mistakes to Avoid

1. Translation ≠ Localization - translated English loses nuance
2. Machine translation - Japanese is too complex
3. Informal language - sounds strange to customers
4. Wrong Keigo level - damages brand perception
5. Credit-card only - loses 30% of buyers
6. No Japanese support - deters repeat customers
7. Cultural insensitivity - improper imagery causes backlash

Anti-Patterns

Don't Do This:

1. Hide information behind "Learn More"
2. Use hamburger menus as primary navigation
3. Minimize form fields
4. Skip confirmation steps
5. Use vague CTAs ("Get Started" → 「資料ダウンロード」)
6. Remove trust signals for aesthetics
7. Assume minimal = professional
8. Use italics for Japanese text
9. 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

1. Neo-retro design - Y2K meets Showa nostalgia
2. Immersive 3D - tailored for precision
3. AI personalization - with human touch
4. Microinteractions - hover effects, scroll feedback
5. Bento layouts - modular, mobile-friendly
6. 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

• [ ] All critical information visible without clicking
• [ ] Detailed specifications provided
• [ ] Trust signals prominent (company info, certifications)
• [ ] Multiple confirmation steps
• [ ] Full contact information (including fax)
• [ ] Reviews with actual text
• [ ] Price breakdown with tax (消費税10%)
• [ ] Multiple payment methods
• [ ] Shipping/return policies visible
• [ ] Navigation shows all categories
• [ ] Mobile maintains density with tab navigation
• [ ] Appropriate keigo level
• [ ] Seasonal elements if applicable
• [ ] Comprehensive FAQ
• [ ] Japanese-language support
• [ ] Professional localization (no machine translation)
• [ ] Typography: no italics, 185-200% line-height
• [ ] Numbers 4 and 9 not prominent